Design & prototyping

adapted from

Preece et al book’s slides (www.id-book.com)

Georgia Tech HCI faculty (http://hcc.cc.gatech.edu/)

1
 Envisionment

• How do we come up with new (good) designs for interactive

systems?
• Why is it so difficult?

2
 Using personas as a design tool
• Persona: develop a precise description of our user and what he wishes to
accomplish.
• Design for just one person
– If you want to create a product that satisfies a broad audience of users, logic will tell
you to make as broad as possible in its functionality as possible to accomodate the
most people
– Logic is wrong: you will have far greater success if you design for a single person
• As a design tool, it is more important that a persona be precise than accurate.
That is, it is more to define the persona in great and specific detail than the
persona be the precisely correct one.
• The average user is never actually average…

3
 Dialogue #1: The programmer and the manager

What if the user I don’t think we really

wants to print need to add printing in
this out? version one

But someone Well, yes, but can’t we

might want to delay putting printing
print it in?

4
 Dialogue #2: the programmer and the interaction
designer
What if the user Rosemary isn’t
wants to print interested in printing
this out? things out.

But someone But we are designing

might want to for Rosemary, not for
print it ‘someone’.

5
 Dialogue #3: the enlightened programmer and
the happy interaction designer
Would Rosemary No. Although Jacob will
want to print this want some printed reports
out? on a quarterly basis

Well, if it is so rarely
needed, we could
save time and
license a commercial
This will save 2
tool instead of
programming! weeks of the
schedule

6
 Chrysler example
• Robert Lutz, chairman of Chrysler, says that 80% of people in focus groups hated
the Dodge Ram pickup. He went ahead with the procuction and made it into a
best-seller. Why? Because the other 20% loved it!
• To have people loving your product, even if it is only a minority, is key to success.

• What is better?
– 50% of users 100% satisfied or
– 100% of them 50% satisfied

7
 The rollaboard suitcase example
• The rollaboard suitcase is a good example of a product designed for a very
narrowly defined target user.
• This small suitcase with built-in wheels and retractable handle revolutionized the
entire luggage industry but it wasn’t designed for the general public.
• It was designed just for airline flight crews!
• The design pleased this group enormously

8
 Where do alternatives come from?
• Humans stick to what they know that works
But considering alternatives is important to ‘break out
of the box’
• Marshal McLuhan called it the “rear-view mirror
effect”, noting that “we see the world through a rear
view mirror. We march backwards into the future”

• Designers are trained to consider alternatives,

software people generally are not...
• How do you generate alternatives?
— ‘Flair and creativity’: research and synthesis
— Seek inspiration: look at similar products or look
at very different products
9
 Conceptual Design: Moving from
Requirements to First Design
• A conceptual model is an outline of what people can do with a product and what
concepts are needed to understand how to interact with it
• The first step is steep yourself in the data you gathered about users and their
goals and try to empathize with them - CREATE PERSONAS
• Key principles of conceptual design:
– Keep an open mind
– Never forget users and their context – PACT approach
– Discuss ideas with other stakeholders as much as possible
– Use low fidelity prototyping to get rapid feedback
– Iterate, iterate, iterate

10
 Developing a first conceptual model

• Immerse in the data

• Empathize with users: BUILD PERSONAS
• Analyse the interface metaphors that would be suitable to help
users understand the product
• Analyse the interaction type that would best support the users’
activities (instructing, conversing, manipulating, exploring)
• Analyse different interface types to look for alternative design
insights or options (command based, WIMP, web based, mobile,
shareable, wearable, etc)

11
 How do you choose among
alternatives?
• Evaluation with users or with peers, e.g. prototypes
• Technical feasibility: some are not possible
• Quality thresholds: usability goals lead to usability criteria set early
on and check regularly

—safety: how safe?

—utility: which functions are superfluous?
—effectiveness: appropriate support? task coverage, information available
—efficiency: performance measurements

12
Testing prototypes to choose among
alternatives

13
 Design
Get Informal Feedback ASAP!

• Present prototypes to users

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

14
 Design
Design fixation

• Keep an open mind

• Don’t get wedded to an idea
• Don’t let design review become about whose idea wins

• Honor the truth. People come first. Not your ego, not your team’s
ego.

15
Design
Iterate on Design

• Redesign the system

– In light of initial user impressions
– Pay attention to common complaints

• Be prepared to abandon bad ideas!!

• It’s just an idea, not a measure of your worth!

16
 Design
Iterate on Design

• Let me reiterate…
• Be prepared to...

Abandon bad ideas!!

• It’s just an idea, not a measure of your worth!

17
 Once More, now with feeling

Abandon bad ideas!

18
19
 Evaluating prototypes
Formative Evaluation Techniques
A process to help guide the formation (ie, design) of a UI

• Apply design principles - heuristic evaluation

– Consistency, don’t set the user up, etc etc …

• Apply design rules / standards / style guides

– Java look and feel, Mac look and feel, etc

• Cognitive walkthrough

20
 Build & Test Prototypes

• 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

21
 Build & Test Prototypes
Prototyping

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

• Cheap!

22
 Build & Test Prototypes
Usability Testing

• Get real (or representative) users to do what they do, using the
prototypes
• Use the personas you created to not loose control
• 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

23
Build & Test Prototypes
Summative Evaluation Techniques

A process to help summarize (sum up) the effectiveness of an existing

or developmental UI

• Empirical / laboratory evaluation

• Expert review
• Field study
• Client review

24
Design & Prototyping
 Prototyping

• What is a prototype?
• Why prototyping?
• Different kinds of prototyping
low fidelity
high fidelity
• Compromises in prototyping
vertical
horizontal

26
 What is a prototype?

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

• a miniature car
• a miniature building or town

27
 What is a prototype?

In interaction design a prototype 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. for a smartphone)
• a cardboard mock-up
• a piece of software with limited functionality written in the target
language or in another language

