Overview
11.2 Prototyping
11.3 Conceptual design
11.4 Concrete design
11.5 Using scenarios
11.6 Generating prototypes
11.7 Construction
[Link] 2
11.2 Prototyping
• What is a prototype?
• Why prototype?
• Limitation of prototype?
• Different kinds of prototyping
- Low fidelity (Lofi)
- High fidelity
• Compromises in prototyping
- Vertical
- Horizontal
• Final product needs to be engineered
[Link] 3
What is a prototype?
In other design fields a prototype is a small-scale
model:
• a miniature car
• a miniature building or town
• the examples here come
from a 3D printer
[Link] 4
The use of 3D printing in James Bond's new Skyfall film
[Link]
Printing..html
(c) A teddy bear ‘printed’ from a wireframe
design [Link]
bears/
[Link] 6
3D-printed Teddy Bears paves the path toward 3D printing clothes
[Link]
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 Power-point 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
[Link] 8
PA: personal
assistant
PalmPilot
a series of screen sketches
THE LOGIN SCREEN AND LOGIN PROCESS
a series of screen sketches
THE DASHBOARD, APPS MANAGER, AND MONITOR
BASIC LAYOUTS.
a series of screen sketches
THE SLIDING NAVIGATION CONCEPT.
Sketching to problem solve
a storyboard
[Link]
[Link]
a storyboard
[Link]
screen sketches, paper and cardboard mockups, wireframes, and many
post-its.
[Link]
Prototyping screens and information architecture
[Link]
Why prototype?
• Stakeholders can see, hold, interact with a prototype
more easily than a document or a drawing
• Team members can communicate effectively
• You (designer) can test out ideas for yourself
• It encourages reflection: very important aspect of design
• Prototypes answer questions, and support designers in
choosing between alternatives
[Link] 18
Low-fidelity Prototyping
• Uses a medium which is unlike the final medium, e.g.
paper, cardboard
• Is quick, cheap and easily changed useful
• Importance in early stages of development
• Examples:
– sketches of screens, task sequences, etc
– ‘post-it’ notes
– storyboards
– ‘Wizard-of-Oz’
– Lump of wood and PalmPilot
[Link] 20
Storyboarding
• Often used with scenarios, bringing
more detail, and a chance for users 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
[Link] 21
Example of storyboards
Sketching
• Sketching is important to low-fidelity
prototyping
• Don’t be inhibited about drawing ability.
Practice simple symbols
[Link] 14
Some simple sketches
[Link] 25
Index cards (Card-based prototypes)
• Index cards (3 X 5
inches)
• Each card represents
one screen or part of
screen
• Often used in website
development
[Link] 15
‘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?
26
[Link]
Activity 11.1
Hãy tạo một storyboard để mô tả việc nạp
nhiên liệu xăng vào xe hơi
[Link] 25
Activity 11.1
[Link] 14
How to sketch
• [Link]
• [Link]
[Link]
UX sketching techniques
[Link]
[Link] 30
Sketching Techniques for UX Designers
[Link]
EMhgNOoT6U8io239Z24FXFJkn
[Link] 31
UX Writing Tips for Designers
[Link]
[Link] 32
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
• High-fidelity prototypes can be developed by
integrating existing hardware and software
components
• Danger that users think they have a complete
system…….see compromises
[Link] 33
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
[Link] 34
Box 11.1
Filtering dimensions of prototyping
35
[Link]
Box 11.1
Manifestation dimensions of prototyping
36
[Link]
Advantages and disadvantages of low- and
highfidelity prototypes
[Link] 37
Case study
Generate card-based prototype from use case
[Link] 26
What to prototype?
• Technical issues
• Work flow, task design
• Screen layouts and information display
• Difficult, controversial, critical areas
[Link] 39
11.3 Conceptual design
• Transform user requirements/needs into a
conceptual model
• A conceptual model is an outline of what people can
do with a product and what concepts are needed to
understand and interact with it
• Mood board may be used to capture feel
• Consider alternatives: prototyping helps
[Link] 40
Broad
Mood board
Black board
Xem thêm: [Link]
[Link] 41
Mood board
[Link] 42
UX Mood board
Source: [Link]
11.3.1 Developing an Initial Conceptual
Model
• Derive from the requirements for the
product
• Steep yourself in the data you have
gathered about your users and their goals
and try to empathize with them.
[Link] 44
Really understand the users’ experience
[Link] 45
Really understand the users’ experience
Is there a suitable metaphor?
• Interface metaphors combine familiar knowledge with
new knowledge in a way that will help the user
understand the product.
• Example:
[Link] 47
Is there a suitable metaphor?
• Interface metaphors combine familiar knowledge with
new knowledge in a way that will help the user
understand the product.
• Example:
[Link] 48
Microsoft Window Hình tượng window trong CNTT có phải là 1 metaphor hay không?
Is there a suitable metaphor?
• Three steps to choose a good interface metaphor:
• understand functionality requirements,
• identify potential task cause
problems/complicated/critical
• generate metaphors
• Evaluate metaphors:
How much structure does metaphor provide?
How much of the metaphor is relevant to the
problem?
Is it easy to represent (with visual/audio/words)?
Will the audience understand the metaphor?
How extensible is the metaphor? 50
Another example of suitable metaphor – a
printed travel brochure
1. Does it supply structure?
2. How much of the metaphor is relevant?
3. Is it easy to represent?
4. Will your audience understand the
metaphor
5. How extensible is the metaphor?
[Link] 51
Activity 11.2
• Another possible interface metaphor for the
travel organizer is the travel consultant
• Ask the five questions above of this
metaphor.
[Link] 52
Considering interaction and
interface types
Interaction type - How the user invokes actions
• Instructing (ra chỉ thị/mệnh lệnh):
– typing in commands,
– selecting options from menus in a windows environment or on a multitouch screen
– speaking aloud commands,
– gesturing,
– pressing buttons,
– or using a combination of function keys.
• Conversing (đối thoại)
- users have a dialog with a system.
- users can speak via an interface or type in questions to which the system replies via text
or speech output.
• Manipulating
• Exploring [Link] 53
Considering interaction types
• Manipulating
– where users interact with objects in a virtual or physical space
by manipulating them (e.g. opening, holding, closing, placing).
• Exploring
– where users move through a virtual environment or a physical
space.
– Ex: explore the interior of a building
– Ex: virtual universities
– Ex: fantasy worlds where people wander around different
places to socialize (e.g. virtual parties)
[Link] 54
Example of “exploring interaction”
Considering interface types
• Shareable
• Tangible (next slides)
• Augmented and mixed reality,…:
– Ex: replace physical brochure by others
[Link] 56
[Link]
[Link]
[Link]
[Link]
Activity 11.3
Xem xét dịch vụ cho thuê phim…
1. Identify tasks associated with this product
that would best be supported by each of the
interaction types instructing, conversing,
manipulating, and exploring.
2. Pick out two interface types from Chapter
6 that might provide a different perspective
on the design
[Link] 59
Expanding the initial conceptual model
• What functions will the product perform?
- What will the product do and what will the user do
(task allocation)?
- Which function to hard-wire into the product, which
to leave under software control?
• How are the functions related to each other?
- Sequential or parallel? (temporally)
- Categorisations, e.g. all actions related to privacy
on a smartphone
- The relationships between tasks
• What information is needed?
- What data is required to perform the task?
- How is this data to be transformed by the system? 60
11.4 Concrete design
• Many aspects to concrete design
– Color and graphics, icons, buttons, interface
types, interaction devices etc.
• User characteristics and context
• Accessibility, cross-cultural design
[Link] 61
11.5 Using scenarios
• Express proposed or imagined situations
• Stakeholders are involved in producing and checking
through scenarios for a product. Roles of scenarios:
– as a basis for overall design
– concrete examples of tasks, for technical implementation
– as a means of cooperation within design teams
– as a means of co-operation across professional
boundaries
• Plus and minus scenarios to explore extreme cases
[Link] 62
Example plus and minus scenarios
• [Link]
[Link] 63
Activity 11.4
• Consider an augmented reality in-car
navigation system that takes information
from a GPS and displays routes and traffic
information directly onto the car windscreen.
Suggest one plus and one minus scenario.
• For the plus scenario, think of the possible
benefits of the system.
• For the minus scenario, imagine what could
go wrong
[Link] 64
11.6 Generating prototypes
Low – fidelity prototypes:
• Generating Storyboards from Scenarios
• Generating Card-Based Prototypes from Use
Cases
[Link] 66
Example of travel organizer
1. The Thomson family gather around the organizer
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.
[Link] 67
Activity 11.5
• Activity 10.3 asked you to develop a
futuristic scenario for the one-stop car
shop. Using this scenario, develop a
storyboard that focuses on the
environment of the user.
• As you are drawing this storyboard, write
down the design issues you are prompted
to consider.
[Link] 69
[Link] 70
[Link]
11.7 Construction: physical computing
• Build and code prototypes using electronics
• Toolkits available include
– Arduino
– LilyPad (for fabrics)
– Senseboard
– MaKey MaKey
• Designed for use by wide range of people
[Link] 30
Physical computing kits
[Link]
31
[Link]
Physical computing kits
[Link] 32
Physical computing kits
[Link] 33
Construction: SDKs
• Software Development Kits
– programming tools and components to develop for a
specific platform, e.g. iOS
• Includes: IDE, documentation, drivers, sample
code, application programming interfaces
(APIs)
• Makes development much easier
• Microsoft’s Kinect SDK has been used in
research
34
[Link]
Summary
• Different kinds of prototyping are used for different
purposes and at different stages
• Prototypes answer questions
• The final product must be engineered appropriately
• Two aspects of design: conceptual and concrete
• To generate conceptual design, consider interface
metaphors, interaction types and interface types
• Storyboards can be generated from scenarios
• Card-based prototypes can be generated from use cases
• Physical computing kits and SDKs facilitate transition
from design to construction 77
[Link]