Prototyping 2013.12.12.


Published on


Published in: Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Prototyping 2013.12.12.

  1. 1. Prototyping 楊政達
  2. 2. Design Process
  3. 3. Design Process
  4. 4. Design Process
  5. 5. Collecting data
  6. 6. Prototyping • Prototyping is a reflexive conversation – Understand concretely • Gain insights from the prototype • The goal of prototyping is feedback
  7. 7. IDEO (digital camera)
  8. 8. Example • Pandora prototype in action • IDEO shopping cart prototyping -- building prototypes
  9. 9. Prototypes are always incomplete • Layout is similar, but scale is change • No computation by itself • Not function
  10. 10. Prototyping is a strategy for efficiently dealing with things that are hard to predict
  11. 11. Focus on Goals Evolve the Designs Please think about what you hope to achieve in the design idea
  12. 12. Design Process Recognize the need Alternatives
  13. 13. SANTA CLARA, California – People thought Jeff Hawkins was crazy when they saw him taking notes, checking appointments, and synchronizing a small block of wood with his PC, pretending all the while that the block was a handheld computer. “If I wanted to check the calendar I’d take it out and press the wooden button.”
  14. 14. The rights of a prototype • Should not be required to be complete • Should be easy to change • Gets to retire
  15. 15. What Do Prototypes Prototype? Feel What might it look like? Implementation What might it work like? RoleWhat might the experience be like?
  16. 16. First 波音 aircraft
  17. 17. “The best way to have a good idea is to have lots of ideas.” -Linus Pauling
  18. 18. IDEO for Microsoft (first mouse)
  19. 19. Microsoft's Concept of How 2019 Will Look Like - Official Video Future Vision
  20. 20. Rapid Prototyping as Simulated Annealing Iterative design process  to reach global maximum
  21. 21. Cost of change over time? Refine
  22. 22. •Prototypes •Are questions •Ask lots of them
  24. 24. Web domain
  25. 25. Outline • Storyboarding • Creating Paper Prototypes • Testing Paper Prototypes
  26. 26. Storyboarding isn’t about “pretty pictures” It’s about communicating ideals
  27. 27. Star People (Bill Verplank)
  28. 28. Storyboards Should Convey • Setting ‧People involved ‧Environment ‧Task being accomplished • Sequence ‧What steps are involved? ‧What leads someone to use the app? ‧What task is being illustrated? • Satisfaction ‧What’s motivates people to use this system? ‧What does it enable people to accomplish? ‧What need does the system fill?
  29. 29. Benefits of Storyboarding • Holistic focus: Help emphasize how an interface accomplishes a task • Avoids commitment to a particular user interface (no buttons yet) • Help get all the stakeholders on the same page in terms of the goal
  30. 30. Time Limits Help 10 mins
  31. 31. Storyboards: [check all that apply] □ present the User Interface of the product □ set a common ground and help people involved in the development to be on the same page □ are more about the general goal/purpose of the product than the way it Is going to be built □ should be drawn in a photorealistic way
  32. 32. How to do storyboard?
  33. 33. Assembly the team • 6 – 8人一組,透過不同背景的人和觀點, 延展設計點子。 • 這個階段,高階主管是不建議加入的,因 這是一個比較細微的階段。
  34. 34. Assign roles(角色分配)
  35. 35. Start with one hot ideas
  36. 36. Tell chain story(故事接龍) • Define character & scene:先選好角色和 要發展的重要點子 • Tell story about single interaction:每個人 說一小段故事,延伸發展這個故事點子 • Continue the story for 3 rounds:通常第一 輪會不太順利,但多進行幾次,後面出來 的故事會很有發展性 • Clarify detail:故事內有不清楚的部分,主 持人要負責釐清,讓畫家能順利畫出
  37. 37. Sketch it down • Do it quickly:其他人在說故事時,畫家需 即時畫出來 • Don’t worry about detail:不必很漂亮、不 必太注重細節也不必著色,只要能示意就 好 • Use text to help if necessary:如果畫不出 來或來不及畫,可以用文字代替,只要盡 量記錄下來就好
  38. 38. Frequently Made Mistakes • • • • NOT tell story about design NOT tell story based on user data NOT sketch quickly NOT takes turns
  39. 39. Creativity
  40. 40. Do Plus & Minus • • • • Do it when you have created 2-4 visions Write down the vision’s positive attributes Write down the vision’s negative attributes Think of solutions for each negative attributes
  41. 41. Consolidate visions • • • • Break down visions Add other ideas Rewrite the story Storyboard the story
  42. 42. Please show your story boards.. Discuss within the group and select the best one to share with all of us
  43. 43. Paper prototyping
  44. 44. Paper Prototype Demo
  45. 45. 6 Paper Prototyping Tips & Tricks • Keep all your materials in one place! Small interface widgets tend to get lost or damaged easily • Work quickly and make reusable components (buttons, etc) • If something is difficult to simulate (progress indicators, right mouse, hyperlinks), have the user ask if it is available and then verbally describe the interaction • Backgrounds (11”×14” poster board) can be useful to contain the prototype and provide context for the user • Don’t be afraid to mix and match hardware and software! For instance, if size constrains are important, you might want to make a blinder using a photograph of the device that would be used and manipulate the prototype within the frame • When appropriate, add context by including familiar operating system elements
  46. 46. Get Creative with Materials • • • • Widgets: Paper, Cardboard, Transparencies Connectors: Tape, Glue, Rubber Cement Drawing: Pens, Pencils, Markers …and more
  47. 47. More materials… • Poster board, unlined index card and foam core are all useful depending on the size of your prototype • Removable tape or restickable glue is useful for changing components quickly • Transparency pens allow the user to input content – use a sheet of transparency paper for the input field • Use wide-tipped pens and markers (think Sharpie) – smaller line widths can be difficult to see • Use stacks of index cards to simulate tabbed dialog boxes
  48. 48. Test multiple prototypes simultaneously to get most value
  49. 49. Get users (and other stakeholders) To help design. Scaffold their efforts
  50. 50. Paper prototypes: [check all that apply] □ allow you to test interaction flow of your application in a very quick and cheap manner □ are able to prototype every single aspect of your application □ allow you to test several different things in your interface at a very low cost (time and money) □ are often made with paper and a thick pen, and can be completed with other material such as cardboard, post-its, stickers, etc.
  51. 51. Other kinds of prototyping • 角色扮演 ( 3.3-P2 ) • Video prototyping( 3.3-P5 & 3.3-P26)
  52. 52. Form and Feedback Co-evolve
  53. 53. Start doing your paper prototyping