28
 What to prototype?

• Technical issues

• Work flow, task design

• Screen layouts and information display

• Difficult, controversial, critical areas

29
 Why prototyping?

• Evaluation and feedback are central to interaction design

• Stakeholders can see, hold, interact with a prototype more easily

than with a document or a drawing

• Team members can communicate effectively

• You can test out ideas for yourself

• It encourages reflection: very important aspect of design

• Prototypes answer questions, and support designers in choosing

between alternatives
30
Yes, but…

31
 Compromises in prototyping
• All prototypes involve compromises
• For software-based prototyping maybe there is a slow response?
sketchy icons? limited functionality?
• 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

32
 Prototyping Methods

Method Tactical Experiential

• Paper prototypes (sketches, • Storyboards
task sequences) • Wizard-of-Oz
Low Fidelity • Mockups • Bodystorming
• Powerpoint presentations

• Flash prototypes
• Swipeable photo gallery
• Clickable photo gallery
High fidelity • Static HTML, responsive
• Platform specific prototypes

33
Tactical Prototyping
Best suited for design
explorations where:
• You are working on a
focused project
• Target hardware and
software is known
• The design space is known

34
35
Low-fidelity prototypes
Sketches vs Mockups
Sketches
are usually hand-drawn graphics that contain screen ideas or explanatory graphics
outlining the high-level problem or solution. They are the most valuable when the
idea hasn’t been fully formed, explored, or realized in any way. Sketches will help
to understand what general pieces are needed to accomplish the goals.

Mock-ups
are graphics intended to simulate the look and feel of a project in order to
highlight the impact of visual elements. A mock-up can set the right impression
and communicate emotions and personality.

36
Low-fidelity prototypes
Sketching

• Sketching is important to low-fidelity prototyping

• Don’t be inhibited about drawing ability. Practice simple
symbols

37
Low-fidelity prototypes
Sketching

• Sketches solve two problems with the use of more fully-developed

prototypes
– User reluctance to suggest changes to what might look like a finished
product
– User focus too much on details (graphic design, etc) of UI rather than big
picture

38
Low-fidelity prototypes

Paper prototype of typical forms- Paper prototype of a tabs-based design

filling screen

39
Low-fidelity prototypes
Testing

User test of a paper prototype of a

device-based interaction (here: a mobile Testing hardware user interfaces:
phone). mockup of a kiosk.

40
 Low-fidelity prototypes
Testing

User test of a low-fidelity paper

User test of a mock-up of a homepage
prototype of a website

41
Low-fidelity prototypes
Card-based prototypes
• Index cards (3 X 5 inches)
• Each card represents one screen or part of screen
• Often used in website development

42
43
 Low-fidelity prototypes
Physical Mock-Ups

• Wooden blocks and labels - device control

(Three versions of
a hand-held controller)

44
Low-fidelity prototypes
Physical Mock-Ups

• Styrofoam and Buttons

Bathroom scale
Spring 2004 CS 4750 project
“Golf Caddy” by:
Chris Hamilton
Linda Kang
Luigi Montanez
Ben Tomassetti

45
Low-fidelity prototypes
Physical Mock-Ups

Soap blocks and labels - TV control

Health Care TV Based Interfaces for Older Adults

Francisco Nunes & Teresa Galvão (MIEIC Dissertation 2010)

46
Low-fidelity prototypes - Mockups
“A smartphone application prototype for exchanging valuable real time public transport
information among travelers”,
Tiago Gonçalves, António Nunes, Teresa Galvão, 2012

