Feb 3, 2011 IAT 334 1

IAT 334Interface Design

User Centered DesignMetaphorModels Practice______________________________________________________________________________________

SCHOOL OF INTERACTIVE ARTS + TECHNOLOGY [SIAT] | WWW.SIAT.SFU.CA

Feb 3, 2011 IAT 334 2

Agendag User Centered Design -- Overall Processg Design

– Metaphors– Mental Models– Idea generation

g Design principlesg Displaying your designs

– Storyboards– Lo-Fi– Wizard of Oz– Visual Basic, Flash, etc

Feb 3, 2011 IAT 334 3

User-Centered Designg User-centered design process

– Analysis of user needs– Prototype– Informal feedback– Iterate on design– Final application– Formal feedback

Feb 3, 2011 IAT 334 4

Analysis of User Needsg Techniques:

– Surveys– Card-sorting tasks– Interviews– Focus groups

• Look at competing products– Ethnography

• Participant observation

Feb 3, 2011 IAT 334 5

Prototypingg Storyboardsg Paper simulations of applicationg Wizard of Oz experimentg Prototyping toolsg Cheap!

Feb 3, 2011 IAT 334 6

Informal Feedbackg Present prototype to usersg Do a quick questionnaireg Observe the user struggle with your

lousy design

Feb 3, 2011 IAT 334 7

Iterate on Designg Redesign system

– in light of initial user impressions– pay attention to common complaints

g Be prepared to abandon bad ideas!!

g It’s just an idea, not a measure of your worth!

Feb 3, 2011 IAT 334 8

Iterate on Designg Let me reiterate…g Be prepared to...

Abandon bad ideas!!

g It’s just an idea, not a measure of your worth!

Feb 3, 2011 IAT 334 9

Abandon bad ideas!

Feb 3, 2011 IAT 334 10

Final Stagesg Implement the productg Get formal feedback

– You now have something concrete to show

– Performance analysisg Testing

– Look for bugsg Attention to detail

– Good UI work is really picky

Feb 3, 2011 IAT 334 11

Design fixationg Keep an open mindg Don’t get wedded to an ideag Don’t let design review become

about whose idea wins

g Honor the truth. People come first.

Feb 3, 2011 IAT 334 12

Quotable Quotes: Practiceg “The secret to having good ideas

is to have many ideas” -- Bill Buxton

g “You’ve got 100,000 bad drawings inside you. You’re here at art school to get them out.” -- Chuck Jones

g Design takes practice!!

Feb 3, 2011 IAT 334 13

Quotable Quotesg “Where principle is put to work, not as a recipe or as a formula, there will always be style” -- Le Corbusier

g “Every curve and line has to have real meaning; it can’t be arbitrary.”

-- Frank Lloyd Wright

g Just because you can, doesn’t mean you should– Chris Shaw

Design

Feb 3, 2011 IAT 334 14

Feb 3, 2011 IAT 334 15

Designg How do we come up with new (good)

designs for interactive systems?g Why is it so difficult?

Feb 3, 2011 IAT 334 16

Why is Design Difficult?g 1. Increasing complexity/pressure

– Number of things to control has risen dramatically

– Errors are increasingly serious/costly

Feb 3, 2011 IAT 334 17

Why Difficult?g 2. Marketplace pressures

– Time is money– Adding functionality (complexity) is now

easy and cheap– Adding controls/feedback is expensive– Design usually requires several

iterations before success

Feb 3, 2011 IAT 334 18

Why Difficult?

3. People often consider cost and appearance over human factors design

4. Creativity is challenging

5. The social expectations of design are getting more well-informed

Feb 3, 2011 IAT 334 19

Good & Bad Designs

g Examples?

Feb 3, 2011 IAT 334 20

Good Designg Invites person to use it properly

– Ball -- throwable– Doorknob -- graspable

g Visual affordance – The perceived and actual fundamental

properties of an object that help convey how it should be used -- (Don Norman)

– Complex things need explaining– Simple things should not

Feb 3, 2011 IAT 334 21

Idea Creation

g Ideas come from– Imagination– Analogy– Observation of current practice– Observation of current systems

g Borrow from other fields– Animation– Theatre– Information displays– Architecture– ...

How do we create and develop new interface ideas and designs?

Feb 3, 2011 IAT 334 22

Interface Metaphorsg Metaphor - Application of name or

descriptive term to another object which is not literally applicable

