prototyping - vda.univie.ac.atvda.univie.ac.at/teaching/hci/20s/lecturenotes/04_prototyping.pdfhigh...
TRANSCRIPT
![Page 1: Prototyping - vda.univie.ac.atvda.univie.ac.at/Teaching/HCI/20s/LectureNotes/04_Prototyping.pdfHigh Fidelity Prototyping − for testing details specific functionality − more functionality,](https://reader033.vdocument.in/reader033/viewer/2022060509/5f2588fa79dc7c77d301347e/html5/thumbnails/1.jpg)
Prototyping
Dr. Oliver HödlUniversität Wien, Cooperative Systems
Version 23. März 2020
![Page 2: Prototyping - vda.univie.ac.atvda.univie.ac.at/Teaching/HCI/20s/LectureNotes/04_Prototyping.pdfHigh Fidelity Prototyping − for testing details specific functionality − more functionality,](https://reader033.vdocument.in/reader033/viewer/2022060509/5f2588fa79dc7c77d301347e/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 - vda.univie.ac.atvda.univie.ac.at/Teaching/HCI/20s/LectureNotes/04_Prototyping.pdfHigh Fidelity Prototyping − for testing details specific functionality − more functionality,](https://reader033.vdocument.in/reader033/viewer/2022060509/5f2588fa79dc7c77d301347e/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 - vda.univie.ac.atvda.univie.ac.at/Teaching/HCI/20s/LectureNotes/04_Prototyping.pdfHigh Fidelity Prototyping − for testing details specific functionality − more functionality,](https://reader033.vdocument.in/reader033/viewer/2022060509/5f2588fa79dc7c77d301347e/html5/thumbnails/4.jpg)
Low and High
Fidelity Prototypes
Different Types
![Page 5: Prototyping - vda.univie.ac.atvda.univie.ac.at/Teaching/HCI/20s/LectureNotes/04_Prototyping.pdfHigh Fidelity Prototyping − for testing details specific functionality − more functionality,](https://reader033.vdocument.in/reader033/viewer/2022060509/5f2588fa79dc7c77d301347e/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 - vda.univie.ac.atvda.univie.ac.at/Teaching/HCI/20s/LectureNotes/04_Prototyping.pdfHigh Fidelity Prototyping − for testing details specific functionality − more functionality,](https://reader033.vdocument.in/reader033/viewer/2022060509/5f2588fa79dc7c77d301347e/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 - vda.univie.ac.atvda.univie.ac.at/Teaching/HCI/20s/LectureNotes/04_Prototyping.pdfHigh Fidelity Prototyping − for testing details specific functionality − more functionality,](https://reader033.vdocument.in/reader033/viewer/2022060509/5f2588fa79dc7c77d301347e/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 - vda.univie.ac.atvda.univie.ac.at/Teaching/HCI/20s/LectureNotes/04_Prototyping.pdfHigh Fidelity Prototyping − for testing details specific functionality − more functionality,](https://reader033.vdocument.in/reader033/viewer/2022060509/5f2588fa79dc7c77d301347e/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 - vda.univie.ac.atvda.univie.ac.at/Teaching/HCI/20s/LectureNotes/04_Prototyping.pdfHigh Fidelity Prototyping − for testing details specific functionality − more functionality,](https://reader033.vdocument.in/reader033/viewer/2022060509/5f2588fa79dc7c77d301347e/html5/thumbnails/9.jpg)
Example: Page setup
Quelle: http://www.snyderconsulting.net/us-paper.pdf
![Page 10: Prototyping - vda.univie.ac.atvda.univie.ac.at/Teaching/HCI/20s/LectureNotes/04_Prototyping.pdfHigh Fidelity Prototyping − for testing details specific functionality − more functionality,](https://reader033.vdocument.in/reader033/viewer/2022060509/5f2588fa79dc7c77d301347e/html5/thumbnails/10.jpg)
Example: Power Point
Quelle: http://events.ccc.de/congress/2005/fahrplan/attachments/712-slides_paper_prototyping.pdf
![Page 11: Prototyping - vda.univie.ac.atvda.univie.ac.at/Teaching/HCI/20s/LectureNotes/04_Prototyping.pdfHigh Fidelity Prototyping − for testing details specific functionality − more functionality,](https://reader033.vdocument.in/reader033/viewer/2022060509/5f2588fa79dc7c77d301347e/html5/thumbnails/11.jpg)
Example: Multi-View Visualization
![Page 12: Prototyping - vda.univie.ac.atvda.univie.ac.at/Teaching/HCI/20s/LectureNotes/04_Prototyping.pdfHigh Fidelity Prototyping − for testing details specific functionality − more functionality,](https://reader033.vdocument.in/reader033/viewer/2022060509/5f2588fa79dc7c77d301347e/html5/thumbnails/12.jpg)
Example:
Multi-View
Visualization
![Page 13: Prototyping - vda.univie.ac.atvda.univie.ac.at/Teaching/HCI/20s/LectureNotes/04_Prototyping.pdfHigh Fidelity Prototyping − for testing details specific functionality − more functionality,](https://reader033.vdocument.in/reader033/viewer/2022060509/5f2588fa79dc7c77d301347e/html5/thumbnails/13.jpg)
Example: Smartphone app
Basic UI Design Sketches for the Smartphone App “opera.guru”
![Page 14: Prototyping - vda.univie.ac.atvda.univie.ac.at/Teaching/HCI/20s/LectureNotes/04_Prototyping.pdfHigh Fidelity Prototyping − for testing details specific functionality − more functionality,](https://reader033.vdocument.in/reader033/viewer/2022060509/5f2588fa79dc7c77d301347e/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 - vda.univie.ac.atvda.univie.ac.at/Teaching/HCI/20s/LectureNotes/04_Prototyping.pdfHigh Fidelity Prototyping − for testing details specific functionality − more functionality,](https://reader033.vdocument.in/reader033/viewer/2022060509/5f2588fa79dc7c77d301347e/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 - vda.univie.ac.atvda.univie.ac.at/Teaching/HCI/20s/LectureNotes/04_Prototyping.pdfHigh Fidelity Prototyping − for testing details specific functionality − more functionality,](https://reader033.vdocument.in/reader033/viewer/2022060509/5f2588fa79dc7c77d301347e/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 - vda.univie.ac.atvda.univie.ac.at/Teaching/HCI/20s/LectureNotes/04_Prototyping.pdfHigh Fidelity Prototyping − for testing details specific functionality − more functionality,](https://reader033.vdocument.in/reader033/viewer/2022060509/5f2588fa79dc7c77d301347e/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 - vda.univie.ac.atvda.univie.ac.at/Teaching/HCI/20s/LectureNotes/04_Prototyping.pdfHigh Fidelity Prototyping − for testing details specific functionality − more functionality,](https://reader033.vdocument.in/reader033/viewer/2022060509/5f2588fa79dc7c77d301347e/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 - vda.univie.ac.atvda.univie.ac.at/Teaching/HCI/20s/LectureNotes/04_Prototyping.pdfHigh Fidelity Prototyping − for testing details specific functionality − more functionality,](https://reader033.vdocument.in/reader033/viewer/2022060509/5f2588fa79dc7c77d301347e/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 - vda.univie.ac.atvda.univie.ac.at/Teaching/HCI/20s/LectureNotes/04_Prototyping.pdfHigh Fidelity Prototyping − for testing details specific functionality − more functionality,](https://reader033.vdocument.in/reader033/viewer/2022060509/5f2588fa79dc7c77d301347e/html5/thumbnails/20.jpg)
Discussion
Hand-drawn paper
vs.
Actual design through mockup tool
![Page 21: Prototyping - vda.univie.ac.atvda.univie.ac.at/Teaching/HCI/20s/LectureNotes/04_Prototyping.pdfHigh Fidelity Prototyping − for testing details specific functionality − more functionality,](https://reader033.vdocument.in/reader033/viewer/2022060509/5f2588fa79dc7c77d301347e/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 - vda.univie.ac.atvda.univie.ac.at/Teaching/HCI/20s/LectureNotes/04_Prototyping.pdfHigh Fidelity Prototyping − for testing details specific functionality − more functionality,](https://reader033.vdocument.in/reader033/viewer/2022060509/5f2588fa79dc7c77d301347e/html5/thumbnails/22.jpg)
Low-Fidelity Prototypes
![Page 23: Prototyping - vda.univie.ac.atvda.univie.ac.at/Teaching/HCI/20s/LectureNotes/04_Prototyping.pdfHigh Fidelity Prototyping − for testing details specific functionality − more functionality,](https://reader033.vdocument.in/reader033/viewer/2022060509/5f2588fa79dc7c77d301347e/html5/thumbnails/23.jpg)
High-Fidelity Prototypes
![Page 24: Prototyping - vda.univie.ac.atvda.univie.ac.at/Teaching/HCI/20s/LectureNotes/04_Prototyping.pdfHigh Fidelity Prototyping − for testing details specific functionality − more functionality,](https://reader033.vdocument.in/reader033/viewer/2022060509/5f2588fa79dc7c77d301347e/html5/thumbnails/24.jpg)
High-Fidelity Prototypes
Tesla CybertruckTrombosonic
New digital music instrument
![Page 25: Prototyping - vda.univie.ac.atvda.univie.ac.at/Teaching/HCI/20s/LectureNotes/04_Prototyping.pdfHigh Fidelity Prototyping − for testing details specific functionality − more functionality,](https://reader033.vdocument.in/reader033/viewer/2022060509/5f2588fa79dc7c77d301347e/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 - vda.univie.ac.atvda.univie.ac.at/Teaching/HCI/20s/LectureNotes/04_Prototyping.pdfHigh Fidelity Prototyping − for testing details specific functionality − more functionality,](https://reader033.vdocument.in/reader033/viewer/2022060509/5f2588fa79dc7c77d301347e/html5/thumbnails/26.jpg)
Cheap “High-Fidelity” Prototypes
![Page 27: Prototyping - vda.univie.ac.atvda.univie.ac.at/Teaching/HCI/20s/LectureNotes/04_Prototyping.pdfHigh Fidelity Prototyping − for testing details specific functionality − more functionality,](https://reader033.vdocument.in/reader033/viewer/2022060509/5f2588fa79dc7c77d301347e/html5/thumbnails/27.jpg)
“Wizard of Oz”
https://youtu.be/-RQxD4Ff7dYMetro-Goldwyn-Mayer 1939
![Page 28: Prototyping - vda.univie.ac.atvda.univie.ac.at/Teaching/HCI/20s/LectureNotes/04_Prototyping.pdfHigh Fidelity Prototyping − for testing details specific functionality − more functionality,](https://reader033.vdocument.in/reader033/viewer/2022060509/5f2588fa79dc7c77d301347e/html5/thumbnails/28.jpg)
Example: Audience participation
![Page 29: Prototyping - vda.univie.ac.atvda.univie.ac.at/Teaching/HCI/20s/LectureNotes/04_Prototyping.pdfHigh Fidelity Prototyping − for testing details specific functionality − more functionality,](https://reader033.vdocument.in/reader033/viewer/2022060509/5f2588fa79dc7c77d301347e/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 - vda.univie.ac.atvda.univie.ac.at/Teaching/HCI/20s/LectureNotes/04_Prototyping.pdfHigh Fidelity Prototyping − for testing details specific functionality − more functionality,](https://reader033.vdocument.in/reader033/viewer/2022060509/5f2588fa79dc7c77d301347e/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://youtu.be/_A0qsWMDMFc
![Page 31: Prototyping - vda.univie.ac.atvda.univie.ac.at/Teaching/HCI/20s/LectureNotes/04_Prototyping.pdfHigh Fidelity Prototyping − for testing details specific functionality − more functionality,](https://reader033.vdocument.in/reader033/viewer/2022060509/5f2588fa79dc7c77d301347e/html5/thumbnails/31.jpg)
![Page 32: Prototyping - vda.univie.ac.atvda.univie.ac.at/Teaching/HCI/20s/LectureNotes/04_Prototyping.pdfHigh Fidelity Prototyping − for testing details specific functionality − more functionality,](https://reader033.vdocument.in/reader033/viewer/2022060509/5f2588fa79dc7c77d301347e/html5/thumbnails/32.jpg)
Horizontal and
Vertical Prototypes
Different Types
![Page 33: Prototyping - vda.univie.ac.atvda.univie.ac.at/Teaching/HCI/20s/LectureNotes/04_Prototyping.pdfHigh Fidelity Prototyping − for testing details specific functionality − more functionality,](https://reader033.vdocument.in/reader033/viewer/2022060509/5f2588fa79dc7c77d301347e/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 - vda.univie.ac.atvda.univie.ac.at/Teaching/HCI/20s/LectureNotes/04_Prototyping.pdfHigh Fidelity Prototyping − for testing details specific functionality − more functionality,](https://reader033.vdocument.in/reader033/viewer/2022060509/5f2588fa79dc7c77d301347e/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 - vda.univie.ac.atvda.univie.ac.at/Teaching/HCI/20s/LectureNotes/04_Prototyping.pdfHigh Fidelity Prototyping − for testing details specific functionality − more functionality,](https://reader033.vdocument.in/reader033/viewer/2022060509/5f2588fa79dc7c77d301347e/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 - vda.univie.ac.atvda.univie.ac.at/Teaching/HCI/20s/LectureNotes/04_Prototyping.pdfHigh Fidelity Prototyping − for testing details specific functionality − more functionality,](https://reader033.vdocument.in/reader033/viewer/2022060509/5f2588fa79dc7c77d301347e/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 - vda.univie.ac.atvda.univie.ac.at/Teaching/HCI/20s/LectureNotes/04_Prototyping.pdfHigh Fidelity Prototyping − for testing details specific functionality − more functionality,](https://reader033.vdocument.in/reader033/viewer/2022060509/5f2588fa79dc7c77d301347e/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 - vda.univie.ac.atvda.univie.ac.at/Teaching/HCI/20s/LectureNotes/04_Prototyping.pdfHigh Fidelity Prototyping − for testing details specific functionality − more functionality,](https://reader033.vdocument.in/reader033/viewer/2022060509/5f2588fa79dc7c77d301347e/html5/thumbnails/38.jpg)
The Prototyping “T”
Full System
Different features
Funct
ionalit
y
http://www.nngroup.com/articles/guerrilla-hci/
![Page 39: Prototyping - vda.univie.ac.atvda.univie.ac.at/Teaching/HCI/20s/LectureNotes/04_Prototyping.pdfHigh Fidelity Prototyping − for testing details specific functionality − more functionality,](https://reader033.vdocument.in/reader033/viewer/2022060509/5f2588fa79dc7c77d301347e/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 - vda.univie.ac.atvda.univie.ac.at/Teaching/HCI/20s/LectureNotes/04_Prototyping.pdfHigh Fidelity Prototyping − for testing details specific functionality − more functionality,](https://reader033.vdocument.in/reader033/viewer/2022060509/5f2588fa79dc7c77d301347e/html5/thumbnails/40.jpg)
“Icicle” Prototypes
Full System
Different features
Funct
ionalit
y
![Page 41: Prototyping - vda.univie.ac.atvda.univie.ac.at/Teaching/HCI/20s/LectureNotes/04_Prototyping.pdfHigh Fidelity Prototyping − for testing details specific functionality − more functionality,](https://reader033.vdocument.in/reader033/viewer/2022060509/5f2588fa79dc7c77d301347e/html5/thumbnails/41.jpg)
When?
How often?
Prototyping
![Page 42: Prototyping - vda.univie.ac.atvda.univie.ac.at/Teaching/HCI/20s/LectureNotes/04_Prototyping.pdfHigh Fidelity Prototyping − for testing details specific functionality − more functionality,](https://reader033.vdocument.in/reader033/viewer/2022060509/5f2588fa79dc7c77d301347e/html5/thumbnails/42.jpg)
Rapid Prototyping
Analysis
Design
Validation
Implementation
![Page 43: Prototyping - vda.univie.ac.atvda.univie.ac.at/Teaching/HCI/20s/LectureNotes/04_Prototyping.pdfHigh Fidelity Prototyping − for testing details specific functionality − more functionality,](https://reader033.vdocument.in/reader033/viewer/2022060509/5f2588fa79dc7c77d301347e/html5/thumbnails/43.jpg)
Rapid PrototypingIncreasing fidelity of prototypes
![Page 44: Prototyping - vda.univie.ac.atvda.univie.ac.at/Teaching/HCI/20s/LectureNotes/04_Prototyping.pdfHigh Fidelity Prototyping − for testing details specific functionality − more functionality,](https://reader033.vdocument.in/reader033/viewer/2022060509/5f2588fa79dc7c77d301347e/html5/thumbnails/44.jpg)
“Fake it till you make it”
Make fake apps
Show people
Learn from their feedback
![Page 45: Prototyping - vda.univie.ac.atvda.univie.ac.at/Teaching/HCI/20s/LectureNotes/04_Prototyping.pdfHigh Fidelity Prototyping − for testing details specific functionality − more functionality,](https://reader033.vdocument.in/reader033/viewer/2022060509/5f2588fa79dc7c77d301347e/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 - vda.univie.ac.atvda.univie.ac.at/Teaching/HCI/20s/LectureNotes/04_Prototyping.pdfHigh Fidelity Prototyping − for testing details specific functionality − more functionality,](https://reader033.vdocument.in/reader033/viewer/2022060509/5f2588fa79dc7c77d301347e/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 - vda.univie.ac.atvda.univie.ac.at/Teaching/HCI/20s/LectureNotes/04_Prototyping.pdfHigh Fidelity Prototyping − for testing details specific functionality − more functionality,](https://reader033.vdocument.in/reader033/viewer/2022060509/5f2588fa79dc7c77d301347e/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 - vda.univie.ac.atvda.univie.ac.at/Teaching/HCI/20s/LectureNotes/04_Prototyping.pdfHigh Fidelity Prototyping − for testing details specific functionality − more functionality,](https://reader033.vdocument.in/reader033/viewer/2022060509/5f2588fa79dc7c77d301347e/html5/thumbnails/48.jpg)
Benefits of Parallel Prototypes
Promotes Comparison
Encourages Exploration
Fosters Design Confidence
![Page 49: Prototyping - vda.univie.ac.atvda.univie.ac.at/Teaching/HCI/20s/LectureNotes/04_Prototyping.pdfHigh Fidelity Prototyping − for testing details specific functionality − more functionality,](https://reader033.vdocument.in/reader033/viewer/2022060509/5f2588fa79dc7c77d301347e/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 - vda.univie.ac.atvda.univie.ac.at/Teaching/HCI/20s/LectureNotes/04_Prototyping.pdfHigh Fidelity Prototyping − for testing details specific functionality − more functionality,](https://reader033.vdocument.in/reader033/viewer/2022060509/5f2588fa79dc7c77d301347e/html5/thumbnails/50.jpg)
Summary
Prototyping
![Page 51: Prototyping - vda.univie.ac.atvda.univie.ac.at/Teaching/HCI/20s/LectureNotes/04_Prototyping.pdfHigh Fidelity Prototyping − for testing details specific functionality − more functionality,](https://reader033.vdocument.in/reader033/viewer/2022060509/5f2588fa79dc7c77d301347e/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 - vda.univie.ac.atvda.univie.ac.at/Teaching/HCI/20s/LectureNotes/04_Prototyping.pdfHigh Fidelity Prototyping − for testing details specific functionality − more functionality,](https://reader033.vdocument.in/reader033/viewer/2022060509/5f2588fa79dc7c77d301347e/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 - vda.univie.ac.atvda.univie.ac.at/Teaching/HCI/20s/LectureNotes/04_Prototyping.pdfHigh Fidelity Prototyping − for testing details specific functionality − more functionality,](https://reader033.vdocument.in/reader033/viewer/2022060509/5f2588fa79dc7c77d301347e/html5/thumbnails/53.jpg)
Fragen?Autoren des Foliensatzes
Oliver Hödl und Michael SedlmairUniversität Wien