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.

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

19. Controls
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

24. Imperative
Button
Butcon (button/icon)
Hyperlinks
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

30. Selection
then:
1
2
or
Selection
+
Imperative
simultaneous
Wednesday, October 16, 13
Imperative

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

36. Display
Scrollbars
• thumb
Splitters
Wednesday, October 16, 13

37. OS X Lion
scrollbar design
Wednesday, October 16, 13

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

39. EXCISE
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