View
228
Download
0
Category
Preview:
Citation preview
8/3/2019 Rapid Pro to Typing System Concepts
1/54
020 7240 3388
www.system-concepts.com
Rapid
prototypesWhe
nto
use&how
tochoose
8/3/2019 Rapid Pro to Typing System Concepts
2/54
2www.system-concepts.com
What is a prototype?
A model of something to be further developed.
An original, full-scale, and usually working model of a newproduct or new version of an existing product.
A model suitable for use in complete evaluation of form,design, performance, and material processing.
8/3/2019 Rapid Pro to Typing System Concepts
3/54
8/3/2019 Rapid Pro to Typing System Concepts
4/54
4www.system-concepts.com
1. The case for rapid
prototyping
8/3/2019 Rapid Pro to Typing System Concepts
5/54
5www.system-concepts.com
The case for rapid prototypes
Evaluate
Communicate
Inspire a creative session
Prototype as part of the creative process
With real users
Within a design team
Sell a design idea
Request design requirements
Prove a concept
You can use prototypes to
Usability and usefulness
Be creative
8/3/2019 Rapid Pro to Typing System Concepts
6/54
6www.system-concepts.com
The case for rapid prototypingDuring the creative process, you may want to
Play with ideas
See how far you can expand the design space
Dont want to close off design options too early
Dont want to invest too much too early
Visualise solutions
8/3/2019 Rapid Pro to Typing System Concepts
7/54
7www.system-concepts.com
The case for rapid prototypingWhy rapid prototypes can be good for creativity
Not overly detailed
Easy to create
Flexible
Easily modifiable
Cheap & throw-away
8/3/2019 Rapid Pro to Typing System Concepts
8/54
8www.system-concepts.com
The case for rapid prototypingDuring evaluation, you may want to.
Evaluate early
Iteratively test, design and test again (ISO 13407)
Test a number of alternative solutions
Look at the concept and role of the product without
distracting details Isolate key aspects of the look-and-feel
8/3/2019 Rapid Pro to Typing System Concepts
9/54
9www.system-concepts.com
The case for rapid prototypingWhy rapid prototypes are good for evaluation
Can be built early in development
Can explore many alternative designs
Can be easily modified on the fly
Avoid the test getting tied into a big build process
8/3/2019 Rapid Pro to Typing System Concepts
10/54
10www.system-concepts.com
The case for rapid prototyping
To sell a design idea
To request design requirements
You may want to communicate a design
To prove a concept
8/3/2019 Rapid Pro to Typing System Concepts
11/54
11www.system-concepts.com
The case for rapid prototyping
They quickly and clearly convey a message
Why rapid prototypes are good for communication
You dont need to have to explain too much in words
Functions and outcomes are often more important thaninteractivity
You dont want to invest too much time and effort
8/3/2019 Rapid Pro to Typing System Concepts
12/54
12www.system-concepts.com
The case for rapid prototyping
Generally requires a facilitator for interactivity
Difficult to provide full interactivity and functional scope
However, there are downsides of rapid prototypes
So therefore it is important to use them correctly and at
the right time in a development cycle.
8/3/2019 Rapid Pro to Typing System Concepts
13/54
13www.system-concepts.com
2. What should I consider
when rapid prototyping?
8/3/2019 Rapid Pro to Typing System Concepts
14/54
14www.system-concepts.com
On what aspects of the design will it focus?The role of the design
How will the function/feature will be used and will it beuseful?
Prototypes focusing mainly on this aspect:
Should not contain too much visual detail
Do not need to be particularly interactive or responsive
Should show how the design relates to a wider context
Do not need technical accuracy
8/3/2019 Rapid Pro to Typing System Concepts
15/54
15www.system-concepts.com
On what aspects of the design will it focus?The role of the design
Storyboards are a good way to explore the role of a function,without necessarily specifying detail.
User visits the site
and sends the link
to his phone.
He checks the phone
before embarking on
his journey.
During the journey
his checks the site
again
8/3/2019 Rapid Pro to Typing System Concepts
16/54
16www.system-concepts.com
On what aspects of the design will it focus?The look-and-feel of the design
What the user will see, hear, touch and interact with
Prototypes focusing mainly on this aspect:
Should feature suitable detail (appropriate to design questions)
Should be suitably responsive (interactive)
Could focus on narrow elements of the design
Do not need to be technically accurate
8/3/2019 Rapid Pro to Typing System Concepts
17/54
17www.system-concepts.com
On what aspects of the design will it focus?The look-and-feel of the design: Example
Using a sequence of staticscreens, we evaluated
whether users can
correctly locate links, andunderstand iconography.
Following testing, we
decided to reorganise some
of the navigation
8/3/2019 Rapid Pro to Typing System Concepts
18/54
18www.system-concepts.com
On what aspects of the design will it focus?The look-and-feel of the design: Example
Also, by presenting it ascrollable view (in
Word), we received
good feedback aboutfunctions that lie
below the fold.
We have since reconsidered
the layout on some pages
8/3/2019 Rapid Pro to Typing System Concepts
19/54
19www.system-concepts.com
On what aspects of the design will it focus?The implementation of the design
Exploration of technical or organisational feasibility of adesign
Prototypes focusing mainly on this aspect:
Should be technically accurate
Do not need to be visually precise
Can have a wide or narrow focus, depending upon the feature beingexamined
8/3/2019 Rapid Pro to Typing System Concepts
20/54
20www.system-concepts.com
On what aspects of the design will it focus?3 dimensions of prototypes
Implementation
Look & feelRole
Integration
Taken from a model by
Houde & Hill (1997)
Any prototype canbe described within
this space
8/3/2019 Rapid Pro to Typing System Concepts
21/54
21www.system-concepts.com
How much of the user experience will it cover?
The end-to-end user experience
Component task(s)
A single action
A full range of functions or limited functions
8/3/2019 Rapid Pro to Typing System Concepts
22/54
22www.system-concepts.com
How much of the user experience will it cover?Trade-off between range and depth of functions
Vertical
prototype
Horizontal prototype
Depth of
functionality
Range of features/options covered
Full product/
system
8/3/2019 Rapid Pro to Typing System Concepts
23/54
23www.system-concepts.com
Who are the prototypes audience?
Representative end-users
Design team members
Other stakeholders
The make-up of the audience will affect the level of precision,
interactivity and form (e.g. paper or online) of the prototypes
you use.
8/3/2019 Rapid Pro to Typing System Concepts
24/54
24www.system-concepts.com
Does it build on an existing function/feature?
New function/feature
Extension of existing function/feature
Enhancement of existing function/feature
8/3/2019 Rapid Pro to Typing System Concepts
25/54
25www.system-concepts.com
What resources are available?
Low resource situation often requires rapid prototyping
Bear in mind that high investment in a prototype can leadto resistance to throwing away the design after use
Available resources can influence what types of prototype can
be built.
8/3/2019 Rapid Pro to Typing System Concepts
26/54
26www.system-concepts.com
Are there cultural/organisational preferences?
Those commissioning the prototype may haveexpectations or preferences regarding the form of theprototype
For example, the client company may be expecting a highlyprecise (i.e. detailed) prototype
Need to be sensitive to preferences and manageexpectations
8/3/2019 Rapid Pro to Typing System Concepts
27/54
27www.system-concepts.com
Creating the prototype
Characteristics of the end-user
Social, technical and environmental situation in which theuser will access the product or service
Users goals when using the product or service
Determine the relevant contextual aspects
8/3/2019 Rapid Pro to Typing System Concepts
28/54
28www.system-concepts.com
Creating the prototype
Identify the key users tasks associated with the design
Capture the typical usage scenario(s)
Usage scenarios provide important context for the prototype
They are also useful in explaining the prototype to the audience
Determine the key tasks and usage scenarios
Ensure resources are focused upon the key tasks
8/3/2019 Rapid Pro to Typing System Concepts
29/54
29www.system-concepts.com
Creating the content
What information will the user need to view or change?
What input will the user need to enter?
What feedbackwill the user need from the system?
What perspectives or formats will be of value to
users?
Questions to ask about the prototype content
8/3/2019 Rapid Pro to Typing System Concepts
30/54
30www.system-concepts.com
3. What techniques are there
for rapid prototyping?
8/3/2019 Rapid Pro to Typing System Concepts
31/54
31www.system-concepts.com
Techniques for rapid prototyping
Interactivity
Precision
Rapid prototypes can vary by:
8/3/2019 Rapid Pro to Typing System Concepts
32/54
32www.system-concepts.com
Techniques for rapid prototypingLow interactivity / Low precision
Examples:
Creative workshops
Early stages of development
Exploring the role of the product and some look-and-feel
Comparing alternative structures and layouts
Paper sketches Wireframes
Storyboards
Physical prototypes with limited interactivity
Good for:
8/3/2019 Rapid Pro to Typing System Concepts
33/54
33www.system-concepts.com
Techniques for rapid prototypingWireframes
Although you may need to
vary the detail accordingto the audience
Not too much detail so
you dont constrain thedesign process
8/3/2019 Rapid Pro to Typing System Concepts
34/54
34www.system-concepts.com
Techniques for rapid prototypingLow precision physical prototyping
Evaluating theeffect of the
height of
printer standon access to
the roll at the
back.
We placed the user
on varying numbers
of blocks to
simulate varying
heights of a printer
8/3/2019 Rapid Pro to Typing System Concepts
35/54
35www.system-concepts.com
Techniques for rapid prototypingLow precision physical prototyping
During the design of a physical workspace, we built woodenblocks and mounted PC screens on them.
We could see theirresponse to different
configurations, and adjust
them on the fly in response
to users feedback
8/3/2019 Rapid Pro to Typing System Concepts
36/54
36www.system-concepts.com
Techniques for rapid prototyping
Low interactivity / High precision
Good for: Selling design concepts
Evaluating visual design
Exploring some look-and-feel
Examples:
Static screenshots
Automatically animated presentations
Scale drawings with electronic mannequins
Video presentations
8/3/2019 Rapid Pro to Typing System Concepts
37/54
37www.system-concepts.com
Techniques for rapid prototyping
Example of static screenshots
Detailed screendesigns sold new
functions to key
stakeholders.
This prototype was thrown away after use. The actualdesign ended up featuring a different look & feel.
8/3/2019 Rapid Pro to Typing System Concepts
38/54
38www.system-concepts.com
Techniques for rapid prototyping
Example of static screenshots
Detailed screen designs can be easily mocked-up for focusgroup discussions.
It helped participants to imaginethe proposed features
8/3/2019 Rapid Pro to Typing System Concepts
39/54
39www.system-concepts.com
Techniques for rapid prototyping
Example of scale drawings
Mannequin Pro allowed us toexperiment with designs
8/3/2019 Rapid Pro to Typing System Concepts
40/54
40www.system-concepts.com
Techniques for rapid prototyping
Example of scale drawings
..and allowed us to quickly
identify if aspects of the
design are reachable andwithin lines of sight.
8/3/2019 Rapid Pro to Typing System Concepts
41/54
41www.system-concepts.com
Techniques for rapid prototyping
High interactivity / Low precision
Good for:
Exploring some look-and-feel
Evaluating navigational paths and structures
Examples:
Paper prototypes presented in a Wizard-of-Oz style
Early stages of development
8/3/2019 Rapid Pro to Typing System Concepts
42/54
42www.system-concepts.com
Techniques for rapid prototyping
Examples of paper prototypes: Wizard of oz
The test facilitatorsimulates a menu by
placing paper menu
displays onto theprinter control panel in
response to user
actions Can prepare all menu
options to imitate
menu interactivity
8/3/2019 Rapid Pro to Typing System Concepts
43/54
43www.system-concepts.com
Techniques for rapid prototyping
High interactivity / High precision
Good for: Later stages of development
Usability testing and assessing criteria (e.g. completion rates)
Evaluating the subtleties of navigation and visual design
Examples: Hyperlinked screenshots
HTML pages with sets of dummy data
User comparisons with existing products
8/3/2019 Rapid Pro to Typing System Concepts
44/54
44www.system-concepts.com
Techniques for rapid prototyping
Example of hyperlinked screenshots
Quickly create static screens Then add html controls and create links
8/3/2019 Rapid Pro to Typing System Concepts
45/54
45www.system-concepts.com
4. Example of paper
prototype development
8/3/2019 Rapid Pro to Typing System Concepts
46/54
46www.system-concepts.com
Example of building a prototype
A client is planning to develop a transport information
service on interactive Digital TV (iDTV)
The functions comprise: Departures and arrivals information for trains and buses
Live travel information
We want to create an initial design and test it. We are
particularly concerned with the navigational flow
Situation
8/3/2019 Rapid Pro to Typing System Concepts
47/54
47www.system-concepts.com
Example of building a prototype
Focus on the look-and-feel of the service (primarilynavigation) and some aspects of its role
Will be testing with representative end-users
The same functions are currently being delivered by a
mobile service
Fairly low resources and limited by time
Not limited by cultural preferences for the style of prototype
Situation
8/3/2019 Rapid Pro to Typing System Concepts
48/54
48www.system-concepts.com
Example of building a prototype
User profile:
Context of use
25-45
Access digital TV at least once per month
Own a car and drive daily
Has children living with them
Access during the day or evening
Travel patterns tend to centre around transporting children
Has internet and uses it mainly for email
8/3/2019 Rapid Pro to Typing System Concepts
49/54
49www.system-concepts.com
Example of building a prototype
Find out when a train leaves from a local station
Task(s)
Find out if there is traffic in the local area
Sandra is about to take her son to football training this
morning at 11am. There are often incidents on the main road
she takes so she accesses the iDTV site in order to find out if
there are any incidents that will affect her journey.
8/3/2019 Rapid Pro to Typing System Concepts
50/54
50www.system-concepts.com
Example of building a prototype
Identify the user actions and system responses
User System Open initial page
Choose to view news in thelocal area
Select to see road incidents
Offer choice of services
Offer choice of national or
local news
Offer choice of types ofincidents
Choose to view travel news
Display travel incidents
8/3/2019 Rapid Pro to Typing System Concepts
51/54
51www.system-concepts.com
Example of building a prototype
Identify the content
Train departure times
Regional filters
National versus local filters
Road incidents
Content includes
Bus departure times
8/3/2019 Rapid Pro to Typing System Concepts
52/54
52www.system-concepts.com
Example of building a prototype
Main menu
Local travel news
National travel news
Local departures
Local arrivals
National departures
National arrivals
NavigationTerminology Layout
8/3/2019 Rapid Pro to Typing System Concepts
53/54
53www.system-concepts.com
5. And to summarize
8/3/2019 Rapid Pro to Typing System Concepts
54/54
54www.system-concepts.com
When rapid prototyping, determine
Purpose of the prototype
Aspects of the design
The scope of the user experience
Audience of the prototype
Existing function/feature?
Resources available
Cultural preferences
Recommended