User interface design principles for web applications

User interface design
for web applications
Michael Kowalski
Kitsite.com

What we’re going to cover
• What is the difference between designing a
webapp and designing a website?

• Why is good user interface design important?

• What are the characteristics of a great user
interface?

• What can we learn from interaction design?

• What are some speciﬁc techniques that I can
use to improve my webapp UI?

• Where is web UI design heading?

Q.
How is designing a web
application different from
designing a website?

Web user interface

HTML form controls
are the primitives of
an application user
interface

Hey, let’s build the webapp right
here!

• Democratisation of user interface
development

• Low cost, rapid development

• The web is an open distribution channel

• Anybody can build a web app!

“The limitations and challenges of
web interactivity... set interaction
design back several years”

Alan Cooper

Web constraints
annoyances

Living on the network

• Connectivity


• Connectivity
• Network latency


• Connectivity
• Network latency
• Source code down the wire

Living in the browser
x

• Security sandbox
• Box-model rendering
• Limited widget set
No access to system menus
No rich text editing
No drawing

• Typographically limited

My pet hates

• <select multiple>!

• Backspace key for navigation!
• Form controls are modal!
• CSS...

But if web UI sucks so badly...

But if web UI sucks so badly...
how come the web is winning?

Why web apps became viable

• Cross-platform consistency driven by
standards

• Asynchrony

• Faster networks and computers

• “Worse is better”

Innovation from the web

Hyperlinks
Folksonomy
navigation
Findability
addressability
bookmarks

Embedding
Social apps
portlets
sharing
widgets
collaboration

Q.
Why is good user interface
design important?

• The rise of utility computing (S3, etc) and the
adoption of good web frameworks has
reduced web development costs.


• It’s never been cheaper or easier to get an
idea to market.


idea to market.

• In a more competitive market, emphasis will
shift from executing ﬁrst to executing best.


idea to market.


• The quality of user experience is becoming
the signiﬁcant differentiator.


idea to market.


• The quality of user experience is becoming
the signiﬁcant differentiator.

• Also, scaling your app depends on not having
to handle support requests (or at least, not
linearly).

Let’s not reinvent wheels

We can take advantage of many years of
research in interaction design.
Plus we can look at best practice on the
web today.

Q.
What are the characteristics
of a good user interface?

consistent
simple polite

consistent
simple polite

responsive

consistent
simple polite

responsive
pragmatic

consistent
simple polite

responsive
aesthetically
pragmatic
pleasing

Interaction design
concepts

The user model

Mismatch between the user model and
the implementation model is a source
of usability problems

Users have different levels
of expertise

Novice Intermediate Expert

The rule of 7
• Short term memory
holds around 7 distinct
things
• Fades in 10 - 20 seconds

Spolsky’s 3 laws of users

People can’t control
the mouse

Spolsky’s 3 laws of users

People can’t read

People can’t control
the mouse

People can’t remember

A polite interface assumes the
user is busy and has more
important things to do than think
about how the app works.

A polite interface assumes the
user is busy and has more
important things to do than think
about how the app works.

• Talks the user’s language

• Designed around the user’s conceptual model

• Focused on achieving user goals

• Is tolerant and forgiving

Metaphor A shopping basket

• Add to the basket
• View the basket
• Go to the check out

Metaphor can be a useful way of
gluing together the user model
and the implementation model

• Metaphor gives developers a language to
discuss the model

• Warning: metaphors can get you in trouble if
you follow them too literally

Affordance is...
“the perceived and actual properties of the
thing... that determine just how the thing could
possibly be used”
Don Norman, The Design of Everyday Things

A tale of two buttons

Save Save

The #1 affordance on the web

Home | Help | Your proﬁle

The #1 affordance on the web

Home | Help | Your proﬁle

• This is a learned affordance

Fitt’s Law

T = a + b log2(D +1)
W
where
T is the average time taken to complete the
movement.
a and b are empirical constants, and can be
determined by ﬁtting a straight line to measured
data.
D is the distance from the starting point to the
centre of the target.

Fitt’s Law

T = a + b log2(D +1)
W

Fitt’s Law

T = a + b log2(D +1)
W
Targets that are smaller
and/or further away require
more time to acquire.

Bigger targets are better

Browse Search

Affordance techniques

• Bevelled edges and gradients on buttons

