Quick Prototyping Guide for App-Based and Web Design

P R O T O T Y P I N GE X P L A I N E D I N 5 M I N U T E S B Y @ G K 3

Wednesday, July 24, 13

W H AT I S P R OTOT Y P I N G ?

It is the quickest, easiest & cheapest way to test and prove/disprove an idea/concept/layout/anything


E X P E R I E N C E T H E B E N E F I T S O F P R O T O T Y P I N G

T RY T H I S E X E R C I S E . . .

Find a semi-complex photo of something (i.e. a helicopter, motorcycle, etc.)

Give yourself 3 minutes to sketch the photo.

Sketch the photo again, but this time in 1.5 minutes.

Do it again in 1 minute.

45 seconds.

30 seconds.

20 seconds.

Notice something? They all kind of look like whatever the photo is. Prototyping is like sketching. Get the fastest sketch out that shows your idea, test it, and come back and try again.


Y O U M U S T F I R S T D E F I N E Q U E S T I O N S

H OW TO T E S T P R OTOT Y P E S

- Does the user get it?

- Do they understand what they’re looking at?

- Can they find it?

- Is it obvious how to accomplish the task?

- Can they do it?

- Is it self-explanatory?

- Do they like it?

- Is the product enjoyable?

- Is it useful?

- Does it make sense? ?Wednesday, July 24, 13

G O F O R S P E E D

D I F F E R E N T T Y P E S O F P R OTOT Y P E S

- Paper Prototype

- Literally sketch the UI on paper and have someone interact with it, with you acting as the computer.

- Click Through

- Only one path through the screens to the task goal

- Hot Spot Click Through

- Di!erent paths leading to di!erent goals

- Wizard of Oz

- Put someone behind the curtain, acting as the computer reacting to unique inputs.

- Interactive

- A developed prototype

- Add Real User Data

- Users treat their own data better than your test data, this makes them take it seriously.


E A S Y I S F A S T E R

T R I C K S O F T H E T R A D E

- Fake it with images.

- Avoid complexity like compiled css or javascript.

- No semantic html:

- Use very simple elements (i.e. div instead of ul)

- This allows you to move elements around without worry

- You don’t need to fit all concepts in one prototype (you control the environment, make as many di!erent prototypes as needed).

- Don't adapt.

- Hacks are encouraged.

- Don't optimize.


D O S O M E R E S E A R C H

- Just ask people to sit down and show them your ideas.

- Gut checks are almost always helpful!

- 5/80 Rule:

- It only takes 5 participants to uncover 80% of your issues.

- Define the research questions.

- If possible, recruit actual users.

- Who is your target demographic?

- Pre-screen participants.

G E T I T R I G H T T H E F I R S T T I M E


H A V E A P L A N O F A C T I O N

D E F I N E Y O U R TA S K S

- Don’t ask them what items mean -- give them actions that they need to perform.

- Make test-tasks meaningful.

- Would this user actually perform this action on their own?

- Use the users’ language.

- Describe the end goal, don’t provide steps.

- Let them find their way.


T I M E F O R S C I E N C E

A S K T H E Q U E S T I O N S

- Avoid leading and biasing questions. Keep things open ended.

- Don’t use words that are in the UI.

- If the button is called “Share” don’t ask them to “share something.”

- Try to make the tasks realistic

- Give the participants time to answer. Following up too soon could bias the response.

- Ask the participants to think aloud.

- This will help you understand their thought processes.


T H E E N DH I T M E U P O N T W I T T E R W I T H A N Y Q U E S T I O N S : @ G K 3


Quick Prototyping Guide for App-Based and Web Design

Design

Transcript of Quick Prototyping Guide for App-Based and Web Design