(UIT) HCI - Chroma01 - l1 - w12 - Final (9 Files Merged) PDF

Design and
prototyping
 Design activities
 Prototyping and construction
 What is a prototype & Why?
 A paper-based prototype of a handheld device
 What to prototype?
1
14
Design Activities
There are two types of design
 is concerned with developing a conceptual

model that captures
Conceptual
 what the product will do
 how it will behave
• is concerned with details of the design

Physical  such as screen and menu structures,
icons, and graphics
2
14
Design Activities (Cont’d)
The design emerges iteratively, through repeated

design-evaluation-redesign cycles involving users.
 For users to effectively evaluate the design of an

interactive product
 Designers must produce an interactive version of

their ideas
3
14
Design Activities (Cont’d)
In the early stages of development, these

interactive versions may be made of paper and
cardboard
As design progresses and ideas become more
detailed, they may be polished pieces of software,
metal, or plastic that resemble the final product
4
14
Prototyping and construction
Two distinct circumstances

One where you're starting from scratch
One where you're modifying an existing product
 A lot of design comes from the latter
 It may be tempting to think that additional
features can be added, or existing ones
tweaked, without extensive investigation,
prototyping or evaluation
5
14
Prototyping and construction (Cont’d)
If changes are not significant then the prototyping and
evaluation activities can be scaled down
But they are invaluable activities that should not be skipped
The activities involved in progressing a set of requirements
through the cycles of prototyping to construction:
 The role and techniques of prototyping
 How prototypes may be used in the design process
6
14
Prototyping and construction (Cont’d)
 Users can't tell you what they want, but when they
see something and get to use it,
► They soon know what they don’t want
 Having collected information about work practices

and views about what a system should and shouldn't
do
► To try out some ideas by building prototypes

and iterating through several versions
► And the more iterations, the better the final

product will be
7
14
What is a prototype?
Interaction design
A series of screen sketches
A paper-based storyboard
A Power Point slide show
A video simulating the use of a system
A lump of wood
A cardboard mock-up
A piece of software with limited functionality written
in the target language or in another language
8
14
What is a prototype? (Cont’d)
A prototype can be anything

e.g.,
 from a paper-based storyboard through to
a complex piece of software
 from a cardboard mockup to a molded or
pressed piece of metal
9
14
A prototype allows stakeholders

♣ to interact with an envisioned product,
♣ to gain some experience of using it in a realistic
setting
♣ to explore imagined uses.
10
14
A prototype is a limited representation of a design that
allows users to interact with it and to explore its suitability
In other design fields a prototype is a small-scale model
11
A miniature car A miniature building or town
14
Why prototype?
 Evaluation and feedback are central to interaction design
 Stakeholders can see, hold, interact with a prototype more

easily than a document or a drawing
 Team members can communicate effectively
 Test out ideas such as technical feasibility
 It encourages reflection: very important aspect of design
 Prototypes answer questions, and support designers in

choosing between alternatives
12
14
A paper-based prototype of a handheld device
A paper-based prototype of a handheld device to support an autistic child
13
Source: Reprinted by permission of Sigil Khwaja
14
What to prototype?
Technical issues
Work flow, task design
Screen layouts and information display
Difficult, controversial, critical areas
14
14
Kinds of prototypes
 Kinds of prototyping
 Relative effectiveness of low- vs. high-fidelity prototypes
 Anatomy of prototyping: Filters and Manifestation
 Dimensions of filtering and of manifestation
1
18
Kinds of prototyping
 Different kinds of prototyping
Low High
fidelity fidelity
2
18
Low-fidelity Prototyping
Paper Prototype Video
Running time about 2 minutes
3 Source: https://www.youtube.com/watch?v=lKlU0Rpsyto(Play Time Happy Instrumental

18 Music for Kids)
Low-fidelity Prototyping (Cont’d)
 Uses a medium which is unlike the final medium
Eg. paper, cardboard

 Is quick, cheap and easily changed
 Never intended to be kept
 Integrated into the final product
 They are for exploration only
Eg.
 sketches of screens, task sequences
 ‘Post-it’ notes
 Storyboards
 ‘Wizard-of-Oz’
4
18
Storyboard
 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
• For a GUIbased software system
 Used early in design
5
18
Storyboard (Cont’d)
Scan diagrams and pictures Graphic Artist clean higher

from original documentation. level art works
Use OCR for text
Automated program makes Data is read from a larser

buttons computer located elsewhere
6
18
Example: Storyboards (Cont’d)
Figure: An example storyboard for a mobile device to explore ancient sites

such as The Acropolis
7
18
Using index cards
 Index cards (3 X 5 inches)
 Each card represents one screen
 Often used in website development
A card-based prototype for borrowing a book in the library catalog system
8
18
Example: Card based Prototype
9
18 A card-based prototype for booking a meeting in the shared calendar system
Sketching
 Sketching is important to low-fidelity prototyping

 Don’t be inhibited about drawing ability
 Practice simple symbols
10
18 A sketching depicting how to fill a car with gas
Example: ‘Wizard-of-Oz’ prototyping
User
>Blurb blurb
>Do this
>Why?
11
18
Example: ‘Wizard-of-Oz’ prototyping (Cont’d)
 The user thinks they are interacting with a computer
 A developer is responding to output rather than the

system
 Usually done early in design to understand users’

expectations
Q. What is ‘wrong’ with this approach?
12
18
High-fidelity prototyping
 Uses materials that you would expect to be in the final

product
 Produce the prototype that much more looks like the final
system
 To build a high-fidelity software prototype
 Common software tool support include
 Macromedia Director
 Visual Basic
 Smalltalk
 Danger that users think they have a full system
13
18
Relative effectiveness of low- vs. high-fidelity prototypes
Type Advantages Disadvantages

Lower development cost. Limited error checking.
Evaluate multiple design Poor detailed specification

concepts. to code to.
Useful communication device. Facilitator-driven.

Low-fidelity
prototype Address screen layout issues. Limited utility after
requirements established.
Useful for identifying market Limited usefulness for
requirements. usability tests.
Proof-of-concept. Navigational and flow
limitations.
Table: Relative effectiveness of low- vs. high-fidelity prototypes

