Design

1
Design

• User Centered Design
• Metaphor
• Models
• Practice

2
Agenda

• User Centered Design -- Overall Process
• Challenges
• Metaphors
• Mental Models
• Idea generation
• Design principles

3
User-Centered Design

• User-centered design process
• Analysis of user needs
• Prototype
• Informal feedback
• Iterate on design
• Final application
• Formal feedback

4
Analysis of User Needs

• Techniques
• Surveys
• Card-sorting tasks
• Interviews
• Focus groups
• Look at competing products
• Ethnography
• Participant observation

5
Prototyping

• Storyboards
• Paper simulations of application
• Wizard of Oz experiment
• Prototyping tools
• Cheap!

6
Informal Feedback

• Present prototype to users
• Do a quick questionnaire
• Observe the user struggle with your lousy design

7
Iterate on Design

• Redesign system
• in light of initial user impressions
• pay attention to common complaints
• Be prepared to abandon bad ideas!!
• Its just an idea, not a measure of your worth!

8
Iterate on Design

• Let me reiterate
• Be prepared to...
• Abandon bad ideas!!
• Its just an idea, not a measure of your worth!

9

• Abandon bad ideas!

10
Final Stages

• Implement the product
• Get formal feedback
• You now have something concrete to show
• Performance analysis
• Testing
• Look for bugs
• Attention to detail
• Good UI work is really picky

11
Design fixation

• Keep an open mind
• Dont get wedded to an idea
• Dont let design review become about whose idea
  wins
• Honor the truth. People come first.

12
Quotable Quotes Practice

• The secret to having good ideas is to have many
  ideas -- Bill Buxton
• Youve got 100,000 bad drawings inside you.
  Youre here at art school to get them out. --
  Chuck Jones
• Design takes practice!!

13
Quotable Quotes

• Where principle is put to work, not as a
  recipe or as a formula, there will always be
  style -- Le Corbusier
• Every curve and line has to have real meaning
  it cant be arbitrary. -- Frank Lloyd
  Wright

14
Design

• How do we come up with new (good) designs for
  interactive systems?
• Why is it so difficult?

15
Why is Design Difficult?

• 1. Increasing complexity/pressure
• Number of things to control has risen
  dramatically
• Display is increasingly symbolic/artificial
• Feedback is more complex and subtle
• Errors are increasingly serious/costly

16
Why Difficult?

• 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

17
Why Difficult?

• 3. People often consider cost and appearance over
  human factors design
• 4. Creativity is challenging

18
Good Bad Designs

• Examples

19
Good Design

• Invites person to use it properly
• Ball -- throwable
• Doorknob -- graspable
• 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

20
Guidelines for Design

• 1. Provide a good conceptual model
• User has mental model of how things work
• Build design that allows user to predict effects
  of actions
• 2. Make things visible
• Visible affordances, mappings, constraints
• Remind person of what can be done and how to do it

21
Idea Creation
How do we create and develop new interface ideas
and designs?

• Ideas come from
• Imagination
• Analogy
• Observation of current practice
• Observation of current systems

• Borrow from other fields
• Animation
• Theatre
• Information displays
• Architecture
• ...

22
Interface Metaphors

• 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

23
Metaphor Creation (1)

• Prepare
• What functions are needed
• What are users problems?

24
Metaphor Creation (2)

• 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

25
Metaphor Creation (3)

• Evaluate
• Evolve

26
Mental Models

• Mental models are not always right
• Two Classes
• Functional model
• Press the accelerator once, then turn the key
• Structural model
• OK, why do we do that?

27
Mental Models

• Mental models are not always right
• Two Classes
• Functional model
• Press the accelerator once, then turn the key
• Structural model
• Press the accelerator to engage the automatic
  choke on a carburetor

28
Another example...

• Functional model
• Go east on Ponce, turn left just after Harrys
  in a Hurry, then go to the third set of lights
• Structural model
• What location??

29
Another example...

• Functional model
• Go east on Ponce, turn left just after Harrys
  in a Hurry, then go to the third set of lights
• Structural model
• Go to Virginia Highland (with map)

30
Idea Creation

• Methods for creating and developing interface
  ideas
• Turn off your natural critique mechanism!
• ?

31
Idea Creation Methods

• 1. Consider new use for object
• 2. Adapt object to be like something else
• 3. Modify object for a new purpose

32
Idea Creation Methods

• 4. Magnify - add to object
• 5. Minimize - subtract from object
• 6. Substitute something similar

33
Idea Creation Methods

• 7. Rearrange aspects of object
• 8. Change the point of view
• 9. Combine data into an ensemble

34
Design Guidelines/Principles

• General guidelines (rules of thumb) to help
  create more usable systems
• Can be subtle, even contradictory

35
Design Principles

• 1. Use simple and natural dialog in users
  language
• Match users task in a natural way
• Avoid jargon, techno-speak
• Present exactly info that user needs
• Less is more!

36
Design Principles

• 2. Strive for consistency
• Sequences, actions, commands, layout, terminology
• Makes more predictable
• Dialog boxes all having same closure options

37
Design Principles

• 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

38
Design Principles

• 4. Minimize users 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

39
Design Principles

• 5. Permit easy reversal of actions
• Undo!
• Reduces anxiety, encourages experimentation

40
Design Principles

• 6. Provide clearly marked exits
• Dont want the user to feel trapped
• Examples

41
Design Principles

• 7. Provide shortcuts
• Enable frequent users to perform often-used
  operations quickly
• Keyboard mouse
• Navigation between windows/forms
• Reuse

42
Design Principles

• 8. Support internal locus of control
• Put user in charge, not computer
• Can be major source of anxiety

43
Design Principles

• 9. Handle errors smoothly and positively
• 10. Provide useful help and documentation
• (More to come later in course on these two)

44
Design Workshop

• Teams of 5
• Design a Thermostat
• 1 Temperature per hour