47
 High-fidelity prototypes

• 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 (Figma, Canvas,
Flash, HTML, Macromedia Director, Java Script, PHP, Visual Studio,…)
• Danger!!! Users may think they have a full system…….see compromises

48
49
50
51
 Example: High-fidelity prototype
“Smart Mobile Sensing for Measuring Quality of Experience (QoE) in Urban Public
Transports”
João Vieira, Pedro Maurício Costa, Teresa Galvão, 2012

52
Experiential prototyping
Best suited for design
explorations where:
• You are working on a
“broader” project
• Target mobile hardware and
software scope ins unknown
(or being created)
• The design space is relatively
unexplored
Methods
• Storyboarding
• Bodystorming
• Wizard of Oz

53
54
Storyboards
• Pencil and paper simulation or walkthrough of the system look and
functionality
– Use sequence of diagrams/drawings
– Show key snap shots
– Quick & easy
• 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
• Used early in design
55
Generate storyboards from a scenario

56
 Low-fidelity prototypes
for Scenarios & Use Cases
• Hypothetical or fictional situations of use
– Typically involving some person, event, situation and environment
– Provide context of operation
– Also used in cognitive walkthrough

• Engaging and interesting

• Allows designer to look at problem from another person’s point of
view
• Facilitates feedback and opinions
• Can be very futuristic and creative
57
 Wizard of Oz

• Wizard of Oz - Person simulates and controls system from “behind

the scenes”
– Use mock interface and
interact with users
User
– Good for simulating
system that would be >Blurb blurb
>Do this
difficult to build >Why?

– Can be either computer-based or not

What is ‘wrong’ with this approach?

58
59

59
 Bodystorming
• Imagine what it would be like if the product existed
• Act as though it exists, ideally in the place it would be used.
• It is going through an idea with improvised artifacts and physical activities to envision a
solution.
• This user centred technique is ideal to design physical spaces (e.g. the interior design of a
shop) but can also be used to design physical products or software.

• It is supposed that you get up and move, trying things out with your own body, rather than
just sitting around a table and discussing it while having to imagine it in the abstract (as in the
case of brainstorming).

60
 Example: Experience prototyping

The system: a chest-implanted automatic defibrillator

The problem: A defibrillator is used with victims of cardiac arrest by delivering an
electric shock to the heart. Usually, a defibrillator uses external electrodes applied
through the chest wall.
An implanted defibrillator delivers electric shocks through leads connecting directly
to the heart muscle.
A cardiac arrest is an unusual event and it is difficult for designers to gain the insight
they need to understand user’s experience.
The approach: each team member was given a tablet to take home over the
weekend. The tablet simulated the occurrence of a defibrillating shock. Messages
were sent at random, and team members were asked to record where they were,
who they were with, what they thought and felt knowing that this represented a
shock.
61
Prototyping Techniques
 Prototyping Techniques
The three major kinds of prototyping are
– “Throw away” prototyping (a.k.a. “rapid prototyping”)
• used exclusively in requirements gathering
– Incremental prototyping
• not actually prototyping at all, but the delivery of prioritised functions
incrementally to a single, overall design
– Evolutionary prototyping (a.k.a “Rapid Application Development, RAD)
• as for incremental prototyping but with evolving design

63
 Rapid Prototyping
• Aims to collect information on requirements and the adequacy of
possible designs
• Recognises that requirements are likely to be inaccurate when first
specified
• The emphasis is on evaluating the design before discarding it

64
 Rapid Prototyping -Advantages

• Helps the designer to evaluate the design very early in the design
cycle
• It is good for addressing the problem of users not knowing or being
unable to state their requirements
• Provides the opportunity for continued evaluation and refinement
of the design
• Increases the chance of getting a well designed system acceptable to
the users with the required functionality and ease of use

65
 Rapid Prototyping – Disadvantages

• Can consume a lot of resources – users, analysts, programmers.

Therefore can be costly as well as time consuming
• The continued process of design/evaluate/redesign may mean that
the design phase of the cycle is considerably increased
• May be a long time before get a working system
• Reluctance to ‘throw away’ or discard the prototype
• Users expectations/wishes may be unrealistic
– May not be technically or economically feasible

66
 Incremental Prototyping

• Final product is built as separate components one at a time

• There is one overall design for the system
• It is partitioned into independent and smaller components
• Final product is released as a series of products
– e.g., general student details data module – the students assessment profile
module

67
 Incremental Prototyping - Advantages

• Allows large systems to be installed in phases

• Helps to avoid the delays between specification and implementation
• Core system features are provided early
• Users are not overwhelmed with a complex level of functionality in
one go
• Suitability and appropriateness of key requirements can be checked
• Less essential features can be added later

