Avoiding UI Mistakes
1 like676 views
The document presents a talk by Danielle Gobert Cooley at KCDC 2013 regarding user experience methodologies and principles. It outlines ten key heuristics for effective user interface design, including visibility of system status, user control, consistency, error prevention, and minimalist design. Cooley emphasizes the importance of understanding users' needs and providing clear feedback throughout their interactions with systems.
Avoiding UI Mistakes
- 1. KCDC 2013 Avoiding UI Mistakes Introduction to User Experience Methods 1 Danielle Gobert Cooley @dgcooley 03 May 2013 #KCDC2013
- 2. KCDC 2013 2 03 May 2013 @dgcooley #KCDC2013
- 3. KCDC 2013 Danielle Gobert Cooley 3 03 May 2013 @dgcooley #KCDC2013 danielle@dgcooley.com @dgcooley 14 years as a UX Specialist BE, Biomedical and Electrical Engineering – Vanderbilt University MS, Human Factors in InformaMon Design – Bentley University Selected Clients hOp://linkedin.com/in/dgcooley
- 4. KCDC 2013 Good sites? 4 03 May 2013 @dgcooley #KCDC2013
- 5. KCDC 2013 03 May 2013 @dgcooley #KCDC2013 5
- 6. KCDC 2013 03 May 2013 @dgcooley #KCDC2013 6
- 7. KCDC 2013 03 May 2013 @dgcooley #KCDC2013 7
- 8. KCDC 2013 03 May 2013 @dgcooley #KCDC2013 8 hOp://www.theworldsworstwebsiteever.com/
- 9. KCDC 2013 03 May 2013 @dgcooley #KCDC2013 9 hOp://metatech.org/
- 10. KCDC 2013 03 May 2013 @dgcooley #KCDC2013 10 hOp://www.fgmarchitects.com/
- 11. KCDC 2013 The 10 Heuristics 11 03 May 2013 @dgcooley #KCDC2013
- 12. KCDC 2013 Visibility of System Status 12 03 May 2013 @dgcooley #KCDC2013 The system should always keep users informed about what is going on, through appropriate feedback within reasonable Mme. Where am I? How do I get Home? Was my data saved? How much longer will it take? How many steps are there? Am I done? Am I logged in?
- 13. KCDC 2013 Visibility of System Status 03 May 2013 @dgcooley #KCDC2013 13 How do I get Home?
- 14. KCDC 2013 Visibility of System Status 03 May 2013 @dgcooley #KCDC2013 14 How do I get Home?
- 15. KCDC 2013 Visibility of System Status 03 May 2013 @dgcooley #KCDC2013 15 How much longer will it take?
- 16. KCDC 2013 Visibility of System Status 03 May 2013 @dgcooley #KCDC2013 16 How many steps are there?
- 17. KCDC 2013 Visibility of System Status 03 May 2013 @dgcooley #KCDC2013 17 Was my data saved? Mailchimp.com, Kayak.com
- 18. KCDC 2013 Visibility of System Status 03 May 2013 @dgcooley #KCDC2013 18 Was my data saved? hOp://swagbucks.com
- 19. KCDC 2013 Visibility of System Status 03 May 2013 @dgcooley #KCDC2013 19 Was my data saved? HootSuite iPad app, April 2012
- 20. KCDC 2013 Visibility of System Status 03 May 2013 @dgcooley #KCDC2013 20 Am I logged in?
- 21. KCDC 2013 Visibility of System Status 03 May 2013 @dgcooley #KCDC2013 21 Where am I?
- 22. KCDC 2013 Visibility of System Status 03 May 2013 @dgcooley #KCDC2013 22 Where am I?
- 23. KCDC 2013 Match Between System and Real World The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-‐oriented terms. Follow real-‐world convenMons, making informaMon appear in a natural and logical order. 03 May 2013 @dgcooley #KCDC2013 23
- 24. KCDC 2013 User Control and Freedom Users oaen choose system funcMons by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue. Support undo and redo. 03 May 2013 @dgcooley #KCDC2013 24
- 25. KCDC 2013 Consistency and Standards Users should not have to wonder whether different words, situaMons, or acMons mean the same thing. Follow plaform convenMons. 03 May 2013 @dgcooley #KCDC2013 25 ?
- 26. KCDC 2013 Consistency and Standards 03 May 2013 @dgcooley #KCDC2013 26
- 27. KCDC 2013 Consistency and Standards 03 May 2013 @dgcooley #KCDC2013 27 Recommenda)on: Both for consistency and intui5veness, use the tradi5onal calendar picker tool throughout the applica5on.
- 28. KCDC 2013 Consistency and Standards 03 May 2013 @dgcooley #KCDC2013 28 The three-‐way toggle, though not unique to this tool, is not an immediately-‐recognizable control. Recommenda)on: Consider a more tradi5onal radio bu>on control: Exists: ¤Yes ¢No ¢Either
- 29. KCDC 2013 Consistency and Standards 03 May 2013 @dgcooley #KCDC2013 29
- 30. KCDC 2013 Error PrevenMon Even beOer than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-‐prone condiMons or check for them and present users with a confirmaMon opMon before they commit to the acMon. 03 May 2013 @dgcooley #KCDC2013 30
- 31. KCDC 2013 Error PrevenMon 03 May 2013 @dgcooley #KCDC2013 31
- 32. KCDC 2013 Error PrevenMon 03 May 2013 @dgcooley #KCDC2013 32 hOp://www.lukew.com/ff/entry.asp?571
- 33. KCDC 2013 Error PrevenMon 03 May 2013 @dgcooley #KCDC2013 33 Microsoa Word, Unknown version; Microsoa Word for Mac 2011, Version 14.3.1
- 34. KCDC 2013 RecogniMon > Recall Minimize the user’s memory load by making objects, acMons, and opMons visible. The user should not have to remember informaMon from one part of the dialogue to another. InstrucMons for use of the system should be visible or easily retrievable whenever appropriate. 03 May 2013 @dgcooley #KCDC2013 34 hOp://online.epocrates.com/noFrame/
- 35. KCDC 2013 RecogniMon > Recall 03 May 2013 @dgcooley #KCDC2013 35 Microsoa PowerPoint for Mac 2011, Version 14.3.1
- 36. KCDC 2013 Flexibility and Efficiency of Use Accelerators – unseen by the novice user – may oaen speed up the interacMon for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent acMons. 03 May 2013 @dgcooley #KCDC2013 36
- 37. KCDC 2013 Flexibility and Efficiency of Use 03 May 2013 @dgcooley #KCDC2013 37 American Giant, ThinkGeek
- 38. KCDC 2013 Flexibility and Efficiency of Use 03 May 2013 @dgcooley #KCDC2013 38 Chrome’s right-‐click menu
- 39. KCDC 2013 Flexibility and Efficiency of Use 03 May 2013 @dgcooley #KCDC2013 39 Microsoa Word and PowerPoint for Mac 2011, Version 14.3.1
- 40. KCDC 2013 Flexibility and Efficiency of Use 03 May 2013 @dgcooley #KCDC2013 40 TwiOer’s iOS app, November 2011
- 41. KCDC 2013 AestheMc and Minimalist Design Dialogues should not contain informaMon which is irrelevant or rarely needed. Every extra unit of informaMon in a dialogue competes with the relevant units of informaMon and diminishes their relaMve visibility. 03 May 2013 @dgcooley #KCDC2013 41
- 42. KCDC 2013 AestheMc and Minimalist Design 03 May 2013 @dgcooley #KCDC2013 42
- 43. KCDC 2013 AestheMc and Minimalist Design 03 May 2013 @dgcooley #KCDC2013 43 Lane Furniture (2011)
- 44. KCDC 2013 AestheMc and Minimalist Design 03 May 2013 @dgcooley #KCDC2013 44
- 45. KCDC 2013 AestheMc and Minimalist Design 03 May 2013 @dgcooley #KCDC2013 45 hOp://lesscontentmorestrategy.com
- 46. KCDC 2013 Help users recognize, diagnose, and recover from errors Error messages should be expressed in plain language (no codes), precisely indicate the problem, and construcMvely suggest a soluMon. 03 May 2013 @dgcooley #KCDC2013 46
- 47. KCDC 2013 Help users recognize, diagnose, and recover from errors 03 May 2013 @dgcooley #KCDC2013 47
- 48. KCDC 2013 Help users recognize, diagnose, and recover from errors 03 May 2013 @dgcooley #KCDC2013 48
- 49. KCDC 2013 Help users recognize, diagnose, and recover from errors 03 May 2013 @dgcooley #KCDC2013 49 Chrome, version 26.0.141065 – May 2013
- 50. KCDC 2013 Help users recognize, diagnose, and recover from errors 03 May 2013 @dgcooley #KCDC2013 50
- 51. KCDC 2013 Help users recognize, diagnose, and recover from errors 03 May 2013 @dgcooley #KCDC2013 51
- 52. KCDC 2013 Help users recognize, diagnose, and recover from errors 03 May 2013 @dgcooley #KCDC2013 52 AmericanGiant.com
- 53. KCDC 2013 Help and DocumentaMon Even though it is beOer if the system can be used without documentaMon, it may be necessary to provide help and documentaMon. Any such informaMon should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large. 03 May 2013 @dgcooley #KCDC2013 53
- 54. KCDC 2013 Help and DocumentaMon 03 May 2013 @dgcooley #KCDC2013 54
- 55. KCDC 2013 Help and DocumentaMon 03 May 2013 @dgcooley #KCDC2013 55 Microsoa PowerPoint for Mac 2011, Version 14.3.1
- 56. KCDC 2013 So, ask yourself: • Am I keeping them informed about what’s going on? • Will they understand this terminology? • If I do X, will it take control away from my user? • Am I being consistent with standards? With myself? • How can I reduce the possibility that they will make this mistake? • Am I asking them to remember something unnecessarily? If they get a phone call in the middle of this, are they screwed? • Am I accommodaMng both my novices and my experts? (How about repeat novices? • Is there too much crap in here? • Have I given them the informaMon they need to recover from their errors? • Can they find the help they need? Quickly and easily? When and where they need it? 56 03 May 2013 @dgcooley #KCDC2013
- 57. KCDC 2013 References 03 May 2013 @dgcooley #KCDC2013 57