Projektas Informatikos ir programų sistemų studijų programų kokybės gerinimas ( VP1-2.

2-ŠMM-07-K-02-039)

Design, prototyping
and construction
Lecture 12
Kristina Lapin

2014.03.31 ‹#›
 Overview
• Prototyping and construction

• Conceptual design

• Physical design

• Generating prototypes

• Support for design

2014.03.31 ‹#›
 Prototyping and construction
• What is a prototype?
• Why prototype?
• Different kinds of prototyping
low fidelity
high fidelity
• Compromises in prototyping
vertical
horizontal
• Construction

2014.03.31 ‹#›
 What is a prototype?

In other design fields a prototype is a

small-scale model:
• a miniature car
• a miniature building or town

• the example here comes

from a 3D printer

2014.03.31 ‹#›
 What is a 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

2014.03.31 ‹#›
 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
• 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

2014.03.31 ‹#›
 What to prototype?

• Technical issues

• Work flow, task design

• Screen layouts and information display

• Difficult, controversial, critical areas

2014.03.31 ‹#›
 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
2014.03.31
‘Wizard-of-Oz’ ‹#›
 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

• Used early in design

2014.03.31 ‹#›
 Sketching
• Sketching is important to low-fidelity
prototyping
• Don’t be inhibited about drawing ability.
Practice simple symbols

Hartfield, Winograd, 1996

2014.03.31 ‹#›
 Card-based prototypes

• Index cards (3 X 5 inches)

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

2014.03.31 ‹#›
 ‘Wizard-of-Oz’ prototyping
• The user thinks they are interacting with a
computer, but a developer is responding to
output rather than the system.
• Usually done early in design to understand
users’ expectations
• What is ‘wrong’ with this approach?

User

>Blurb blurb
>Do this
>Why?

2014.03.31 ‹#›
 Wizard of Oz prototyping

PinTrace robot surgery system with a

touch-screen interface. To the left of
Wizard view of one proposed PinTrace
the screen there is a robot arm which
screen layout
oves to an exact position to guide the
used for positioning different reference
surgeon in the insertion of hip fixation
objects on an X-ray
devices.
13
Molin, 2004
 Low-fidelity prototiping

Advantages Disadvantages
• Lower development • Limited error checking
cost • Poor detailed
• Evaluate multiple- specification to code
design concepts to
• Useful-communication • Facilitator driven
device
• Address screen layout
issues
• Proof-of-concept

2014.03.31 14
 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.
• Danger that users think they have a full
system…….see compromises

2014.03.31 ‹#›
 High-fidelity prototyping
Advantages Disadvantages
 Complex functionality.  More expensive to
 Fully interactive. develop
 User-driven.  Time-consuming to
 Clearly defines create
navigational scheme
 Use for exploration and  Inefficient for proof-
test of-concept designs
 Look and fell of final  Not effective for
product requirements
 Serves as living gathering
specification
 Marrketing and sales tool
2014.03.31 16
 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

2014.03.31 ‹#›
 Filtering dimensions of
prototyping

2014.03.31 ‹#›
Filtering out different aspects
of design

Lim et al. 2008 19

 Manifestation dimensions of
prototyping

2014.03.31 ‹#›
 Example: Samsung VI660
prototipes

The paper prototyping setup and its use situation.

Lim et al. 2008 21
Example: telefono Samsung
VI660 prototypes

The computer-based prototype and its test setup

Lim et al. 2008 22
 The fully functional prototype
(Samsung VI660)

Lim et al. 2008

2014.03.31 23
Lim et al. 2008 24
 Construction
• Taking the prototypes (or learning from
them) and creating a whole
• Quality must be attended to: usability (of
course), reliability, robustness,
maintainability, integrity, portability,
efficiency, etc
• Product must be engineered
Evolutionary prototyping
‘Throw-away’ prototyping
2014.03.31 ‹#›
How to understand users’ experience?
• Experience prototyping
– Simulating user’s experience
• Designing a chest-implanted
automatic defibrillator
for victims of cardiac arrest
– The patient kit: pager,
camera, notebook
– The random pager message simulated the
occurrence of a defibrillating shock.
– Team member reccors what they thought and
felt knowing that this represent a shock
• Anxiety around everyday happenings such as holding
a child or operating power tools
Buchenau, Suri (2000)
 How to understand users’ experience?

• Experiences of third age people

Third Age Suit ICE, Loughborough University

http://www.lboro.ac.uk/research/theview/archive/ss10/articles/restricted-
mobility/page2.html
 Conceptual design: from
requirements 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, that
will be understandable by the users in the
manner intended”
• Don’t move to a solution too quickly. Iterate,
iterate, iterate
• Consider alternatives: prototyping helps

2014.03.31 ‹#›
Conceptual design: from
requirements to design
• Developing the
aesthetics in design
– Mood boards
• a collage of the ideas and
inspiration

29
 Designing universally
accessible games

Visual cues for players with mild memory and

cognitive impairments, UA-Chess Grammenos et el
(2009)
2014.03.31 11:20 30
 Overview
• Prototyping and construction

• Conceptual design

• Physical design

• Generating prototypes

• Support for design

2014.03.31 ‹#›
 Is there a suitable metaphor?
• Interface metaphors combine familiar
knowledge with new knowledge in a way that
will help the user understand the product.
• Three steps: understand functionality, identify
potential problem areas, generate metaphors
• Evaluate metaphors:
How much structure does it provide?
How much is relevant to the problem?
Is it easy to represent?
Will the audience understand it?
How extensible is it?
2014.03.31 ‹#›
Considering interaction types
• Instructing
• issuing commands and selecting options
• Conversing
• interacting with a system as if having a
conversation
• Manipulating
• interacting with objects in a virtual or physical
space by manipulating them
• Exploring
• moving through a virtual environment or a
physical space

