Michael Kowalski
-
Upload
carsonified-team -
Category
Business
-
view
120 -
download
0
description
Transcript of Michael Kowalski
User interface designfor web applications
Michael KowalskiKitsite.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 specific techniques that I can use to improve my webapp UI?
• Where is web UI design heading?
How is designing a web application different from designing a website?
Q.
Information
Information
Information Interaction
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!
Alan Cooper
Alan Cooper
“The limitations and challenges of web interactivity... set interaction design back several years”
Web constraints
Web constraintsannoyances
Living on the network
Living on the network
• Connectivity
Living on the network
• Connectivity
• Network latency
Living on the network
• Connectivity
• Network latency
• Source code down the wire
Living in the browser
x
• Security sandbox
• Box-model rendering
• Limited widget setNo access to system menusNo rich text editing No drawing
• Typographically limited
Living in the browser
x
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
navigationaddressabilitybookmarks
Findability
Embedding
portletswidgets
Folksonomy
Social apps
sharingcollaboration
Why is good user interface design important?
Q.
• The rise of utility computing (S3, etc) and the adoption of good web frameworks has reduced web development costs.
• 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.
• 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 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.
• 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).
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.
What are the characteristics of a good user interface?
Q.
simple
simpleconsistent
simpleconsistent
polite
simpleconsistent
polite
responsive
simpleconsistent
polite
pragmaticresponsive
simpleconsistent
polite
aestheticallypleasing
responsivepragmatic
Interaction design concepts
Concept 1 The user
You are not the user!
Real world process or object
The implementation model
The user model
The user model
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
Users have different levels of expertise
Novice Intermediate Expert
Users have different levels of expertise
Novice Intermediate Expert
The rule of 7
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 remember
People can’t control the mouse
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
Concept 2 Metaphor
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
False metaphor
Concept 3 Affordance
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
Save
A tale of two buttons
Save
Save
A tale of two buttons
Save
Save
A tale of two buttons
Save
Save
A tale of two buttons
Save
Save
A tale of two buttons
Save
Save
A tale of two buttons
Save
Save
A tale of two buttons
SaveSave
The #1 affordance on the web
Home | Help | Your profile
The #1 affordance on the web
• This is a learned affordance
Home | Help | Your profile
New affordances evolve
Fitt’s Law
whereT 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.
T = a + b log2( +1)DW
Fitt’s Law
T = a + b log2( +1)DW
Fitt’s Law
T = a + b log2( +1)DW
Targets that are smaller and/or further away require more time to acquire.
Bigger targets are better
Browse Search
Bigger targets are better
Browse Search
Bigger targets are better
Browse Search
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
Concept 4 Excise
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
Too much affordance is exciseTherefore:
• 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
• 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.
Cancel Save
Use progressive disclosure to reduce excise
Show more
Progressive disclosure
Use progressive disclosure to reduce excise
Show more Show less
Progressive disclosure
• Disclosure arrows
• Hyperlinks to popups or overlays
• Dropdowns
In a goal-oriented design, not every function has to be accessible from every screen.
Concept 5 Modes
Modes
The same gesture has different meanings depending on what mode the application is in
Modes
That’s the stupidest thing I ever heard!
I agree with every word of your brill...
Buy Vi@gra from us!!!
Approve Reject
Modes
That’s the stupidest thing I ever heard!
I agree with every word of your brill...
Buy Vi@gra from us!!!
Approve Reject
Modal Choose the command mode first (eg. “Approve” and then select the item to action.
Modes
That’s the stupidest thing I ever heard!
I agree with every word of your brill...
Buy Vi@gra from us!!!
Approve Reject
Modal Choose the command mode first (eg. “Approve” and then select the item to action.Modeless Make a selection first, and then choose a command to apply to that selection.
Modes
Modes
• With a few exceptions, modes are bad
Modes
• With a few exceptions, modes are bad
• The exceptions: graphics and other drawing apps
Modes
• With a few exceptions, modes are bad
• The exceptions: graphics and other drawing apps
• Transient modes are less bad
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).
Concept 6 Posture
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
Sovereign
Transient
Auxiliary
Daemonic
Immersive
Concept 7 Preattention
Preattention variables
• Hard-wired rules of human perception
• Things we see immediately, without conscious thought
Visual properties
Colour Intensity
Texture SymmetryMotion
Shape
Visual properties
Colour Intensity
Texture SymmetryMotion
Shape
Spot the odd one out
Spot the odd one out
Grouping
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
• Buttons are variably sized
• Poor alignment and inconsistent guttering
• Giftbox icon is excise
• Colours used inconsistently
Bad Amazon
Concept 8 Locus
I’m looking here
I’ll notice this
I probably won’t notice anything here
Concept 9 Feedback
Communication
FeedbackVisual cues Action
time
Communication
FeedbackVisual cues Action(“feedforward”)
time
After 0.25 seconds, the user will assume that it hasn’t worked and try again
Feedback rules
Feedback rules• If an action will take more than 0.1 sec to
complete, visually indicate that it has started.
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
will take more than 1 second.
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
will take more than 1 second.
• Document load events should not take more
than 10 seconds.
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
will take more than 1 second.
• Document load events should not take more
than 10 seconds.
• Acknowledge completion modelessly
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
will take more than 1 second.
• Document load events should not take more
than 10 seconds.
• 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?
Concept 10 Icons
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
The trouble with icons
• In a modeless interface, most command affordances will be verbs.
The trouble with icons
• In a modeless interface, most command affordances will be verbs.
• Verbs are hard to draw.
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.
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.
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!
Concept 11 Learnability
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 Direct manipulation
Direct manipulation
Direct manipulation
• The user acts directly on a visual representation of an object, and immediately sees the result.
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
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
Evaluating web app UI
Divide up into groups of about 4
Pick a web app
Evaluate affordance, excise and feedback
Look for good and bad points
Suggest at least one improvement
15 minutes
<br/>
Techniques
Technique 1 UI first
Design the user experience first
Design the user experience first
• Before user research?
Design the user experience first
• Before user research?
• Before data modelling?
Design the user experience first
• Before user research?
• Before data modelling?
• Before technology choices?
Design the user experience first
• Before user research?
• Before data modelling?
• 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
Technique 2 Personas
Sarah Turner
“Sooner is better.”
Occupation: Head of PR
Wants to get prior approval on new corporate comms. Worries that her staff will not use the new app unless it’s really simple. Must have controlled costs. Sarah can be quite demanding.
Justin Finch
“I’m not much of a technology buff, to be honest”
Occupation: Bookseller
Wants to get info about new releases as painlessly as possible. Low expectations: thinks the app will be pointlessly complicated. Dislikes hard sell from publishers; wants to make up his own mind.
Sarah Turner
“Sooner is better.”
Occupation: Head of PR
Wants to get prior approval on new corporate comms. Worries that her staff will not use the new app unless it’s really simple. Must have controlled costs. Sarah can be quite demanding.
Justin Finch
“I’m not much of a technology buff, to be honest”
Occupation: Bookseller
Wants to get info about new releases as painlessly as possible. Low expectations: thinks the app will be pointlessly complicated. Dislikes hard sell from publishers; wants to make up his own mind.• Not a market segment
• A representative individual
Technique 3 Goal-directed design
Goal-directed design
Task
Task
Task
Task
Task
Goal
Goal-directed design
May not be appropriate in social spaces
Task
Task
Task
Task
Task
Goal
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
“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.
Technique 4 Paper prototyping
Paper prototypingBasic materials
Paper prototypingIn 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 prototypingAdvantages
• 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
Other prototyping techniques
• Presentation software
• Quick-and-dirty software mockups
Other prototyping techniques
• Presentation software
• Quick-and-dirty software mockups
Beware the implementation model!
Technique 5 Grid systems
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
Atom10 pixels
10 20 10180540
120Header width
Gutter
Example grid
440Overlay width
Overlay height320
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
Technique 6 Modular design
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 OS9to top left of screen
Mac OS Xdirectly above, slightly forward
OK OK
Technique 7 Copywriting
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
Technique 8 Triage
Is that really necessary?
• 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
If you remove an interface element, will the interface still function?
Q.
Technique 9 Ajax
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
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.
Modeless overlay
Modal overlay
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
Ajax & AnimationMotion is a preattentive variable.
Ajax & Animation
• Just because you can, doesn’t mean you should!
Motion is a preattentive variable.
Ajax & Animation
• Just because you can, doesn’t mean you should!
• Animation introduces latency and is distracting
Motion is a preattentive variable.
Ajax & Animation
• 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
Motion is a preattentive variable.
Ajax & Animation
• 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)
Motion is a preattentive variable.
Technique 10 Memory
Things to remember
Things to remember
• Configuration options
Things to remember
• Configuration options
• Paginated lists: remember page number
Things to remember
• Configuration options
• Paginated lists: remember page number
• Hierarchical lists: remember open nodes
Things to remember
• Configuration options
• Paginated lists: remember page number
• Hierarchical lists: remember open nodes
• MRU - Most Recently Used
Things to remember
• Configuration options
• Paginated lists: remember page number
• Hierarchical lists: remember open nodes
• MRU - Most Recently Used
• MFU - Most Frequently Used
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
Technique 11 Service design
MyApp
MyApp
Discovery
Adoption
Community
Support
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
User acquisition touchpoint
Technique 12 Design patterns
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
The future
Trends
Trends
• Does fashion matter?
Trends
• Does fashion matter?
• Gradients, big fonts, drop shadows and rounded corners may stick around
Trends
• Does fashion matter?
• Gradients, big fonts, drop shadows and rounded corners may stick around
• Overlays, autocomplete, libraries will be ever more popular
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
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?)
Future
Future
Widgets
Future
WidgetsOffline
Future
WidgetsOffline
Charting / vector graphics
Future
WidgetsOffline
Charting / vector graphics
Mobile
Future
WidgetsOffline
Charting / vector graphics
Mobile
Game design?
Future
WidgetsOffline
Charting / vector graphics
Mobile
Game design?
Social space
• In the future, most user interface innovation will come from the web
end