SlideShare a Scribd company logo
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

More Related Content

PPT
Usability Heuristics
PPT
User interface design for the Web Engineering Psychology
PDF
Design Simple but Powerful application
PPTX
UXPA2019 Not Your Average Chatbot: Using Cognitive Intercept to Improve Infor...
PPT
Usability principles 1
PPS
User Interface Design @iRajLal
PPTX
UXPA2019: Voice User Interface Design for Customer Support: Design guidance ...
PDF
What is usability
Usability Heuristics
User interface design for the Web Engineering Psychology
Design Simple but Powerful application
UXPA2019 Not Your Average Chatbot: Using Cognitive Intercept to Improve Infor...
Usability principles 1
User Interface Design @iRajLal
UXPA2019: Voice User Interface Design for Customer Support: Design guidance ...
What is usability

What's hot (20)

PPT
Seii unit5 ui_design
PPT
Iteration and prototyping
PPTX
Safety in numbers: A framework for benchmarking the user experience
PPTX
User Experience Design + Agile: The Good, The Bad, and the Ugly
PPT
Bake UX into your Startup (March 2009)
PPTX
Design process interaction design basics
PPTX
Ux prototyping
PDF
Human computer interaction-web interface design and mobile eco system
PDF
P-Camp 2008 - PM & UX - Meghan Ede 2
PPT
Interaction 09 Introduction to Interaction Design
PDF
Usability Testing Methods
PPTX
Prototyping
PDF
User experience design process
PDF
Mobile UI Design Patterns 2014
PDF
Good-to-Great with AQUENT presentation - Koen van Niekerk
PPTX
Effectively communicating user interface and interaction design
PDF
Optimizing for a faster user experience Pt 2: How-to.
PDF
Uxpin web ui design patterns 2014
PPTX
Measuring UX
PDF
User Centered Design in short
Seii unit5 ui_design
Iteration and prototyping
Safety in numbers: A framework for benchmarking the user experience
User Experience Design + Agile: The Good, The Bad, and the Ugly
Bake UX into your Startup (March 2009)
Design process interaction design basics
Ux prototyping
Human computer interaction-web interface design and mobile eco system
P-Camp 2008 - PM & UX - Meghan Ede 2
Interaction 09 Introduction to Interaction Design
Usability Testing Methods
Prototyping
User experience design process
Mobile UI Design Patterns 2014
Good-to-Great with AQUENT presentation - Koen van Niekerk
Effectively communicating user interface and interaction design
Optimizing for a faster user experience Pt 2: How-to.
Uxpin web ui design patterns 2014
Measuring UX
User Centered Design in short
Ad

Similar to Eliminating the Odd (20)

PPTX
golden rules of user interface design
PDF
HCI Basics
PDF
Wou Intro To Usability Jandrzejewski
PPT
What Is Interaction Design
PPT
Good application final-nopics
PPT
Design-Principles.ppt
DOCX
Assignment 4 hci
PPTX
UDSA Unit 4.pptx
PPTX
Unit 7 performing user interface design
PPTX
The Golden Rules by Theo Mandel - Software Engineering
PPT
Ui design final
PPTX
Usability Essentials to Know
PPT
Unit-3- Part-1 Principles of visual design including Gestalt Theory.ppt
PPT
Chapter 12 user interface design
PPT
lecture07-ui-design.ppt
PPTX
User Interface Analysis and Design
PPT
Ui Design And Usability For Everybody
DOC
Design.doc
PPT
UX: Interaction Design
PDF
POLITEKNIK MALAYSIA
golden rules of user interface design
HCI Basics
Wou Intro To Usability Jandrzejewski
What Is Interaction Design
Good application final-nopics
Design-Principles.ppt
Assignment 4 hci
UDSA Unit 4.pptx
Unit 7 performing user interface design
The Golden Rules by Theo Mandel - Software Engineering
Ui design final
Usability Essentials to Know
Unit-3- Part-1 Principles of visual design including Gestalt Theory.ppt
Chapter 12 user interface design
lecture07-ui-design.ppt
User Interface Analysis and Design
Ui Design And Usability For Everybody
Design.doc
UX: Interaction Design
POLITEKNIK MALAYSIA
Ad

Recently uploaded (20)