14
18
Relative effectiveness of low- vs. high-fidelity prototypes (Cont’d)
Type Advantages Disadvantages

Complete functionality. More expensive to develop.
Fully interactive. Time-consuming to create.
User-driven. Inefficient for proof-of-
concept designs.
Clearly defines navigational Not effective for
High-fidelity scheme. requirements gathering.
prototype
Use for exploration and test. Limited usefulness for
usability tests.
Look and feel of final product.
Serves as a living specification.
Marketing and sales tool.
Table: Relative effectiveness of low- vs. high-fidelity prototypes

15
18
Anatomy of prototyping: Filters and Manifestation
 Three key principles in their view of the anatomy of prototypes
 Prototyping is an activity with the purpose of creating a

Fundamental manifestation that, in its simplest form
prototyping
principle  Filters the qualities in which designers are interested
 Without distorting the understanding of the whole
Economic  The best prototype is simplest one

principle of  The most efficient way, makes the possibilities
prototyping
 Limitations of a design idea visible and measurable
 Prototypes are filters that traverse a design space

Anatomy
of prototypes  Manifestations of design ideas that concretize and
externalize conceptual ideas
16
18
Dimensions of filtering
Filtering
Example variables
dimension
size; color; shape; margin; form; weight; texture; proportion; hardness;

Appearance
transparency; gradation; haptic; sound
data size; data type(e.g. number; string; media); data use; privacy type;
Data
hierarchy; organization
Functionality system function; users’ functionality need
Interactivity input behavior; output behavior; feedback behavior; information behavior
arrangement of interface or information elements; relationship among

Spatial
interface or information elements-which can be either two- or
structure
three-dimensional, intangible or tangible, or mixed
17
18
Dimensions of manifestation
Manifestation
Definition Example variables
dimension
Physical media, e.g. paper, wood, and plastic; tools for

Medium (either visible or invisible) manipulating physical matters, e.g. knife, scissors, pen,
Material
used to form a prototype and sandpaper; computational prototyping tools
Accuracy of performance, e.g. feedback time responding to

Level of detail or sophistication of
an input a user ( giving user feedback in a paper prototype
Resolution what is manifested (corresponding
is slower than in a computer-based one); appearance details;
to fidelity)
interactivity details; realistic versus faked data
Level of contextualization, e.g. website color scheme testing

with only color scheme charts or color schemes placed in a
Range of what is covered to be
Scope website layout structure; book search navigation usability
manifested
testing with only the book search related interface or the
whole navigation interface
18
18
Construction: from design
to implementation
 Compromises in prototyping
 Horizontal prototype
 Vertical prototype
 Construction: from design to implementation
1  Throwaway prototyping
24
 Evolutionary prototyping
Compromises in prototyping
All prototypes involve compromises (cooperation/

negotiation)
Software-based prototyping
 slow response?
 sketchy icons?
 limited functionality?
2
24
Compromises in prototyping (Cont’d)
Two common types of compromise
Horizontal provide a wide range of functions, but

with little detail
Vertical provide a lot of detail for only a few

functions
Compromises in prototypes mustn’t be ignored
Product needs engineering
3
24
Horizontal prototype
♣ Confirmation of user interface requirements and
system scope
♣ Demonstration version of the system to obtain buy-in
from the business
♣ Develop preliminary estimates of development time,
cost and effort
4
24
Horizontal prototype (Cont’d)
♣ A common term for a user interface prototype is the
horizontal prototype
♣ It provides a broad view of an entire system or
subsystem
♣ Focusing on user interaction more than low-level
system functionality
5
24
Vertical prototype
 A vertical prototype is a more complete elaboration of a

single subsystem or function
 Benefits
 Refinement database design
 Obtain information on data volumes and system
interface needs, for network sizing and performance
engineering
 Clarify complex requirements by drilling down to
actual system functionality
6
24
Construction: from design to implementation
 Taking the prototypes and creating a whole
 When the design has been around the iteration

cycle enough times to feel confident
 Iterated steps of prototyping
 evaluation must be integrated to produce

the final product
7
24
Construction: from design to implementation (Cont’d)
 Extensive user evaluation
 To rigorous quality testing for other characteristics
 Robustness
 Error-free operation
8
24
 Constructing a product to be used by thousands or

millions of people running on various platforms and
under a wide range of circumstances
 A different testing regime than producing a quick
prototype to answer specific questions
 Quality
 Usability
 Reliability
 Robustness
 Maintainability
 Integrity
9
24
 Two major forms of prototyping
 Evolutionary prototyping
 involves evolving a prototype into the final

product
 Throwaway prototyping
 uses the prototypes as stepping stones towards

the final design
10
24
 If an evolutionary prototyping approach is to be

taken
 Should be subjected to rigorous testing along

the way
 For throw-away prototyping such testing is not

necessary
11
24
Throwaway prototyping
 Close-ended prototyping
 Refers to the creation of a model that will eventually be

discarded
 A simple working model of the system is constructed

to visually show the users
 What their requirements may look like when they are

implemented into a finished system
 Rapid prototyping
12
24
Throw-away prototyping (Cont’d)
 Creating a working model of various parts of the system

at a very early stage, after a relatively short investigation
 The method used in building it is usually quite informal
 The model then becomes the starting point from which

users can re-examine their expectations and clarify their
requirements
 When this goal has been achieved, the prototype model

is thrown away
 The system is formally developed based on the identified

requirements
13
24
Throwaway prototyping (Cont’d)
Advantages of Throwaway Prototyping
 Get quick feedback on their requirements
 Able to refine them early in the development of

the software
 Making changes early in the development lifecycle is

extremely cost effective
14
24
Advantages of Throwaway Prototyping
 If a project is changed after a considerable amount of

work has been done
 Small changes could require large efforts to

implement
 Speed is crucial in implementing a throwaway prototype
 Ability to construct interfaces that the users can test
15
24
 Prototypes can be classified according to the fidelity with

which they resemble the actual product
 Appearance
 Interaction
 Timing
 One method of creating a low fidelity throwaway

prototype is paper prototyping
 using paper and pencil
 Mimics the function of the actual product
16
24
 To easily build high fidelity throwaway prototypes is to use

