prototyping user experiences - lmu medieninformatik › lehre › ss18 › id › day 5...paper...
TRANSCRIPT
![Page 1: Prototyping User Experiences - LMU Medieninformatik › lehre › ss18 › id › Day 5...Paper prototyping is a widely used method in the user-centered design process, a process that](https://reader035.vdocument.in/reader035/viewer/2022070804/5f03513d7e708231d4089db6/html5/thumbnails/1.jpg)
Prototyping UX From Sketch to PrototypeAlexander Wiethoff Ludwig-Maximilians University of Munich (LMU)
![Page 2: Prototyping User Experiences - LMU Medieninformatik › lehre › ss18 › id › Day 5...Paper prototyping is a widely used method in the user-centered design process, a process that](https://reader035.vdocument.in/reader035/viewer/2022070804/5f03513d7e708231d4089db6/html5/thumbnails/2.jpg)
2
Double Diamond
What?LMU München – Medieninformatik – Alexander Wiethoff – UX1 – SS2018
DEFINE STAGE
• The generation of initial ideas and project development
• Ongoing project management • Corporate objectives agreed and
project sign-off
source: [8]
![Page 3: Prototyping User Experiences - LMU Medieninformatik › lehre › ss18 › id › Day 5...Paper prototyping is a widely used method in the user-centered design process, a process that](https://reader035.vdocument.in/reader035/viewer/2022070804/5f03513d7e708231d4089db6/html5/thumbnails/3.jpg)
An original type, form, or instance that serves as a model on which later stages are based
and judged.
American Heritage Dictionary
source: [1]
![Page 4: Prototyping User Experiences - LMU Medieninformatik › lehre › ss18 › id › Day 5...Paper prototyping is a widely used method in the user-centered design process, a process that](https://reader035.vdocument.in/reader035/viewer/2022070804/5f03513d7e708231d4089db6/html5/thumbnails/4.jpg)
User Experience Design
Business Design
Technology
UX
©Peter Morvillehttp://semanticstudios.com
![Page 6: Prototyping User Experiences - LMU Medieninformatik › lehre › ss18 › id › Day 5...Paper prototyping is a widely used method in the user-centered design process, a process that](https://reader035.vdocument.in/reader035/viewer/2022070804/5f03513d7e708231d4089db6/html5/thumbnails/6.jpg)
User Centered Design Process
![Page 7: Prototyping User Experiences - LMU Medieninformatik › lehre › ss18 › id › Day 5...Paper prototyping is a widely used method in the user-centered design process, a process that](https://reader035.vdocument.in/reader035/viewer/2022070804/5f03513d7e708231d4089db6/html5/thumbnails/7.jpg)
Some Examples of a school called
Interaction Design Institute
Ivrea ... (IDII)
![Page 8: Prototyping User Experiences - LMU Medieninformatik › lehre › ss18 › id › Day 5...Paper prototyping is a widely used method in the user-centered design process, a process that](https://reader035.vdocument.in/reader035/viewer/2022070804/5f03513d7e708231d4089db6/html5/thumbnails/8.jpg)
Task: Design a new interface for one of the functions of a radio alarm clock
or phone answering machine.
![Page 9: Prototyping User Experiences - LMU Medieninformatik › lehre › ss18 › id › Day 5...Paper prototyping is a widely used method in the user-centered design process, a process that](https://reader035.vdocument.in/reader035/viewer/2022070804/5f03513d7e708231d4089db6/html5/thumbnails/9.jpg)
1.) Understanding a design context 2.) Exploring and evaluating ideas
3.) Communicating ideas
source: [1]
Three main goals
![Page 10: Prototyping User Experiences - LMU Medieninformatik › lehre › ss18 › id › Day 5...Paper prototyping is a widely used method in the user-centered design process, a process that](https://reader035.vdocument.in/reader035/viewer/2022070804/5f03513d7e708231d4089db6/html5/thumbnails/10.jpg)
https://i2.wp.com/startupshelter.be/wp-content/uploads/2015/02/MVP-MINIMUM-VIABLE-PRODUCT.jpg?resize=1080%2C682&ssl=1
![Page 11: Prototyping User Experiences - LMU Medieninformatik › lehre › ss18 › id › Day 5...Paper prototyping is a widely used method in the user-centered design process, a process that](https://reader035.vdocument.in/reader035/viewer/2022070804/5f03513d7e708231d4089db6/html5/thumbnails/11.jpg)
For the Designer: Exploration Visualisation Feasibly Inspiration Collaboration
For the End User: Effectiveness / Usefulness A change of viewpoint Usability Desirability
For the Producer: Conviction Specification Benchmarking
source: [5]
![Page 12: Prototyping User Experiences - LMU Medieninformatik › lehre › ss18 › id › Day 5...Paper prototyping is a widely used method in the user-centered design process, a process that](https://reader035.vdocument.in/reader035/viewer/2022070804/5f03513d7e708231d4089db6/html5/thumbnails/12.jpg)
It’s really hard to design products by
focus groups. A lot of times, people
don’t know what they want until you
show it to them.
Steve Jobs
![Page 13: Prototyping User Experiences - LMU Medieninformatik › lehre › ss18 › id › Day 5...Paper prototyping is a widely used method in the user-centered design process, a process that](https://reader035.vdocument.in/reader035/viewer/2022070804/5f03513d7e708231d4089db6/html5/thumbnails/13.jpg)
Fidelity v. Resolution
low resolution low fidelity
high resolution high fidelity
high resolution low fidelity
source: [5]
![Page 14: Prototyping User Experiences - LMU Medieninformatik › lehre › ss18 › id › Day 5...Paper prototyping is a widely used method in the user-centered design process, a process that](https://reader035.vdocument.in/reader035/viewer/2022070804/5f03513d7e708231d4089db6/html5/thumbnails/14.jpg)
High FidelityLow Fidelity
Open Discussion
Prompting Required
Quick and Dirty
Early Validation
Sharp Opinions
Self Explanatory
Deliberate and Refined
Concrete Ideas
source: [5]
![Page 15: Prototyping User Experiences - LMU Medieninformatik › lehre › ss18 › id › Day 5...Paper prototyping is a widely used method in the user-centered design process, a process that](https://reader035.vdocument.in/reader035/viewer/2022070804/5f03513d7e708231d4089db6/html5/thumbnails/15.jpg)
Less Details
Focus on core interactions
Quick and Dirty
Early Validation
More Details
Focus on the whole
Deliberate and Refined
Concrete Ideas
Low Resolution High Resolution
source: [5]
![Page 16: Prototyping User Experiences - LMU Medieninformatik › lehre › ss18 › id › Day 5...Paper prototyping is a widely used method in the user-centered design process, a process that](https://reader035.vdocument.in/reader035/viewer/2022070804/5f03513d7e708231d4089db6/html5/thumbnails/16.jpg)
1st Iteration low-res/low-fi
![Page 17: Prototyping User Experiences - LMU Medieninformatik › lehre › ss18 › id › Day 5...Paper prototyping is a widely used method in the user-centered design process, a process that](https://reader035.vdocument.in/reader035/viewer/2022070804/5f03513d7e708231d4089db6/html5/thumbnails/17.jpg)
4th Iteration high-res/high-fi
![Page 18: Prototyping User Experiences - LMU Medieninformatik › lehre › ss18 › id › Day 5...Paper prototyping is a widely used method in the user-centered design process, a process that](https://reader035.vdocument.in/reader035/viewer/2022070804/5f03513d7e708231d4089db6/html5/thumbnails/18.jpg)
80/20 rule
http://www.swissknifeshop.com/media/catalog/product/cache/1/image/5e06319eda06f020e43594a9c230972d/v/m/vm_53831--91_sol_front_ax1000.jpg source: [7]
![Page 19: Prototyping User Experiences - LMU Medieninformatik › lehre › ss18 › id › Day 5...Paper prototyping is a widely used method in the user-centered design process, a process that](https://reader035.vdocument.in/reader035/viewer/2022070804/5f03513d7e708231d4089db6/html5/thumbnails/19.jpg)
A principle for setting priorities: users will use 20% of
the features of your product 80% of the time. Focus
the majority of your design and development effort
(80%) on the most important 20% of the product.
source: [7]
![Page 20: Prototyping User Experiences - LMU Medieninformatik › lehre › ss18 › id › Day 5...Paper prototyping is a widely used method in the user-centered design process, a process that](https://reader035.vdocument.in/reader035/viewer/2022070804/5f03513d7e708231d4089db6/html5/thumbnails/20.jpg)
source: [7]Horizontal vs. Vertical Prototypehttps://media.nngroup.com/media/editor/2012/12/10/guerrilla_scenario_fig.gif
![Page 21: Prototyping User Experiences - LMU Medieninformatik › lehre › ss18 › id › Day 5...Paper prototyping is a widely used method in the user-centered design process, a process that](https://reader035.vdocument.in/reader035/viewer/2022070804/5f03513d7e708231d4089db6/html5/thumbnails/21.jpg)
Paper-prototyping
![Page 22: Prototyping User Experiences - LMU Medieninformatik › lehre › ss18 › id › Day 5...Paper prototyping is a widely used method in the user-centered design process, a process that](https://reader035.vdocument.in/reader035/viewer/2022070804/5f03513d7e708231d4089db6/html5/thumbnails/22.jpg)
1.) Understanding a design context 2.) Exploring and evaluating ideas
3.) Communicating ideas
source: [1]
Main goal:
![Page 23: Prototyping User Experiences - LMU Medieninformatik › lehre › ss18 › id › Day 5...Paper prototyping is a widely used method in the user-centered design process, a process that](https://reader035.vdocument.in/reader035/viewer/2022070804/5f03513d7e708231d4089db6/html5/thumbnails/23.jpg)
Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to create products/screen based applications that meets the user's expectations and needs.
It is throwaway prototyping and involves creating rough, even hand sketched, drawings of an interface to use as prototypes, or models, of a design.
What is it?
![Page 24: Prototyping User Experiences - LMU Medieninformatik › lehre › ss18 › id › Day 5...Paper prototyping is a widely used method in the user-centered design process, a process that](https://reader035.vdocument.in/reader035/viewer/2022070804/5f03513d7e708231d4089db6/html5/thumbnails/24.jpg)
Paper prototyping started in the mid 1980s and then became popular in the mid 1990s when companies such as IBM, Honeywell, Microsoft, and others started using the technique in developing their products.
History
![Page 25: Prototyping User Experiences - LMU Medieninformatik › lehre › ss18 › id › Day 5...Paper prototyping is a widely used method in the user-centered design process, a process that](https://reader035.vdocument.in/reader035/viewer/2022070804/5f03513d7e708231d4089db6/html5/thumbnails/25.jpg)
Paper prototype of a typical form-filling screen Paper prototype of a tabs-based design
Typical set-up of the usability laboratory for a
test session with a paper prototype
User test of a low-fidelity paper prototype
of a website
photo credits © NN Group
![Page 26: Prototyping User Experiences - LMU Medieninformatik › lehre › ss18 › id › Day 5...Paper prototyping is a widely used method in the user-centered design process, a process that](https://reader035.vdocument.in/reader035/viewer/2022070804/5f03513d7e708231d4089db6/html5/thumbnails/26.jpg)
User test of a high-fidelity paper prototype of a homepage.User test of a device-based interaction
Testing hardware user interfaces: mockup of a kiosk.
photo credits © NN Group
![Page 27: Prototyping User Experiences - LMU Medieninformatik › lehre › ss18 › id › Day 5...Paper prototyping is a widely used method in the user-centered design process, a process that](https://reader035.vdocument.in/reader035/viewer/2022070804/5f03513d7e708231d4089db6/html5/thumbnails/27.jpg)
Source: YouTube
![Page 28: Prototyping User Experiences - LMU Medieninformatik › lehre › ss18 › id › Day 5...Paper prototyping is a widely used method in the user-centered design process, a process that](https://reader035.vdocument.in/reader035/viewer/2022070804/5f03513d7e708231d4089db6/html5/thumbnails/28.jpg)
http://www.balsamiq.com/products/mockups
![Page 29: Prototyping User Experiences - LMU Medieninformatik › lehre › ss18 › id › Day 5...Paper prototyping is a widely used method in the user-centered design process, a process that](https://reader035.vdocument.in/reader035/viewer/2022070804/5f03513d7e708231d4089db6/html5/thumbnails/29.jpg)
Video-Prototyping
https://icdn8.digitaltrends.com/image/gopro-karma-grip-review-2-2-1500x1000.jpg
![Page 30: Prototyping User Experiences - LMU Medieninformatik › lehre › ss18 › id › Day 5...Paper prototyping is a widely used method in the user-centered design process, a process that](https://reader035.vdocument.in/reader035/viewer/2022070804/5f03513d7e708231d4089db6/html5/thumbnails/30.jpg)
1.) Understanding a design context 2.) Exploring and evaluating ideas
3.) Communicating ideas
source: [1]
Main goal:
![Page 31: Prototyping User Experiences - LMU Medieninformatik › lehre › ss18 › id › Day 5...Paper prototyping is a widely used method in the user-centered design process, a process that](https://reader035.vdocument.in/reader035/viewer/2022070804/5f03513d7e708231d4089db6/html5/thumbnails/31.jpg)
https://cdn.provideocoalition.com/app/uploads/samsunggalaxis9_002.jpg
Camera: For most prototypes a smartphone
will do the job brilliantly
![Page 32: Prototyping User Experiences - LMU Medieninformatik › lehre › ss18 › id › Day 5...Paper prototyping is a widely used method in the user-centered design process, a process that](https://reader035.vdocument.in/reader035/viewer/2022070804/5f03513d7e708231d4089db6/html5/thumbnails/32.jpg)
Part III: Different Video-Prototyping Examples
![Page 33: Prototyping User Experiences - LMU Medieninformatik › lehre › ss18 › id › Day 5...Paper prototyping is a widely used method in the user-centered design process, a process that](https://reader035.vdocument.in/reader035/viewer/2022070804/5f03513d7e708231d4089db6/html5/thumbnails/33.jpg)
low resolution low fidelity (a whole new world)
![Page 34: Prototyping User Experiences - LMU Medieninformatik › lehre › ss18 › id › Day 5...Paper prototyping is a widely used method in the user-centered design process, a process that](https://reader035.vdocument.in/reader035/viewer/2022070804/5f03513d7e708231d4089db6/html5/thumbnails/34.jpg)
![Page 35: Prototyping User Experiences - LMU Medieninformatik › lehre › ss18 › id › Day 5...Paper prototyping is a widely used method in the user-centered design process, a process that](https://reader035.vdocument.in/reader035/viewer/2022070804/5f03513d7e708231d4089db6/html5/thumbnails/35.jpg)
low resolution high fidelity (crossing on demand)
![Page 36: Prototyping User Experiences - LMU Medieninformatik › lehre › ss18 › id › Day 5...Paper prototyping is a widely used method in the user-centered design process, a process that](https://reader035.vdocument.in/reader035/viewer/2022070804/5f03513d7e708231d4089db6/html5/thumbnails/36.jpg)
![Page 37: Prototyping User Experiences - LMU Medieninformatik › lehre › ss18 › id › Day 5...Paper prototyping is a widely used method in the user-centered design process, a process that](https://reader035.vdocument.in/reader035/viewer/2022070804/5f03513d7e708231d4089db6/html5/thumbnails/37.jpg)
The Smoke & Mirror Approach
image© CIID
![Page 38: Prototyping User Experiences - LMU Medieninformatik › lehre › ss18 › id › Day 5...Paper prototyping is a widely used method in the user-centered design process, a process that](https://reader035.vdocument.in/reader035/viewer/2022070804/5f03513d7e708231d4089db6/html5/thumbnails/38.jpg)
Sketching with Hardwarephoto credits © alexander wiethoff
![Page 39: Prototyping User Experiences - LMU Medieninformatik › lehre › ss18 › id › Day 5...Paper prototyping is a widely used method in the user-centered design process, a process that](https://reader035.vdocument.in/reader035/viewer/2022070804/5f03513d7e708231d4089db6/html5/thumbnails/39.jpg)
bx 24 picbasic stamp basic atom
higher level lower level
Assembly
![Page 40: Prototyping User Experiences - LMU Medieninformatik › lehre › ss18 › id › Day 5...Paper prototyping is a widely used method in the user-centered design process, a process that](https://reader035.vdocument.in/reader035/viewer/2022070804/5f03513d7e708231d4089db6/html5/thumbnails/40.jpg)
http://upload.wikimedia.org/wikipedia/commons/3/3d/RaspberryPi.jpg http://www.onlymine.de/wp-content/uploads/arduino-nano-board-z.jpg
Atmel AT Mega 328 Raspberry PI
![Page 41: Prototyping User Experiences - LMU Medieninformatik › lehre › ss18 › id › Day 5...Paper prototyping is a widely used method in the user-centered design process, a process that](https://reader035.vdocument.in/reader035/viewer/2022070804/5f03513d7e708231d4089db6/html5/thumbnails/41.jpg)
Thermistor PIR SensorBend Sensor
photo credits © wikimedia
![Page 42: Prototyping User Experiences - LMU Medieninformatik › lehre › ss18 › id › Day 5...Paper prototyping is a widely used method in the user-centered design process, a process that](https://reader035.vdocument.in/reader035/viewer/2022070804/5f03513d7e708231d4089db6/html5/thumbnails/42.jpg)
Magnet SwitchForce Sensor Potentiometer
photo credits © wikimedia
![Page 43: Prototyping User Experiences - LMU Medieninformatik › lehre › ss18 › id › Day 5...Paper prototyping is a widely used method in the user-centered design process, a process that](https://reader035.vdocument.in/reader035/viewer/2022070804/5f03513d7e708231d4089db6/html5/thumbnails/43.jpg)
Touch QT Sensor
photo credits © wikimedia
Ultrasound SensorDistance IR Sensor
![Page 44: Prototyping User Experiences - LMU Medieninformatik › lehre › ss18 › id › Day 5...Paper prototyping is a widely used method in the user-centered design process, a process that](https://reader035.vdocument.in/reader035/viewer/2022070804/5f03513d7e708231d4089db6/html5/thumbnails/44.jpg)
https://i2.wp.com/startupshelter.be/wp-content/uploads/2015/02/MVP-MINIMUM-VIABLE-PRODUCT.jpg?resize=1080%2C682&ssl=1
![Page 45: Prototyping User Experiences - LMU Medieninformatik › lehre › ss18 › id › Day 5...Paper prototyping is a widely used method in the user-centered design process, a process that](https://reader035.vdocument.in/reader035/viewer/2022070804/5f03513d7e708231d4089db6/html5/thumbnails/45.jpg)
photo credits © alexander wiethoff
![Page 46: Prototyping User Experiences - LMU Medieninformatik › lehre › ss18 › id › Day 5...Paper prototyping is a widely used method in the user-centered design process, a process that](https://reader035.vdocument.in/reader035/viewer/2022070804/5f03513d7e708231d4089db6/html5/thumbnails/46.jpg)
photo credits © alexander wiethoff
![Page 47: Prototyping User Experiences - LMU Medieninformatik › lehre › ss18 › id › Day 5...Paper prototyping is a widely used method in the user-centered design process, a process that](https://reader035.vdocument.in/reader035/viewer/2022070804/5f03513d7e708231d4089db6/html5/thumbnails/47.jpg)
Quick video overviewphoto credits © alexander wiethoff
![Page 48: Prototyping User Experiences - LMU Medieninformatik › lehre › ss18 › id › Day 5...Paper prototyping is a widely used method in the user-centered design process, a process that](https://reader035.vdocument.in/reader035/viewer/2022070804/5f03513d7e708231d4089db6/html5/thumbnails/48.jpg)
Contact
Mail: [email protected]
Web: http://www.medien.ifi.lmu.de/team/alexander.wiethoff/
or: http://www.imago-design.de/
![Page 49: Prototyping User Experiences - LMU Medieninformatik › lehre › ss18 › id › Day 5...Paper prototyping is a widely used method in the user-centered design process, a process that](https://reader035.vdocument.in/reader035/viewer/2022070804/5f03513d7e708231d4089db6/html5/thumbnails/49.jpg)
Tutorials Physical Computing Intro
https://itp.nyu.edu/physcomp/
Arduino Tutorials
https://www.arduino.cc/en/Tutorial/HomePage
Physical Computing w. Raspberry PI
https://www.raspberrypi.org/learning/physical-computing-with-python/
Adafruit Hacking Tutorials
https://learn.adafruit.com/
Keyboard Hacking Tutorials
http://www.instructables.com/id/Hacking-a-USB-Keyboard/
![Page 50: Prototyping User Experiences - LMU Medieninformatik › lehre › ss18 › id › Day 5...Paper prototyping is a widely used method in the user-centered design process, a process that](https://reader035.vdocument.in/reader035/viewer/2022070804/5f03513d7e708231d4089db6/html5/thumbnails/50.jpg)
References (books)
[1] Bill moggridge: designing interactions
Publisher: The MIT Press; 1 edition (October 1, 2007) ISBN-10: 0262134748 [2] Bill buxton: sketching the user experience Publisher: Morgan Kaufmann (March 30, 2007) ISBN-10: 0123740371 [3] Don norman: the design of everyday things Publisher: Basic Books (September 17, 2002) ISBN-10: 0465067107 [4] Kevin mullet: designing visual interfaces
Publisher: Prentice Hall PTR (December 15, 1994) ISBN-10: 0133033899
links: www.dkds.ciid.dk www.medien.ifi.lmu.de www.arduino.cc http://www.useit.com/papers/guerrilla_hci.html