– Use: Natural transfer - apply existing knowledge to new, abstract tasks

– Problem: May introduce incorrect mental model

Feb 3, 2011 IAT 334 23

Metaphor Creation g Prepare

– What functions are needed– What are users’ problems?

g Generate– Use metaphor that matches users’

conceptual tasks– Given choice, choose metaphor closest

to way system really works– Ensure emotional tone is appropriate to

users

Feb 3, 2011 IAT 334 24

Metaphor Creationg Evaluate

g Evolve

Leads to user’s mental models..

Feb 3, 2011 IAT 334 25

Mental Modelsg What models of the world are the

users using?g Two Classes:g Functional model

– “Press the accelerator once, then turn the key”

g Structural model– OK, why do we do that?

Feb 3, 2011 IAT 334 26

Another example...g Functional model

– “Go north on King George, Cross the Pattullo, Turn left at 10th Ave, Turn right at Kingsway, go 4.5km”

g Structural model– What location??

Feb 3, 2011 IAT 334 27

Another example...g Functional model

– “Go north on King George, Cross the Pattullo, Turn left at 10th Ave, Turn right at Kingsway, go 4.5km”

g Structural model– What location??

Feb 3, 2011 IAT 334 28

Idea Creationg Methods for creating and developing

interface ideas

– Turn off your natural critique mechanism!

– ?

Feb 3, 2011 IAT 334 29

Idea Creation Methodsg 1. Consider new use for object

g 2. Adapt object to be like something else

g 3. Modify object for a new purpose

Feb 3, 2011 IAT 334 30

Idea Creation Methodsg 4. Magnify - add to object

g 5. Minimize - subtract from object

g 6. Substitute something similar

Feb 3, 2011 IAT 334 31

Idea Creation Methodsg 7. Rearrange aspects of object

g 8. Change the point of view

g 9. Combine data into an ensemble

Feb 3, 2011 IAT 334 32

Design Guidelines/Principlesg General guidelines (rules of thumb)

to help create more usable systems

g Can be subtle, even contradictory

Feb 3, 2011 IAT 334 33

Guidelines for Designg 1. Provide a good conceptual model

– User has mental model of how things work

– Build design that allows user to predict effects of actions

g 2. Make things visible– Visible affordances, mappings,

constraints– Remind person of what can be done and

how to do it

Feb 3, 2011 IAT 334 34

Design Principlesg 1. Use simple and natural dialog in

user’s language– Match user’s task in a natural way– Avoid jargon, techno-speak

– Present exactly info that user needs• Less is more!

Feb 3, 2011 IAT 334 35

Design Principlesg Here are 10 more detailed principles

to follow about what to design and why

Feb 3, 2011 IAT 334 36

Design Principlesg 2. Strive for consistency

– Sequences, actions, commands, layout, terminology

– Makes more predictable– Dialog boxes all having same “closure”

options

Feb 3, 2011 IAT 334 37

Design Principlesg 3. Provide informative feedback

– Continuously inform user about what is occurring

– Most important on frequent, substantive actions• % in file

– How to deal with delays?• Special cursors• % Done graphs

Feb 3, 2011 IAT 334 38

Design Principlesg 4. Minimize user’s memory load

– Recognition is better than recall• Make visible!

– Describe required input format, include example and default• Date: _ _ - _ _ - _ _ (DD-MM-YY)

– Use small # of generally applicable cmds

Feb 3, 2011 IAT 334 39

Design Principlesg 5. Permit easy reversal of actions

– Undo!

– Reduces anxiety, encourages experimentation

Feb 3, 2011 IAT 334 40

Design Principlesg 6. Provide clearly marked exits

– Don’t want the user to feel trapped– Examples

• Cancel button on dialogs• Quit any time• Interrupt/resume on lengthy operations

Feb 3, 2011 IAT 334 41

Design Principlesg 7. Provide shortcuts

– Enable frequent users to perform often-used operations quickly• Keyboard & mouse

– Abbreviations– Menu shortcuts– Function keys– Command completion– Double click vs. menu selection

• Navigation between windows/forms• Reuse

– Provide a history system

Feb 3, 2011 IAT 334 42

Design Principlesg 8. Support internal locus of control

– Put user in charge, not computer– Can be major source of anxiety

Feb 3, 2011 IAT 334 43

Design Principlesg 9. Handle errors smoothly and

positively– “That Filename already exists”vs.– “Rename failed”

g 10. Provide useful help and documentation