a GUI Builder
 Create a click dummy
 The goal system

 Does not provide any functionality
 Usage of storyboards, animatics or drawings
 Certainly falls within the same family
 Non-functional implementations but show how the

system will look
17
24
Summary
 Constructed with the idea that it will be discarded
 Final system will be built from scratch

Steps
1 Write preliminary requirements
2 Design the prototype
3 User experiences/uses the prototype,
specifies new requirements
4 Repeat if necessary
5 Write the final requirements
18
24
Evolutionary prototyping
 Breadboard prototyping
 Is quite different from throwaway prototyping
 Main goal
 To build a very robust prototype in a structured manner
 Constantly refine it
 Forms the heart of the new system
 The improvements and requirements will then be built
 The system is continually refined and rebuilt
19
24
Evolutionary prototyping (Cont’d)
 Al the requirements and builds only those that are well

understood
 Allows the development team to add features
 Make changes that couldn't be conceived during the

requirements and design phase
 Must evolve through use in its intended operational

environment
20
24
 A product is never done it is always maturing
 The way business will be conducted
 The technology base on which the business will be

implemented
 A plan is enacted to develop the capability
 Resembling the envisioned system is delivered
21
24
Advantages of Evolutionary prototyping

 They are functional systems
 Not have all the features the users have planned
 Used on an interim basis until the final system is delivered
 Not unusual within a prototyping environment for the user to

put an initial prototype to practical use
 The user may decide that a flawed system is better than no

system at all
22
24
 Developers can focus themselves to develop parts of the

system they understand
 To minimize risk, the developer does not implement poorly
understood features
 The partial system is sent to customer sites
23
24
 Detect opportunities for new features and give requests for

these features to developers
 Developers then take these enhancement requests along with

their own
 Use sound configuration-management practices to change
 software-requirements specification
 update the design
 recode
 retest
24
24
Expanding the
conceptual model
 Expanding the conceptual model
 What functions will the product perform?
 How are the functions related to each other?
1  What information needs to be available?
12
Expanding the conceptual model
Decided
Q What technologies to use (e.g., multimedia,

virtual reality, or web-based materials)?
2
12
Expanding the conceptual model (Cont’d)
Decided
Q What input and output devices best suit the

situation
Eg
 Pen-based
 Touch screen
 Speech
 Keyboard
3
12
Q What functions will the product perform?
Q What will the product do?
Q What will the human?
4
12
Q How are functions related to each other Sequential

or parallel?
Categorizations
Eg. all functions related to editing
5
12
Q What information needs to be available ?
Q What data is required to perform the task ?
Q How is this data transformed/represented by the

system ?
6
12
What functions will the product perform?
E.g In the shared

calendar
 The system may suggest dates when a set of people

are able to meet, but is that as far as it should go?
 Should it automatically book the dates?
 Should it email the people concerned informing them of
the meeting or asking if this is acceptable?
7
12
What functions will the product perform? (Cont’d)
 Is the human user or the meeting attendee responsible

for checking this out?
 Should the system allow users to book meetings in other
s' calendars without asking their consent first?
Developing scenarios, essential use cases, and use

cases for the system will help clarify the answers to
these questions
8
12
How are the functions related to each other?
The task analysis shows the subtasks involved and the

order in which the subtasks can be performed
Thus, the system could allow meeting constraints to be

found before or after the list of people
9
12
How are the functions related to each other? (Cont’d)
The potential dates could be identified in the individuals'

calendars before checking with the departmental calendar
It is, however, important to get both the list of attendees

and meeting constraints before looking for potential dates
10
12
What information needs to be available?
Q Who is to be at the meeting?
Q How long the meeting is to take?
Q What its location should be?
Q What is the latest date on which the meeting should be

booked?
11
12
What information needs to be available? (Cont’d)
In order to perform the function, the system must have this

information
 Calendar information for each of the people in the
meeting
 The set of locations where the meeting may take place
 Some way of knowing how long a person would have
to travel to the location
12
12
Using scenarios in
conceptual design
 Using scenarios in conceptual design
 Plus and minus scenario example
 Scenario 1 for plus scenario
 Scenario 2 for minus scenario
 Generating storyboards from scenarios
1  One-stop car shop scenario

20  Issues occurred drawing storyboard
Using scenarios in conceptual design
Express proposed or imagined situations
Used throughout design in various ways:
Scripts for user evaluation of prototypes
Concrete examples of tasks
Plus and minus scenarios to explore extreme cases
Everything great
Everything goes wrong
2
20
Plus and minus scenarios example
 Helping designers to gain a more comprehensive view of the proposal
Eg
Consider an in-car navigation device for planning routes, and
suggest one plus and one minus scenario
3
20
Plus and minus scenarios example (Cont’d)
For the For the

plus minus
scenario scenario
Try to think of all the possible Try to imagine everything

benefits of the device that could go wrong
4
20
Plus scenario shows some potential positive aspects of an

in-car navigation system
"Beth is in a hurry to get to her friend's house. She jumps into the car
and switches on her in-car navigation system. The display appears
quickly, showing her local area and indicating the current location of
her car with a bright white dot. She calls up the memory function of the
device and chooses her friend's address. A number of her frequent
destinations are stored like this in the device, ready for her to pick
the one she wants. She chooses the "shortest route" option and the
device thinks for a few seconds before showing her a bird's-eye view
of her route. This feature is very useful because she can get an overall
view of where she is going.
5
20
Once the engine is started, the display reverts to a close-up view

to show the details of her journey. As she pulls away from the
pavement, a calm voice tells her to "drive straight on for half a

mile, then turn left." After half a mile, the voice says again "turn
left at the next junction." As Beth has traveled this route many
times before, she doesn't need to be told when to turn left or right,
so she turns off the voice output and relies only on the display,
which shows sufficient detail for her to see the location of her car,
her destination and the roads she needs to use."
6
20
Minus scenario shows some potential negative

aspects of an in-car navigation system
"Beth is in a hurry to get to her friend's house. She gets in her

car and turns on the in-car navigation system. The car's battery
is faulty so all the information she had entered into the device
has been lost. She has to tell the device her destination by
choosing from a long list of towns and roads. Eventually, she
finds the right address and asks for the quickest route. The
device takes ages to respond, but after a couple of minutes
displays an overall view of the route it has found.
7
20
To Beth's dismay, the route chosen includes one of the

