Eliminating the Odd
Upcoming SlideShare
Loading in...5
×
 

Eliminating the Odd

on

  • 3,279 views

 

Statistics

Views

Total Views
3,279
Views on SlideShare
3,279
Embed Views
0

Actions

Likes
0
Downloads
40
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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 buttons Different 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
  • Links for fleshing out explanations http://www.ja-sig.org/wiki/display/UPC/Usability+Heuristics Professor Shneiderman’s 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
  • Internal consistency Screen layout from one screen to another operations behave the same way External consistency From one application to another Terminology used throughout product Prompts Menus Help screens Documentation Consistent text attributes throughout interface color , Layout Capitalization fonts
  • Screenshot by Brandon Walkin http://www.brandonwalkin.com/blog/2009/08/10/managing-ui-complexity/
  • http://www.actsofvolition.com/include/savealerts/screenshots.html (2005) Bad: Button icon variety Options are different Dialogue icon different Good Order of buttons
  • http://www.usabilitypost.com/2009/04/15/8-characteristics-of-successful-user-interfaces/
  • Increase the pace of interaction Abbreviations Special keys Hidden commands Macros
  • http://www.actsofvolition.com/include/savealerts/screenshots.html (2005) GThumb No cancel No title in window Unclear what the checkbox does – just this image or for ever?
  • Disallowing 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 smart Data 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
  • UI Hall of Shame (oldie but a goodie) - http:// homepage.mac.com/bradster/iarchitect/shame.htm
  • http://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
  • Avoid tension and dissatisfaction: Surprising system actions e.g. stealing focus unexpectedly Tedious data entry Inability or difficulty in obtaining necessary information Inability to produce action desired
  • http://wiki.linuxquestions.org/wiki/Usability http://www.humanfactors.com/downloads/sep00.asp http://www.webword.com/moving/memory.html http://en.wikipedia.org/wiki/The_Magical_Number_Seven,_Plus_or_Minus_Two Human mind can typically recall 7 +/- 2 items in short term memory don’t design with this assumption (Miller’s “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 ideas Visible options, dropdown menus, etc Take into account the ability to reduce memory load via proper training and practice
  • http://wiki.linuxquestions.org/wiki/Usability http://www.humanfactors.com/downloads/sep00.asp http://www.webword.com/moving/memory.html http://en.wikipedia.org/wiki/The_Magical_Number_Seven,_Plus_or_Minus_Two Human mind can typically recall 7 +/- 2 items in short term memory don’t design with this assumption (Miller’s “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 ideas Visible options, dropdown menus, etc Take into account the ability to reduce memory load via proper training and practice
  • http://www.webword.com/moving/memory.html Bad: Pagination Splitting content across multiple pages Consider 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. Gallery’s add items list of recently used folders?
  • No need to recall website addresses Suggestions provide for tangential or indirect recall If searching documents, no need to recall location or title
  • Consistency does not exist between icons, both in appearance, visual style, as well as in metaphors used Colour usage may come up – the colour is not relied upon to deliver the message though. Discussed later.
  • 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
  • e) – UI Design – Wikipedia - http://en.wikipedia.org/wiki/User_interface_design
  • Golden 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 it User’s expectation for how presentation slides work and are typically presented The setting large enough to see only one screen visible at a time The nature of the interactions between the “user” and the “system” 1 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
  • Red/Green Blue/yellow Monochromacy Colour blindness Inability to differentiate specific colours Genetic basis Design impact: Do not rely on colour coding alone Maybe the world is gray Motion blindness Perception 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
  • The colours here are not imperative to using Google The 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)
  • The 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.
  • What 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?
  • http://www.defibtech.com/products/index.html
  • What is the user's context? Supporting materials available What has to be left to the machine Interactions with other systems Criticality of use How important is it to have it work right the first time? All the time? Physical influences Portability Temperatures Environment
  • Small 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 70’s, 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

