Prototyping
楊政達
Design Process
Design Process
Design Process
Collecting data
Prototyping
• Prototyping is a reflexive conversation
– Understand concretely

• Gain insights from the prototype
• The go...
IDEO (digital camera)
Example
• Pandora prototype in action
• IDEO shopping cart prototyping -- building
prototypes
Prototypes are always
incomplete
• Layout is similar, but scale is change
• No computation by itself
• Not function
Prototyping is a
strategy for efficiently
dealing with things that
are
hard to predict
Focus on Goals
Evolve the
Designs

Please think about what you hope to achieve in the design idea
Design Process
Recognize the need
Alternatives
SANTA CLARA, California –
People thought Jeff Hawkins was
crazy when they saw him taking
notes, checking appointments,
and...
The rights of a prototype
• Should not be required to be
complete
• Should be easy to change
• Gets to retire
What Do Prototypes Prototype?
Feel What might it look like?
Implementation

What might it work like?

RoleWhat might the e...
First 波音 aircraft
“The best way to have a good idea is to
have lots of ideas.”
-Linus Pauling
IDEO for Microsoft (first mouse)
Microsoft's Concept of How 2019
Will Look Like - Official Video

Future Vision
Rapid Prototyping as Simulated
Annealing
Iterative design process  to reach global maximum
Cost of change over time?

Refine
•Prototypes
•Are questions
•Ask lots of them
STORYBOARDS
PAPER PROTOTYPES
Web domain
Outline
• Storyboarding
• Creating Paper Prototypes
• Testing Paper Prototypes
Storyboarding isn’t about “pretty pictures”

It’s about communicating ideals
Star People (Bill Verplank)
Storyboards Should Convey
• Setting
‧People involved
‧Environment
‧Task being accomplished

• Sequence
‧What steps are inv...
Benefits of Storyboarding
• Holistic focus: Help emphasize how an interface
accomplishes a task
• Avoids commitment to a p...
Time Limits Help
10 mins
Storyboards: [check all that apply]

□

present the User Interface of the product

□

set a common ground and help people ...
How to do storyboard?
Assembly the team
• 6 – 8人一組,透過不同背景的人和觀點,
延展設計點子。
• 這個階段,高階主管是不建議加入的,因
這是一個比較細微的階段。
Assign roles(角色分配)
Start with one hot ideas
Tell chain story(故事接龍)
• Define character & scene:先選好角色和
要發展的重要點子
• Tell story about single interaction:每個人
說一小段故事,延伸發展這個故...
Sketch it down
• Do it quickly:其他人在說故事時,畫家需
即時畫出來
• Don’t worry about detail:不必很漂亮、不
必太注重細節也不必著色,只要能示意就
好
• Use text to he...
Frequently Made Mistakes
•
•
•
•

NOT tell story about design
NOT tell story based on user data
NOT sketch quickly
NOT tak...
Creativity
Do Plus & Minus
•
•
•
•

Do it when you have created 2-4 visions
Write down the vision’s positive attributes
Write down th...
Consolidate visions
•
•
•
•

Break down visions
Add other ideas
Rewrite the story
Storyboard the story
Please show your story
boards..
Discuss within the group and
select the best one to share
with all of us
Paper prototyping
Paper Prototype Demo
6 Paper Prototyping Tips & Tricks
•

Keep all your materials in one place! Small interface widgets tend to get lost or
dam...
Get Creative with Materials
•
•
•
•

Widgets: Paper, Cardboard, Transparencies
Connectors: Tape, Glue, Rubber Cement
Drawi...
More materials…
• Poster board, unlined index card and foam core are all
useful depending on the size of your prototype
• ...
Test multiple prototypes simultaneously
to get most value
Get users (and other stakeholders)
To help design. Scaffold their efforts
Paper prototypes: [check all that apply]

□

allow you to test interaction flow of your application in a very quick
and ch...
Other kinds of prototyping
• 角色扮演 ( 3.3-P2 )
• Video prototyping( 3.3-P5 & 3.3-P26)
Form and Feedback Co-evolve
Start doing your paper
prototyping
Prototyping 2013.12.12.
Prototyping 2013.12.12.
Prototyping 2013.12.12.
Upcoming SlideShare
Loading in...5
×

Prototyping 2013.12.12.

283

Published on

Prototyping

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
283
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
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
  23. 23. STORYBOARDS PAPER PROTOTYPES
  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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×