Prototyping 2013.12.12.
description
Transcript of Prototyping 2013.12.12.
Prototyping
楊政達
Design Process
Design Process
Design Process
Collecting data
Prototyping
• Prototyping is a reflexive conversation– Understand concretely
• Gain insights from the prototype• The goal of prototyping is feedback
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
DesignsPlease think about what you hope to achieve in the design idea
Design Process
Alternatives
Recognize the need
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.”
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?
ImplementationWhat might it work like?
Role What might the experience be like?
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
STORYBOARDSPAPER 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 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?
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
Time Limits Help10 mins
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]
□
□
□
□
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 :每個人說一小段故事,延伸發展這個故事點子
• Continue the story for 3 rounds :通常第一輪會不太順利,但多進行幾次,後面出來的故事會很有發展性
• Clarify detail :故事內有不清楚的部分,主持人要負責釐清,讓畫家能順利畫出
Sketch it down
• Do it quickly :其他人在說故事時,畫家需即時畫出來
• Don’t worry about detail :不必很漂亮、不必太注重細節也不必著色,只要能示意就好
• Use text to help if necessary :如果畫不出來或來不及畫,可以用文字代替,只要盡量記錄下來就好
Frequently Made Mistakes
• NOT tell story about design• NOT tell story based on user data• NOT sketch quickly• NOT takes turns
Creativity
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
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 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
Get Creative with Materials
• Widgets: Paper, Cardboard, Transparencies
• Connectors: Tape, Glue, Rubber Cement• Drawing: Pens, Pencils, Markers• …and more
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
Test multiple prototypes simultaneously to get most value
Get users (and other stakeholders)
To help design. Scaffold their efforts
allow you to test interaction flow of your application in a very quickand 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]
□
□
□
□
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