main roads that is being dug up over this weekend, so she
cannot use the route. She needs to find another route, so
she presses the cancel button and tries again to search for
her friend's address through the long list of towns and
roads. By this time, she is very late."
8
20
Generating storyboards from scenarios
A storyboard represents a sequence of actions or

Story
events that the user and the product go through to
board
achieve a task
A scenario is one story about how a product may

Scenario
be used to achieve the task
9
20
Generating storyboards from scenarios (Cont’d)
Breaking the scenario into a series of steps which focus on interaction,

and creating one scene in the storyboard for each step
The purpose is
To produce a storyboard that can be used to get feed

back from users and colleagues
To prompt the design team to consider the scenario

and the product's use in more detail
10
20
Eg Travel organizer
Five Main 1.The Thomson family gather around the organizer

Steps and enter a set of initial requirements
2. The system's initial suggestion is that they consider
a flotilla trip but Sky and Eamonn aren't happy
3. The travel organizer shows them some descriptions
of the flotillas written by young people
4. Will confirms this recommendation and asks for details
5. The travel organizer emails the details
11
20
Notice
1 It does not have the detail of a use case but identifies

the key events or activities associated with the
scenario
2 Some of these events are focused solely on the travel
organizer's screen and some are concerned with the
environment
12
20
 To draw a storyboard that focuses on the environment of the

travel organizer, various questions relating to the environment
came to mind
Q How can the interaction be designed for all the family?
Q Will they sit or stand?
Q How confidential should the interaction be?
Q What kind of documentation or help needs to be
available?
Q What physical components does the travel organizer
need?
13
20
Figure: The storyboard for the travel organizer focusing on environmental

14 issues
20
One-stop car shop scenario
 I want to buy a new car, so I go down the street to the local ‘one-
stop car shop’
 The shop has a number of booths in it, and when I go in I'm

directed to an empty booth
 Inside there's a large seat that reminds me of a racing car seat,

and in front of that a large display screen
 As I sit down, the display jumps into life. It offers me the options
of browsing through video clips of new cars which have been
released in the last two years, or of searching through video
clips of cars by make, by model, or by year
15
20
One-stop car shop scenario (Cont’d)
► I can choose as many of these as I like. I also have the option

of searching through consumer reports that have been
produced about the cars I'm interested in
► I spend about an hour looking through materials and deciding

that I'd like to experience a couple that look promising.
► I can of course go away and come back later, but I'd like to
have a go with some of those I've found
16
20
By flicking a switch in my armrest, I can call up the

options for virtual reality simulations for any of the cars
I'm interested in
These are really great as they allow me to take the car
for a test drive, simulating everything about the driving
experience in this car, from road holding, to windscreen
display, and front pedal pressure to dashboard layout
It even recreates the atmosphere of being inside the
car
17
20
Five Main Steps
1 The user arrives at the one-stop car shop
2 The user is directed into an empty booth; the user sits down
in the racing car seat
3 The display comes alive
4 The user can view reports
5 The user can take a virtual reality drive in their chosen car
18
20
Figure: The storyboard generated from the one-stop car shop scenario
19
20
Issues occurred drawing storyboard
How to display the reports?
What kind of virtual reality equipment is needed?
What input devices are needed: a keyboard or touch screen,

a steering wheel, clutch, accelerator and brake pedals?
How like the car controls do the input devices need to be?
Others ?
20
20
Three perspectives
for developing a
conceptual model
 Conceptual design: from requirement to design
 Conceptual design: Three perspectives
 Metaphor for calendar system
 Activity: the library catalog system
1
24  Activity: the shared calendar system
Conceptual Design: from requirement to design
 Transform user requirements/needs into a conceptual model
 A description of the proposed system in terms of a set of

integrated ideas and concepts about what it should do,
behave and look like
 Will be understandable by the users in the manner intended

how it will behave
 Don’t move to a solution too quickly
 Iterate, Iterate, Iterate
 Consider alternatives: prototyping helps
2
24
Conceptual Design: Three perspectives
Three perspectives for a conceptual model
1 Which interaction mode?
2 Is there a suitable metaphor?
3 Which interaction paradigm?
3
24
Conceptual Design: Three perspectives (Cont’d)
1 Which interaction mode?
 How the user invokes actions

 Which interaction mode is most suitable for the product
depends on the activities the user will engage in while u
sing it
 Activity-based
 Instructing, conversing, manipulating and

navigating, exploring and browsing
 Object-based
 Structured around real-world objects
4
24
2 Is there a suitable metaphor?
Interface metaphors combine familiar knowledge with new know-

ledge in a way that will help the user understand the product
Three steps
 Understand functionality
 Identify potential problem areas
 Generate metaphors
5
24
Evaluate metaphors
Q. How much structure does it provide?
A good metaphor will require structure, and
preferably familiar structure
6
24
Evaluate metaphors
Q. How much is relevant to the problem?
One of the difficulties of using metaphors is
that users may think they understand more
than they do
Start applying inappropriate elements of the
metaphor to the system, leading to confusion
or false expectations.
7
24
Evaluate metaphors
Q. Is it easy to represent?
 A good metaphor will be associated with
particular visual and audio elements, as well
as words
Q. Will the audience understand it?
Q. How extensible is it?
 Does it have extra aspects that may be
useful later on?
8
24
Metaphor for calendar system
One obvious metaphor is the individual's paper-based

calendar
This is familiar to everyone
Could combine that familiarity with facilities
suitable for an electronic document such as
hyperlinks and searching
Having thought of this metaphor, we need to apply the
five questions listed above
9
24
Metaphor for calendar system (Cont’d)
Q Does it supply structure?

 Yes, it supplies structure based on the familiar
paper-based calendar
 However, it does not supply structure for the notion
of sharing information, because of two issues:
First, an individual's calendar is very personal
Second, it can be closed and the information
hidden from casual observers
10
24
Q How much of the metaphor is relevant?

 In the electronic version, it isn't appropriate to think
of physically turning pages
 A facility for looking at one "page" after another is
required
 The individual's calendar can be carried around
from place to place
 Finally, this is a shared calendar, and normally our
