FP511 HUMAN COMPUTER

INTERACTION

Chapter 2 : The Design Process

 Learning Outcome :

 Define Iterative Design

 Explain the Design Rationale
 What is Iterative Design?

 First design will NOT be perfect

 Iterative design is a design methodology based on a cyclic

process of prototyping, testing, analyzing, and refining a product
or process. Based on the results of testing the most recent
iteration of a design, changes and refinements are made.
 What is Prototype?

 A prototype is an early sample, model or release of a

product built to test a concept or process or to act as a
thing to be replicated or learned from.

 Production of an intermediary product to be used as a

basis for testing

 Simulate or animate some features of intended system

 What is Prototype?

In interaction design it can be (among other things):

a series of screen sketches

a storyboard, i.e. a cartoon-like series of scenes
a Powerpoint slide show
a video simulating the use of a system
a lump of wood (e.g. PalmPilot)
a cardboard mock-up
a piece of software with limited functionality written in the target
language or in another language

Foam prototyping
 Why Prototype?

 Get feedback on our design faster

 saves money

 Experiment with alternative designs

 Fix problems before code is written

 Keep the design centered on the user

 Prototype Benefit

•Improved system usability

•Closer match to the system needed
•Improved design quality
•Improved maintainability
•Reduced overall development effort
 What to Prototype?

•Work flow, task design

.
•Screen layouts and information display

•Difficult, controversial, critical areas

Type of Prototype?

•Throw away prototyping

•Evolutionary prototyping

•Operational prototyping
 Fidelity of prototype

Fidelity refers to the level of detail

High
. Fidelity

Close to final product

Electronically faithful
Uses similar media

Low Fidelity
Basis for final product
Proof of concept
Use of low cost, non-electronic media
 Low Fidelity Prototyping

• Uses a medium which is unlike the final medium, e.g. paper,

cardboard

• Is quick, cheap and easily changed

• Examples:
sketches of screens, task sequences, etc
‘Post-it’ notes
storyboards
paper prototyping
‘Wizard-of-Oz’
 Sketching

• Sketching is important to low-fidelity prototyping

• Don’t be inhibited about drawing ability. Practice simple
symbols
 Card-based prototypes

• Index cards (3 X 5 inches)

• Each card represents one screen or part of screen
• Often used in website development
 Storyboards

•Often used with scenarios, bringing more detail, and a chance

to role play

•It is a series of sketches showing how a user might progress

through a task using the device
 Paper Prototyping

The home page

Pulldow
n menu
 Paper Prototyping

A second-level page
 Paper Prototyping

Another second-level page

Foam Prototyping
Foam Prototyping
 High Fidelity Prototyping

• Uses materials that you would expect to be in the final

product.
• Prototype looks more like the final system than a low-
fidelity version.
• For a high-fidelity software prototype common
environments include Macromedia Director, Visual Basic,
and Smalltalk.
 High Fidelity Prototyping

 Web
 FrontPage, GoLive, Dreamweaver, Denim…
 Screen mockups
 Illustrator, Photoshop, PowerPoint,….
 Clickthroughs
 Flash, PowerPoint,…
 Graphic interface builders
 Visual Basic, Visual C#, …
 Smalltalk, Lisp,…
 Flash, Director,…
 Graphic toolkits
 Java JFC/Swing, TCL/TK, Prefuse,…
 What is Design Rationale?

Rationale has to do with logical explanations and reasons

Discussions, debates, negotiations

Reasons for features

Reasons against features

Weighing of tradeoffs
 What is Design Rationale?

The information that explains why a computer system is the way

it is, including its structural or architectural description and its
functional or behavioural description

Benefit of Design Rationale

• communication throughout life cycle

• reuse of design knowledge across products
• enforces design discipline
• presents arguments for design trade-offs
• organizes potentially large design space
• capturing contextual information
 Type of Design Rationale

Types of DR:

Process-oriented
preserves order of deliberation and decision-making

Structure-oriented
emphasizes post hoc structuring of considered design alternatives

Psychological design rationale

Psychological design rationale proceeds by having the designers of
the system record what they believe are the tasks that the system
should support and then building the system to support the tasks.
Two examples:
Issue-based information system (IBIS)
Design space analysis
 Design Rationale Technique

Issue-based information system (IBIS)

basis for much of design rationale research

process-oriented
hierarchical structure of issues, with one root issue
positions are potential resolutions of an issue
arguments modify the relationship between positions and
issues
gIBIS is a graphical version
 Design Rationale Technique

Process-oriented - Issue-based information system (IBIS)

structure of gIBIS
supports
Position Argument
responds to
Issue
responds to
objects to
Position Argument
specializes

Sub-issue generalizes

questions
 Design Rationale Technique

Design space analysis

•structure-oriented
•QOC – hierarchical structure
•questions (and sub-questions) represent major
issues of a design
•options provide alternative solutions to the question
•criteria are the means of assessing the various
options in order to make a choice
DRL – similar to QOC with a larger language and more
formal semantics
 Design Rationale Technique

Structure-oriented - Design space analysis

the QOC notation Criterion

Option

Question Option Criterion

Option
Criterion

Question … Consequent …
Question
 Design Rationale Technique

Psychological design rationale

to support task-artifact cycle in which user tasks are

affected by the systems they use
aims to make explicit consequences of design for users
designers identify tasks system will support
scenarios are suggested to test task
users are observed on system
psychological claims of system made explicit
negative aspects of design can be used to improve next
…
iteration of design
 Design Rules

• Principles of usability
– general understanding

• Standards and guidelines

– direction for design

• Design patterns
– capture and reuse design knowledge

…
 Design Rules

Design rules suggest how to increase usability

…
 Design Rules

types of design rules

• principles
– abstract design rules
– low authority
– high generality
• standards
– specific design rules
– high authority
– limited application
• guidelines …
– lower authority
– more general application
 Design Rules

Standards
set by national or international bodies to ensure
compliance by a large community of designers
standards require sound underlying theory and slowly
changing technology
hardware standards more common than software
high authority and low level of detail
ISO 9241 defines usability as effectiveness, efficiency
and satisfaction with which users accomplish tasks …
 Design Rules

Guidelines
more suggestive and general
many textbooks and reports full of guidelines
abstract guidelines (principles) applicable during early life
cycle activities
detailed guidelines (style guides) applicable during later life
cycle activities
understanding justification for guidelines aids in
resolving conflicts …