Prototyping - univie.ac.atvda.univie.ac.at/Teaching/HCI/19s/LectureNotes/04_Prototyping.pdf ·...
Transcript of Prototyping - univie.ac.atvda.univie.ac.at/Teaching/HCI/19s/LectureNotes/04_Prototyping.pdf ·...
![Page 1: Prototyping - univie.ac.atvda.univie.ac.at/Teaching/HCI/19s/LectureNotes/04_Prototyping.pdf · Prototypes / Mock-ups What is a prototype? − A prototype is a limited representation](https://reader030.fdocuments.net/reader030/viewer/2022040903/5e761482def0e4530a5e6cb4/html5/thumbnails/1.jpg)
Prototyping
Dr. Oliver HödlUniversität Wien, Cooperative Systems
Version 25. März 2019
![Page 2: Prototyping - univie.ac.atvda.univie.ac.at/Teaching/HCI/19s/LectureNotes/04_Prototyping.pdf · Prototypes / Mock-ups What is a prototype? − A prototype is a limited representation](https://reader030.fdocuments.net/reader030/viewer/2022040903/5e761482def0e4530a5e6cb4/html5/thumbnails/2.jpg)
Prototyping and Sketching
− Not just a “byproduct” of design but substantial “instrument” of
creative thinking and learning processes
− Both, the ability to “draw” and “read” sketches are qualifications
that distinguish designers from non-designers
− It’s not the result that matters, but the process!
− Smooth transition between sketch and prototype
![Page 3: Prototyping - univie.ac.atvda.univie.ac.at/Teaching/HCI/19s/LectureNotes/04_Prototyping.pdf · Prototypes / Mock-ups What is a prototype? − A prototype is a limited representation](https://reader030.fdocuments.net/reader030/viewer/2022040903/5e761482def0e4530a5e6cb4/html5/thumbnails/3.jpg)
Prototypes / Mock-upsWhat is a prototype?
− A prototype is a limited representation of a design at an early design stage. The goal of the
prototype is to test and inspect usability, and to detect and correct potential design failures as
early as possible.
What is a mock-up?
− A mock-up in software engineering is a rudimentary throw-away prototype software that will
look like the UI without having to build the software or the underlying functionality
Is there a difference?
− Not really
− “A mock-up is a prototype if it provides at least part of the functionality of a system and enables
testing of a design”
Quellen: https://tugll.tugraz.at/akhci/weblog/565.html
http://archive.news.softpedia.com/news/KSC-Gets-Orion-Mock-Up-for-Testing-103300.shtml
![Page 4: Prototyping - univie.ac.atvda.univie.ac.at/Teaching/HCI/19s/LectureNotes/04_Prototyping.pdf · Prototypes / Mock-ups What is a prototype? − A prototype is a limited representation](https://reader030.fdocuments.net/reader030/viewer/2022040903/5e761482def0e4530a5e6cb4/html5/thumbnails/4.jpg)
Low and High
Fidelity Prototypes
Different Types
![Page 5: Prototyping - univie.ac.atvda.univie.ac.at/Teaching/HCI/19s/LectureNotes/04_Prototyping.pdf · Prototypes / Mock-ups What is a prototype? − A prototype is a limited representation](https://reader030.fdocuments.net/reader030/viewer/2022040903/5e761482def0e4530a5e6cb4/html5/thumbnails/5.jpg)
Low Fidelity Prototyping
− for testing ideas and sequences
− fast, cheap, easy to change, throw-away
− very communicative as all parties involved can be included
(everybody can draw, no need to be a graphic designer)
− No/little functionality —> limited ability to detect errors
− Not all ideas might be technically feasible
![Page 6: Prototyping - univie.ac.atvda.univie.ac.at/Teaching/HCI/19s/LectureNotes/04_Prototyping.pdf · Prototypes / Mock-ups What is a prototype? − A prototype is a limited representation](https://reader030.fdocuments.net/reader030/viewer/2022040903/5e761482def0e4530a5e6cb4/html5/thumbnails/6.jpg)
High Fidelity Prototyping
− for testing details specific functionality
−more functionality, closer to the final product
− easier to test, as users can interact with the prototype
− expensive and time consuming —> reluctance to change (due to
high costs)
![Page 7: Prototyping - univie.ac.atvda.univie.ac.at/Teaching/HCI/19s/LectureNotes/04_Prototyping.pdf · Prototypes / Mock-ups What is a prototype? − A prototype is a limited representation](https://reader030.fdocuments.net/reader030/viewer/2022040903/5e761482def0e4530a5e6cb4/html5/thumbnails/7.jpg)
Paper Prototyping
− Low-fidelity method
− for websites, desktop tools, but also for mobile applications
− start with selecting the task that the user should do
− manually “draw” screenshots
Quelle: http://events.ccc.de/congress/2005/fahrplan/attachments/712-slides_paper_prototyping.pdf
![Page 8: Prototyping - univie.ac.atvda.univie.ac.at/Teaching/HCI/19s/LectureNotes/04_Prototyping.pdf · Prototypes / Mock-ups What is a prototype? − A prototype is a limited representation](https://reader030.fdocuments.net/reader030/viewer/2022040903/5e761482def0e4530a5e6cb4/html5/thumbnails/8.jpg)
Example: Export Images from PDF
Quelle: http://events.ccc.de/congress/2005/fahrplan/attachments/712-slides_paper_prototyping.pdf
![Page 9: Prototyping - univie.ac.atvda.univie.ac.at/Teaching/HCI/19s/LectureNotes/04_Prototyping.pdf · Prototypes / Mock-ups What is a prototype? − A prototype is a limited representation](https://reader030.fdocuments.net/reader030/viewer/2022040903/5e761482def0e4530a5e6cb4/html5/thumbnails/9.jpg)
Example: Page setup
Quelle: http://www.snyderconsulting.net/us-paper.pdf
![Page 10: Prototyping - univie.ac.atvda.univie.ac.at/Teaching/HCI/19s/LectureNotes/04_Prototyping.pdf · Prototypes / Mock-ups What is a prototype? − A prototype is a limited representation](https://reader030.fdocuments.net/reader030/viewer/2022040903/5e761482def0e4530a5e6cb4/html5/thumbnails/10.jpg)
Example: Power Point
Quelle: http://events.ccc.de/congress/2005/fahrplan/attachments/712-slides_paper_prototyping.pdf
![Page 11: Prototyping - univie.ac.atvda.univie.ac.at/Teaching/HCI/19s/LectureNotes/04_Prototyping.pdf · Prototypes / Mock-ups What is a prototype? − A prototype is a limited representation](https://reader030.fdocuments.net/reader030/viewer/2022040903/5e761482def0e4530a5e6cb4/html5/thumbnails/11.jpg)
Example: Multi-View Visualization
![Page 12: Prototyping - univie.ac.atvda.univie.ac.at/Teaching/HCI/19s/LectureNotes/04_Prototyping.pdf · Prototypes / Mock-ups What is a prototype? − A prototype is a limited representation](https://reader030.fdocuments.net/reader030/viewer/2022040903/5e761482def0e4530a5e6cb4/html5/thumbnails/12.jpg)
Example:
Multi-View
Visualization
![Page 13: Prototyping - univie.ac.atvda.univie.ac.at/Teaching/HCI/19s/LectureNotes/04_Prototyping.pdf · Prototypes / Mock-ups What is a prototype? − A prototype is a limited representation](https://reader030.fdocuments.net/reader030/viewer/2022040903/5e761482def0e4530a5e6cb4/html5/thumbnails/13.jpg)
Example: Smartphone app
Basic UI Design Sketches for the Smartphone App “opera.guru”
![Page 14: Prototyping - univie.ac.atvda.univie.ac.at/Teaching/HCI/19s/LectureNotes/04_Prototyping.pdf · Prototypes / Mock-ups What is a prototype? − A prototype is a limited representation](https://reader030.fdocuments.net/reader030/viewer/2022040903/5e761482def0e4530a5e6cb4/html5/thumbnails/14.jpg)
Example: Device prototypes
Quelle: http://events.ccc.de/congress/2005/fahrplan/attachments/712-slides_paper_prototyping.pdfWooden PalmPilot - Mark Richards 1995
![Page 15: Prototyping - univie.ac.atvda.univie.ac.at/Teaching/HCI/19s/LectureNotes/04_Prototyping.pdf · Prototypes / Mock-ups What is a prototype? − A prototype is a limited representation](https://reader030.fdocuments.net/reader030/viewer/2022040903/5e761482def0e4530a5e6cb4/html5/thumbnails/15.jpg)
Interacting with paper prototypes
App paper prototypehttp://www.youtube.com/watch?v=6TbyXq3XHSc
Web mail paper prototypehttps://www.youtube.com/watch?v=GrV2SZuRPv0#t=98
![Page 16: Prototyping - univie.ac.atvda.univie.ac.at/Teaching/HCI/19s/LectureNotes/04_Prototyping.pdf · Prototypes / Mock-ups What is a prototype? − A prototype is a limited representation](https://reader030.fdocuments.net/reader030/viewer/2022040903/5e761482def0e4530a5e6cb4/html5/thumbnails/16.jpg)
Exercise: 5 minutes
− Goal: Make a paper prototype for a mobile “slim u:space” app
that allows students to sign up for their courses (task)
− Use different panels to “imitate" interactivity
− Use only pen and paper
![Page 17: Prototyping - univie.ac.atvda.univie.ac.at/Teaching/HCI/19s/LectureNotes/04_Prototyping.pdf · Prototypes / Mock-ups What is a prototype? − A prototype is a limited representation](https://reader030.fdocuments.net/reader030/viewer/2022040903/5e761482def0e4530a5e6cb4/html5/thumbnails/17.jpg)
Exercise 2: 5 minutes
− Describe an instance of the user task to be performed with this
paper version of your design
− Test it with the person next to you
− Be open for ideas and comments
![Page 18: Prototyping - univie.ac.atvda.univie.ac.at/Teaching/HCI/19s/LectureNotes/04_Prototyping.pdf · Prototypes / Mock-ups What is a prototype? − A prototype is a limited representation](https://reader030.fdocuments.net/reader030/viewer/2022040903/5e761482def0e4530a5e6cb4/html5/thumbnails/18.jpg)
Paper PrototypingUseful for checking
− understandable terminology?
− Does the navigation work as expected by
the user?
− Is all the necessary information provided?
− Layout (too much/too little information,
what is where)
− Missing functionality?
Not so useful for checking
− technical realisation
− response times
− certain interactions: scrolling, …
− colors, fonts,… (if hand-drawn)
Quelle: http://www.snyderconsulting.net/us-paper.pdf
![Page 19: Prototyping - univie.ac.atvda.univie.ac.at/Teaching/HCI/19s/LectureNotes/04_Prototyping.pdf · Prototypes / Mock-ups What is a prototype? − A prototype is a limited representation](https://reader030.fdocuments.net/reader030/viewer/2022040903/5e761482def0e4530a5e6cb4/html5/thumbnails/19.jpg)
Axure (http://www.axure.com/)
Balsamiq (http://balsamiq.com)
Mockflow (http://www.mockflow.com)
appery.io (http://appery.io)
Pencil (http://pencil.evolus.vn)
Mockingbird (https://gomockingbird.com)
WireframeSkatcher (http://wireframesketcher.com)
Web Site Wireframe Tool (http://wireframe.talltree.us)
Hot Gloo – The Online Wireframe App (http://www.hotgloo.com)
Cacoo (https://cacoo.com)
iPhone Mockup Web App (http://iphonemockup.lkmc.ch)
Mockup/Wireframe tools
iPhone Mockup Web App
http://dpqaiv.axshare.co
m/#p=iphone_frame_for
_desktop_view
![Page 20: Prototyping - univie.ac.atvda.univie.ac.at/Teaching/HCI/19s/LectureNotes/04_Prototyping.pdf · Prototypes / Mock-ups What is a prototype? − A prototype is a limited representation](https://reader030.fdocuments.net/reader030/viewer/2022040903/5e761482def0e4530a5e6cb4/html5/thumbnails/20.jpg)
Discussion
Hand-drawn paper
vs.
Actual design through mockup tool
![Page 21: Prototyping - univie.ac.atvda.univie.ac.at/Teaching/HCI/19s/LectureNotes/04_Prototyping.pdf · Prototypes / Mock-ups What is a prototype? − A prototype is a limited representation](https://reader030.fdocuments.net/reader030/viewer/2022040903/5e761482def0e4530a5e6cb4/html5/thumbnails/21.jpg)
Sketchy Rendering / Wireframing
Trying to combine the benefits
https://balsamiq.com/
balsamiqsketchy rendering for
visualizations
http://www.gicentre.net/handy/sego
![Page 22: Prototyping - univie.ac.atvda.univie.ac.at/Teaching/HCI/19s/LectureNotes/04_Prototyping.pdf · Prototypes / Mock-ups What is a prototype? − A prototype is a limited representation](https://reader030.fdocuments.net/reader030/viewer/2022040903/5e761482def0e4530a5e6cb4/html5/thumbnails/22.jpg)
Low-Fidelity Prototypes
![Page 23: Prototyping - univie.ac.atvda.univie.ac.at/Teaching/HCI/19s/LectureNotes/04_Prototyping.pdf · Prototypes / Mock-ups What is a prototype? − A prototype is a limited representation](https://reader030.fdocuments.net/reader030/viewer/2022040903/5e761482def0e4530a5e6cb4/html5/thumbnails/23.jpg)
High-Fidelity Prototypes
![Page 24: Prototyping - univie.ac.atvda.univie.ac.at/Teaching/HCI/19s/LectureNotes/04_Prototyping.pdf · Prototypes / Mock-ups What is a prototype? − A prototype is a limited representation](https://reader030.fdocuments.net/reader030/viewer/2022040903/5e761482def0e4530a5e6cb4/html5/thumbnails/24.jpg)
High-Fidelity Prototypes
Ferrari prototypte(Photo Brad Anderson)
Trombosonic
New digital music instrument
![Page 25: Prototyping - univie.ac.atvda.univie.ac.at/Teaching/HCI/19s/LectureNotes/04_Prototyping.pdf · Prototypes / Mock-ups What is a prototype? − A prototype is a limited representation](https://reader030.fdocuments.net/reader030/viewer/2022040903/5e761482def0e4530a5e6cb4/html5/thumbnails/25.jpg)
High-Fidelity PrototypesLooks & feels like the final product to the user
− Colors, screen layout, fonts, text used…
− Response time and interactive behavior!
Functionality might still be restricted
− Only certain functions might work
− Functionality is targeted towards the tasks (e.g. a search query is predetermined)
− Non-visible issues (e.g. security) are not regarded
Can be used to predict task efficiency of the product
![Page 26: Prototyping - univie.ac.atvda.univie.ac.at/Teaching/HCI/19s/LectureNotes/04_Prototyping.pdf · Prototypes / Mock-ups What is a prototype? − A prototype is a limited representation](https://reader030.fdocuments.net/reader030/viewer/2022040903/5e761482def0e4530a5e6cb4/html5/thumbnails/26.jpg)
Cheap “High-Fidelity” Prototypes
![Page 27: Prototyping - univie.ac.atvda.univie.ac.at/Teaching/HCI/19s/LectureNotes/04_Prototyping.pdf · Prototypes / Mock-ups What is a prototype? − A prototype is a limited representation](https://reader030.fdocuments.net/reader030/viewer/2022040903/5e761482def0e4530a5e6cb4/html5/thumbnails/27.jpg)
“Wizard of Oz”
Metro-Goldwyn-Mayer 1939
![Page 28: Prototyping - univie.ac.atvda.univie.ac.at/Teaching/HCI/19s/LectureNotes/04_Prototyping.pdf · Prototypes / Mock-ups What is a prototype? − A prototype is a limited representation](https://reader030.fdocuments.net/reader030/viewer/2022040903/5e761482def0e4530a5e6cb4/html5/thumbnails/28.jpg)
Example: Audience participation
![Page 29: Prototyping - univie.ac.atvda.univie.ac.at/Teaching/HCI/19s/LectureNotes/04_Prototyping.pdf · Prototypes / Mock-ups What is a prototype? − A prototype is a limited representation](https://reader030.fdocuments.net/reader030/viewer/2022040903/5e761482def0e4530a5e6cb4/html5/thumbnails/29.jpg)
Example: Audience participation
Hödl, O. Fitzpatrick, G. Holland, S. (2014) Experimence: Considerations for Composing a Rock Song for Interactive Audience Participation.http://oro.open.ac.uk/43245/1/Oliver%20Hodl%20Experimence%20ICMC2014.pdf
![Page 30: Prototyping - univie.ac.atvda.univie.ac.at/Teaching/HCI/19s/LectureNotes/04_Prototyping.pdf · Prototypes / Mock-ups What is a prototype? − A prototype is a limited representation](https://reader030.fdocuments.net/reader030/viewer/2022040903/5e761482def0e4530a5e6cb4/html5/thumbnails/30.jpg)
„Video Sketch“
Simple video to demonstrate a prototype idea
Using stills for UIs, short clips for interation
Avoid video editing software, use slideshow
Example:
https://www.youtube.com/watch?v=_A0qsWMDMFc
![Page 31: Prototyping - univie.ac.atvda.univie.ac.at/Teaching/HCI/19s/LectureNotes/04_Prototyping.pdf · Prototypes / Mock-ups What is a prototype? − A prototype is a limited representation](https://reader030.fdocuments.net/reader030/viewer/2022040903/5e761482def0e4530a5e6cb4/html5/thumbnails/31.jpg)
![Page 32: Prototyping - univie.ac.atvda.univie.ac.at/Teaching/HCI/19s/LectureNotes/04_Prototyping.pdf · Prototypes / Mock-ups What is a prototype? − A prototype is a limited representation](https://reader030.fdocuments.net/reader030/viewer/2022040903/5e761482def0e4530a5e6cb4/html5/thumbnails/32.jpg)
Horizontal and
Vertical Prototypes
Different Types
![Page 33: Prototyping - univie.ac.atvda.univie.ac.at/Teaching/HCI/19s/LectureNotes/04_Prototyping.pdf · Prototypes / Mock-ups What is a prototype? − A prototype is a limited representation](https://reader030.fdocuments.net/reader030/viewer/2022040903/5e761482def0e4530a5e6cb4/html5/thumbnails/33.jpg)
Horizontal and Vertical Prototyping
Full System
Different features
http://www.nngroup.com/articles/guerrilla-hci/
Funct
ionalit
y
![Page 34: Prototyping - univie.ac.atvda.univie.ac.at/Teaching/HCI/19s/LectureNotes/04_Prototyping.pdf · Prototypes / Mock-ups What is a prototype? − A prototype is a limited representation](https://reader030.fdocuments.net/reader030/viewer/2022040903/5e761482def0e4530a5e6cb4/html5/thumbnails/34.jpg)
Full System
Different features
http://www.nngroup.com/articles/guerrilla-hci/
Funct
ionalit
y
Horizontal PT
Horizontal and Vertical Prototyping
![Page 35: Prototyping - univie.ac.atvda.univie.ac.at/Teaching/HCI/19s/LectureNotes/04_Prototyping.pdf · Prototypes / Mock-ups What is a prototype? − A prototype is a limited representation](https://reader030.fdocuments.net/reader030/viewer/2022040903/5e761482def0e4530a5e6cb4/html5/thumbnails/35.jpg)
Horizontal PrototypesDemonstrate the feature spectrum of a product
− Allows the user to navigate the system
− The actual functions are not implemented
Helps to evaluate / test
− Navigation (e.g. finding a specific function or feature)
− Overall user interface concept
− Feature inclusions and placement
− Accessibility
− User preferences
Often used in early stages
![Page 36: Prototyping - univie.ac.atvda.univie.ac.at/Teaching/HCI/19s/LectureNotes/04_Prototyping.pdf · Prototypes / Mock-ups What is a prototype? − A prototype is a limited representation](https://reader030.fdocuments.net/reader030/viewer/2022040903/5e761482def0e4530a5e6cb4/html5/thumbnails/36.jpg)
Full System
Different features
http://www.nngroup.com/articles/guerrilla-hci/
Funct
ionalit
y
Vert
ical PT
Horizontal and Vertical Prototyping
![Page 37: Prototyping - univie.ac.atvda.univie.ac.at/Teaching/HCI/19s/LectureNotes/04_Prototyping.pdf · Prototypes / Mock-ups What is a prototype? − A prototype is a limited representation](https://reader030.fdocuments.net/reader030/viewer/2022040903/5e761482def0e4530a5e6cb4/html5/thumbnails/37.jpg)
Vertical PrototypesDemonstrate a selected feature of a product
− Allows the user only to use this specific function
− The details of the function/feature are shown/implemented
Helps to evaluate / test
− The optimal design for a particular function
− Compare different designs of a function
− Optimize the usability of this function
− User performance for this particular function
Mainly used in high-fidelity prototyping but can be applicable to low-fidelity
![Page 38: Prototyping - univie.ac.atvda.univie.ac.at/Teaching/HCI/19s/LectureNotes/04_Prototyping.pdf · Prototypes / Mock-ups What is a prototype? − A prototype is a limited representation](https://reader030.fdocuments.net/reader030/viewer/2022040903/5e761482def0e4530a5e6cb4/html5/thumbnails/38.jpg)
The Prototyping “T”
Full System
Different features
Funct
ionalit
y
http://www.nngroup.com/articles/guerrilla-hci/
![Page 39: Prototyping - univie.ac.atvda.univie.ac.at/Teaching/HCI/19s/LectureNotes/04_Prototyping.pdf · Prototypes / Mock-ups What is a prototype? − A prototype is a limited representation](https://reader030.fdocuments.net/reader030/viewer/2022040903/5e761482def0e4530a5e6cb4/html5/thumbnails/39.jpg)
Cheap Prototype: Scenarios
Full System
Different features
Funct
ionalit
y
Scenario
http://www.nngroup.com/articles/guerrilla-hci/
![Page 40: Prototyping - univie.ac.atvda.univie.ac.at/Teaching/HCI/19s/LectureNotes/04_Prototyping.pdf · Prototypes / Mock-ups What is a prototype? − A prototype is a limited representation](https://reader030.fdocuments.net/reader030/viewer/2022040903/5e761482def0e4530a5e6cb4/html5/thumbnails/40.jpg)
“Icicle” Prototypes
Full System
Different features
Funct
ionalit
y
![Page 41: Prototyping - univie.ac.atvda.univie.ac.at/Teaching/HCI/19s/LectureNotes/04_Prototyping.pdf · Prototypes / Mock-ups What is a prototype? − A prototype is a limited representation](https://reader030.fdocuments.net/reader030/viewer/2022040903/5e761482def0e4530a5e6cb4/html5/thumbnails/41.jpg)
When?
How often?
Prototyping
![Page 42: Prototyping - univie.ac.atvda.univie.ac.at/Teaching/HCI/19s/LectureNotes/04_Prototyping.pdf · Prototypes / Mock-ups What is a prototype? − A prototype is a limited representation](https://reader030.fdocuments.net/reader030/viewer/2022040903/5e761482def0e4530a5e6cb4/html5/thumbnails/42.jpg)
Rapid Prototyping
Analysis
Design
Validation
Implementation
![Page 43: Prototyping - univie.ac.atvda.univie.ac.at/Teaching/HCI/19s/LectureNotes/04_Prototyping.pdf · Prototypes / Mock-ups What is a prototype? − A prototype is a limited representation](https://reader030.fdocuments.net/reader030/viewer/2022040903/5e761482def0e4530a5e6cb4/html5/thumbnails/43.jpg)
Rapid PrototypingIncreasing fidelity of prototypes
![Page 44: Prototyping - univie.ac.atvda.univie.ac.at/Teaching/HCI/19s/LectureNotes/04_Prototyping.pdf · Prototypes / Mock-ups What is a prototype? − A prototype is a limited representation](https://reader030.fdocuments.net/reader030/viewer/2022040903/5e761482def0e4530a5e6cb4/html5/thumbnails/44.jpg)
“Fake it till you make it”
Make fake apps
Show people
Learn from their feedback
https://developer.apple.com/videos/play/wwdc2014
![Page 45: Prototyping - univie.ac.atvda.univie.ac.at/Teaching/HCI/19s/LectureNotes/04_Prototyping.pdf · Prototypes / Mock-ups What is a prototype? − A prototype is a limited representation](https://reader030.fdocuments.net/reader030/viewer/2022040903/5e761482def0e4530a5e6cb4/html5/thumbnails/45.jpg)
Serial/Parallel Prototyping
Does creating and receiving feedback on single prototypes serially
or on multiple prototypes in parallel lead to better design?
serial prototyping parallel prototyping
![Page 46: Prototyping - univie.ac.atvda.univie.ac.at/Teaching/HCI/19s/LectureNotes/04_Prototyping.pdf · Prototypes / Mock-ups What is a prototype? − A prototype is a limited representation](https://reader030.fdocuments.net/reader030/viewer/2022040903/5e761482def0e4530a5e6cb4/html5/thumbnails/46.jpg)
Serial/Parallel Prototyping
Dow et al., Experiment:
− independent novice designers
− task: design a web advertisement
−condition 1 „serial": receive design feedback after each prototype
−condition 2 „parallel": receive design feedback on multiple prototypes
Dow, Steven P., et al. , TOCHI (2010).
https://www.cs.cmu.edu/~spdow/files/PrototypingParallel-TOCHI10.pdf
![Page 47: Prototyping - univie.ac.atvda.univie.ac.at/Teaching/HCI/19s/LectureNotes/04_Prototyping.pdf · Prototypes / Mock-ups What is a prototype? − A prototype is a limited representation](https://reader030.fdocuments.net/reader030/viewer/2022040903/5e761482def0e4530a5e6cb4/html5/thumbnails/47.jpg)
ResultsParallel prototyping significantly
outperformed serial prototyping
− higher click-through rates
− more time spent on the target client web site
− higher ratings by the clients and ad professionals
Independent raters found Parallel prototypes to
be more diverse
Participants reported a larger increase in task-
specific self-confidence
![Page 48: Prototyping - univie.ac.atvda.univie.ac.at/Teaching/HCI/19s/LectureNotes/04_Prototyping.pdf · Prototypes / Mock-ups What is a prototype? − A prototype is a limited representation](https://reader030.fdocuments.net/reader030/viewer/2022040903/5e761482def0e4530a5e6cb4/html5/thumbnails/48.jpg)
Benefits of Parallel Prototypes
Promotes Comparison
Encourages Exploration
Fosters Design Confidence
![Page 49: Prototyping - univie.ac.atvda.univie.ac.at/Teaching/HCI/19s/LectureNotes/04_Prototyping.pdf · Prototypes / Mock-ups What is a prototype? − A prototype is a limited representation](https://reader030.fdocuments.net/reader030/viewer/2022040903/5e761482def0e4530a5e6cb4/html5/thumbnails/49.jpg)
In Sum:
Parallel prototyping
produces better design
resultsDow, Steven P., et al. "Parallel prototyping leads to better design results, more divergence, and increased
self-efficacy." ACM Transactions on Computer-Human Interaction (TOCHI) 17.4 (2010): 18.
https://www.cs.cmu.edu/~spdow/files/PrototypingParallel-TOCHI10.pdf
![Page 50: Prototyping - univie.ac.atvda.univie.ac.at/Teaching/HCI/19s/LectureNotes/04_Prototyping.pdf · Prototypes / Mock-ups What is a prototype? − A prototype is a limited representation](https://reader030.fdocuments.net/reader030/viewer/2022040903/5e761482def0e4530a5e6cb4/html5/thumbnails/50.jpg)
Summary
Prototyping
![Page 51: Prototyping - univie.ac.atvda.univie.ac.at/Teaching/HCI/19s/LectureNotes/04_Prototyping.pdf · Prototypes / Mock-ups What is a prototype? − A prototype is a limited representation](https://reader030.fdocuments.net/reader030/viewer/2022040903/5e761482def0e4530a5e6cb4/html5/thumbnails/51.jpg)
Prototyping: SummaryTypes
− Low-fidelity and high-fidelity
− Horizontal and vertical
Examples
− paper prototyping
− mockup tools
− wizard of oz
When and how often
− Rapid prototyping
− Parallel Prototyping
![Page 52: Prototyping - univie.ac.atvda.univie.ac.at/Teaching/HCI/19s/LectureNotes/04_Prototyping.pdf · Prototypes / Mock-ups What is a prototype? − A prototype is a limited representation](https://reader030.fdocuments.net/reader030/viewer/2022040903/5e761482def0e4530a5e6cb4/html5/thumbnails/52.jpg)
Prototyping: Rules of Thumb
In the beginning: “Keep it ugly”
Rapid, iterative, parallel
Task-driven testing
“Fake it till you make it”
![Page 53: Prototyping - univie.ac.atvda.univie.ac.at/Teaching/HCI/19s/LectureNotes/04_Prototyping.pdf · Prototypes / Mock-ups What is a prototype? − A prototype is a limited representation](https://reader030.fdocuments.net/reader030/viewer/2022040903/5e761482def0e4530a5e6cb4/html5/thumbnails/53.jpg)
Fragen?Autoren des Foliensatzes
Oliver Hödl und Michael SedlmairUniversität Wien