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