Usability principles 2
-
Upload
dr-v-vorvoreanu -
Category
Technology
-
view
180 -
download
0
description
Transcript of Usability principles 2
![Page 1: Usability principles 2](https://reader033.fdocuments.net/reader033/viewer/2022051514/54b755504a79592b5b8b474f/html5/thumbnails/1.jpg)
1. Affordance
2. Navigation
3. Usability inspection
Wednesday, October 16, 13
![Page 2: Usability principles 2](https://reader033.fdocuments.net/reader033/viewer/2022051514/54b755504a79592b5b8b474f/html5/thumbnails/2.jpg)
1. Affordance
2. Navigation
3. Usability inspectionWednesday, October 16, 13
![Page 3: Usability principles 2](https://reader033.fdocuments.net/reader033/viewer/2022051514/54b755504a79592b5b8b474f/html5/thumbnails/3.jpg)
1. Affordance
2. Navigation
3. Usability inspection
Wednesday, October 16, 13
![Page 4: Usability principles 2](https://reader033.fdocuments.net/reader033/viewer/2022051514/54b755504a79592b5b8b474f/html5/thumbnails/4.jpg)
1. Affordance
2. Navigation
3. Usability inspection
Main principles you remember?
Important concepts: ‣Information scent‣Information architecture‣Mental models
Wednesday, October 16, 13
![Page 5: Usability principles 2](https://reader033.fdocuments.net/reader033/viewer/2022051514/54b755504a79592b5b8b474f/html5/thumbnails/5.jpg)
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
![Page 6: Usability principles 2](https://reader033.fdocuments.net/reader033/viewer/2022051514/54b755504a79592b5b8b474f/html5/thumbnails/6.jpg)
1. Affordance
2. Navigation
3. Usability inspection
Information*goal*
Information*scent*
Associations*
How$can$you$improve$
information$scent?$
Information scent
Wednesday, October 16, 13
![Page 7: Usability principles 2](https://reader033.fdocuments.net/reader033/viewer/2022051514/54b755504a79592b5b8b474f/html5/thumbnails/7.jpg)
1. Affordance
2. Navigation
3. Usability inspection
Information architecture
Wednesday, October 16, 13
![Page 8: Usability principles 2](https://reader033.fdocuments.net/reader033/viewer/2022051514/54b755504a79592b5b8b474f/html5/thumbnails/8.jpg)
1. Affordance
2. Navigation
3. Usability inspection
Information architecture
Wednesday, October 16, 13
![Page 9: Usability principles 2](https://reader033.fdocuments.net/reader033/viewer/2022051514/54b755504a79592b5b8b474f/html5/thumbnails/9.jpg)
1. Affordance
2. Navigation
3. Usability inspection
Mental models
http://support.tivo.com//
Wednesday, October 16, 13
![Page 10: Usability principles 2](https://reader033.fdocuments.net/reader033/viewer/2022051514/54b755504a79592b5b8b474f/html5/thumbnails/10.jpg)
1. Affordance
2. Navigation
3. Usability inspection
Mental models
Wednesday, October 16, 13
![Page 11: Usability principles 2](https://reader033.fdocuments.net/reader033/viewer/2022051514/54b755504a79592b5b8b474f/html5/thumbnails/11.jpg)
1. Affordance
2. Navigation
3. Usability inspection
Mental models
Wednesday, October 16, 13
![Page 12: Usability principles 2](https://reader033.fdocuments.net/reader033/viewer/2022051514/54b755504a79592b5b8b474f/html5/thumbnails/12.jpg)
1. Affordance
2. Navigation
3. Usability inspection
Mental models
http://support.tivo.com//
Wednesday, October 16, 13
![Page 13: Usability principles 2](https://reader033.fdocuments.net/reader033/viewer/2022051514/54b755504a79592b5b8b474f/html5/thumbnails/13.jpg)
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
![Page 14: Usability principles 2](https://reader033.fdocuments.net/reader033/viewer/2022051514/54b755504a79592b5b8b474f/html5/thumbnails/14.jpg)
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
![Page 15: Usability principles 2](https://reader033.fdocuments.net/reader033/viewer/2022051514/54b755504a79592b5b8b474f/html5/thumbnails/15.jpg)
1. Affordance
2. Navigation
3. Usability inspection
Information architecture
Card Sorting
Wednesday, October 16, 13
![Page 16: Usability principles 2](https://reader033.fdocuments.net/reader033/viewer/2022051514/54b755504a79592b5b8b474f/html5/thumbnails/16.jpg)
1. Affordance
2. Navigation
3. Usability inspection
Wednesday, October 16, 13
![Page 17: Usability principles 2](https://reader033.fdocuments.net/reader033/viewer/2022051514/54b755504a79592b5b8b474f/html5/thumbnails/17.jpg)
1. Affordance
2. Navigation
3. Usability inspection
Heuristic evaluation
Interface grammar?
‣Apply principles‣Find issues
Wednesday, October 16, 13
![Page 18: Usability principles 2](https://reader033.fdocuments.net/reader033/viewer/2022051514/54b755504a79592b5b8b474f/html5/thumbnails/18.jpg)
GUI elementsmenus
controls =Language of the interface
Do you speak interface?
Wednesday, October 16, 13
![Page 19: Usability principles 2](https://reader033.fdocuments.net/reader033/viewer/2022051514/54b755504a79592b5b8b474f/html5/thumbnails/19.jpg)
Controls
Wednesday, October 16, 13
![Page 20: Usability principles 2](https://reader033.fdocuments.net/reader033/viewer/2022051514/54b755504a79592b5b8b474f/html5/thumbnails/20.jpg)
Wednesday, October 16, 13
![Page 21: Usability principles 2](https://reader033.fdocuments.net/reader033/viewer/2022051514/54b755504a79592b5b8b474f/html5/thumbnails/21.jpg)
Wednesday, October 16, 13
![Page 22: Usability principles 2](https://reader033.fdocuments.net/reader033/viewer/2022051514/54b755504a79592b5b8b474f/html5/thumbnails/22.jpg)
Grammar & Interface Design
Verb
Action
Noun
Object
Wednesday, October 16, 13
![Page 23: Usability principles 2](https://reader033.fdocuments.net/reader033/viewer/2022051514/54b755504a79592b5b8b474f/html5/thumbnails/23.jpg)
SelectionImperative
4 Types of Controls
Entry Display
Wednesday, October 16, 13
![Page 24: Usability principles 2](https://reader033.fdocuments.net/reader033/viewer/2022051514/54b755504a79592b5b8b474f/html5/thumbnails/24.jpg)
Imperative
Button
Butcon (button/icon)
Hyperlinks
Wednesday, October 16, 13
![Page 25: Usability principles 2](https://reader033.fdocuments.net/reader033/viewer/2022051514/54b755504a79592b5b8b474f/html5/thumbnails/25.jpg)
Do#it!# Do#it!# Do#it!#A B C
Do it!D
Wednesday, October 16, 13
![Page 26: Usability principles 2](https://reader033.fdocuments.net/reader033/viewer/2022051514/54b755504a79592b5b8b474f/html5/thumbnails/26.jpg)
Do#it!# Do#it!# Do#it!#A B C
Do it!D
Button design & behavior
- button look- mouseover behaviors
Wednesday, October 16, 13
![Page 27: Usability principles 2](https://reader033.fdocuments.net/reader033/viewer/2022051514/54b755504a79592b5b8b474f/html5/thumbnails/27.jpg)
Selection
Check box
Toggle button/butcon
Flip-flop
Radio
Combutcon
Lists•drop-down•select multiple items
!
!Wednesday, October 16, 13
![Page 28: Usability principles 2](https://reader033.fdocuments.net/reader033/viewer/2022051514/54b755504a79592b5b8b474f/html5/thumbnails/28.jpg)
☑vs.
Wednesday, October 16, 13
![Page 29: Usability principles 2](https://reader033.fdocuments.net/reader033/viewer/2022051514/54b755504a79592b5b8b474f/html5/thumbnails/29.jpg)
flip-flop buttons :(
vs.
Wednesday, October 16, 13
![Page 30: Usability principles 2](https://reader033.fdocuments.net/reader033/viewer/2022051514/54b755504a79592b5b8b474f/html5/thumbnails/30.jpg)
Selection Imperativethen:
1 2
or
Selection Imperative+
simultaneous
Wednesday, October 16, 13
![Page 31: Usability principles 2](https://reader033.fdocuments.net/reader033/viewer/2022051514/54b755504a79592b5b8b474f/html5/thumbnails/31.jpg)
Selection Imperativethen:
Highlight likely option
:(
:)
Wednesday, October 16, 13
![Page 32: Usability principles 2](https://reader033.fdocuments.net/reader033/viewer/2022051514/54b755504a79592b5b8b474f/html5/thumbnails/32.jpg)
ImperativeSelection +
Wednesday, October 16, 13
![Page 33: Usability principles 2](https://reader033.fdocuments.net/reader033/viewer/2022051514/54b755504a79592b5b8b474f/html5/thumbnails/33.jpg)
Selection
Check box
Toggle button/butcon
Flip-flop
Radio
Combutcon
Lists•drop-down•select multiple items
!
!Wednesday, October 16, 13
![Page 34: Usability principles 2](https://reader033.fdocuments.net/reader033/viewer/2022051514/54b755504a79592b5b8b474f/html5/thumbnails/34.jpg)
Entry
Bounded
Spinners
Dials & sliders
Unbounded - validation?
!
!
Wednesday, October 16, 13
![Page 35: Usability principles 2](https://reader033.fdocuments.net/reader033/viewer/2022051514/54b755504a79592b5b8b474f/html5/thumbnails/35.jpg)
bounded entry
Wednesday, October 16, 13
![Page 36: Usability principles 2](https://reader033.fdocuments.net/reader033/viewer/2022051514/54b755504a79592b5b8b474f/html5/thumbnails/36.jpg)
Display
Scrollbars• thumb
Splitters
Wednesday, October 16, 13
![Page 37: Usability principles 2](https://reader033.fdocuments.net/reader033/viewer/2022051514/54b755504a79592b5b8b474f/html5/thumbnails/37.jpg)
OS X Lion
scrollbar design
Wednesday, October 16, 13
![Page 38: Usability principles 2](https://reader033.fdocuments.net/reader033/viewer/2022051514/54b755504a79592b5b8b474f/html5/thumbnails/38.jpg)
iPhone: to scrollbar or NOT?
Wednesday, October 16, 13
![Page 39: Usability principles 2](https://reader033.fdocuments.net/reader033/viewer/2022051514/54b755504a79592b5b8b474f/html5/thumbnails/39.jpg)
EXCISE
Wednesday, October 16, 13
![Page 40: Usability principles 2](https://reader033.fdocuments.net/reader033/viewer/2022051514/54b755504a79592b5b8b474f/html5/thumbnails/40.jpg)
vs.
needs goalsimplementation
modelmental model
Wednesday, October 16, 13
![Page 41: Usability principles 2](https://reader033.fdocuments.net/reader033/viewer/2022051514/54b755504a79592b5b8b474f/html5/thumbnails/41.jpg)
ultimate EXCISE:
Making users change their mental models to fit the implementation model.
Wednesday, October 16, 13
![Page 42: Usability principles 2](https://reader033.fdocuments.net/reader033/viewer/2022051514/54b755504a79592b5b8b474f/html5/thumbnails/42.jpg)
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
![Page 43: Usability principles 2](https://reader033.fdocuments.net/reader033/viewer/2022051514/54b755504a79592b5b8b474f/html5/thumbnails/43.jpg)
1. Affordance
2. Navigation
3. Usability inspection
Wednesday, October 16, 13
![Page 44: Usability principles 2](https://reader033.fdocuments.net/reader033/viewer/2022051514/54b755504a79592b5b8b474f/html5/thumbnails/44.jpg)
1. Affordance
2. Navigation
3. Usability inspection
Heuristic evaluation
‣Apply principles‣Find issues
Wednesday, October 16, 13