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