SDS*15: Alexander Wiethoff on Prototyping

614 Aufrufe

Veröffentlicht am

Alexander Wiethoff on Prototyping at SUMMER DESIGN SUMMIT * 2015

Veröffentlicht in: Design
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
614
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
2
Aktionen
Geteilt
0
Downloads
47
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

SDS*15: Alexander Wiethoff on Prototyping

  1. 1. ! Prototyping UX - From Sketch to Prototype ! Alexander Wiethoff Ludwig-Maximilians Universität München Media Architecture Institute Wien Service Design Linz
  2. 2. Welcome & Agenda: ! 09:30-10:30 Intro Prototyping (Lecture) ! 10:30-11:00 Breakout-session 1: Storyboarding ! 11:00-12:00 Video Prototyping (Lecture) ! 12:00-12:30 Lunch on location ! 12:30-15:00 Breakout-session 2: Video Prototyping ! 15:00-16:00 Cross Presentation & Wrap up
  3. 3. Overview: ! • Intro & Designprocess Phase ! • Values and Levels of Prototyping ! • UX Prototyping Techniques ! • Prototyping Case Study !
  4. 4. User-experience design Industrial design Human-computer interaction Human factors Usability engineering User Interface engineering Communication design Information architecture Interaction design source: [11]
  5. 5. Bill Verplank / worked at Xerox 78-1986
  6. 6. photo credits © bill verplank
  7. 7. User Experience Design http://semanticstudios.com ©Peter Morville
  8. 8. Overview Research Innovate Prototype © A study of the design process - Design Council London source: [8]
  9. 9. Research Innovate Prototype Tell a story Make it tangible Overview
  10. 10. Overview: ! • Intro & Designprocess Phase ! • Values and Levels of Prototyping ! • UX Prototyping Techniques ! • Prototyping Case Study !
  11. 11. ! 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]
  12. 12. 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
  13. 13. Fidelity v. Resolution low resolution low fidelity high resolution high fidelity high resolution low fidelity source: [5]
  14. 14. High FidelityLow Fidelity Open Discussion Prompting Required Quick and Dirty Early Validation Sharp Opinions Self Explanatory Deliberate and Refined Concrete Ideas source: [5]
  15. 15. 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]
  16. 16. 1st Iteration low-res/low-fi
  17. 17. 4th Iteration high-res/high-fi
  18. 18. 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]
  19. 19. ! 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]
  20. 20. Overview: ! • Intro & Designprocess Phase ! • Values and Levels of Prototyping ! • UX Prototyping Techniques ! • Prototyping Case Study !
  21. 21. Paper-prototyping
  22. 22. 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?
  23. 23. 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
  24. 24. 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
  25. 25. 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
  26. 26. http://www.balsamiq.com/products/mockups
  27. 27. Source: YouTube
  28. 28. Video-prototyping Image Source: CIIDhttp://2.bp.blogspot.com/-CBtuuif7rZ4/U0MBJkCUfgI/AAAAAAAAEi4/fYp1bJOcdVY/s1600/Canon+XF205+left+side+view.jpg
  29. 29. www.ciid.dk 11.04.2008Intro Acting out the Scenario
  30. 30. www.ciid.dk 11.04.2008Intro Quick Kiosk Mock-up
  31. 31. The Smoke & Mirror Approach image© CIID
  32. 32. Sketching with Hardware photo credits © alexander wiethoff
  33. 33. bx 24 picbasic stamp basic atom higher level lower level Assembly
  34. 34. 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
  35. 35. Thermistor PIR SensorBend Sensor photo credits © wikimedia
  36. 36. Magnet SwitchForce Sensor Potentiometer photo credits © wikimedia
  37. 37. Touch QT Sensor photo credits © wikimedia Ultrasound SensorDistance IR Sensor
  38. 38. photo credits © alexander wiethoff
  39. 39. photo credits © alexander wiethoff
  40. 40. Quick video overview photo credits © alexander wiethoff
  41. 41. Overview: ! • Intro & Designprocess Phase ! • Values and Levels of Prototyping ! • UX Prototyping Techniques ! • Prototyping Case Study !
  42. 42. Some Examples from a school called Copenhagen Institute of Interaction Design (CIID)
  43. 43. Some Examples from a school called Copenhagen Institute of Interaction Design (CIID)
  44. 44. 2 Weeks 2 Weeks Phase 1 User Research Field Research Phase 2 Analysis and Concept Generation Phase 4 Usability Testing Phase 5 Implementation Desk Research Phase 3 Prototyping Concepts Prototyping LO Fidelity HI Fidelity Final Prototype
  45. 45. CASESIDII 65
  46. 46. CASESIDII 66
  47. 47. CASESIDII 67
  48. 48. CASESIDII 68
  49. 49. CASESIDII 69
  50. 50. CASESIDII 70
  51. 51. CASESIDII 71
  52. 52. CASESIDII 72
  53. 53. CASESIDII 73
  54. 54. CASESIDII 74
  55. 55. CASES 75
  56. 56. CASES 76
  57. 57. CASES 77
  58. 58. CASES 78
  59. 59. CASES 79
  60. 60. Your turn: ! 09:30-10:30 Intro Prototyping (Lecture) ! 10:30-11:00 Breakout-session 1: Storyboarding ! 11:00-12:00 Video Prototyping (Lecture) ! 12:00-12:30 Lunch on location ! 12:30-15:00 Breakout-session 2: Video Prototyping ! 15:00-16:00 Cross Presentation & Wrap up
  61. 61. Now ! - Quick mockup idea storyboard (6 Key Frames) - Consider angles and shots ! ! ! ! !
  62. 62. Inspiration from camera shots and film making
  63. 63. References (books) ! Bill moggridge: designing interactions Publisher: The MIT Press; 1 edition (October 1, 2007) ISBN-10: 0262134748 Bill buxton: sketching the user experience Publisher: Morgan Kaufmann (March 30, 2007) ISBN-10: 0123740371 Don norman: the design of everyday things Publisher: Basic Books (September 17, 2002) ISBN-10: 0465067107 Kevin mullet: designing visual interfaces Publisher: Prentice Hall PTR (December 15, 1994) ISBN-10: 0133033899 ! ! ! ! ! ! links: www.ciid.dk www.arduino.cc http://www.useit.com/papers/guerrilla_hci.html www.medien.ifi.lmu.de/id !

×