Eliminating the Odd Eliminating the Odd Presentation Transcript

  • Eliminating The Odd An Introduction to Interface Design Concepts October 26, 2009 BAWorld Vancouver Kirk Bridger McKesson 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 Clippy the Office Assistant
  • Session Outline
      Interface Design Concepts
      • 8 Golden Rules
      Business Analysis and Usability
      • What Is Usability
      • 3 Key Considerations
      Usability And UI Design
      • Software Requirements
      • Usability Testing
  • 8 Golden Rules of Interface Design Strive for consistency Reduce 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 1 2 3 4 5 6 7 8 Interface design concepts
  • Strive For Consistency
    • Similar situations = consistent sequences of actions
    • Leverage user's pre-existing knowledge
    • Internal consistency
      • Terminology used throughout product
      • Consistent text attributes throughout interface
    • External consistency
      • Across products/applications
    1 Interface design concepts
  •  
  • GIMP Image Editor Evolution Mail Client External Consistency Closing with unsaved data GThumb Image Viewer Interface design concepts
  • Microsoft Word Microsoft Excel Microsoft PowerPoint External Consistency Microsoft Office’s Ribbon Interface Why doesn’t everyone like it? Internal consistency? Interface design concepts
  • 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
    2 Interface design concepts
  • Examples of Shortcuts
    • Winkey+D = Show Desktop
    • Winkey+L = Lock screen
    • Sticky Keys (Shift x5)
    • A ccelerators
    • 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
    3 Interface design concepts
  • Examples of Feedback
    • Audible clue
    • Spinners
    • Hourglass cursor
    • Visible changes to interface elements
    • Progress bar
    Interface design concepts
  • GThumb Image Viewer GIMP Image Editor Evolution Mail Client Degree of Feedback Closing with unsaved data Interface design concepts
  • Design Dialogues to Yield Closure
    • Organize sequences of actions
      • Beginning
      • Middle
      • End
    • Ensure user knows when a “conversation” or task is at an end
      • They feel it is complete
      • Allows them to drop contingency plans
      • Puts them at ease
    4 Interface design concepts
  • Examples of Closure
    • Delivery Information is done
      • Then Payment Information
        • Then 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
    5 Interface design concepts
  • Error Handling What Not To Do Interface design concepts
  • 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 context
      • Focus 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 interface
      • Helps user become an expert
      • Provides “Wow” opportunities
      • “ To err is human, but to really foul things up requires a computer.”
      • Farmer's Almanac, 1978
    6 Interface design concepts
  • 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
    7 Interface design concepts
  • 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
    8 Interface design concepts
  • Back in 1956 Interface design concepts
  • Short-term Memory Load (cont)
    • Users tend to “Chunk”
      • Group 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 recall
      • Familiarity
      • Uniformity
    8 Interface design concepts
  • Examples of Reducing Memory Load
    • Population stereotypes can be cues
      • Link colour ( unvisited , visited )
    • Think twice about passwords
      • Uses 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 concepts
  • A Very Powerful Recognition Tool Interface design concepts
  • Golden Rule Caveats
    • Schneiderman's 8 Golden Rules are widely-used
    • This is merely an introduction
      • Broadly applicable
      • Fairly intuitive
      • Memorable
    • Other “rules” and “lists” exist
    Interface design concepts
  • Session Outline
      Interface Design Concepts
      • 8 Golden Rules
      Business Analysis and Usability
      • What Is Usability
      • 3 Key Considerations
    Usability And UI Design
      • Software 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. & Usability
  • What Is Usability? It depends
    • Who’s asking?
    • Who’s answering?
    • My usability is not your usability
    • Let’s 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
  • 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. & Usability
  • 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. & Usability
  • 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 considerations
      • Users
      • 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 blindness
      • Inability to differentiate specific colours
      • Genetic basis
      • Design impact
        • Do not rely on colour coding alone
    • Motion blindness
      • Motion perceived as a series of frames
      • Caused by brain injury
      • Design impact
        • Do not assume motion is visible
      • Note: slow computers can result in a similar effect
    B.A. & Usability - Users
  • Beware of Colour Assumptions A ubiq uit ous logo Which letter(s) is/are red? Which letter(s) is/are green? Red/green deficit Blue/yellow deficit B.A. & Usability - Users
  • Pop Quiz Are there problems with these colours? B.A. & Usability - Users
  • Capturing User Information
    • “ If” is more important than “How”
      • Personas
      • 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 - Tasks
  • Example of Tasks Cardiac defibrillator
    • Layman user
    • No training
    • Error recovery
    • Emergency situation
    B.A. & Usability - Tasks
  • Usability Our Definition The extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficien cy 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 - Context
  • Example of Context SA80 Rifle B.A. & Usability - Context
  • Well-Designed Interfaces
    • Reflect the user's
      • Capabilities
      • 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 with Usability in mind B.A. & Usability
  • Session Outline
      Interface Design Concepts
      • 8 Golden Rules
      Business Analysis and Usability
      • What Is Usability
      • 3 Key Considerations
      Usability And UI Design
      • Software 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 design
      • Prototyping
      • Wireframes
      • UI Specs & Rationale
      • Information architecture
      • Layout, templates
      • Impact assessments of change requests
      • Etc
    Usability & UI Design
  • Usability Testing
    • UI Design can be tested
      • Prototypes
      • Formal and informal usability testing
    • Usability Analysis feeds these activities
      • User selection
      • Test goals
      • Success criteria
      • Determine areas of focus
    Usability & UI Design
  • Don’t 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