Download UI Design Usability: Familiarity, Consistency, Customizability, Observability and more Study notes Computer Science in PDF only on Docsity!
Usability PrinciplesUsability Principles
John StaskoJohn Stasko
Spring 2007Spring 2007
This material has been developed by Georgia Tech HCI faculty, and continuesto evolve. Contributors include Gregory Abowd, Al Badre, Jim Foley, Elizabeth Mynatt, Jeff Pierce, Colin Potts, Chris Shaw, John Stasko, and Bruce Walker.Permission is granted to use with acknowledgement for non-profit purposes. Last revision: January 2007.
AgendaAgenda
- •^ Usability PrinciplesUsability Principles
- – Why?Why?
- – System of principlesSystem of principles
- • LearnabilityLearnability
- – Support for learning for users of all levelsSupport for learning for users of all levels
- • FlexibilityFlexibility–– Support for multiple ways of doing tasksSupport for multiple ways of doing tasks
- • RobustnessRobustness–– Support for recoverySupport for recovery
- – Style guidesStyle guides
- •^ Project preparationProject preparation
6750-Spr ‘07 3
Good Design (our goal!)Good Design (our goal!)
“Every designer wants to build a high“Every designer wants to build a high--
quality interactive system that is admiredquality interactive system that is admired
by colleagues, celebrated by users,by colleagues, celebrated by users,
circulated widely, and imitatedcirculated widely, and imitated
frequently.”frequently.” (Shneiderman(Shneiderman, 1992, p.7), 1992, p.7)
…and anything goes!……and anything goes!…
Why Principles & Guidelines?Why Principles & Guidelines?
- • …Because, well, not everything goes……Because, well, not everything goes…
- • Intended to prevent many bad designs, beforeIntended to prevent many bad designs, before they begin, or evaluate existing designs on athey begin, or evaluate existing designs on a scientific basisscientific basis
- •^ Guidelines based on previous designs,Guidelines based on previous designs, experimental findingsexperimental findings
- • Rules can all be “broken” (but usually in orderRules can all be “broken” (but usually in order to satisfy another principle)to satisfy another principle)
6750-Spr ‘07 7
Levels of ConsiderationLevels of Consideration
1.1. MetaMeta--display leveldisplay level
- – Apply to the whole system, across media & acrossApply to the whole system, across media & across displaysdisplays
- – Focus on this in Basic Layout StageFocus on this in Basic Layout Stage
2.2. Display LayoutDisplay Layout
- – Apply to groups of elements in a displayApply to groups of elements in a display
- – Focus on this in Prototyping and RedesignFocus on this in Prototyping and Redesign
3.3.^ Element levelElement level
- – Details about specific parts of a displayDetails about specific parts of a display
- –^ Colors, sound attributes, symbolsColors, sound attributes, symbols
UI Design Principles (Dix et al)UI Design Principles (Dix et al)
- • CategoriesCategories
- – LearnabilityLearnability
- • Support for learning for users of all levelsSupport for learning for users of all levels
- – FlexibilityFlexibility
- • Support for multiple ways of doing tasksSupport for multiple ways of doing tasks
- – RobustnessRobustness
- • Support for recoverySupport for recovery
- • Always think about these in terms ofAlways think about these in terms of
meta-meta-display, display, and element levelsdisplay, display, and element levels
6750-Spr ‘07 9
1.1. LearnabilityLearnability PrinciplesPrinciples
- • Ease with which new users can beginEase with which new users can begin
effective interaction and achieve maximaleffective interaction and achieve maximal
performanceperformance
- – PredictabilityPredictability
- – SynthesizabilitySynthesizability
- – FamiliarityFamiliarity
- – GeneralizabilityGeneralizability
- – ConsistencyConsistency
1.1 Predictability1.1 Predictability
- • I think that this action will do….I think that this action will do….
- • Operation visibilityOperation visibility -- Can see avail actionsCan see avail actions
- – e.g. menus vs.e.g. menus vs. command shellcommand shell
- – grayed menu itemsgrayed menu items
6750-Spr ‘07 13
Metaphors at the UIMetaphors at the UI -- WhatWhat
- • Metaphor -Metaphor- Application of name orApplication of name or
descriptive term to another object whichdescriptive term to another object which
is not literally applicableis not literally applicable
- – Use: Natural transferUse: Natural transfer -- apply existingapply existing knowledge to new, abstract tasksknowledge to new, abstract tasks
- – Problem: May introduce incorrect mentalProblem: May introduce incorrect mental modelmodel
1.41.4 GeneralizabilityGeneralizability
- • Can knowledge of one system/UI beCan knowledge of one system/UI be
extended to other similar ones?extended to other similar ones?
- – Example: cut & paste in differentExample: cut & paste in different applicationsapplications
- – Does knowledge of one aspect of a UI applyDoes knowledge of one aspect of a UI apply to rest of the UI?to rest of the UI?
- – Aid: UI Developers guidelinesAid: UI Developers guidelines
6750-Spr ‘07 15
1.5 Consistency1.5 Consistency
- • Likeness in behavior between similarLikeness in behavior between similar
tasks/operations/situationstasks/operations/situations
- – In different thingsIn different things
- • interactinginteracting
- • outputoutput
- • screen layoutscreen layout
- • Is this always desirable for all systems,Is this always desirable for all systems,
all users?all users?
(In)Consistency Example(In)Consistency Example -- MacintoshMacintosh
Drag a file icon to:Drag a file icon to: Folder on sameFolder on same physical diskphysical disk Folder on anotherFolder on another physical diskphysical disk Different diskDifferent disk Trash canTrash can
Result:Result: File is moved to folderFile is moved to folder
File is copied thereFile is copied there
File is copied thereFile is copied there
File is discardedFile is discarded
6750-Spr ‘07 19
2.2 Multithreading2.2 Multithreading
- • Allowing user to perform more than oneAllowing user to perform more than one
task at a timetask at a time
- • Two typesTwo types
- – ConcurrentConcurrent
- • Input to multiple tasks simultaneouslyInput to multiple tasks simultaneously
- – InterleavedInterleaved
- • Many tasks, but input to one at a timeMany tasks, but input to one at a time
2.3 Task2.3 Task MigratabilityMigratability
- • Ability to move performance of task toAbility to move performance of task to
entity (user or system) who can do itentity (user or system) who can do it
betterbetter
- – AutoAuto--pilot in planespilot in planes
- – SpellSpell--checkingchecking
- – Safety controls in plantSafety controls in plant
- – For what kinds of tasks should the user be inFor what kinds of tasks should the user be in control?control?
6750-Spr ‘07 21
2.42.4 SubstitutivitySubstitutivity
- • Flexibility in details of operationsFlexibility in details of operations
- – Allow user to choose suitable interactionAllow user to choose suitable interaction methodsmethods
- – Allow different ways toAllow different ways to
- • perform actions, specify data, configureperform actions, specify data, configure
- – Allow different ways of presenting outputAllow different ways of presenting output
- • to suit task & userto suit task & user
2.5 Customizability2.5 Customizability
- • Ability of user to modify interfaceAbility of user to modify interface
- – By userBy user -- adaptabilityadaptability
- • Is this a good thing?Is this a good thing?
- – By systemBy system -- adaptivityadaptivity
- • Is this a good thing?Is this a good thing?
6750-Spr ‘07 25
ObservabilityObservability -- Role of FeedbackRole of Feedback
- •^ Feedback helps create observabilityFeedback helps createobservability
- • Feedback taxonomy (generally don’t need all ofFeedback taxonomy (generally don’t need all of these)these) - – “I understand what you have asked me to do”“I understand what you have asked me to do” - – “I am doing what you have asked me to do”“I am doing what you have asked me to do” - • “And it will take me this much longer”“And it will take me this much longer” - • Song and dance routine to distract user (busy intervalSong and dance routine to distract user (busy intervalas opposed to idle interval)as opposed to idle interval) - • “And here are some intermediate results to keep you“And here are some intermediate results to keep youhappy until I am donehappy until I am done - – “All done, what’s next?”“All done, what’s next?”
ObservabilityObservability –– Acrobat ReaderAcrobat Reader
Acrobat ReaderAcrobat Reader withwith ToCgive contextgive contextToC toto
Forest is theForest is the bookmarks,bookmarks,tree is thetree is the single pagesingle page
6750-Spr ‘07 27
3.2 Recoverability3.2 Recoverability
- • Ability to take corrective action uponAbility to take corrective action upon
recognizing errorrecognizing error
- – Difficulty of recovery procedure should relateDifficulty of recovery procedure should relate to difficulty of original taskto difficulty of original task
- – Forward recoveryForward recovery
- • Ability to fix when we can’t undoAbility to fix when we can’t undo
- – Backward recoveryBackward recovery
- • Undo previous error(s)Undo previous error(s)
Do Not Set the User UpDo Not Set the User Up
- • Make it hard for the user to make errorsMake it hard for the user to make errors
- – Instead of allowing them to make error andInstead of allowing them to make error and then saying “then saying “tsktsk,, tsktsk””
- • Gray out disabled menu itemsGray out disabled menu items
- • Ask for confirmation of major actionsAsk for confirmation of major actions
6750-Spr ‘07 31
ResponsivenessResponsiveness
- • Response to motor actionsResponse to motor actions
- – Keyboarding, mouse movementKeyboarding, mouse movement –msecsmsecs – less thanless than 100100
- – Rich human factors literature on thisRich human factors literature on this
- • Consistency is important –Consistency is important– experimental resultsexperimental results
- – Users preferred longer but more consistent responseUsers preferred longer but more consistent responsetimetime
- – Times that differed 10%Times that differed 10%--20% were seen as same20% were seen as same
- • Sometimes argued that too fast is not goodSometimes argued that too fast is not good
- – Makes user feel like they need to do somethingMakes user feel like they need to do somethingquickly to keep up with computerquickly to keep up with computer
3.4 Task Conformance3.4 Task Conformance
- • Does system support all tasks userDoes system support all tasks user
wishes to perform in expected ways?wishes to perform in expected ways?
- – Task completenessTask completeness
- • Can system do all tasks of interest?Can system do all tasks of interest?
- – Task adequacyTask adequacy
- • Can user understand how to do tasks?Can user understand how to do tasks?
- – Does it allow user to define new tasks?Does it allow user to define new tasks?
6750-Spr ‘07 33
ApplicationApplication
- • In doing design and implementation ofIn doing design and implementation of
your project, revisit this listyour project, revisit this list
- • Assess your design against theseAssess your design against these
usability principlesusability principles
StyleguidesStyleguides
- • Codify many of these principles for aCodify many of these principles for a
particular look and feelparticular look and feel
- – Mac OS, Windows, Motif, Palm, BlackberryMac OS, Windows, Motif, Palm, Blackberry
- • Developed in concert with toolkit, but goDeveloped in concert with toolkit, but go
beyond toolkitbeyond toolkit
6750-Spr ‘07 37
Excerpt from OS XExcerpt from OS X StyleguideStyleguide
Drag and Drop Overview Ideally, users should be able to drag any content from any window to any other window that accepts the content’s type. If the sourceand destination are not visible at the same time, the user can create acan then be dragged into another application window at another time. clipping by dragging data to a Finder window; the clipping Drag and drop should be considered an ease-of-use technique. Except in cases where drag and drop is so intrinsic to anapplication that no suitable alternative methods exist—dragging icons in the Finder, for example—there should always be anothermethod for accomplishing a drag-and-drop task. The basic steps of the drag-and-drop interaction model parallel a copy-and-paste sequence in which you select an item, chooseCopy from the Edit menu, specify a destination, and then choose Paste. However, drag and drop is a distinct technique in itself anddoes not use the Clipboard. Users can take advantage of both the Clipboard and drag and drop without side effects from each other. A drag-and-drop operation should provide immediate feedback at the significant points: when the data is selected, during the drag,when an appropriate destination is reached, and when the data is dropped. The data that is pasted should be target-specific. Forexample, if a user drags an Address Book entry to the “To” text field in Mail, only the email address is pasted, not all of the person’s address information. You should implement Undo for any drag-and-drop operation you enable in your application. If you implement a drag-and-dropoperation that is not undoable, display a confirmation dialog before implementing the drop. A confirmation dialog appears, forexample, when the user attempts to drop an icon into a write-only drop box on a shared volume, because the user does not have privileges to open the drop box and undo the action. (Color added for emphasis.)
StyleguidesStyleguides
- General User Interface Design Style Guides – Apple Human Interface Guidelines (Mac OS X) Design Guidelines
- – Microsoft User Interface Guidelines (Click in the left tree on User Interface Design...)Windows XP Guidelines
- – Yale Web Style Guide (2nd Edition)Java Look and Feel Guidelines (version 1)
- – Java Look and Feel Guidelines version 2Java Look and Feel Guidelines: Advanced Topics
- – IBM 3D design GuidelinesSilicon Graphics Indigo Magic User Interface Guidelines
- Open Source Usability Guidelines – Motif Style Guide
- – KDE User Interface GuidelinesGnome Human Interface Guidelines 1.
- Corporate User Interface Standards and Guidelines (samples) – Telstra Online Standards
- – Taligent Human Interface GuidelinesAmeritech Graphical User Interface Standards and Design Guidelines
- • http://www.experiencedynamics.com/science_of_usability/ui_style_http://www.experiencedynamics.com/science_of_usability/ui_style_guides/guides/
6750-Spr ‘07 39
And MoreAnd More StyleguidesStyleguides ….….
- Government funded Usability Guidelines – MITRE Guidelines for Designing User Interface Software (US Airforce)
- – Research based Web Design and Usability Guidelines (Dept. of Health and Human Services)Cancer Institute Usability Guidelines
- – NASA User Interface GuidelinesCanadian Command Decision Aiding Technology (COMDAT) Operator-Machine Interface (OMI) Style Guide: Version 1.
- Gaming Devices (J2ME games) – Games Usability Guidelines (from Nokia)
- Wireless and Mobile Usability Guidelines – Palm OS Design Guidelines
- – Openwave GSM GuidelinesOpenwave Top 10 Usability Guidelines for WAP Applications
- – Blackberry and RIM wireless handheld UI Developers Guide (PDF)Sprint Usability Requirements for XHTML (Application Developers Program)
- Accessibility Guidelines –^ NTT DoCoMo imode service guideline (user interfaces)
- Techniques for Web content Accessibility Guidelines 1.
ProjectProject
- • Anyone without a team yet?Anyone without a team yet?
- – You need to find one!!!You need to find one!!!
- • Interesting topics?Interesting topics?
