Usability principles 2
0 likes689 views
The document discusses several key concepts in user experience design including affordances, navigation, usability inspections, information scent, information architecture, mental models, and heuristic evaluations. It provides descriptions and examples of each concept, and discusses how to apply them to design intuitive, usable interfaces. The main topics covered are analyzing how people seek and process information online, understanding users' mental models, designing effective information architectures and navigation, and inspecting interfaces against design best practices.
Usability principles 2
- 1. 1. Affordance 2. Navigation 3. Usability inspection Wednesday, October 16, 13
- 2. 1. Affordance 2. Navigation 3. Usability inspection Wednesday, October 16, 13
- 3. 1. Affordance 2. Navigation 3. Usability inspection Wednesday, October 16, 13
- 4. Main principles you remember? Important concepts: ‣ Information scent ‣ Information architecture ‣ Mental models 1. Affordance 2. Navigation 3. Usability inspection Wednesday, October 16, 13
- 5. Information foraging theory Assumptions about people: Maximize benefits Minimize costs Minimal effort (conserve energy aka lazy) 1. Affordance 2. Navigation 3. Usability inspection Wednesday, October 16, 13 Information scent
- 6. Information scent How$can$you$ improve$ information$ scent?$ Associations* Information* scent* Information* goal* 1. Affordance 2. Navigation 3. Usability inspection Wednesday, October 16, 13
- 7. Information architecture 1. Affordance 2. Navigation 3. Usability inspection Wednesday, October 16, 13
- 8. Information architecture 1. Affordance 2. Navigation 3. Usability inspection Wednesday, October 16, 13
- 9. Mental models 1. Affordance 2. Navigation http://support.tivo.com// 3. Usability inspection Wednesday, October 16, 13
- 10. Mental models 1. Affordance 2. Navigation 3. Usability inspection Wednesday, October 16, 13
- 11. Mental models 1. Affordance 2. Navigation 3. Usability inspection Wednesday, October 16, 13
- 12. Mental models http://support.tivo.com// 1. Affordance 2. Navigation 3. Usability inspection Wednesday, October 16, 13
- 13. Mental models similar'to' • User’s'mental'model' different' than' • Designer’s'represented' model'(system'image)' invisible' • System'(implementation)' model' 1. Affordance 2. Navigation 3. Usability inspection Wednesday, October 16, 13
- 14. Information architecture ‣ How do you create an information architecture that makes sense for the users’ mental model? ‣ How can you find out the users’ mental model? 1. Affordance 2. Navigation 3. Usability inspection Wednesday, October 16, 13
- 15. Information architecture Card Sorting 1. Affordance 2. Navigation 3. Usability inspection Wednesday, October 16, 13
- 16. 1. Affordance 2. Navigation 3. Usability inspection Wednesday, October 16, 13
- 17. Heuristic evaluation ‣ Apply principles ‣ Find issues Interface grammar? 1. Affordance 2. Navigation 3. Usability inspection Wednesday, October 16, 13
- 18. GUI elements menus controls = Language of the interface Do you speak interface? Wednesday, October 16, 13
- 20. Wednesday, October 16, 13
- 21. Wednesday, October 16, 13
- 22. Grammar & Interface Design Verb Action Wednesday, October 16, 13 Noun Object
- 23. 4 Types of Controls Imperative Selection Entry Display Wednesday, October 16, 13
- 25. Do#it!# A Do it! D Wednesday, October 16, 13 Do#it!# B Do#it!# C
- 26. Do#it!# A Do it! D Wednesday, October 16, 13 Do#it!# B Do#it!# C Button design & behavior - button look - mouseover behaviors
- 27. Selection Check box ! Toggle button/butcon Flip-flop Radio Combutcon Lists ! Wednesday, October 16, 13 • drop-down • select multiple items
- 28. ☑ vs. Wednesday, October 16, 13
- 29. vs. flip-flop buttons :( Wednesday, October 16, 13
- 31. Selection then: Imperative :( :) Wednesday, October 16, 13 Highlight likely option
- 32. Selection Wednesday, October 16, 13 + Imperative
- 33. Selection Check box ! Toggle button/butcon Flip-flop Radio Combutcon Lists ! Wednesday, October 16, 13 • drop-down • select multiple items
- 34. Entry ! Bounded Spinners Dials & sliders ! Wednesday, October 16, 13 Unbounded - validation?
- 35. bounded entry Wednesday, October 16, 13
- 37. OS X Lion scrollbar design Wednesday, October 16, 13
- 38. iPhone: to scrollbar or NOT? Wednesday, October 16, 13
- 40. vs. needs i m p le me n t at i o n mo de l Wednesday, October 16, 13 goals me n t a l mo de l
- 41. ultimate EXCISE: a nge t h e i r i ng us e rs ch Mak ls to f i t t he me n t a l mo de t i o n mo de l . i m p le me n t a Wednesday, October 16, 13
- 42. 1. Don’t weld on training wheels 2. “pure” excise - let the machine decide 3. visual excise - ornamentation 4. Don’t stop the proceedings with idiocy 5. Don’t make users ask permission 6. Allow input whenever you have output 7. Don’t force users to go to another window to perform a function that affects the current window 8. Don’t force users to remember where they put things 9. Don’t force users to move & resize windows 10.Don’t force users to reenter personal settings 11.Navigation is excise. Make it easier - how? a. Reduce number of places to go b. Provide signposts, overviews, mapping of controls to functions c. Match user needs d. Avoid hierarchies Wednesday, October 16, 13
- 43. 1. Affordance 2. Navigation 3. Usability inspection Wednesday, October 16, 13
- 44. Heuristic evaluation ‣ Apply principles ‣ Find issues 1. Affordance 2. Navigation 3. Usability inspection Wednesday, October 16, 13