prototyping 2013.12.12
DESCRIPTION
PrototypingTRANSCRIPT
![Page 1: Prototyping 2013.12.12](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7676f4a79596c548b45cf/html5/thumbnails/1.jpg)
Prototyping
楊政達
![Page 2: Prototyping 2013.12.12](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7676f4a79596c548b45cf/html5/thumbnails/2.jpg)
Design Process
![Page 3: Prototyping 2013.12.12](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7676f4a79596c548b45cf/html5/thumbnails/3.jpg)
Design Process
![Page 4: Prototyping 2013.12.12](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7676f4a79596c548b45cf/html5/thumbnails/4.jpg)
Design Process
![Page 5: Prototyping 2013.12.12](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7676f4a79596c548b45cf/html5/thumbnails/5.jpg)
Collecting data
![Page 6: Prototyping 2013.12.12](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7676f4a79596c548b45cf/html5/thumbnails/6.jpg)
Prototyping
• Prototyping is a reflexive conversation– Understand concretely
• Gain insights from the prototype• The goal of prototyping is feedback
![Page 7: Prototyping 2013.12.12](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7676f4a79596c548b45cf/html5/thumbnails/7.jpg)
IDEO (digital camera)
![Page 8: Prototyping 2013.12.12](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7676f4a79596c548b45cf/html5/thumbnails/8.jpg)
Example
• Pandora prototype in action
• IDEO shopping cart prototyping -- building prototypes
![Page 9: Prototyping 2013.12.12](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7676f4a79596c548b45cf/html5/thumbnails/9.jpg)
Prototypes are always incomplete
• Layout is similar, but scale is change
• No computation by itself
• Not function
![Page 10: Prototyping 2013.12.12](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7676f4a79596c548b45cf/html5/thumbnails/10.jpg)
Prototyping is a strategy for
efficiently dealing with things that are
hard to predict
![Page 11: Prototyping 2013.12.12](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7676f4a79596c548b45cf/html5/thumbnails/11.jpg)
Focus on Goals Evolve the
DesignsPlease think about what you hope to achieve in the design idea
![Page 12: Prototyping 2013.12.12](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7676f4a79596c548b45cf/html5/thumbnails/12.jpg)
Design Process
Alternatives
Recognize the need
![Page 13: Prototyping 2013.12.12](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7676f4a79596c548b45cf/html5/thumbnails/13.jpg)
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.”
![Page 14: Prototyping 2013.12.12](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7676f4a79596c548b45cf/html5/thumbnails/14.jpg)
The rights of a prototype
• Should not be required to be complete• Should be easy to change• Gets to retire
![Page 15: Prototyping 2013.12.12](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7676f4a79596c548b45cf/html5/thumbnails/15.jpg)
What Do Prototypes Prototype?
Feel What might it look like?
ImplementationWhat might it work like?
Role What might the experience be like?
![Page 16: Prototyping 2013.12.12](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7676f4a79596c548b45cf/html5/thumbnails/16.jpg)
First 波音 aircraft
![Page 17: Prototyping 2013.12.12](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7676f4a79596c548b45cf/html5/thumbnails/17.jpg)
“The best way to have a good idea is to have lots of ideas.”
-Linus Pauling
![Page 18: Prototyping 2013.12.12](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7676f4a79596c548b45cf/html5/thumbnails/18.jpg)
IDEO for Microsoft (first mouse)
![Page 19: Prototyping 2013.12.12](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7676f4a79596c548b45cf/html5/thumbnails/19.jpg)
Microsoft's Concept of How 2019 Will Look Like - Official
Video
Future Vision
![Page 20: Prototyping 2013.12.12](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7676f4a79596c548b45cf/html5/thumbnails/20.jpg)
Rapid Prototyping as Simulated Annealing
Iterative design process to reach global maximum
![Page 21: Prototyping 2013.12.12](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7676f4a79596c548b45cf/html5/thumbnails/21.jpg)
Cost of change over time?
Refine
![Page 22: Prototyping 2013.12.12](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7676f4a79596c548b45cf/html5/thumbnails/22.jpg)
•Prototypes•Are questions•Ask lots of them
![Page 23: Prototyping 2013.12.12](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7676f4a79596c548b45cf/html5/thumbnails/23.jpg)
STORYBOARDSPAPER PROTOTYPES
![Page 24: Prototyping 2013.12.12](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7676f4a79596c548b45cf/html5/thumbnails/24.jpg)
Web domain
![Page 25: Prototyping 2013.12.12](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7676f4a79596c548b45cf/html5/thumbnails/25.jpg)
Outline
• Storyboarding• Creating Paper Prototypes• Testing Paper Prototypes
![Page 26: Prototyping 2013.12.12](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7676f4a79596c548b45cf/html5/thumbnails/26.jpg)
![Page 27: Prototyping 2013.12.12](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7676f4a79596c548b45cf/html5/thumbnails/27.jpg)
Storyboarding isn’t about “pretty pictures”
It’s about communicating ideals
![Page 28: Prototyping 2013.12.12](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7676f4a79596c548b45cf/html5/thumbnails/28.jpg)
Star People (Bill Verplank)
![Page 29: Prototyping 2013.12.12](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7676f4a79596c548b45cf/html5/thumbnails/29.jpg)
![Page 30: Prototyping 2013.12.12](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7676f4a79596c548b45cf/html5/thumbnails/30.jpg)
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?
![Page 31: Prototyping 2013.12.12](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7676f4a79596c548b45cf/html5/thumbnails/31.jpg)
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
![Page 32: Prototyping 2013.12.12](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7676f4a79596c548b45cf/html5/thumbnails/32.jpg)
Time Limits Help10 mins
![Page 33: Prototyping 2013.12.12](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7676f4a79596c548b45cf/html5/thumbnails/33.jpg)
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]
□
□
□
□
![Page 34: Prototyping 2013.12.12](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7676f4a79596c548b45cf/html5/thumbnails/34.jpg)
How to do storyboard?
![Page 35: Prototyping 2013.12.12](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7676f4a79596c548b45cf/html5/thumbnails/35.jpg)
Assembly the team
• 6 – 8 人一組,透過不同背景的人和觀點,延展設計點子。
• 這個階段,高階主管是不建議加入的,因這是一個比較細微的階段。
![Page 36: Prototyping 2013.12.12](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7676f4a79596c548b45cf/html5/thumbnails/36.jpg)
Assign roles( 角色分配 )
![Page 37: Prototyping 2013.12.12](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7676f4a79596c548b45cf/html5/thumbnails/37.jpg)
Start with one hot ideas
![Page 38: Prototyping 2013.12.12](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7676f4a79596c548b45cf/html5/thumbnails/38.jpg)
Tell chain story( 故事接龍 )
• Define character & scene :先選好角色和要發展的重要點子
• Tell story about single interaction :每個人說一小段故事,延伸發展這個故事點子
• Continue the story for 3 rounds :通常第一輪會不太順利,但多進行幾次,後面出來的故事會很有發展性
• Clarify detail :故事內有不清楚的部分,主持人要負責釐清,讓畫家能順利畫出
![Page 39: Prototyping 2013.12.12](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7676f4a79596c548b45cf/html5/thumbnails/39.jpg)
Sketch it down
• Do it quickly :其他人在說故事時,畫家需即時畫出來
• Don’t worry about detail :不必很漂亮、不必太注重細節也不必著色,只要能示意就好
• Use text to help if necessary :如果畫不出來或來不及畫,可以用文字代替,只要盡量記錄下來就好
![Page 40: Prototyping 2013.12.12](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7676f4a79596c548b45cf/html5/thumbnails/40.jpg)
![Page 41: Prototyping 2013.12.12](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7676f4a79596c548b45cf/html5/thumbnails/41.jpg)
Frequently Made Mistakes
• NOT tell story about design• NOT tell story based on user data• NOT sketch quickly• NOT takes turns
![Page 42: Prototyping 2013.12.12](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7676f4a79596c548b45cf/html5/thumbnails/42.jpg)
Creativity
![Page 43: Prototyping 2013.12.12](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7676f4a79596c548b45cf/html5/thumbnails/43.jpg)
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
![Page 44: Prototyping 2013.12.12](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7676f4a79596c548b45cf/html5/thumbnails/44.jpg)
Consolidate visions
• Break down visions• Add other ideas• Rewrite the story• Storyboard the story
![Page 45: Prototyping 2013.12.12](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7676f4a79596c548b45cf/html5/thumbnails/45.jpg)
Please show your story boards..Discuss within the group and select the best one to share
with all of us
![Page 46: Prototyping 2013.12.12](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7676f4a79596c548b45cf/html5/thumbnails/46.jpg)
Paper prototyping
![Page 48: Prototyping 2013.12.12](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7676f4a79596c548b45cf/html5/thumbnails/48.jpg)
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
![Page 49: Prototyping 2013.12.12](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7676f4a79596c548b45cf/html5/thumbnails/49.jpg)
Get Creative with Materials
• Widgets: Paper, Cardboard, Transparencies
• Connectors: Tape, Glue, Rubber Cement• Drawing: Pens, Pencils, Markers• …and more
![Page 50: Prototyping 2013.12.12](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7676f4a79596c548b45cf/html5/thumbnails/50.jpg)
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
![Page 51: Prototyping 2013.12.12](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7676f4a79596c548b45cf/html5/thumbnails/51.jpg)
Test multiple prototypes simultaneously to get most value
![Page 52: Prototyping 2013.12.12](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7676f4a79596c548b45cf/html5/thumbnails/52.jpg)
Get users (and other stakeholders)
To help design. Scaffold their efforts
![Page 53: Prototyping 2013.12.12](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7676f4a79596c548b45cf/html5/thumbnails/53.jpg)
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]
□
□
□
□
![Page 54: Prototyping 2013.12.12](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7676f4a79596c548b45cf/html5/thumbnails/54.jpg)
Other kinds of prototyping
• 角色扮演 ( 3.3-P2 )• Video prototyping ( 3.3-P5 & 3.3-
P26 )
![Page 55: Prototyping 2013.12.12](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7676f4a79596c548b45cf/html5/thumbnails/55.jpg)
Form and Feedback Co-evolve
![Page 56: Prototyping 2013.12.12](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7676f4a79596c548b45cf/html5/thumbnails/56.jpg)
Start doing your paper prototyping