Download - Prototyping
![Page 1: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/1.jpg)
1
PROTOTYPING
Eman Abed AlWahhab
![Page 2: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/2.jpg)
OUTLINE
What is a prototype? Goals of prototyping How to Prototype? Why prototype? What to prototype? General Features of Prototyping Benefits of Prototyping Disadvantages of Prototyping Prototyping Approaches and Techniques References
2
![Page 3: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/3.jpg)
3
PROTOTYPING
A limited representation of a design that allows users to interact with it and to explore its suitability
Allows stakeholders to interact with the envisioned product, gain some experience of using and explore imagined uses
Production of an intermediary product to be used as a basis for testing
Aim is to save on time and money Aim is to have something that can be tested with real
users
![Page 4: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/4.jpg)
4
PROTOTYPING
You never get it right first time If at first you don’t succeed …
prototype evaluatedesign
re-design
done!OK?
![Page 5: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/5.jpg)
5
![Page 6: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/6.jpg)
6
WHAT IS A PROTOTYPE
In interaction design it can be any of the following (and more): 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 piece of software with limited functionality written
in the target language or in another language
![Page 7: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/7.jpg)
7
![Page 8: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/8.jpg)
8
PITFALLS OF PROTOTYPING
Moving little by little … but to where
1. need a good start point 2. need to understand what is wrong
![Page 9: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/9.jpg)
9
GOALS OF PROTOTYPINGPrototyping enables evaluation, happens throughout
Exploring requirements Market analysis, participatory design
Choosing among alternatives Risky or critical features, go/no-go decisions
Empirical usability testing As early as possible, try out ideas with target users
Evolutionary development May deliberately choose a malleable software platform, building
software in incremental, iterative fashion
![Page 10: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/10.jpg)
10
![Page 11: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/11.jpg)
HOW TO PROTOTYPE?Build a prototype of the basic functionality, especially
the interface
Test the prototype, which will uncover design errors
Correct the errors
Repeat until you have a clean design
Prototyping is a major tool for improving usability Heavily used in industry
11
![Page 12: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/12.jpg)
12
JOURNEY OF THE PROTOTYPING PROCESS
Goals
Functionality Evaluate
Develop
![Page 13: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/13.jpg)
PROTOTYPING PROCESS
13
![Page 14: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/14.jpg)
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
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
![Page 15: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/15.jpg)
15
WHY PROTOTYPE
Traditional software development: you can’t test until you implement
Implementation is expensive, and there is nothing to test until you have made that expenditure of effort and schedule time
Result: any design errors are built in to the first thing you can test, and it is very expensive to make changes
Result: design errors, unless they are really bad, are left in the product
![Page 16: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/16.jpg)
16
WHAT IS PROTOTYPED ?
Technical issues
Work flow, task design
Screen layouts and information display
Difficult, critical areas
![Page 17: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/17.jpg)
17
![Page 18: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/18.jpg)
18
GENERAL FEATURES OF PROTOTYPING Enables the designer to quickly build or create
examples of :- The data entry form The menu structure and order The dialogue styles Error messages
Should be inexpensive to develop – intention is to discard/modify it
Should not require programming skills
![Page 19: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/19.jpg)
19
PROTOTYPING FOR USABILITY
Usability = ease of use of an application Design typical user task scenarios Identify tasks based on the scenarios Use “Real Users” to test Watch user performing task Iterate design based on test
![Page 20: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/20.jpg)
20
COST OF PROTOTYPING
Cheaper than not doing it...... Cost of repairing an error made in analysis and design
phase can cost up to 100 times the original cost Usability work should amount for 5-10% of a project’s
budget Testing early, iterating often makes the product
cheaper. Prototyping offers a cheap means of testing usability
early in the lifecycle
![Page 21: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/21.jpg)
21
USERS & PROTOTYPES
The only way to really test the interface of a prototype is with real users
The lifecycles give us a way to feed what we discover back into the development process
The question remains of the best way of involving the users
![Page 22: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/22.jpg)
22
Early prototyping Used to evaluate function and interface
Late prototyping Used to evaluate performance
EARLY PROTOTYPING VS. LATE PROTOTYPING
![Page 23: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/23.jpg)
BENEFITS OF PROTOTYPING
Can be used to test every detail of the final product before the product is built
Results in higher user satisfaction
Users are better at evaluating an existing (vs described) system
It brings the users into the process early
23
![Page 24: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/24.jpg)
DISADVANTAGES OF PROTOTYPING
Users may be unfamiliar with the technique.
Management may think that the project is nearly finished if the prototype is “too good,” or that the prototype can be converted into the final product.
24
![Page 25: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/25.jpg)
EVALUATION
It is no good building a prototype if you do not evaluate it!!
Evaluation is another key feature of user centred design
Evaluation will be covered later in the module
25
![Page 26: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/26.jpg)
26
PROTOTYPE REPRESENTATION
How to represent the prototype? Mockup Storyboard Sketches Scenarios Screenshots Functional interface
![Page 27: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/27.jpg)
27
EXAMPLE USE TAGLINES / CAPTIONS
Keep it short: show as much as necessary but not more
![Page 28: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/28.jpg)
28
MOCKUPS / WIREFRAMES
Good for brainstorming Focuses people on high-level design notions Not so good for illustrating flow and the details
![Page 29: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/29.jpg)
PROTOTYPING APPROACHES AND TECHNIQUES
Approaches: Throwaway vs Evolutionary vs Incremental Horizontal vs Vertical Low vs High fidelity
Different techniques including: Storyboards Paper prototypes Wizard of Oz Software prototypes
29
![Page 30: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/30.jpg)
30
PROTOTYPING TECHNIQUES
The three major kinds of prototyping are “Throw away” prototyping ( “rapid prototyping”)
used exclusively in requirements gathering Incremental prototyping
not actually prototyping at all, but the delivery of prioritized functions incrementally to a single, overall design
Evolutionary prototyping (“Rapid Application Development, RAD) as for incremental prototyping but with evolving design
![Page 31: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/31.jpg)
THROWAWAY-EVOLUTIONARY-INCREMENTAL Throwaway (or revolutionary) prototypes
are built, tested and thrown away (useful in early stages) knowledge gained contributes to final system / next prototype can be expensive The prototype is used to get the specs right, then discarded!!
Incremental prototypes final system built as separate components which are released
separately and gradually integrated
Evolutionary prototypes are not discarded but serve as basis for next iteration of the
design danger of initially bad designs persisting The prototype eventually becomes the product
31
![Page 32: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/32.jpg)
THROW-AWAY PROTOTYPING
32
![Page 33: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/33.jpg)
INCREMENTAL DEVELOPMENT PROCESS
33
![Page 34: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/34.jpg)
EVOLUTIONARY PROTOTYPING
34
![Page 35: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/35.jpg)
OTHER PROTOTYPING TECHNIQUES
Full prototype full functionality, lower performance than production
software Horizontal prototype
displays “breadth” of functionality, no lower level detail “back end” support Ex. Database link
Vertical prototype full functionality and performance of a “slice” or small
part of the system
35
![Page 36: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/36.jpg)
36
Different Features
Scenario
Vertical P
roto
type
Horizontal Prototype
Full System
Fu
nctio
nality
![Page 37: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/37.jpg)
37
HORIZONTAL PROTOTYPING
Broad and shallow
Overview with limited underlying functionality
Simulation of entire interface
![Page 38: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/38.jpg)
38
HORIZONTAL PROTOTYPE: BROAD BUT ONLY TOP-LEVEL
![Page 39: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/39.jpg)
39
HORIZONTAL PROTOTYPING
Disadvantages Not possible to perform real work Users cannot interact with real data Often possible to create a wish list interface
Advantages Can be created quickly Gives an idea of how the whole interface will hang
together Identifies top level functionality
![Page 40: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/40.jpg)
40
VERTICAL PROTOTYPING
Reduction of number of features In-depth functionality for a few selected features Tests part of system Tests in depth under realistic circumstances with
real user tasks Main limitation: users cannot move freely
through the system
![Page 41: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/41.jpg)
VERTICAL PROTOTYPE: DEEP, BUT ONLY SOME FUNCTIONS
41
![Page 42: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/42.jpg)
42
FIDELITY
Degree to which prototype accurately represents the appearance and interaction of the product
Judged by how it appears to the person viewing it Not similarity to actual application Not the degree to which the code and other
attributes invisible to the user are accurate
![Page 43: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/43.jpg)
43
FIDELITY SPECTRUM
High Fidelity Close to final product Electronically faithful Uses similar media
Low Fidelity Basis for final product Proof of concept Use of low cost, non-electronic media
![Page 44: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/44.jpg)
LOW-FIDELITY PROTOTYPING
Does not look very much like the final product Uses materials that are very different from the intended final
version, such as paper and cardboard rather than electronic screens and metal
Used during early stages of development Cheap and easy to modify so they support the exploration of
alternative designs and ideas It is never intended to be integrated into the final system.
They are for exploration only
44
![Page 45: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/45.jpg)
EXAMPLES OF LOW-FIDELITY PROTOTYPING
Storyboards Sketching Index cards ‘Wizard of Oz’
45
![Page 46: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/46.jpg)
46
STORYBOARDING A series of key frames as sketches
Originally from film; used to get the idea of a scene Snapshots of the interface at particular points in the
interaction Users can evaluate quickly the direction the interface
is heading
![Page 47: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/47.jpg)
47
Scan the stroller ->
Change the color ->
Place the order ->
Initial screen
![Page 48: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/48.jpg)
48
Scan the shirt ->
Touch previous item ->
Delete that item->
Alternatepath…
![Page 49: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/49.jpg)
49
SKETCHES Drawing of the outward appearance of the intended
system Crudity means people concentrate on high level
concepts But hard to envision a dialog’s progression
Computer Telephone
Last Name:
First Name:
Phone:
Place Call Help
![Page 50: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/50.jpg)
50
![Page 51: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/51.jpg)
51
![Page 52: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/52.jpg)
52
• Index cards (3 X 5 inches) • Each card represents one screen• Often used in website development
USING INDEX CARDS
![Page 53: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/53.jpg)
INDEX CARD EXAMPLE (SCREEN1)
53
![Page 54: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/54.jpg)
INDEX CARD EXAMPLE (SCREEN2)
54
![Page 55: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/55.jpg)
55
‘WIZARD-OF-OZ’ PROTOTYPING• The user thinks they are interacting with a
computer, but a developer is responding to output rather than the system.
• It is the ‘wizard’ (a person from the design team) who is responding rather than the system
• Usually done early in design to understand users’ expectations
>Blurb blurb>Do this>Why?
User
![Page 56: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/56.jpg)
HIGH-FIDELITY PROTOTYPING
Choice of materials and methods Similar or identical to the ones in the final product
Looks more like the final system Appearance, not functionality
Common development environments Macromedia Director, PowerPoint, Visual BasicWeb
development tools Misled user expectations
Users may think they have a full system
56
![Page 57: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/57.jpg)
57
EXAMPLE
HCI Prototype - iPod iCalendar. Android used to build high-fidelity prototype for HCI adjustments
![Page 58: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/58.jpg)
LO-FI VS HI-FI PROTOTYPINGLO-Fi Hi-Fi
58
![Page 59: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/59.jpg)
ADVANTAGES/DISADVANTAGES
59
Prototype Advantages Disadvantages
Low-fidelity prototype
- low developmental cost- evaluate multiple design concepts
- limited error checking - navigational and flow limitations
High-fidelity prototype
- fully interactive- look and feel of final product- clearly defines navigational scheme
- more expensive to develop- time consuming to build- developers are reluctant to change something they have crafted for hours
![Page 60: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/60.jpg)
COMPROMISES IN PROTOTYPING
All prototypes involve compromises Compromises in low-fidelity prototypes:
device doesn't actually work Compromises in high-fidelity prototypes:
slow response sketchy icons limited functionality available
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 60
![Page 61: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/61.jpg)
CONSTRUCTION
61
• Taking the prototypes (or learning from them) and creating a
whole
• Quality must be attended to: usability , reliability, robustness,
maintainability, integrity, portability, efficiency, etc..
• Product must be engineered
• Evolutionary prototyping
• ‘Throw-away’ prototyping
![Page 62: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/62.jpg)
CONCLUSION
Prototyping is used to evaluate, iterate and improve
Different kinds of prototyping are used for different purposes and at different stages
Construction: avoid temptation to build the final product from Hi-Fi prototypes
62
![Page 63: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/63.jpg)
63
REFERENCES
Paper Prototyping: the fast and easy way to design and refine user interfaces
http://paperprototyping.com/
Models, Prototypes, and Evaluations for HCI Design: Making the Structured
Approach Practical George Casaday, Cynthia Rainis
http://www.sigchi.org/chi95/proceedings/tutors/gc_bdy.htm
www.sigchi.org/chi95/proceedings/tutors/gc_bdy.htm
http://hci.stanford.edu/research/prototyping/
http://pages.cpsc.ucalgary.ca/~saul/hci_topics/topics/prototyping.html
http://
hci.epfl.ch/teaching/hci/course_material/lofi-prototype/lecture5-lofi_proto-x6.pdf
![Page 64: Prototyping](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c716ab4a79599a708b4646/html5/thumbnails/64.jpg)
64