2014.03.31 ‹#›
Considering inteface types

34
 Expanding the conceptual model
• What functions will the product perform?
What will the product do and what will the
human do (task allocation)?
• How are the functions related to each other?
Sequential or parallel?
Categorisations, e.g. all actions related to
telephone memory storage
• What information needs to be available?
What data is required to perform the task?
How is this data to be transformed by the
system?
2014.03.31 ‹#›
 Overview
• Prototyping and construction

• Conceptual design

• Using scenarios in design

• Generating prototypes

• Support for design

2014.03.31 ‹#›
 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
• as a means of co-operation across
professional boundaries
• Plus and minus scenarios to explore
2014.03.31extreme cases ‹#›
 Example plus scenario

S. Bødker (1999) 38
 Example plus scenario

S. Bødker (1999) 39
 Generate storyboard from
scenario

2014.03.31 ‹#›
 Generate card-based
prototype from use case

2014.03.31 ‹#›
 Overview
• Prototyping and construction

• Conceptual design

• Physical design

• Generating prototypes

• Support for design

2014.03.31 ‹#›
 Physical design: getting
concrete
• Producing prototype means making
detailed decisions
• Design platform and application
domain standarts have to be met
– ISO 9241, ISO 13407, ISO 14915
• Interaction patterns, design rules
• Special attention to accessibility and
national culture diferences should be
paid
43
 Welie
interface
patterns

44
Web site patterns
Duyne, Landay, Hong.
The design of sites

45
Interface patterns

• Jennifer Tidwell
– UI patterns and techniques

46
 Designing universally
accessible games

Visual hints for players of UA-Chess with mild memory

or cognitive impairments (Grammenos ir kt., 2009)
47 2014.03.31 11:20
 Implementation of power
distance

High power distance: Malaysian Low power distance: Dutch

Unversity website. Educational website.

48
 Individualism vs. Collectivism

Low individualist value: Costa Rican

National Park website. an emphasis on
High individualist value: US National nature, downplays the individual ourist,
Park website, an emphasis on the and uses a slogan to emphasize a
visitor, his/her goals, and possible national agenda.
actions in coming to the park.
Masculinity vs. Femininity (MAS)

High masculinity website: Excite.com

Low masculinity website: Swedish
for women in Japan
Excite.com.

50
Masculinity vs. Femininity (MAS)

Medium masculinity website: ChickClick.com in the USA.

51
 Uncertainty Avoidance

High uncertainty avoidance: Sabema Low uncertainty avoidance: British

Airlines website from Belgium. Airways website from United Kingdom.
Figure
52
 Long- vs. Short-Term Time
Orientation

Low Long-term orientation: High Long-Term Orientation:

website form Siemens website from Siemens in
Germany China.
 Overview
• Prototyping and construction

• Conceptual design

• Scenarios in design

• Physical design

• Support for design

2014.03.31 ‹#›
 Support for design
• Patterns for interaction design
• individual patterns
• pattern languages
• pattern libraries
• Open source systems and components

• Tools and environments

2014.03.31 ‹#›
56
 Mockup tools

• Mockups

http://www.balsamiq.com/products/mockups 57
Mockup tools

58
 Mockup tools

• http://www.mockflow.com/
• http://www.lumzy.com/
• http://iplotz.com/
• Not up to date but still usefull list
– http://c2.com/cgi/wiki?GuiPrototypingTo
ols

59
 Summary
• Different kinds of prototyping are used for different
purposes and at different stages
• Prototypes answer questions, so prototype
appropriately
• Construction: the final product must be engineered
appropriately
• Conceptual design (the first step of design)
• Consider interaction types and interface types to
prompt creativity

• Storyboards can be generated from scenarios

• Card-based prototypes can be generated from use
2014.03.31 ‹#›
cases
 References
• Rogers, Sharp, Preece (2011). Interaction design: Beyond Human
Computer Interaction. Wiley.
• Bergmann, Haitani (2000). Designing the PalmPilot: A Conversation
with Rob Haitani. Chapter 4 in Information Appliances and Beyond,
Eric Bergman
• Bødker, S. Scenarios in user-centered design – setting the stage for
reflection and action. Interacting with Computers, 2000,13 (1), 61–
76.
• Hartfield, B. Winograd, T. (1996) Profile: IDEO. In T. Winograd
(ed.) Bringing Design to Software, ACM Press, NY.
• Molin, L. Wizard-of-Oz prototyping for cooperative interaction
design of graphical user interfaces. In Proceedings of NordiCHI
2004, October 23-27, Tampere, Finland, pp. 425-428
• S. Bødker (1999) Scenarios in User-Centred Design - setting the
stage for reflection and action. Proceedings of the 32nd Hawaii
International Conference on System Sciences, 1999.

61
 References
• Y.K. Lim, E. Stolterman. The Anatomy of Prototypes:
Prototypes as Filters, Prototypes as Manifestations of
Design Ideas. ACM Transactions on Computer-Human
Interaction 15(2).
• Buchenau, M., Suri, J.F. (2000) Experience prototyping. In
Proceedings of DIS 2000, Design Interactive systems:
Processes, Methods, Techniques, pp. 17-19
• D. Grammenos, A. Savidis, C. Stephanidis. Designing
universally accessible games, Magazine Computers in
Entertainment (CIE) – SPECIAL SSUE: Media Arts and
Games archive Vol. 7 Is. 1, Feb 2009, ACM Press.
• A. Marcus, E.W. GOULD (2000) Crosscurrents: Cultural
Dimensions and Global Web User-Interface Design.
Interactions, 7(4).
62