View
177
Download
0
Category
Tags:
Preview:
DESCRIPTION
Citation preview
1. Affordance
2. Navigation
3. Usability inspection
Wednesday, October 16, 13
1. Affordance
2. Navigation
3. Usability inspectionWednesday, October 16, 13
1. Affordance
2. Navigation
3. Usability inspection
Wednesday, October 16, 13
1. Affordance
2. Navigation
3. Usability inspection
Main principles you remember?
Important concepts: ‣Information scent‣Information architecture‣Mental models
Wednesday, October 16, 13
1. Affordance
2. Navigation
3. Usability inspection
Information foraging theory
Assumptions about people:
Maximize benefitsMinimize costsMinimal effort(conserve energy aka lazy)
Information scentWednesday, October 16, 13
1. Affordance
2. Navigation
3. Usability inspection
Information*goal*
Information*scent*
Associations*
How$can$you$improve$
information$scent?$
Information scent
Wednesday, October 16, 13
1. Affordance
2. Navigation
3. Usability inspection
Information architecture
Wednesday, October 16, 13
1. Affordance
2. Navigation
3. Usability inspection
Information architecture
Wednesday, October 16, 13
1. Affordance
2. Navigation
3. Usability inspection
Mental models
http://support.tivo.com//
Wednesday, October 16, 13
1. Affordance
2. Navigation
3. Usability inspection
Mental models
Wednesday, October 16, 13
1. Affordance
2. Navigation
3. Usability inspection
Mental models
Wednesday, October 16, 13
1. Affordance
2. Navigation
3. Usability inspection
Mental models
http://support.tivo.com//
Wednesday, October 16, 13
1. Affordance
2. Navigation
3. Usability inspection
Mental models
similar'to'• User’s'mental'model'
different'than'
• Designer’s'represented'model'(system'image)'
invisible'
• System'(implementation)'model'
Wednesday, October 16, 13
1. Affordance
2. Navigation
3. Usability inspection
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?
Wednesday, October 16, 13
1. Affordance
2. Navigation
3. Usability inspection
Information architecture
Card Sorting
Wednesday, October 16, 13
1. Affordance
2. Navigation
3. Usability inspection
Wednesday, October 16, 13
1. Affordance
2. Navigation
3. Usability inspection
Heuristic evaluation
Interface grammar?
‣Apply principles‣Find issues
Wednesday, October 16, 13
GUI elementsmenus
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
Noun
Object
Wednesday, October 16, 13
SelectionImperative
4 Types of Controls
Entry Display
Wednesday, October 16, 13
Imperative
Button
Butcon (button/icon)
Hyperlinks
Wednesday, October 16, 13
Do#it!# Do#it!# Do#it!#A B C
Do it!D
Wednesday, October 16, 13
Do#it!# Do#it!# Do#it!#A B C
Do it!D
Button design & behavior
- button look- mouseover behaviors
Wednesday, October 16, 13
Selection
Check box
Toggle button/butcon
Flip-flop
Radio
Combutcon
Lists•drop-down•select multiple items
!
!Wednesday, October 16, 13
☑vs.
Wednesday, October 16, 13
flip-flop buttons :(
vs.
Wednesday, October 16, 13
Selection Imperativethen:
1 2
or
Selection Imperative+
simultaneous
Wednesday, October 16, 13
Selection Imperativethen:
Highlight likely option
:(
:)
Wednesday, October 16, 13
ImperativeSelection +
Wednesday, October 16, 13
Selection
Check box
Toggle button/butcon
Flip-flop
Radio
Combutcon
Lists•drop-down•select multiple items
!
!Wednesday, October 16, 13
Entry
Bounded
Spinners
Dials & sliders
Unbounded - validation?
!
!
Wednesday, October 16, 13
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 goalsimplementation
modelmental model
Wednesday, October 16, 13
ultimate EXCISE:
Making users change their mental models to fit the implementation model.
Wednesday, October 16, 13
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
1. Affordance
2. Navigation
3. Usability inspection
Wednesday, October 16, 13
1. Affordance
2. Navigation
3. Usability inspection
Heuristic evaluation
‣Apply principles‣Find issues
Wednesday, October 16, 13
Recommended