68
 Incremental Prototyping – Disadvantages

• Need to have an overall view of requirements

• Suitable development software must be used – not just high level
prototyping software
• Long development timescale before full functionality is obtained
• This may be incompatible with management business goals
– For example, the need to get to market before a competitor
– Urgent requirements for a complete solution

69
 Evolutionary prototyping – RAD1

• As for incremental prototyping

• Additions and amendments are made following evaluation and the
system is regenerated in its amended form
• In this case the prototype evolves into the final system

70
1- Rapid Application Development
 Evolutionary prototyping – Advantages

• The system can cope with change during and after implementation
• Again helps to overcome the gap between specification and
implementation
• Users get some functionality quickly

71
 Evolutionary prototyping -Disadvantages

• Can lead to a long development timescale

• May have limited functionality which may not be apparent to the
user
• May believe that they have the final complete system and may
therefore be unimpressed!

72
 73
https://agilenotion.com/agile-categoriesiterative-incremental-evolutionary/
 Other Prototyping Approaches

• Full prototype
– full functionality, lower performance than production
software
• Horizontal prototype
– displays “breadth” of functionality, no lower level
detail “back end” support (e.g. database link)
• Vertical prototype
– full functionality and performance of a “slice” or small
part of the system

74
 Horizontal vs. vertical prototypes

Horizontal prototype: broad but only top-level

Vertical prototype: deep, but only some functions

75
Prototyping Tools

specific software
 Figma
www.figma.com

77
 Quant-UX
www.quantux.com

Open source 78
 Invision
www.invisionapp.com

commercial

79
 Balsamiq Mockups
http://www.balsamiq.com/

commercial

80
Quant-UX - https://www.quant-ux.com/#/

JustInMind - www.justinmind.com

Adobe XD - www.adobe.com/products/xd.html#

Figma- www.figma.com

Moqups - www.moqups.com

MarvelApp - https://marvelapp.com/
81
 Case Study: AndaMobile Pilot

Interviews with
stakeholders User Evaluation

Interviews with
Focus groups
users
High fidelity Functional
Questionnaire Mockups
prototypes prototype

9 months

82
Briefing sessions

83
 Initial mockups
Início

App@nda
Mockups v1.2
High fidelity
prototype

85
Functional prototype

86
 Focus Groups

Focus Group Nº Participantes Nº Moderadores Duração

Focus Group 1 10 3 1:40h
Focus Group 2 7 3 1h
Focus Group 3 8 3 1:30h
87
 After focus groups
Tema Opinião Sugestões
- Útil;
- Prático;
1. Perceção sobre
- Inovador;
pagamentos móveis em
- Sem necessidade de
transportes públicos
preocupar com moedas ou
notas.
- Interessante; - Colocar beacons em mais sítios.
2. Pagamento baseado - Funciona bem se estiver junto
em Beacons aos validadores, caso contrário
não.
- É a mais-valia da aplicação. - Comunicar a poupança ao
As pessoas perceberam que utilizador. É a mensagem mais
poupam com a aplicação importante a transmitir aos
3. Otimização do ajudaria a atrair e fidelizar utilizadores.
tarifário clientes;
- Muito útil, principalmente em
situações como férias, idas à
praia e ao hospital.
- Não se sentem seguidos;
4. Sentem-se seguidos - Não incomoda;
pelo facto do percurso - Não é uma preocupação;
estar a ser identificado - Até é útil conseguir ver a
pela aplicação? paragens pelas quais estão a
passar.
5. Como vêm a relação - O uso do telemóvel facilitava.
com o prestador de Não exigia deslocações à loja
serviços? física, nem esperar em filas.
- Sim; - PIN (ex: 4 dígitos) na entrada da
- Insegurança se perderem ou aplicação opcional;
roubarem o telemóvel (PIN - PIN para aceder ao perfil (ou outra
para entrar na aplicação ou forma de limitar o acesso ou
não); esconder a informação).
6. Segurança
- "Esconder" ou limitar o
acesso às informações
pessoais do perfil;
- Preocupação com os erros da 88
aplicação.
 Exercise: Paper Prototype
Objective: paper prototype of a mobile app to help finding a working coffee machine in
FEUP campus.
Part 1:
1. Form teams (2 or 3 students)
2. Discuss the main ideas
3. Use pen and paper drawings for your sketches (the size of the “screen” should be based on your smartphone)
4. Go to the Play Store or to Apple Store and get the Marvel app
5. Use Marvel App with your drawings

Part 2:
1. Combine two teams
2. Test your prototype on your new teammates
3. Make any modifications or revisions (optional)
4. Test your prototype one more time (optional)
89