The UI Design Process

1
The UI Design Process

• User-Centered Design

This material has been developed by Georgia Tech
HCI faculty, and continues to evolve.
Contributors include Gregory Abowd, Jim Foley,
Diane Gromala, Elizabeth Mynatt, Jeff Pierce,
Colin Potts, Chris Shaw, John Stasko, and Bruce
Walker. Comments directed to foley_at_cc.gatech.edu
are encouraged. Permission is granted to use with
acknowledgement for non-profit purposes. Last
revision January 2004.
2
Design

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

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

• 1. Understand constraints/context
• 2. User analysis
• 2. Task analysis
• 4. Function allocation
• 5. Define usability criteria
• All of the above included in requirements
  definition and task analysis.

5
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

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

7
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)

8
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.

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

10
Waterfall vs Spiral Software Engineering Approach

• Is the 9-step UI design process more like
• Waterfall?
• Spiral?
• Justify your answer

11
Why is HCI Design Difficult?

• Difficult to deeply analyze human behavior
• May be too close to the domain
• Cost/features may be considered over good human
  factors
• Creativity is challenging!

12
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

13
Design Exercise

• Quickly brainstorm and detail a design idea
• Decide on key requirements, users, etc.
• Brainstorm ideas
• Detail on idea sketch, storyboard, etc.

14
Stinger kiosk system

• The stinger and trolley buses stop at a number of
  stops around campus. Design a kiosk for the bus
  stops. The kiosk should let users know when the
  next bus will arrive, and where the bus goes.
  The system should also support visitors to campus
  in deciding which bus to take to get to their
  desired destination.
• The users are students and staff of Georgia Tech.
  Another user group is visitors to campus who are
  not familiar with the bus system or the kiosk.
  Thus, the kiosk needs to be highly visible and
  easy to use, possibly by a number of people at
  once.
• Design the hardware and software of the kiosk,
  considering the functionality, usability and
  environmental constraints. Consider how the
  system will integrate into the existing ways
  people get around and use the bus system on
  campus.