• Texture, eg. grippy corners on draggables
• label for

• Tooltips (via title attribute on a tags)

• Cursor hinting

Excise is noise in the interface
• A “cognitive tax” on the user

• Effort that is not directed towards the users’
goals

• Frequently exposes the underlying
implementation model

• Satisﬁes the needs of the technology rather
than the user

• Visual clutter is excise

• Customisation is usually excise

Too much affordance is excise
Therefore:

• Trade off affordance against excise to
prioritise more frequent tasks

• Provide extra affordance transiently, eg. on
mouseover

• Reduce the affordance on less commonly
used controls

Using links for commands

Save
Cancel

• In a form, hyperlinks have less affordance than
buttons, so can be used to reduce excise.

• Use a different colour to distinguish command
links from navigational links.

Progressive disclosure
Use progressive disclosure to reduce excise
Show more

Progressive disclosure
Use progressive disclosure to reduce excise
Show more
less

• Disclosure arrows

• Hyperlinks to popups or overlays

• Dropdowns
In a goal-oriented design, not every function has
to be accessible from every screen.

Modes
The same gesture has different meanings
depending on what mode the application is in

Modes

Approve Reject

That’s the stupidest thing I ever heard!
I agree with every word of your brill...
Buy Vi@gra from us!!!

Modes

Approve Reject


