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