personal calendars are not shared.
11
24
Q Is the metaphor easy to represent?

 Yes
Q Will your audience understand the metaphor?
 Yes
Q How extensible is the metaphor?
 The functionality of a paper-based calendar is fairly
limited
 However, it is also a book and could borrow facilities
from electronic books
 So yes, it can be extended
12
24
Conceptual Design: Three perspectives
3 Which interaction paradigm?
Desktop paradigm,
with WIMP interface (windows, icons, menus and
pointers)
Ubiquitous computing
Pervasive computing
Wearable computing
Mobile devices and so on…
13
24
Activity: the library catalog system
Consider the library catalog system
Identify tasks associated with this product that would be best

supported by each of the interaction modes
i. Instructing
ii. Conversing
iii. Manipulating and navigating
iv. Exploring and browsing
14
24
Activity: the library catalog system (Cont’d)
 The user wants to see details of a particular book,

Instructing
such as publisher and location
Conversing  The user wants to identify a book on a particular

topic but doesn't know exactly what is required
15
24
 The library books could be represented as icons

Manipulating that could be interrogated for information
and
navigating  Manipulated to represent the book being reserved
or borrowed
Exploring
 The user is looking for interesting books, with no
and
browsing particular topic or author in mind
16
24
Consider the library catalog system in the context of

the following paradigms:
Wearable computing
 The library catalog is likely to be used only in certain places,

such as the library or perhaps in an office
 The idea of wearable computers is not as attractive in this

situation
 Alternatively, the library system might be designed to “cut in”

on an existing wearable
17
24
Pervasive computing
 Would allow users to interact with the catalog wherever in

the library they were
 Could possibly have digital books at the end of each library

shelf that gave access to the catalog
18
24
Activity: the shared calendar system
e.g, Consider the shared calendar system
•To finding out what is happening on a particular
day
Instructing
• No dialog is necessary for the system to show
the required information
19
24
Activity: the shared calendar system (Cont’d)
•To arrange a meeting among a set of people
such as selecting the people, setting some
constraints such as time limit, urgency,

Conversation
length of meeting, etc.
•Might respond with a set of possible times
and dates for the user to select
20
24
Exploring  For the task of planning, the user is likely to

and want to scan through pages and browse the
browsing
days
21
24
Consider the shared calendar in the context of the

following paradigms:
Ubiquitous  Imagine the shared calendar in an electronic
computing form with which people could interact
22
24
•Imagine a system that allows individuals to keep

a copy of the system on their own palmtop
Pervasive computers or PDAs
computing
•While also being linked to a central server some-
where that allows access to other information that
is shared
23
24
 Imagine having an earring or a tie pin telling

you
Wearable
computing  You have an appointment in an hour's time
at a client's office and that you need to book
a taxi?
24
24
Activity: thinking for
usability and user
experience features
 Usability Testing
 Methods, Tasks and Users
 Example activities & comments
 An example of usability testing: The iPad
 The Tests
 Comment on Activity about iPad
1
24
Usability Testing
The usability of products has traditionally been tested

in controlled laboratory settings
This approach emphasizes how usable a product is
It has been most commonly used to evaluate desktop

applications
 Websites
 word processors
 search tools
2
24
Usability Testing (Cont’d)
Doing usability testing in a laboratory, or a temporarily

assigned controlled environment
Enables evaluators to control what users do and to control

environmental
Social influences that might impact the users’ performance
The goal is to test whether the product being developed is

usable
 By the intended user population to achieve the tasks

for which it was designed
3
24
Methods, Tasks and Users
Collecting data about users’ performance on predefined tasks is

a central component of usability testing
A combination of methods is often used to collect data
The data includes video recordings of the users including their

facial expressions and logged keystrokes and mouse movements
Participants are asked to think aloud while carrying out tasks, as

a way of revealing what they are thinking and planning
4
24
Methods, Tasks and Users (Cont’d)
A user satisfaction questionnaire is used to find out how users

actually feel about using the product
By asking them to rate it along a number of scales, after

interacting with it
Structured or semi-structured interviews may also be conducted

with users to collect additional information about what they liked
or disliked about the product
Evaluators also collect data about how the product is used in

the field
5
24
Examples of the tasks
 Are given to users include searching for information
 Reading different typefaces
 Navigating through different menus
Performance times and numbers are the two main performance

measures used
The number of errors that participants make

 selecting wrong menu options when creating a
spreadsheet
6
24
The quantitative performance measures

 Time to complete a task
 Time to complete a task after a specified time away from
the product
 Number and type of errors per task
 Number of errors per unit of time
 Number of navigations to online help or manuals
 Number of users making a particular error
 Number of users completing a task successfully
In the early days of usability testing, tests were conducted to

investigate specific features of an interface
7
24
Comment for a word processor
It must be as easy as possible for the intended

users to learn and to use and it must be satisfying
Characteristics such as consistency,

reliability, predictability that are necessary
for ease of use
8
24
Comment for a cell phone
A cell phone must have characteristics

 Consistency
 Reliability
 Predictability that are necessary for ease of use
The physical design must be usable and attractive
9
24
Comment for a website that sells clothes
A website that sells clothes needs to have the basic usability

features
 Navigation through the system needs to be

straightforward and well supported
Some sites always show a site map to indicate
 This is an important part of being easy to use
The meaning of easy to use and to learn is different for

different systems
10
24
Comment for a website that sells clothes (Cont’d)
The website must be attractive, with good graphics of the

clothes
Who would want to buy clothes they can't see or that look
unattractive?
Trust is also a big issue in online shopping
A well-designed procedure for taking customer credit card

details is essential
It must not only be clear but must take into account the
need to provide feedback that engenders trust
11
24
Comment for an online patient support community
 An online patient support group must support the

exchange of factual and emotional information
The standard usability features
It needs to enable patients to express emotions

either publicly or privately, using emoticons
12
24
Comment for an online patient support community (Cont’d)
Some 3D environments enable users to show

themselves on the screen as avatars that can
jump, wave, look happy or sad, move close to
another person, or move away
13
24
Comment for an online patient support community (Cont’d)
Designers have to identify the types of social

interactions that users want to express and then
find ways to support them
14
24
An Example of Usability Testing: The iPad
Usability test of the websites and apps specific to the