Modal Choose the command mode ﬁrst (eg.
“Approve” and then select the item to action.

Modes

Approve Reject


Modeless Make a selection ﬁrst, and then choose
Modal Choose the command mode ﬁrst (eg.
a command to then to that selection.
“Approve” and apply select the item to action.

Modes

• With a few exceptions, modes are bad

Modes


• The exceptions: graphics and other drawing
apps

Modes


apps

• Transient modes are less bad

Modes


apps

• Transient modes are less bad

• If you are using modes, then the current mode
should be visible right where the user is
looking (eg. by changing the cursor).

What is posture?

• Deﬁned by Alan Cooper in About Face

• Identiﬁed 4 different postures for apps

• Posture relates to amount of attention that a
user will give the application

Preattention variables

• Hard-wired rules of human
perception

• Things we see immediately,
without conscious thought

Visual properties

Intensity
Shape
Colour

Symmetry
Texture Motion

Use grouping and visual
properties to:

• Prioritise what’s important and most useful

• Associate related commands or information

• Distinguish between controls that behave
differently

• Establish consistency

Bad Amazon

• Buttons are variably sized

• Poor alignment and inconsistent guttering

• Giftbox icon is excise

• Colours used inconsistently

I probably won’t notice anything here

Communication

Action
Visual cues Feedback

time

Communication

Action
Visual cues Feedback
(“feedforward”)

time

0.25
After seconds, the
user will assume that it hasn’t
worked and try again

Feedback rules
• If an action will take more than 0.1 sec to
complete, visually indicate that it has started.

Feedback rules

• Use spinners or progress bars for actions that
1 second.
will take more than

Feedback rules

1 second.
will take more than

• Document load events should not take more
10 seconds.
than

Feedback rules

1 second.
will take more than

10 seconds.
than

• Acknowledge completion modelessly

Feedback rules

1 second.
will take more than

10 seconds.
than

• Acknowledge completion modelessly

• If completion will take longer than a few
seconds, the new status should be displayed
non-transiently

Now Current state
• What’s happening now?

• Am I logged in?

• Are my friends logged in?

• Is there new activity I should know about?

Next Visual cues

• What’s going to happen next?

• What will happen if I click this?

Icons
Icons can be useful because:

• Don’t take up much screen real state

• Take advantage of human spatial recall

• They have become a familiar idiom

• Can add colour and visual interest

The trouble with icons

• In a modeless interface, most command
affordances will be verbs.



• Verbs are hard to draw.




• Most icons are therefore hard to interpret
without a label.




• Most icons are therefore hard to interpret
without a label.

• Icons work best in sovereign posture
applications where space is at premium and
users have the time to learn the icons.

Rules for using icons
• Use icons sparingly.

• Use icons that convention has made familiar
(eg. document icons)

• Label your icons, using the app vocabulary.
Avoid puns!

• Don’t forget your app’s colour scheme and
lighting angle.You may need a larger palette of
colours for hinting - but still keep it
constrained.

• Get professionals to design them!

Learnability is...

• what we usually mean when we say “intuitive.”

• Because most web apps have a transient
posture, this is particularly important - your
app has to be relearnable as well as learnable.

• Warning Too much guidance can be excise

Concept 12
irectD

manipulation

Direct manipulation
• The user acts directly on a visual
representation of an object, and immediately
sees the result.

Direct manipulation
sees the result.

• Examples:

• Drag and drop

• Drag resize

• Drawing tools

Direct manipulation
sees the result.

• Examples:

• Drag and drop

• Drag resize

• Drawing tools

• Downside: generally poor affordance

Evaluating web app UI

Divide up into groups of about 4

Pick a web app

Evaluate aordance, excise and feedback

Look for good and bad points

Suggest at least one improvement

15 minutes

Design the user experience ﬁrst

• Before user research?


• Before data modelling?



• Before technology choices?



• Before technology choices?

Yes! Avoid getting railroaded by the
implementation model

User research

• Formal user research can be expensive, tricky
and inconclusive

• Long-tail users might be hard to come by

• Informal research with a handful of users can
give useful insights

• Beta launching can get early feedback from
real users

• Apple vs Microsoft

Sarah Turner Justin Finch
“Sooner is better.” “I’m not much of a
technology buff, to be
Occupation: Head of
honest”
PR
Occupation: Bookseller
Wants to get prior
approval on new Wants to get info about
corporate comms. new releases as painlessly
Worries that her staff as possible. Low
will not use the new app expectations: thinks the
unless it’s really simple. app will be pointlessly
Must have controlled complicated. Dislikes hard
costs. Sarah can be quite sell from publishers; wants
demanding. to make up his own mind.

Sarah Turner Justin Finch
“Sooner is better.” “I’m not much of a
technology buff, to be
Occupation: Head of
honest”
PR
Occupation: Bookseller
Wants to get prior
approval on new Wants to get info about
corporate comms. new releases as painlessly
Worries that her staff as possible. Low
will not use the new app expectations: thinks the
unless it’s really simple. app will be pointlessly
Must have controlled complicated. Dislikes hard
costs. Sarah can be quite sell from publishers; wants
demanding.
• Not a market segment
to make up his own mind.

• A representative individual

Technique 3 Goal-directed
design

Goal-directed design

Task
Task
Task
Goal
Task

Task


Task
Task
Task
Goal
Task

Task

May not be appropriate in social spaces


• Determine goals

• Break down into tasks

• Aim for 1 task = 1 screen

• Every digression is an obstacle to the user

Step 1 Step 2 Step 3 Done

“Just start”

• Occasional use or transient posture apps
need to be optimised for novices over
intermediates.

• The web is your marketing and distribution
channel. “Try-before-buy” means barriers to
entry need to be as low as possible.

• Zero conﬁguration is the ideal.

Technique 4 Paper
prototyping

Paper prototyping
Basic materials

Paper prototyping
In practice

• Use role play

• Encourage “think-aloud”

• If user testing with real
users, don’t cheat: the
“Computer” must not
speak. Set goals and
leave user to it

Paper prototyping
Advantages

• It’s really cheap. Really, really cheap.

• You can iterate on the spot

• Can be used for brainstorming as well as
proof of concept testing

• Very ﬂexible, can be adapted to suit skill levels
of participants

• Good for working out what is essential, and
what can be descoped

Other prototyping techniques
• Presentation software

• Quick-and-dirty software mockups

Other prototyping techniques
• Presentation software

• Quick-and-dirty software mockups

Beware the implementation model!

Grid systems

• Enforce consistency, exploit spatial memory

• All grid measurements deﬁned in terms of an
atomic unit (eg. 10 pixels)

• Minimise number of different layouts based on
the grid

• Yahoo! and Google both provide useful
starting points

Example grid

Atom Header width
120
10 pixels
Overlay height
320

Overlay width
440

Gutter
10 540 20 180 10

Squint tests

• Take a snapshot of your interface

• Greyscale it in Photoshop

• Blur until you can’t make out detailed
structure

Squint tests

• Take a snapshot of your interface

• Greyscale it in Photoshop

• Blur until you can’t make out detailed
structure

OR

• Just sit back a bit and squint

Modularity

• Aim for “deep consistency” by reusing design
elements throughout your app

• Modules range from single control elements (a
button) to complex composite widgets.

• Include abstract structural elements like a
“sidebar box” as well as behaviours

• Develop an application lexicon

Colour swatches

• Add colour late in the design process.

• Use a small palette: 2 or 3 base colours.

• Use a small number of different tints of the
base colours, eg. 100%, 80%, 40%

• Greyscale the coloured design to check
contrast and intensity.

Consistent light source

Mac OS9 Mac OS X
to top left of screen directly above, slightly forward

OK OK

Copywriting is interface design

• Stick to the metaphor (within reason)

• Use the user’s language

• Avoid technical jargon

• Use consistent terminology: write a thesaurus

• Polite messages

• Positive actions in checkbox labels

• Keep it brief

Is that really necessary?
Q. If you remove an interface element, will
the interface still function?

• Prune visual clutter and gratuitous motion

• Avoid forcing user to toggle back and forth
between mouse and keyboard

• Avoid user preferences: modal excise

• Monotony as a virtue: only one way to
perform any particular action

Ajax Performance

• Avoid full page reloads

• Deferral Fetch additional data after the
screen has loaded

• Progressive loading Incrementally fetch data
as it is requested

Ajax Excise

• Use transient affordances at the locus of
attention

• Use disclosure to reveal additional guidance
or advanced options only on request

Ajax Modes

• Provide modeless feedback and state
information

• Use overlays for modal or auxiliary
interactions

Using overlays
• Overlays have displaced modal dialogs in many
webapps

Using overlays
• Overlays have displaced modal dialogs in many
webapps

• Overlays became popular because:
• They avoid popup blockers
• They can be more attractively styled than the
default Javascript alert windows, and can load
new content
• New windows can be weirdly slow to render
on some platforms
• They avoid accidental dismissal problems.

Rules for modal overlays

• Don’t use for informational or conﬁrmation
messages: these should be modeless

• Don’t ask questions to which you already
know the answer (eg, where “OK” is the only
option)

• Use sparingly: don’t cry wolf

• Remember overlays are not bookmarkable

• Don’t try and emulate the OS

Ajax Animation
Motion is a preattentive variable.

Ajax Animation

• Just because you can, doesn’t mean you
should!

Ajax Animation

should!

• Animation introduces latency and is
distracting

Ajax Animation

should!

distracting

• Use it when you want to distract the user, ie.
shift the user’s locus of attention

Ajax Animation

should!

distracting

• Use it when you want to distract the user, ie.
shift the user’s locus of attention

• Good use: changes to screen layout (eg.
opening a drawer or palette)

Things to remember

• Conﬁguration options

Things to remember


• Paginated lists: remember page number

Things to remember



• Hierarchical lists: remember open nodes

Things to remember




• MRU - Most Recently Used

Things to remember





• MFU - Most Frequently Used

Things to remember





• MFU - Most Frequently Used

Missed opportunity Remember state between sessions

Adoption Support

Discovery Community

Software as a service

• Web apps are services

• Great! An opportunity to break out of feature
bloat cycle, as do not need to sell new
features with each upgrade

• Think about service design

Service design

• Think about user interaction with app in a
broader way than how a session works

• Touchpoints

• Service blueprint

Using design patterns

• Consistent internally - but also consistent
with usage elsewhere on the web

• Identify relevant patterns on other websites

• O’Reilly’s Designing Interfaces takes a pattern-
based approach

• Yahoo! Design Patterns Library

Trends
• Does fashion matter?

Trends

• Gradients, big fonts, drop shadows and
rounded corners may stick around

Trends


• Overlays, autocomplete, libraries will be ever
more popular

Trends


more popular

• Guided interfaces will become the norm

Trends


more popular

• Guided interfaces will become the norm

• The web will increasingly drive innovation on
the desktop (tags? bookmarks?)

Future

Widgets
Ofﬂine

Future

Widgets
Ofﬂine

Charting / vector graphics

Future

Widgets
Ofﬂine


Mobile

Future

Game design?
Widgets
Ofﬂine


Mobile

Future

Game design?
Widgets
Ofﬂine

Social space

Mobile

• In the future, most user
interface innovation will
come from the web

User interface design principles for web applications

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (13)

Ähnlich wie User interface design principles for web applications

Ähnlich wie User interface design principles for web applications (20)

Mehr von Carsonified Team

Mehr von Carsonified Team (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

User interface design principles for web applications