HCI

1
HCI system design
CS/PSYC 4750 Spring, 2001 Objectives HCI
practices in the lifecycle
2
Contents

• Generative evaluative processes
• The waterfall (sequential) model
• Iteration and prototyping
• User-centered system design the 6750 Way

3
Methods for applying HCI

• Generative
• strategies to build a better interface
• Evaluative
• assessing existing interface

4
Generative techniques

• Apply principles
• Dont assume user is right-handed
• Build prototypes
• Formative evaluation on early versions
• Apply design rules/standards
• E.g. Java LF, Mac UI guidelines
• Do usability specifications
• The XYZ dialog takes lt 5 sec.

5
Design

• Design is driven by requirements
• What the artifact is for
• Not how it is to be implemented
• Design represents the artifact
• For interactions these include
• Screen sketches or storyboards
• Flow diagrams showing task structure
• Executable prototypes
• Representations (should) always simplify

6
Design processes

• The waterfall model
• Sequence of what...how steps from spec. to
  system
• Customer is not necessarily user
• Prototyping incremental development
• Design by constructing executable models
• Should the prototype become the system?
• Trade-off between usability and reliability
• User-centered system design (UCSD)
• Design system around definition of user tasks
• Continual feedback from users

7
WaterfallLifeCycle
8
WaterfallLifeCycle
Requirements specification designer customer
try to capture what system is expected to
provide can be expressed in natural
language or more precise languages (cf. Task
Analysis)
9
WaterfallLifeCycle
Architectural design High-level description of
how system will provide required
services Factor system into major components
their interactions Must satisfy both
functional non-functional requirements
10
WaterfallLifeCycle
Detailed design Refinement of components
interrelations to identify modules to be
implemented separately Refinement is governed
by non-functional requirements
11
WaterfallLifeCycle
Coding Unit Testing Implementing
testing individual modules in an executable
programming language
12
WaterfallLifeCycle
Integration testing Combining modules to
produce components from architectural
description
13
WaterfallLifeCycle
Operation Maintenance Product delivered to
customer Any problems/enhancements provided by
designer while product is still live The
largest part of the life-cycle
14
Why waterfall fails

• Historical roots in contracting
• Batch fallacy
• Iteration needed because of the formality gap

15
IteratedWaterfallforInteractiveSystems
Cannot assume a simple linear sequence But
design inertia (early bad decisions stay)
16
Prototyping Definitions Techniques

• Prototype Any mockup or model you can play
  with
• Too broad. Too random. Paper mockups meet
  definition.
• Prototype A computer-supported presentation
• Not interactive enough. Includes Powerpoint demo.
• Prototype An interactive UI façade
• Functions are canned. E.g. GUI-builder UI
  links.
• Prototype Rapidly developed implementation
• UI is high-fidelity, but underlying functions may
  be approximate or unreliable. E.g. Early version
  or throw-away program.

17
Prototyping to Support Design

• Prototyping for formative evaluation
• Early low-fidelity prototype or façade useful for
  evaluating task support / UI
• Still time to re-think major components of design
• Platform for opinion-seeking, protocol analysis,
  heuristic evaluation, etc.

• Prototyping for summative evaluation
• Late, high-fidelity prototype useful for
  evaluating UI features like layout
• Still time for local changes
• Platform for rigorous experimentation too

18
Software Prototyping Tools

• Tools supporting walkthrough display linkages
• Powerpoint, Director, etc.
• Tools for rapid implementation
• HyperCard, HTML/Javascript, Tcl/Tk etc.
• GUI Builders
• IDE UI studio generators for 3GLs (e.g. C)
• General programming languages
• Visual Basic, C, Java,
• Application-directed 4GLs
• FoxPro, Access, Paradox, Powerbuilder, etc.
• What about prototyping the information?

19
Prototyping Warnings

• Design inertia
• Early bad decisions stay bad
• Diagnosing real usability problems in prototypes,
  not just the symptoms
• Management issues
• time
• planning
• non-functional features
• contracts

20
User-centered design example methods

• 1. Understand the situation
• Soft Systems Analysis (Checkland)
• Identifying key factors (Preece)
• Contextual Inquiry (Beyer Holzblatt)
• 2. Specify the requirements
• Data flow diagramming (Structured Analysis)
• Use case modeling (Object-Oriented Analysis)
• 3. Analyze user tasks
• Hierarchical task analysis (e.g. GOMS)
• 4. Propose interaction techniques
• Storyboards
• Executable prototypes

21
The 6750 Process Model

• (1) Understand the users activity problems
• (2) Represent the users activity
• (3) Propose solution
• (4) Do formative evaln. of solution revise
• (5) Implement revised solution
• (6) Do summative evaln. of solution revise

• - Look at what happens. Ask is questions
• - Construct task models
• - Create rough storyboard
• - Walk through scenarios of use
• - Construct mockup/prototype
• - Perform usability experiments and trials