Usability principles 2

562 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
562
On SlideShare
0
From Embeds
0
Number of Embeds
145
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Usability principles 2

  1. 1. 1. Affordance 2. Navigation 3. Usability inspection Wednesday, October 16, 13
  2. 2. 1. Affordance 2. Navigation 3. Usability inspection Wednesday, October 16, 13
  3. 3. 1. Affordance 2. Navigation 3. Usability inspection Wednesday, October 16, 13
  4. 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. 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. 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. 7. Information architecture 1. Affordance 2. Navigation 3. Usability inspection Wednesday, October 16, 13
  8. 8. Information architecture 1. Affordance 2. Navigation 3. Usability inspection Wednesday, October 16, 13
  9. 9. Mental models 1. Affordance 2. Navigation http://support.tivo.com// 3. Usability inspection Wednesday, October 16, 13
  10. 10. Mental models 1. Affordance 2. Navigation 3. Usability inspection Wednesday, October 16, 13
  11. 11. Mental models 1. Affordance 2. Navigation 3. Usability inspection Wednesday, October 16, 13
  12. 12. Mental models http://support.tivo.com// 1. Affordance 2. Navigation 3. Usability inspection Wednesday, October 16, 13
  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. 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. 15. Information architecture Card Sorting 1. Affordance 2. Navigation 3. Usability inspection Wednesday, October 16, 13
  16. 16. 1. Affordance 2. Navigation 3. Usability inspection Wednesday, October 16, 13
  17. 17. Heuristic evaluation ‣ Apply principles ‣ Find issues Interface grammar? 1. Affordance 2. Navigation 3. Usability inspection Wednesday, October 16, 13
  18. 18. GUI elements menus controls = Language of the interface Do you speak interface? Wednesday, October 16, 13
  19. 19. Controls Wednesday, October 16, 13
  20. 20. Wednesday, October 16, 13
  21. 21. Wednesday, October 16, 13
  22. 22. Grammar & Interface Design Verb Action Wednesday, October 16, 13 Noun Object
  23. 23. 4 Types of Controls Imperative Selection Entry Display Wednesday, October 16, 13
  24. 24. Imperative Button Butcon (button/icon) Hyperlinks Wednesday, October 16, 13
  25. 25. Do#it!# A Do it! D Wednesday, October 16, 13 Do#it!# B Do#it!# C
  26. 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. 27. Selection Check box ! Toggle button/butcon Flip-flop Radio Combutcon Lists ! Wednesday, October 16, 13 • drop-down • select multiple items
  28. 28. ☑ vs. Wednesday, October 16, 13
  29. 29. vs. flip-flop buttons :( Wednesday, October 16, 13
  30. 30. Selection then: 1 2 or Selection + Imperative simultaneous Wednesday, October 16, 13 Imperative
  31. 31. Selection then: Imperative :( :) Wednesday, October 16, 13 Highlight likely option
  32. 32. Selection Wednesday, October 16, 13 + Imperative
  33. 33. Selection Check box ! Toggle button/butcon Flip-flop Radio Combutcon Lists ! Wednesday, October 16, 13 • drop-down • select multiple items
  34. 34. Entry ! Bounded Spinners Dials & sliders ! Wednesday, October 16, 13 Unbounded - validation?
  35. 35. bounded entry Wednesday, October 16, 13
  36. 36. Display Scrollbars • thumb Splitters Wednesday, October 16, 13
  37. 37. OS X Lion scrollbar design Wednesday, October 16, 13
  38. 38. iPhone: to scrollbar or NOT? Wednesday, October 16, 13
  39. 39. EXCISE Wednesday, October 16, 13
  40. 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. 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. 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. 43. 1. Affordance 2. Navigation 3. Usability inspection Wednesday, October 16, 13
  44. 44. Heuristic evaluation ‣ Apply principles ‣ Find issues 1. Affordance 2. Navigation 3. Usability inspection Wednesday, October 16, 13

×