7. Prototyping
• Prototyping is a reflexive conversation
– Understand concretely
• Gain insights from the prototype
• The goal of prototyping is feedback
15. 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.”
16.
17. The rights of a prototype
• Should not be required to be
complete
• Should be easy to change
• Gets to retire
18. What Do Prototypes Prototype?
Feel What might it look like?
Implementation What might it work like?
Role What might the experience be like?
35. 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?
36. 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
38. 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
Storyboards: [check all that apply]
□
□
□
□
43. Tell chain story(故事接龍)
• Define character & scene：先選好角色和
要發展的重要點子
• Tell story about single interaction：每個人
說一小段故事，延伸發展這個故事點子
• Continue the story for 3 rounds：通常第一
輪會不太順利，但多進行幾次，後面出來
的故事會很有發展性
• Clarify detail：故事內有不清楚的部分，主
持人要負責釐清，讓畫家能順利畫出
44. Sketch it down
• Do it quickly：其他人在說故事時，畫家需
即時畫出來
• Don’t worry about detail：不必很漂亮、不
必太注重細節也不必著色，只要能示意就
好
• Use text to help if necessary：如果畫不出
來或來不及畫，可以用文字代替，只要盡
量記錄下來就好
45.
46. Frequently Made Mistakes
• NOT tell story about design
• NOT tell story based on user data
• NOT sketch quickly
• NOT takes turns
48. 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
53. 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
54. Get Creative with Materials
• Widgets: Paper, Cardboard, Transparencies
• Connectors: Tape, Glue, Rubber Cement
• Drawing: Pens, Pencils, Markers
• …and more
55. 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
57. Get users (and other stakeholders)
To help design. Scaffold their efforts
58. 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.
Paper prototypes: [check all that apply]
□
□
□
□
59. Other kinds of prototyping
• 角色扮演 （ 3.3-P2 ）
• Video prototyping（ 3.3-P5 & 3.3-P6）
