1. Affordance
2. Navigation
3. Usability inspection

Wednesday, October 16, 13
1. Affordance
2. Navigation
3. Usability inspection
Wednesday, October 16, 13
1. Affordance
2. Navigation
3. Usability inspection

Wednesday, October 16, 13
Main principles you remember?
Important concepts:
‣ Information scent
‣ Information architecture
‣ Mental models

1. Affor...
Information foraging theory
Assumptions	
  about	
  people:
Maximize	
  benefits
Minimize	
  costs
Minimal	
  effort
(conser...
Information scent
How$can$you$
improve$
information$
scent?$

Associations*

Information*
scent*

Information*
goal*

1. A...
Information architecture

1. Affordance
2. Navigation
3. Usability inspection
Wednesday, October 16, 13
Information architecture

1. Affordance
2. Navigation
3. Usability inspection
Wednesday, October 16, 13
Mental models

1. Affordance
2. Navigation

http://support.tivo.com//

3. Usability inspection
Wednesday, October 16, 13
Mental models

1. Affordance
2. Navigation
3. Usability inspection
Wednesday, October 16, 13
Mental models

1. Affordance
2. Navigation
3. Usability inspection
Wednesday, October 16, 13
Mental models
http://support.tivo.com//

1. Affordance
2. Navigation
3. Usability inspection
Wednesday, October 16, 13
Mental models
similar'to'

•  User’s'mental'model'

different'
than'

•  Designer’s'represented'
model'(system'image)'

inv...
Information architecture
‣ How do you create an
information architecture that
makes sense for the users’
mental model?
‣ H...
Information architecture

Card Sorting

1. Affordance
2. Navigation
3. Usability inspection
Wednesday, October 16, 13
1. Affordance
2. Navigation
3. Usability inspection

Wednesday, October 16, 13
Heuristic evaluation
‣ Apply principles
‣ Find issues

Interface grammar?
1. Affordance
2. Navigation
3. Usability inspect...
GUI elements
menus
controls

=

Language of
the interface

Do you speak interface?
Wednesday, October 16, 13
Controls

Wednesday, October 16, 13
Wednesday, October 16, 13
Wednesday, October 16, 13
Grammar & Interface Design
Verb
Action

Wednesday, October 16, 13

Noun
Object
4 Types of Controls
Imperative

Selection

Entry

Display

Wednesday, October 16, 13
Imperative

Button
Butcon (button/icon)
Hyperlinks

Wednesday, October 16, 13
Do#it!#
A
Do it!
D

Wednesday, October 16, 13

Do#it!#
B

Do#it!#
C
Do#it!#
A
Do it!
D

Wednesday, October 16, 13

Do#it!#
B

Do#it!#
C

Button design & behavior
- button look
- mouseover be...
Selection
Check box

!

Toggle button/butcon
Flip-flop
Radio
Combutcon
Lists

!
Wednesday, October 16, 13

• drop-down
• se...
☑
vs.

Wednesday, October 16, 13
vs.

flip-flop buttons :(

Wednesday, October 16, 13
Selection

then:

1

2

or
Selection

+

Imperative

simultaneous

Wednesday, October 16, 13

Imperative
Selection

then:

Imperative

:(

:)

Wednesday, October 16, 13

Highlight
likely option
Selection

Wednesday, October 16, 13

+

Imperative
Selection
Check box

!

Toggle button/butcon
Flip-flop
Radio
Combutcon
Lists

!
Wednesday, October 16, 13

• drop-down
• se...
Entry

!

Bounded
Spinners
Dials & sliders

!
Wednesday, October 16, 13

Unbounded - validation?
bounded entry

Wednesday, October 16, 13
Display
Scrollbars
• thumb
Splitters

Wednesday, October 16, 13
OS X Lion

scrollbar design

Wednesday, October 16, 13
iPhone: to scrollbar
or NOT?

Wednesday, October 16, 13
EXCISE
Wednesday, October 16, 13
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
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 ...
1. Don’t weld on training wheels
2. “pure” excise - let the machine decide
3. visual excise - ornamentation
4. Don’t stop ...
1. Affordance
2. Navigation
3. Usability inspection

Wednesday, October 16, 13
Heuristic evaluation
‣ Apply principles
‣ Find issues

1. Affordance
2. Navigation
3. Usability inspection
Wednesday, Octo...
Upcoming SlideShare
Loading in …5
×

Usability principles 2

436 views
324 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
436
On SlideShare
0
From Embeds
0
Number of Embeds
121
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

×