eliminating the odd
TRANSCRIPT
Eliminating The Odd
Eliminating
The Odd
An Introduction toInterface Design Concepts
October 26, 2009BAWorld Vancouver
Kirk BridgerMcKesson Medical Imaging
Learning Points
Describe a number of interface design concepts
Relate interface design concepts to business analysis activities
Discuss the relationship between usability requirements and interface design
What is an
Odd Interface?
Motorola Razr
Clippythe Office Assistant
Motorola Razr http://my.opera.com/usability/blog/show.dml/169470 Meant to be used in conjunction with phone
Forces same interface limitations on user If buttons were sufficient on phone, wouldn't need application
phones are designed for calling ppl, not interacting with phone specifics
Subtle and unexpected differences in buttonsDifferent results when inputting via same interface
Some buttons are nonfunctional (no consistency)
Some new buttons
Unnecessary display of phone interface (no benefits)
Slide-out doesn't exist on phone, but provides most of the functionality
Icons are difficult to understand
Large amount of screen space wasted on non-functional interface
Clippy http://xenon.stanford.edu/~lswartz/paperclip/paperclip.pdf
Designed for basic users, but basic users don't use software to help them
Often found to be intrusive, useless, and entertainment vs. useful
Session Outline
Interface Design Concepts8 Golden Rules
Business Analysis and UsabilityWhat Is Usability
3 Key Considerations
Usability And UI DesignSoftware Requirements
Usability Testing
8 Golden Rules
of Interface Design
Strive for consistency
12345678Interface design conceptsReduce short-term memory load
Support internal locus of control
Permit easy reversal of actions
Offer error prevention and simple error handling
Design dialogues to yield closure
Offer informative feedback
Enable frequent users to use shortcuts
Links for fleshing out explanationshttp://www.ja-sig.org/wiki/display/UPC/Usability+Heuristics
Professor Shneidermans rules were chosen:Applicability across mediums and technology
His desire to include context in design
Universal usability
Conducted fundamental research in field of human-computer interaction
http://en.wikipedia.org/wiki/Ben_Shneiderman
Strive For
Consistency
Similar situations = consistent sequences of actions
Leverage user's pre-existing knowledge
Internal consistencyTerminology used throughout product
Consistent text attributes throughout interface
External consistencyAcross products/applications
1Interface design conceptsInternal consistencyScreen layout from one screen to another
operations behave the same way
External consistencyFrom one application to another
Terminology used throughout productPrompts
Menus
Help screens
Documentation
Consistent text attributes throughout interfacecolor,
Layout
Capitalization
fonts
Screenshot by Brandon Walkinhttp://www.brandonwalkin.com/blog/2009/08/10/managing-ui-complexity/
GIMP Image EditorEvolution Mail ClientExternal ConsistencyClosing with unsaved data
GThumb Image Viewer
Interface design conceptshttp://www.actsofvolition.com/include/savealerts/screenshots.html (2005)
Bad:Button icon variety
Options are different
Dialogue icon different
GoodOrder of buttons
Microsoft Word
Microsoft Excel
Microsoft PowerPointExternal ConsistencyMicrosoft OfficesRibbon Interface
Why doesnt everyone like it?Internal consistency?Interface design conceptshttp://www.usabilitypost.com/2009/04/15/8-characteristics-of-successful-user-interfaces/
Enable Frequent Users to
Use Shortcuts
As frequency of use increases, users desire to
Reduce number of interactions
Increase pace of interaction
Basically break some Golden Rules for the elite users
2Interface design conceptsIncrease the pace of interactionAbbreviations
Special keys
Hidden commands
Macros
Examples of
Shortcuts
Winkey+D = Show Desktop
Winkey+L = Lock screen
Sticky Keys (Shift x5)
Accelerators
Tab order in web forms
MS Excel's magic lasso
Interface design concepts
Informative Feedback
Inform user their action was received
Include feedback when something is complete
Make sure the feedback is
Informative
Clear
Concise
Scale degree of feedback based on action
Frequency
Importance
3Interface design concepts
Examples of
Feedback
Audible clue
Spinners
Hourglass cursor
Visible changes to interface elements
Progress bar
Interface design concepts
GThumb Image ViewerGIMP Image EditorEvolution Mail ClientDegree of FeedbackClosing with unsaved dataInterface design conceptshttp://www.actsofvolition.com/include/savealerts/screenshots.html (2005)
GThumbNo cancel
No title in window
Unclear what the checkbox does just this image or for ever?
Design Dialogues to
Yield Closure
Organize sequences of actions
Beginning
Middle
End
Ensure user knows when a conversation or task is at an endThey feel it is complete
Allows them to drop contingency plans
Puts them at ease
4Interface design concepts
Examples of
Closure
Delivery Information is doneThen Payment InformationThen Confirmation
Interface design concepts
Error Prevention
and Handling
Prevent errors
Avoid serious error possibilities
Opportunity to make your system look smart
Handle errors
Simple, constructive and specific instructions for recovery
5Interface design conceptsDisallowing input will typically conflict with giving the user the locus of control, particularly expert users
http://ethics.csc.ncsu.edu/risks/safety/killer_robot/killer_news5.html
Opportunity to make your system look smartData selection rather than typing
Autocomplete
Disallow alphabetic characters in numeric data fields
Directive text associated with date entry fields
E.g. Credit card: do not enter dashes
Caps lock notice when typing in hidden field
Error Handling
What Not To Do
Interface design conceptsUI Hall of Shame (oldie but a goodie) - http://homepage.mac.com/bradster/iarchitect/shame.htm
Tension Between
People and Errors
A common mistake that people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.Douglas Adams
Examine error contextFocus on serious errors
No user action should be considered an error that is beyond the ability of the system to manage.
Dr. Horace Gritty
Interface design concepts
Permit Easy
Reversal of Actions
Reduce anxiety of user via undo option
Ensure appropriate units of reversibility
Encourage exploration of interfaceHelps user become an expert
Provides Wow opportunities
To err is human, but to really foul things up requires a computer.Farmer's Almanac, 1978
6Interface design conceptshttp://ethics.csc.ncsu.edu/risks/safety/killer_robot/killer_news5.html
Reduces anxiety of user, as they know anything can be undone if they make a mistake.
Units of reversibility could be single action, data entry, or complete group of actions
Example of
Reversal
Photo editing application's undo options
Thumbnail
Action description
Instant access
Interface design concepts
Support an
Internal Locus of Control
Experienced users want to be in charge
Avoid tension and dissatisfaction
Surprising system actions
Tedious data entry
Make users the initiators of actions rather than responders.
Allow interruptions
People are just as happy as they make up their minds to be.Abraham Lincoln
7Interface design conceptsAvoid tension and dissatisfaction:Surprising system actionse.g. stealing focus unexpectedly
Tedious data entry
Inability or difficulty in obtaining necessary information
Inability to produce action desired
Examples of
Internal Locus of Control
Budget and Avis are going 100% smoke free!
Feedback form online
Auto-fill does not behave as expected
Error Dialogue how can I cancel here?
Interface design concepts
Reduce
Short-term Memory Load
Focus of attention = short term memory
Who's heard of the 7 +/- 2 rule?George Miller's The Magical Number Seven, Plus or Minus Two
Published in Psychology Review in 1956
8Interface design conceptshttp://wiki.linuxquestions.org/wiki/Usabilityhttp://www.humanfactors.com/downloads/sep00.asphttp://www.webword.com/moving/memory.htmlhttp://en.wikipedia.org/wiki/The_Magical_Number_Seven,_Plus_or_Minus_Two
Human mind can typically recall 7 +/- 2 items in short term memory
dont design with this assumption (Millers Magic 7 paper from 1956)
recent research shows more like 2 to 4 chunks
Focus of attention = short term memory
Find the most important ideas and present those to the user
Look for chunks of familiarity that leverage recognition not recall (familiarity and uniformity) (e.g. phone numbers prefix)
Design to facilitate recognition rather than recall memory
Begs the question what will they recognize?
Answer with mental models, metaphors
Provide a means to drill down to further-nested ideasVisible options, dropdown menus, etc
Take into account the ability to reduce memory load via proper training and practice
Back in 1956
Interface design concepts
Short-term Memory Load
(cont)
Users tend to ChunkGroup related items
Recode information
Recent research shows more like 2 4 chunks
Present the most important ideas to the user
Provide a means to drill down to further-nested ideas
Look for chunks of familiarity that leverage recognition not recallFamiliarity
Uniformity
8Interface design conceptshttp://wiki.linuxquestions.org/wiki/Usabilityhttp://www.humanfactors.com/downloads/sep00.asphttp://www.webword.com/moving/memory.htmlhttp://en.wikipedia.org/wiki/The_Magical_Number_Seven,_Plus_or_Minus_Two
Human mind can typically recall 7 +/- 2 items in short term memory
dont design with this assumption (Millers Magic 7 paper from 1956)
recent research shows more like 2 to 4 chunks
Focus of attention = short term memory
Find the most important ideas and present those to the user
Look for chunks of familiarity that leverage recognition not recall (familiarity and uniformity) (e.g. phone numbers prefix)
Design to facilitate recognition rather than recall memory
Begs the question what will they recognize?
Answer with mental models, metaphors
Provide a means to drill down to further-nested ideasVisible options, dropdown menus, etc
Take into account the ability to reduce memory load via proper training and practice
Examples of
Reducing Memory Load
Population stereotypes can be cuesLink colour (unvisited, visited)
Think twice about passwordsUses a chunk up
Pagination
Can make long articles easier to digest, reference
Consider cross-page recall
Makes finding, searching, scanning difficult
Hard to print or save
Interface design conceptshttp://www.webword.com/moving/memory.html
Bad: Pagination
Splitting content across multiple pagesConsider cross-page recall
annoying, purpose is ad revenue
does not work if have to recall info from other pages
Makes printing difficult
Makes finding/searching/scanning difficult
Possibly dilutes SEO incoming links
Avoid forcing users to memorize passwords Uses a chunk up
Browsers can do this unless explicitly not allowed to by site (banks etc)
Search engines shift recall to recognition
Link colour (blue unvisited, purple visited) population stereotype. Purple is a memory cue.
Present list of available files rather than ask them to type in the filename. Auto completion. Gallerys add items list of recently used folders?
A Very Powerful
Recognition Tool
Interface design conceptsNo need to recall website addressesSuggestions provide for tangential or indirect recallIf searching documents, no need to recall location or title
Golden Rule
Caveats
Schneiderman's 8 Golden Rules are widely-used
This is merely an introductionBroadly applicable
Fairly intuitive
Memorable
Other rules and lists exist
Interface design concepts
Session Outline
Interface Design Concepts8 Golden Rules
Business Analysis and UsabilityWhat Is Usability
3 Key Considerations
Usability And UI DesignSoftware Requirements
Usability Testing
How do we apply the design rules we've chosen to adhere to or use?
Business Analysis
And Usability
Business Analysis
Usability Analysis
B.A. & Usability
Usability
A Hot Topic
Do you Do It?
B.A. & Usability
Pop Quiz
Are any Golden Rules broken here?
B.A. & UsabilityConsistency does not exist between icons, both in appearance, visual style, as well as in metaphors usedColour usage may come up the colour is not relied upon to deliver the message though. Discussed later.
What Is Usability?
It dependsWhos asking?
Whos answering?
My usability is not your usability
Lets define it for this session
B.A. & Usability
Usability Is
A quality attribute that assesses how easy user interfaces are to use.
The study of the principles behind an object's perceived efficiency or elegance.
A technique used to evaluate a product by testing it on users.
A design philosophy rooted in the idea that users must take center-stage in the design of any computer system.
B.A. & Usability Jacob Nielsen - http://www.useit.com/alertbox/20030825.html
Usability - Wikipedia - http://en.wikipedia.org/wiki/Usability
Usability testing Wikipedia - http://en.wikipedia.org/wiki/Usability_testing
UCD Wikipedia - http://en.wikipedia.org/wiki/User-centered_design
Usability Is
(cont)
A technique meant to make the user's interaction as simple and efficient as possible.
1) and 5)
All of the above, excluding 4)
B.A. & Usabilitye) UI Design Wikipedia - http://en.wikipedia.org/wiki/User_interface_design
Was That Poll
Usable?
Not just the screen layout, widgets, font size, colours,etc
Also involved:
Application used to display it
Context of use
Nature of the interactions between the user and the system
Number of items
Complexity of each item
Item descriptions are difficult to differentiate
B.A. & UsabilityGolden Rules how many broken?Consistency
Shortcuts
Informative feedback
Yield closure
Error prevention and handling
Easy reversal of actions
Internal locus of control
Reduce short-term memory load
Also involved:The application used to display itUsers expectation for how presentation slides work and are typically presented
The settinglarge enough to see
only one screen visible at a time
The nature of the interactions between the user and the system1 slide on a screen at a time
Requiring people to remember items without giving them time to memorize or advance notice
The number of items was too large to remember them, and they weren't clearly different
Reflection
Usability is not (just) about widgets on the screen
Usability incorporates the user, their environment, other tools and systems, workflow, and their goals/tasks.
B.A. & Usability
Usability
Our Definition
The extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use.
ISO 9241-11
B.A. & Usability
Business Analysis typically incorporates elements of Usability Analysis
Usability Analysis should focus on 3 general considerationsUsers
Tasks
Context
Business Analysis
And Usability
B.A. & Usability
Understand
Your Users
Who are the users?
General background
What do they know?
What can they realistically learn?
Cognitive approach considerations
Physical ability
Accessibility
B.A. & Usability - Users
Examples of
Accessibility
Colour blindnessInability to differentiate specific colours
Genetic basis
Design impactDo not rely on colour coding alone
Motion blindnessMotion perceived as a series of frames
Caused by brain injury
Design impactDo not assume motion is visible
Note: slow computers can result in a similar effect
B.A. & Usability - UsersRed/GreenBlue/yellowMonochromacy
Colour blindnessInability to differentiate specific colours
Genetic basis
Design impact:Do not rely on colour coding alone
Maybe the world is gray
Motion blindnessPerception of motion as a series of frames instead of fluid motion
Not genetic, caused by brain injury
Design impact:Motion is a very powerful visual attractant
Do not assume full motion is visible
Note: slow computers can result in a similar effect
Beware of
Colour Assumptions
A ubiquitous logo
Which letter(s) is/are red? Which letter(s) is/are green? Red/green deficitBlue/yellow deficit
B.A. & Usability - UsersThe colours here are not imperative to using GoogleThe point though is that colour should not be solely relied upon as it is not a constant across all users, particularly in emergent situations.
Deuteranope (red/green deficit)Tritanope (blue/yellow deficit)
Pop Quiz
Are there problems with these colours?
B.A. & Usability - UsersThe colour is not relied upon to deliver the message. Therefore is can be considered supplementary to the message. So essential question is about design choices.
Capturing
User Information
If is more important than HowPersonas
Actor definitions
User definitions
Demographic summaries
...
B.A. & Usability - Users
Usability
Our Definition
The extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use.
ISO 9241-11
B.A. & Usability
Understand
The Tasks
What do they need or want to do?Not a simple question
How much training is needed?
Can users easily accomplish their tasks?
Can users recover from errors?
What and how many errors do users make?
B.A. & Usability - TasksWhat do they need or want to do?
How much training is needed?
Can users easily accomplish their tasks
Can users recover from errors or does someone die?
What and how many errors do users make when interacting with the product or product to be replaced/improved?
Example of
Tasks
Cardiac defibrillatorLayman user
No training
Error recovery
Emergency situation
B.A. & Usability - Taskshttp://www.defibtech.com/products/index.html
Usability
Our Definition
The extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use.
ISO 9241-11
B.A. & Usability
Understand
The Context
What is the user's context?
Supporting materials available
What has to be left to the machine
Criticality of use
Physical influences
B.A. & Usability - ContextWhat is the user's context?
Supporting materials available
What has to be left to the machineInteractions with other systems
Criticality of useHow important is it to have it work right the first time? All the time?
Physical influencesPortability
Temperatures
Environment
Example of
Context
SA80 RifleB.A. & Usability - ContextSmall Arms for the 1980s intended to be standard issue for British Armed Forces
Gun designed without field tests and consideration for how and where it would be used
Gun design began in 1960s, prototypes trialed in mid 70s, production completed in 1994. Over 30 years in development and over 470 million pounds spent on design alone.
Quiz: what do these people all have in common?Stationary ammunition clip typically caught on clothing and fell out while soldier was running (e.g. during testing the full ammunition clip was only inserted once gun was at firing range)
Shooting from right side of body hot clips firing out one side of the gun made it impossible to shoot from the left shoulder
Other issues:Plastic would swell in rain, jamming safety switch on/off
Lubrication did not work in sandy conditions, causing jams
Went off when dropped
Safety catch broke when trigger pulled hard
Sent back for redesign rifles must be dependable and safe
Well-Designed
Interfaces
Reflect the user'sCapabilities
Needs
Tasks
Incorporate any physical constraints imposed by hardware and context of use
Achieve the business objectives of the system for which it is designed
Design withUsability in mind
B.A. & Usability
Session Outline
Interface Design Concepts8 Golden Rules
Business Analysis and UsabilityWhat Is Usability
3 Key Considerations
Usability And UI DesignSoftware Requirements
Usability Testing
Usability And
Software Requirements
Can usability be captured in software requirements?Business requirements seem too high level
User requirements seem too esoteric
What about software/system requirements?
User Interface Design!
Usability & UI Design
Interface Design
And Usability
Embed usability analysis/knowledge into every aspect of your system designPrototyping
Wireframes
UI Specs & Rationale
Information architecture
Layout, templates
Impact assessments of change requests
Etc
Usability & UI Design
Usability Testing
UI Design can be testedPrototypes
Formal and informal usability testing
Usability Analysis feeds these activitiesUser selection
Test goals
Success criteria
Determine areas of focus
Usability & UI Design
Dont Design
In The Dark
Business analysis usability information
Usability information software specifications
Usability information usability testing
Q: How do you create a successful design without usability information?
A: You don't, or you end up with something a little Odd
Usability & UI Design
Learning Points
Describe a number of interface design concepts
Relate interface design concepts to business analysis activities
Discuss the relationship between usability requirements and interface design
Speaker Tool
Handout
User Experience Honeycomb(Peter Morville)
Design and User Experience Approach Links Design @ IBM
User Experience Design at Google
Microsoft User Experience Interaction Guidelines
Apple Human Interface Guidelines
Gnome Human Interface Guidelines
KDE Development Guidelines
Jacob Nielsen's Ten Usability Heuristics
Conclusions
Design Concepts exist and are useful in Business Analysis
Business analysis typically involves Usability analysis
Usability analysis results are an important part of your interface design
Thank You &
Questions
OK/Cancel - Cultural Sensibilities
Resources
VisCheck - Colour Blindness Website Filter