Quick Prototyping Guide for App-Based and Web Design


Published on

A 5-minute beginner's guide to prototyping for UI, wireframes, and web design. Learn the basics and best practices of the prototype process to apply to a solid user experience strategy. Whether designing for a mobile application or website, those initial steps of jotting down layouts and conducting usability testing are imperative to creating an intuitive experience.

Published in: Design, Technology, Education
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Quick Prototyping Guide for App-Based and Web Design

  1. 1. P R O T O T Y P I N G E 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
  2. 2. WHAT IS PROTOT YPING? It is the quickest, easiest & cheapest way to test and prove/disprove an idea/concept/layout/anything Wednesday, July 24, 13
  3. 3. 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 TRY THIS EXERCISE... 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. Wednesday, July 24, 13
  4. 4. 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 HOW TO TEST PROTOT YPES - 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
  5. 5. G O F O R S P E E D DIFFERENT T YPES OF PROTOT YPES - 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 - Different paths leading to different 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. Wednesday, July 24, 13
  6. 6. E A S Y I S F A S T E R TRICKS OF THE TRADE - 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 different prototypes as needed). - Don't adapt. - Hacks are encouraged. - Don't optimize. Wednesday, July 24, 13
  7. 7. DO SOME RESEARCH - 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 Wednesday, July 24, 13
  8. 8. H A V E A P L A N O F A C T I O N DEFINE YOUR TASKS - 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. Wednesday, July 24, 13
  9. 9. T I M E F O R S C I E N C E ASK THE QUESTIONS - 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. Wednesday, July 24, 13
  10. 10. T H E E N D H 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 Wednesday, July 24, 13