This document discusses various concepts and techniques for designing effective user interfaces for web applications. It covers the differences between designing websites and web apps, why good UI design is important, characteristics of great interfaces, and specific techniques like affordances, feedback, grouping, and icons. The goal is to make interfaces intuitive, efficient and pleasant to use.
3. 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 specific techniques that I can
use to improve my webapp UI?
• Where is web UI design heading?
4. Q.
How is designing a web
application different from
designing a website?
9. Web user interface
HTML form controls
are the primitives of
an application user
interface
10. 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!
23. 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
24. My pet hates
• <select multiple>!
• Backspace key for navigation!
• Form controls are modal!
• CSS...
26. But if web UI sucks so badly...
how come the web is winning?
27. Why web apps became viable
• Cross-platform consistency driven by
standards
• Asynchrony
• Faster networks and computers
• “Worse is better”
28. Innovation from the web
Hyperlinks
Folksonomy
navigation
Findability
addressability
bookmarks
Embedding
Social apps
portlets
sharing
widgets
collaboration
29. Q.
Why is good user interface
design important?
30.
31. • The rise of utility computing (S3, etc) and the
adoption of good web frameworks has
reduced web development costs.
32. • 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.
33. • 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.
• In a more competitive market, emphasis will
shift from executing first to executing best.
34. • 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.
• In a more competitive market, emphasis will
shift from executing first to executing best.
• The quality of user experience is becoming
the significant differentiator.
35. • 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.
• In a more competitive market, emphasis will
shift from executing first to executing best.
• The quality of user experience is becoming
the significant differentiator.
• Also, scaling your app depends on not having
to handle support requests (or at least, not
linearly).
36. 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.
37. Q.
What are the characteristics
of a good user interface?
59. Spolsky’s 3 laws of users
People can’t read
People can’t control
the mouse
People can’t remember
60. A polite interface assumes the
user is busy and has more
important things to do than think
about how the app works.
61. 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
63. Metaphor A shopping basket
• Add to the basket
• View the basket
• Go to the check out
64. 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
67. 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
79. 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 fitting a straight line to measured
data.
D is the distance from the starting point to the
centre of the target.
86. 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
89. 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
• Satisfies the needs of the technology rather
than the user
• Visual clutter is excise
• Customisation is usually excise
90.
91. 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
92. 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.
94. 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.
97. Modes
The same gesture has different meanings
depending on what mode the application is in
98. Modes
Approve Reject
That’s the stupidest thing I ever heard!
I agree with every word of your brill...
Buy Vi@gra from us!!!
99. Modes
Approve Reject
That’s the stupidest thing I ever heard!
I agree with every word of your brill...
Buy Vi@gra from us!!!
Modal Choose the command mode first (eg.
“Approve” and then select the item to action.
100. Modes
Approve Reject
That’s the stupidest thing I ever heard!
I agree with every word of your brill...
Buy Vi@gra from us!!!
Modeless Make a selection first, and then choose
Modal Choose the command mode first (eg.
a command to then to that selection.
“Approve” and apply select the item to action.
103. Modes
• With a few exceptions, modes are bad
• The exceptions: graphics and other drawing
apps
104. Modes
• With a few exceptions, modes are bad
• The exceptions: graphics and other drawing
apps
• Transient modes are less bad
105. Modes
• With a few exceptions, modes are bad
• The exceptions: graphics and other drawing
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).
108. What is posture?
• Defined by Alan Cooper in About Face
• Identified 4 different postures for apps
• Posture relates to amount of attention that a
user will give the application
121. 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
122. Bad Amazon
• Buttons are variably sized
• Poor alignment and inconsistent guttering
• Giftbox icon is excise
• Colours used inconsistently
136. Feedback rules
• If an action will take more than 0.1 sec to
complete, visually indicate that it has started.
137. Feedback rules
• If an action will take more than 0.1 sec to
complete, visually indicate that it has started.
• Use spinners or progress bars for actions that
1 second.
will take more than
138. Feedback rules
• If an action will take more than 0.1 sec to
complete, visually indicate that it has started.
• Use spinners or progress bars for actions that
1 second.
will take more than
• Document load events should not take more
10 seconds.
than
139. Feedback rules
• If an action will take more than 0.1 sec to
complete, visually indicate that it has started.
• Use spinners or progress bars for actions that
1 second.
will take more than
• Document load events should not take more
10 seconds.
than
• Acknowledge completion modelessly
140. Feedback rules
• If an action will take more than 0.1 sec to
complete, visually indicate that it has started.
• Use spinners or progress bars for actions that
1 second.
will take more than
• Document load events should not take more
10 seconds.
than
• Acknowledge completion modelessly
• If completion will take longer than a few
seconds, the new status should be displayed
non-transiently
141. Now Current state
• What’s happening now?
• Am I logged in?
• Are my friends logged in?
• Is there new activity I should know about?
142. Next Visual cues
• What’s going to happen next?
• What will happen if I click this?
144. 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
146. The trouble with icons
• In a modeless interface, most command
affordances will be verbs.
147. The trouble with icons
• In a modeless interface, most command
affordances will be verbs.
• Verbs are hard to draw.
148. 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.
149. 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.
• Icons work best in sovereign posture
applications where space is at premium and
users have the time to learn the icons.
150. 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!
154. 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
157. Direct manipulation
• The user acts directly on a visual
representation of an object, and immediately
sees the result.
158. Direct manipulation
• The user acts directly on a visual
representation of an object, and immediately
sees the result.
• Examples:
• Drag and drop
• Drag resize
• Drawing tools
159. Direct manipulation
• The user acts directly on a visual
representation of an object, and immediately
sees the result.
• Examples:
• Drag and drop
• Drag resize
• Drawing tools
• Downside: generally poor affordance
160. 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
166. Design the user experience first
• Before user research?
• Before data modelling?
167. Design the user experience first
• Before user research?
• Before data modelling?
• Before technology choices?
168. Design the user experience first
• Before user research?
• Before data modelling?
• Before technology choices?
Yes! Avoid getting railroaded by the
implementation model
169. 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
171. 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.
172. 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
175. Goal-directed design
Task
Task
Task
Goal
Task
Task
May not be appropriate in social spaces
176. Goal-directed design
• 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
177.
178. “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 configuration is the ideal.
182. 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
183. 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 flexible, can be adapted to suit skill levels
of participants
• Good for working out what is essential, and
what can be descoped
187. Grid systems
• Enforce consistency, exploit spatial memory
• All grid measurements defined 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
191. Squint tests
• Take a snapshot of your interface
• Greyscale it in Photoshop
• Blur until you can’t make out detailed
structure
192. 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
197. 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
198. 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.
199. Consistent light source
Mac OS9 Mac OS X
to top left of screen directly above, slightly forward
OK OK
202. 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
204. 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
206. Ajax Performance
• Avoid full page reloads
• Deferral Fetch additional data after the
screen has loaded
• Progressive loading Incrementally fetch data
as it is requested
207. Ajax Excise
• Use transient affordances at the locus of
attention
• Use disclosure to reveal additional guidance
or advanced options only on request
208.
209. Ajax Modes
• Provide modeless feedback and state
information
• Use overlays for modal or auxiliary
interactions
211. Using overlays
• Overlays have displaced modal dialogs in many
webapps
212. 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.
215. Rules for modal overlays
• Don’t use for informational or confirmation
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
217. Ajax Animation
Motion is a preattentive variable.
• Just because you can, doesn’t mean you
should!
218. Ajax Animation
Motion is a preattentive variable.
• Just because you can, doesn’t mean you
should!
• Animation introduces latency and is
distracting
219. Ajax Animation
Motion is a preattentive variable.
• Just because you can, doesn’t mean you
should!
• Animation introduces latency and is
distracting
• Use it when you want to distract the user, ie.
shift the user’s locus of attention
220. Ajax Animation
Motion is a preattentive variable.
• Just because you can, doesn’t mean you
should!
• Animation introduces latency and is
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)
225. Things to remember
• Configuration options
• Paginated lists: remember page number
226. Things to remember
• Configuration options
• Paginated lists: remember page number
• Hierarchical lists: remember open nodes
227. Things to remember
• Configuration options
• Paginated lists: remember page number
• Hierarchical lists: remember open nodes
• MRU - Most Recently Used
228. Things to remember
• Configuration options
• Paginated lists: remember page number
• Hierarchical lists: remember open nodes
• MRU - Most Recently Used
• MFU - Most Frequently Used
229. Things to remember
• Configuration options
• Paginated lists: remember page number
• Hierarchical lists: remember open nodes
• MRU - Most Recently Used
• MFU - Most Frequently Used
Missed opportunity Remember state between sessions
236. 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
237. Service design
• Think about user interaction with app in a
broader way than how a session works
• Touchpoints
• Service blueprint
240. 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
245. Trends
• Does fashion matter?
• Gradients, big fonts, drop shadows and
rounded corners may stick around
246. Trends
• Does fashion matter?
• Gradients, big fonts, drop shadows and
rounded corners may stick around
• Overlays, autocomplete, libraries will be ever
more popular
247. Trends
• Does fashion matter?
• Gradients, big fonts, drop shadows and
rounded corners may stick around
• Overlays, autocomplete, libraries will be ever
more popular
• Guided interfaces will become the norm
248. Trends
• Does fashion matter?
• Gradients, big fonts, drop shadows and
rounded corners may stick around
• Overlays, autocomplete, libraries will be ever
more popular
• Guided interfaces will become the norm
• The web will increasingly drive innovation on
the desktop (tags? bookmarks?)