PPTX
Other Dance Forms - G10 MAPEH Reporting.pptx
PPTX
BULAN K3 NASIONAL PowerPt Templates.pptx
PDF
oppenheimer and the story of the atomic bomb
PPTX
What Makes an Entertainment App Addictive?
PPT
business model and some other things that
PPTX
providenetworksystemadministration.pptxhnnhgcbdjckk
PDF
My Oxford Year- A Love Story Set in the Halls of Oxford
PDF
A New Kind of Director for a New Kind of World Why Enzo Zelocchi Matters More...
PDF
TAIPANQQ SITUS MUDAH MENANG DAN MUDAH MAXWIN SEGERA DAFTAR DI TAIPANQQ DAN RA...
PPTX
Hacking Movie – Best Films on Cybercrime & Digital Intrigue
PPTX
asdmadsmammmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm.pptx
DOCX
Nina Volyanska Controversy in Fishtank Live_ Unraveling the Mystery Behind th...
PPTX
wegen seminar ppt.pptxhkjbkhkjjlhjhjhlhhvg
PDF
Rakshabandhan – Celebrating the Bond of Siblings - by Meenakshi Khakat
PDF
Ct.pdffffffffffffffffffffffffffffffffffff
PDF
How Old Radio Shows in the 1940s and 1950s Helped Ella Fitzgerald Grow.pdf
PDF
High-Quality PDF Backlinking for Better Rankings
PDF
TAIPANQQ SITUS MUDAH MENANG DAN MUDAH MAXWIN SEGERA DAFTAR DI TAIPANQQ DAN RA...
PDF
Gess1025.pdfdadaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
DOC
NSCAD毕业证学历认证,温哥华岛大学毕业证国外证书制作申请
Other Dance Forms - G10 MAPEH Reporting.pptx
BULAN K3 NASIONAL PowerPt Templates.pptx
oppenheimer and the story of the atomic bomb
What Makes an Entertainment App Addictive?
business model and some other things that
providenetworksystemadministration.pptxhnnhgcbdjckk
My Oxford Year- A Love Story Set in the Halls of Oxford
A New Kind of Director for a New Kind of World Why Enzo Zelocchi Matters More...
TAIPANQQ SITUS MUDAH MENANG DAN MUDAH MAXWIN SEGERA DAFTAR DI TAIPANQQ DAN RA...
Hacking Movie – Best Films on Cybercrime & Digital Intrigue
asdmadsmammmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm.pptx
Nina Volyanska Controversy in Fishtank Live_ Unraveling the Mystery Behind th...
wegen seminar ppt.pptxhkjbkhkjjlhjhjhlhhvg
Rakshabandhan – Celebrating the Bond of Siblings - by Meenakshi Khakat
Ct.pdffffffffffffffffffffffffffffffffffff
How Old Radio Shows in the 1940s and 1950s Helped Ella Fitzgerald Grow.pdf
High-Quality PDF Backlinking for Better Rankings
TAIPANQQ SITUS MUDAH MENANG DAN MUDAH MAXWIN SEGERA DAFTAR DI TAIPANQQ DAN RA...
Gess1025.pdfdadaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
NSCAD毕业证学历认证,温哥华岛大学毕业证国外证书制作申请

Eliminating the Odd

Editor's Notes

  • #4: 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
  • #6: 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
  • #7: 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
  • #8: Screenshot by Brandon Walkin http://www.brandonwalkin.com/blog/2009/08/10/managing-ui-complexity/
  • #9: http://www.actsofvolition.com/include/savealerts/screenshots.html (2005) Bad: Button icon variety Options are different Dialogue icon different Good Order of buttons
  • #10: http://www.usabilitypost.com/2009/04/15/8-characteristics-of-successful-user-interfaces/
  • #11: Increase the pace of interaction Abbreviations Special keys Hidden commands Macros
  • #15: 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?
  • #18: 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
  • #19: UI Hall of Shame (oldie but a goodie) - http:// homepage.mac.com/bradster/iarchitect/shame.htm
  • #21: 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
  • #23: 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
  • #25: 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
  • #27: 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
  • #28: 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?
  • #29: No need to recall website addresses Suggestions provide for tangential or indirect recall If searching documents, no need to recall location or title
  • #34: 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.
  • #36: 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
  • #37: e) – UI Design – Wikipedia - http://en.wikipedia.org/wiki/User_interface_design
  • #38: 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
  • #43: 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
  • #44: 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)
  • #45: 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.
  • #48: 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?
  • #49: http://www.defibtech.com/products/index.html
  • #51: 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
  • #52: 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