iPad
To understand how the interactions with the device

affected people
To get feedback to their clients
15
24
An Example of Usability Testing: The iPad (Cont’d)
Developers as well as those who were eager to know if

the iPad lived up to the hype which was being reported
at the time it came to market
Two methods
 Usability testing with think-aloud in which users
said what they were doing and thinking
 An expert review
16
24
An Example of Usability Testing: The iPad (Cont’d)
The participants were considered typical users
They varied in age and occupation
Two participants were in their 20s, three were in their 30s,

one in their 50s, and one in their 60s
Their occupations were: food server, paralegal, medical

assistant, retired food driver, account rep, and homemaker
Three were males and four were females
17
24
The Tests
 The session started with participants being invited to explore

any application they found interesting on the iPad
 They were asked to comment on what they were looking for

or reading
 What they liked and disliked about a site
 What made it easy or difficult to carry out a task
 A moderator sat next to each participant and observed and

took notes
18
24
The Tests (Cont’d)
 The sessions were video recorded and lasted about 90

minutes
 Participants worked on their own
 After exploring the iPad, they were asked by the evaluator

to open specific apps or websites and to explore them
 Carry out one or more tasks as they would if they were on

their own
 Each was assigned the tasks in a randomized order
19
24
 All the apps that were tested were designed specifically for
the iPad
 Some tasks the users were asked to do the same task on a

website that was not specifically designed for the iPad
 For these tasks the evaluators took care to balance the

presentation order
 Over 60 tasks were chosen from over 32 different sites
20
24
Usability Testing on Ipad
21
24
Running time about 2 minutes
Source: Ipad usability testing test USA Today.avi - https://www.youtube.com/watch?v=OTBv3tDVfRI

Source: https://www.youtube.com/watch?v=lKlU0Rpsyto(Play Time Happy Instrumental Music for Kids)
Comment on Activity
1
What was the main purpose of this study?
 To find out how participants interacted with apps

and websites on the iPad
 The findings were intended to help developers

determine whether specific websites need to be
developed for the iPad
22
24
Comment on Activity (Cont’d)
2
What aspects are considered to be important for good usability and
user experience?
► Usability suggests that the iPad should be: efficient,

effective, safe, easy to learn, easy to remember and have
good utility
► It should also support creativity and be motivating, helpful,

and satisfying to use
► The iPad is designed for the general public so the range

of users is broad in terms of age and experience with
technology
23
24
Comment on Activity (Cont’d)
3
How representative are the tasks of what a typical iPad user might
do?
 The tasks are a small sample of the total set prepared

by the evaluators
 They cover shopping, reading, planning, and finding a

recipe which are common activities people engage in
during their everyday lives
24
24
Case studies on different
type of evaluation
 Case Study 1: An Experiment Investigating on Online
Hockey Game
 Ways of evaluating the use
 Result from questionnaires
 Case Study 2: In the Wild Study of Skiers
 The Wild study
 What Did We Learn from the Case Studies?
1
 Crowdsourcing in HCI
25  Issues to Consider when Doing Evaluation
Case Study 1: An Experiment Investigating on Online Hockey Game
An Experiment Investigating on Online Hockey Game
2 Running time about 2 minutes

25
Source: Case study_1_Hokey computer game(Table Ice Hockey 3d, Free game for your
phone, tablet or browser)https://www.youtube.comwatchv=25m0EmCu8aY
Ways of evaluating the user experience
Physiological responses were used to evaluate users’

experiences when playing against a friend
When playing alone against the computer
Physiological indicators could be an effective way of

measuring a player's experience
3
25
Ways of evaluating the user experience (Cont’d)
Ten participants took part in the experiment
Experiment sensors were placed on the participants to

collect physiological data
Measures of the moisture produced by sweat glands in

the hands and feet
Changes in heart rate and breathing rate
User satisfaction questionnaires give users at the end of

the experiment
Half of the participants played first against a friend and then

against the computer
Other half played against the computer first
4
25
Result from questionnaires
 Mean Rating based on five-point scale (1 is lowest and 5 is highest )
Playing against Playing against

computer friend
Mean St. Dev. Mean St. Dev.

Boring 2.3 0.949 1.7 0.949
Challenging 3.6 1.08 3.9 0.994
Easy 2.7 0.823 2.5 0.850
Engaging 3.8 0.422 4.3 0.675
Exciting 3.5 0.527 4.1 0.568
Frustrating 2.8 1.14 2.5 0.850
Fun 3.9 0.738 4.6 0.699
Source: Mandryk and Inkpen (2004) Physiological Indicators for the Evaluation of
Co-located Collaborative Play, CSCW'2004, pp. 102–111. ©2004 Association for
5 Computing Machinery, Inc. Reprinted by permission
25
Comment
Q1 What kind of setting was used in this experiment?
 The experiment took place in a research

Answer
laboratory, which is a controlled setting
Q2 How much control did the evaluators exert?
Answer  The evaluation was strongly controlled by the

evaluators
 Two gaming conditions was assigned to each
participant
 The participants had sensors placed on them
to collect physiological data
6
25
Comment (Cont’d)
Q3 Which methods were recorded and when?
Answer  Physiological measures of the participants
 While playing the game were collected

together with data collected afterwards using
a user experience questionnaire
 Asked questions about how satisfied they

were with the game
 How much they enjoyed it
7
25
Case Study 2: In the Wild Study of Skiers
(a) A skier wearing a helmet with an (b) The smartphone that

accelerometer (dark red box) and provides feedback to
a mini-camera (black cylinder) the skier in the form of
placed on it for assessing the visualizations
skier's performance
Source: Jambon and Meillon (2009) User

8
experience in the wild.
25 In: Proceedings of CHI '09, ACM
Press, New York, p. 4070.
The Wild study
 To evaluate whether and how skiers might use a mobile

device the authors designed to help skiers improve
their performance
 Each skier wore a helmet that had an accelerometer

and a mini-camera on top of it
 to provide feedback of the skiers’ performance, which

were displayed on a smartphone
 access to the smartphones while on the slopes
9
25
The Wild study (Cont’d)
 How the mobile system was used by the participants

while skiing
 A series of trials were run in which skiers descended
