The UI Design Process

1
The UI Design Process

• User-Centered Design

2
The Tao of UCD
DESIGN
IMPLEMENT
USE EVALUATE
3
User-Centered Design Process

• 1. Understand constraints/context
• 2. User analysis
• 2. Task analysis
• 4. Function allocation
• 5. Define usability criteria

4
User-Centered Design (contd)

• 6. Design UI - including help and documentation
• Consider alternatives!
• Apply formative evaluation techniques iterate
• 7. Build test prototypes
• Apply formative / summative evaluation techniques
  iterate
• 8. Build test the real application
• Apply summative evaluation techniques iterate
• 9. Release, update and maintain
• Apply summative evaluation techniques iterate

5
Design Implications

• At each stage, consider how the details of your
  discovery process affect your design

6
1. Define the Context

• Context the type of uses, applications
• Life critical systems, applications
• Industrial, commercial, military, scientific,
  consumer
• Office, home, entertainment
• Exploratory, creative, cooperative
• General functionality of system
• Pragmatics
• Costs and schedule
• Technical constraints - equipment, OS, memory,
  disk
• Customer - makes the buying decision (not the
  same as the user)
• Design Impacts?

7
2. Describe the User

• Physical attributes(age, gender, size, reach,
  visual angles, etc)
• Physical work places(table height, sound levels,
  lighting, software version)
• Perceptual abilities(hearing, vision, heat
  sensitivity)
• Cognitive abilities(memory span, reading level,
  musical training, math)
• Personality and social traits(likes, dislikes,
  preferences, patience)
• Cultural and international diversity(languages,
  dialog box flow, symbols)
• Special populations, (dis)abilities

8
3. Task Analysis

• Talk to and observe users (NOT customers) doing
  what they do
• List each and every TASK
• Break tasks down into STEPS
• ABSTRACT into standard tasks(monitor, diagnose,
  predict, control, inspect, transmit, receive,
  decide, calculate, store, choose, operate, etc.)

9
User Task Analysis Techniques

• Observation
• Interview
• Focus groups
• Look at competitive products
• Questionnaires
• Ethnography - learn by immersion/doing

10
4. Function Allocation

• Consider the whole system!
• Decide who or what is best suited to perform each
  task (or each step)
• e.g., system remembers login id, and reminds the
  user, but user remembers the password
• Base this on knowledge of system hardware,
  software, human users abilities, culture,
  communications protocols, privacy, etc.
• Allocation constraints Effectiveness
  Cognitive/affective Cost Mandatory
• Dont forget the design implications!

11
5. Define Usability Criteria

• Task X should take less than Z seconds
• New user should be able to edit document within
  30 minutes

12
6. Design the UI

• Summary of the components and their basic design
• Cross-check with any Requirements Documents
  Human Factors refs Hardware specs Budgets Laws
  (ADA) etc.
• Ensure that the system will support the design
  and comply with constraints
• (Verification and Validation, in the language of
  software engineering)

13
HCI Design

• Design is driven by requirements
• What the artifact is for
• Not how it is to be implemented
• Design represents the artifact
• Storyboards or screen sketches
• Task flow diagrams
• Executable prototypes
• Representations should always simplify

14
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 tasks need explaining
• Simple tasks should not
• Easy tasks are easy to do, complex tasks are
  doable

15
Get Informal Feedback ASAP!

• Present prototype to users
• Do a quick questionnaire
• Watch (quietly) as user struggles with your
  terrible design

16
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. Not your ego,
  not your tean/s ego.

17
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!

18
Iterate on Design

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

19
Once More, with Feeling

• Abandon bad ideas!

20
Formative Evaluation Techniques

• Use while forming the design
• Apply design principles - heuristic evaluation
• Consistency, dont set the user up, etc etc
• Apply design rules / standards / style guides
• Java look and feel, Mac look and feel, etc
• Cognitive walkthrough
• Key-stroke, NGOMSL analyses

21
7. Build Test Prototypes

• Informed Brainstorming
• RAPIDLY mock up the user interfaces for testing
  with real people
• Pen and paper or whiteboard to start
• Iterate, iterate, iterate!!
• Increasingly functional closer to final reality
• List audio visual details at same levels of
  detail in the prototypes
• (i.e. dont forget either of them)

22
7. Prototyping

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

23
7. Usability Testing

• Get real (or representative) users to do what
  they do, using the prototypes
• Subjective and objective feedback. Sometimes
  users want features that actually yield poor
  performance
• Video tape, lots of notes
• Be rigorous wherever possible (stats, etc.)
• Feedback into the iterative evaluation redesign
  of the system

24
7. Summative Evaluation Techniques

• Empirical / laboratory evaluation
• Discount usability - can be very effective, using
  fewer subjects, more rapid results
• Expert review
• Field study
• Client review

25
8. Build Test the Real App.

• Repeat cycles of testing and reworking the
  system, subject to cost/time constraints
• Focus on Functionality First !
• Plan for several versions during development

26
9. Release, Update Maintain

• In-the-field feedback, telemetry, user data,
  logs, surveys, etc.
• Analyze and make iterative redesign/test
  recommendations
• Updates and maintenance plan as part of the
  design!
• (design it so it can be fixed or updated)

27
UCD Nine-Step Overview

• 1. Understand constraints/context
• 2. User analysis
• 2. Task analysis
• 4. Function allocation
• 5. Define usability criteria
• 6. Design UI - including help and documentation
• 7. Build test prototypes
• 8. Build test the real application
• 9. Release, update and maintain

Design Implications?!!
28
UCD Focusing Your Efforts

• There are real-world constraints
• Cutting out steps is not the way to economize!
• Optimize the efficiency of each step
• In course Focus on the context and the user, to
  get the most value for the time spent

29
More on Design Ideation

• Quotable quotes
• Whe is HCI design so hard?
• Ideation (aka creativity)

30
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!!

31
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

32
Design

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

33
Why is HCI 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

34
Why is HCI Design Difficult?

• 2. Marketplace pressures
• Time is money
• Adding functionality (complexity) is easier than
  it was 10 years ago
• Adding controls/feedback is expensive
• Design usually requires several iterations before
  success
• Plenty of competitive general-purpose software

35
Why is HCI Design Difficult?

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

36
Why is HCI Design Difficult?

• Difficult to deeply analyze human behavior
• May be too close to the domain
• Multiple clients
• Co-evolution makes it even harder.

37
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
• ...
• metaphor

38
Idea Creation
39
Idea Creation

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

40
Idea Creation Methods

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

41
Idea Creation Methods

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

42
Idea Creation Methods

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