the mountain
 Video clips from the mini-camera and data from the
accelerometers were collected
 The skiers were asked to enter a chalet
 The skiers then received SMS messages telling them
that their data could be viewed on their smart phones
 Maps of their ski runs
 Distance covered, duration of descent
 Maximum speed, and the video recorded
10
25
Source: Jambon et al (2009) User experience in the wild. In: Proceedings of

CHI '09, ACM Press, New York, p. 4070
11
25
 The skiers consulted their smartphones for feedback

was logged
 Did not check their performance on the slopes
 To wait and review it in the bar during breaks
 How in the wild studies can reveal unexpected findings
 Evaluators ran a focus group with the skiers to learn

how they felt about the system
 An informal dinner at which the skiers confirmed that

they preferred to get their feedback
 Their time on the slopes was not interrupted
12
25
 The skiers discussed the problems associated with
using the equipment on the slopes
For example
 Bluetooth links between the GPS system
 Smartphones were not reliable
 other technical problems
13
25
Comment
Q1 What kind of setting was used in this evaluation?
Answer  The evaluation took place in a natural setting
Q2 How much control did the evaluators exert?
Answer  The evaluators imposed less control on the

participants
 The skiers were free to go where they wished
on the mountain
 Participants did have to agree to have
 Cameras
 GPS
14  Other tracking devices strapped to them

25
Comment
Q3 Which types of data were collected?
Answer  The skiers’ movements when going down the

slopes were collected using video and
accelerometers
 A focus group was run to learn more about

what the skiers thought about the system
 What they liked or did not like
 What problems they experienced with the

system
15
25
What Did We Learn from the Case Studies?
Q How different evaluation methods are used in a variety of

physical settings that involve users in different ways to
answer various kinds of questions ?
 Demonstrate how evaluators exercise control in different

settings
Q How they need to be creative when working with

innovative systems?
 Dealing with constraints created by the evaluation setting
 The robustness of the technology being evaluated
16
25
What Did We Learn from the Case Studies?
Q How to observe users in natural settings?

 Unexpected findings resulting from in the wild studies
 Having to develop different data collection and analysis
techniques to evaluate user experience goals
 Challenge
 Engagement
 The ability to run experiments on the Internet that are quick
and inexpensive using crowdsourcing
Q How to recruit a large number of participants using
Mechanical Turk?
17
25
Crowdsourcing in HCI
 Imagine having access to hundreds of thousands of

participants who will perform tasks
 Provide feedback on a design

Turkers
 Experimental task quickly and almost immediately
 The service Mechanical Turk has thousands of people

registered
 Have volunteered to take part by performing various

activities, online
 Human Intelligence Tasks (HITs) for a very small reward
18
25
Issues to Consider when Doing Evaluation
Informing Participants about Their Rights and Getting

1 Their Consent
 Professional societies
 Universities
 Government, and other research offices
 Require researchers to provide information about
activities in which human participants will be involved
 To protect participants by ensuring that they are not
endangered physically
Eg. In medical studies or emotionally
 Their right to privacy is protected
19
25
Issues to Consider when Doing Evaluation (Cont’d)
2 Some Things that Influence how You Interpret Data
 Decisions have to be made about what data is needed

to answer the study questions
Q How the data will be analyzed?

Q How the findings will be presented?
20
25
Reliability
Is how well it produces the same results on separate

occasions under the same circumstances
For example
 A carefully controlled experiment will have high
reliability
 Observing users in their natural setting will be
variable
21
25
Validity
Concerned with whether the evaluation method measures

what it is intended to measure
This encompasses both the method itself and the way it
is implemented
For example
 If the goal of an evaluation study is to find out how
users use a new product in their homes
 It is not appropriate to plan a laboratory experiment
22
25
Ecological Validity
A particular kind of validity

Concerns how the environment in which an evaluation
is conducted influences or even distorts the results
For example
 Laboratory experiments are controlled
 What the participants do
 How they behave is quite different from what
happens naturally
 In their workplace
 At home or in leisure environments
23
25
Biases
Occurs when the results are distorted
For example
 Expert evaluators performing a heuristic evaluation
may be more sensitive to certain kinds of design
flaws than others
 Reflected in the results
24
25
Scope
The scope of an evaluation study refers to how much

its findings can be generalized
25
25
Introducing evaluation
 Introducing evaluation
 Evaluation methods
 Why Evaluate?
 Activity: Facebook usage
 Activity: Developing a new car seat
 Formative vs. Summative evaluation
 Types of Evaluation
1
20
Introducing evaluation
♣ Evaluation is integral to the design process

♣ Evaluators collect information about users’ or potential
Screen users’ experiences

Sketch ♣ Interacting with
• a prototype & an app
• a computer system
• a component of a computer system
• an application, or a design artifact
♣ Evaluation focuses on both the usability of the system
♣ On the users’ experience when interacting with it

2
20
Evaluation methods
Use depends on the goals of the evaluation
Occur in a range of places such as laboratories, people's

homes, outdoors, and work settings
Involve observing participants and measuring their

performance in usability testing, experiments, or field studies
3
20
Evaluation methods (Cont’d)
Do not involve participants, such as modeling user

behavior
To be approximations of what users might do when interacting

with an interface
Done as a quick and cheap way of assessing different
interface configurations
The level of control on what is evaluated varies, such as

in field studies
Is considerable control over which tasks are performed
and the context, such as in experiments
4
20
Why Evaluate?
 Users expect much more than just a usable system
 Look for a pleasing and engaging experience
 The first requirement for an exemplary user experience

is to meet the exact needs of the customer, without
fuss or bother
 Next come simplicity and elegance, which produce
products
 A joy to own
 A joy to use
5
20
Activity: Facebook usage
 Identify one adult and one teenager prepared to talk with you
about their Facebook usage
 Ask them questions such as
Q How often do you look at Facebook each day?

Q How many photos do you post?
Q What kind of photos do you have in your albums?
Q What photo do you have as your profile picture?
Q How often do you change it?
Q How many friends have you got?
Q What books and music do you list?
Q Are you a member of any groups?
6
20
Comment
Some different patterns between the adult and the teenager
Teenagers
Avid Facebook users

Access it wherever they are and upload photos
of places they have just visited
Often use it to coordinate their social activities
Many teenagers like games so they download
games
7
20
Comment (Cont’d)
Many Adults
On Facebook but may not use it as frequently

Use it for different reasons
 showing family members where they went on
vacation
 posting pictures of children and grandchildren
8
20
What to evaluate
 Ranges from low-tech prototypes to complete systems

 A particular screen function to the whole workflow
 Aesthetic design to safety features
Eg.
Government authorities may ask

 If a computerized system for controlling traffic lights
results in fewer accidents
 If a website complies with the standards required for
users with disabilities
9
20
Where to evaluate
► Are evaluated in a laboratory

Web ► It provides the control necessary to systematically
investigate whether all requirements are met
Accessibility
► Design choices, such as choosing the size and
layout of keys for a smartphone
User ► Children enjoy playing with a new toy
Experience ► For how long before they get bored,
Aspects ► Can be evaluated more effectively in natural settings

which are referred to as in the wild studies
10
20
Where to evaluate (Cont’d)
Remote
Studies of  Social networking can be conducted to evaluate
Online natural interactions for a lot of participants in their
Behavior own homes, cheaply and quickly
 Have also been built in between labs and in the
Living wild settings
Laboratories  Providing the setting of being in an environment

 Home, while also giving the ability to control,
measure, and record activities
11
20
Activity: Developing a new car seat
Company is developing a new car seat to monitor if a

person starts to fall asleep when driving
To provide a wake-up call using olfactory and haptic
feedback
Q Where would you evaluate it?
12
20
Comment
 Lab-based experiments
 using a car simulator to see how effective the new
kind of feedback
 Safe setting
 Need to find a way of trying to get the participants
to fall asleep at the wheel
 Natural setting
Eg. A racing track or airfield which can be controlled
by the experimenter using a dual-control car
13
20
When to evaluate
The product lifecycle evaluation takes place depends

on the type of product
If the product is new, then considerable time is

usually invested in market research and establishing
user requirements
Requirements have been established, they are used

to create initial sketches, a storyboard, a series of
screens, or a prototype of the design ideas
14
20
When to evaluate (Cont’d)
If the designers have interpreted the users’

requirements correctly and embodied them in their
designs appropriately
The designs will be modified according to the

evaluation feedback and new prototypes developed
and subsequently evaluated
When evaluations are done during design to check

that a product continues to meet users’ needs, they
are known as formative evaluations
15
20
Formative vs. Summative Evaluation
Formative Evaluations
 Cover a broad range of design processes, from
the development of early sketches
 Prototypes through to tweaking and perfecting an
almost finished design
Summative Evaluations
 Evaluations that are done to assess the success
of a finished product
16
20
Formative vs. Summative evaluation (Cont’d)
If the product is being upgraded then the evaluation

may not focus on establishing a set of requirements
May evaluate the existing product to ascertain what

needs improving
Features are then often added, which can result in new

usability problems
Attention is focused on improving specific aspects,

such as enhanced navigation
17
20
Types of evaluation
 Three broad categories, depending on the setting, user involvement,

and level of control
1. Controlled settings involving users
o Users’ activities are controlled in order to test hypotheses

and measure or observe certain behaviors
o The main methods are usability testing and experiments
Eg. Laboratories and Labs
18
20
Types of evaluation (Cont’d)
2. Natural settings involving users
o There is little or no control of users’ activities in order to

determine how the product would be used in the real
world
o The main method used is field studies
Eg. Online communities and products that are used in
public places
19
20
Types of evaluation (Cont’d)
3. Any settings not involving users
o To identify the most obvious usability problems
o The range of methods includes inspections, heuristics,

walkthroughs, models, and analytics
Eg. Consultants and researchers critique, predict, and

model aspects of the interface
20
20

(UIT) HCI - Chroma01 - l1 - w12 - Final (9 Files Merged) PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

(UIT) HCI - Chroma01 - l1 - w12 - Final (9 Files Merged) PDF

Uploaded by

Copyright:

Available Formats

Design and

There are two types of design

 is concerned with developing a conceptual

• is concerned with details of the design

The design emerges iteratively, through repeated

 For users to effectively evaluate the design of an

 Designers must produce an interactive version of

In the early stages of development, these

Two distinct circumstances

If changes are not significant then the prototyping and

evaluation activities can be scaled down

But they are invaluable activities that should not be skipped

The activities involved in progressing a set of requirements

through the cycles of prototyping to construction:

 The role and techniques of prototyping

 How prototypes may be used in the design process

► They soon know what they don’t want

 Having collected information about work practices

► To try out some ideas by building prototypes

► And the more iterations, the better the final

A series of screen sketches

A Power Point slide show

A video simulating the use of a system

A piece of software with limited functionality written

in the target language or in another language

A prototype can be anything

A prototype allows stakeholders

A prototype is a limited representation of a design that

allows users to interact with it and to explore its suitability

In other design fields a prototype is a small-scale model

 Evaluation and feedback are central to interaction design

 Stakeholders can see, hold, interact with a prototype more

 Team members can communicate effectively

 Test out ideas such as technical feasibility

 It encourages reflection: very important aspect of design

 Prototypes answer questions, and support designers in

A paper-based prototype of a handheld device to support an autistic child

Work flow, task design

Screen layouts and information display

Difficult, controversial, critical areas

 Different kinds of prototyping

Paper Prototype Video

Running time about 2 minutes

3 Source: https://www.youtube.com/watch?v=lKlU0Rpsyto(Play Time Happy Instrumental

 Uses a medium which is unlike the final medium

Eg. paper, cardboard

 Never intended to be kept

 Integrated into the final product

 They are for exploration only

 Often used with scenarios, bringing more detail, and a

• Showing how a user might progress through a task

• For a GUIbased software system

 Used early in design

Scan diagrams and pictures Graphic Artist clean higher

Automated program makes Data is read from a larser

Figure: An example storyboard for a mobile device to explore ancient sites

 Index cards (3 X 5 inches)

 Each card represents one screen

 Often used in website development

A card-based prototype for borrowing a book in the library catalog system

 Sketching is important to low-fidelity prototyping

 The user thinks they are interacting with a computer

 A developer is responding to output rather than the