UX Prototyping and Personas 9 25-15

  • Published on

  • View

  • Download

Embed Size (px)


  1. 1. UX PROTOTYPING AND PERSONAS Here early? While were waiting for the others... We'll use a communal Google Doc to pass links easily amongst the class. Open .http://j.mp/proto-sep-25 1. Open 2. This is a demo version of Balsamiq, one of the tools we'll be using today. Take some time to explore and familiarize yourself with it. What UI elements are provided? How would you be able to use a screenshot of your website as a background and then change one feature? How would you link to another screen? http://webdemo.balsamiq.com/ 0
  2. 2. UX PROTOTYPING AND PERSONAS Essential tools for creating great user experiences
  3. 3. WHO AM I? Shilpa Thanawala @skthana
  4. 4. YOUR TURN Interview & introduce your neighbor name role, indep or agency designer or developer background experience in prototyping & how you think prototyping can be useful to you
  5. 5. WHAT IS A PROTOTYPE? A simulation of how a product or feature will work Practice for people who build things
  6. 6. PROTOTYPES VERSUS... Sketches Wireframes Storyboards Mockups
  7. 7. WHY?
  8. 8. BENEFITS OF PROTOTYPING Explore your ideas Innovate Collaborate Get everyone on the same page Persuade Test assumptions Reduce risk Save time / effort / money
  9. 9. WHEN? As early as possible Throughout the design and development process
  10. 10. WHAT'S YOUR GOAL? Why do you need to build a prototype? What question are you trying to answer? Howwillthevideolibrarywork? Willusershaveproblemsfillinginthisform? Whatarethepossibleuserpathwaysthroughthisinterface? Generate ideas Foster collaboration Convince team, stakeholders, clients... etc.
  11. 11. FIDELITY How closely a prototype models reality visual design interaction environment content and data social ...others?
  12. 12. CHOOSE THE RIGHT LEVEL OF FIDELITY IN EACH AREA Whats your objective? Whos your audience?
  14. 14. WHAT KINDS OF TOOLS DO PEOPLE USE? Paper HTML / CSS (hand-coded or WYSIWYG generated) Clickable screen imagemaps in HTML Software-generated ( , , , , , etc.) PowerPoint / Keynote / Online tools ( , , , , ...) ...many others (Acrobat, Rails, Java, Excel, Filemaker ...) Balsamiq Muse Visio Axure Omnigraffle Impress iRise Solidify Moqups ProtoShare Proto
  15. 15. HOW TO CHOOSE? familiarity (or learning curve) availability cost capability to create a usable prototype built-in tools (UI elements, interactivity) collaborative capabilites audience & distribution
  17. 17. USABILITY TESTING What are we trying to learn about the experience of your users? Roles Facilitator Tester Observer(s)
  18. 18. THE FACILITATOR Explains the testing process Sets expectations Guides the Tester through Asks questions during & after testing
  19. 19. THE TESTER Usually, best if unfamiliar with your product Ideally, representative of your target market Customary to compensate Testers for their time
  20. 20. THE OBSERVERS Simply watch, listen, and take notes Dont interact directly with Tester Ideally, all stakeholders and team members In another room, watching video and audio If no observers, then its you!
  21. 21. THE TESTING SESSION 3-5 Testers 30-45 minutes each, with short breaks Clear tasks or objectives Discuss and evaluate results right afterward Categorize results based on the original goal(s) Separate unexpected or extra results so as not to get sidetracked
  22. 22. RINSE AND REPEAT Make improvements, create a new prototype, test again
  24. 24. EXAMPLES Paper prototype of a game Credit:DerekLee/YouTube.com Viewonline
  25. 25. EXAMPLES Paper prototype of blood-testing kiosk Credit:lukenwarm/YouTube.com Viewonline
  26. 26. EXAMPLES Paper prototype of a kids website Credit:BlueDuckLabs/YouTube.com Viewonline
  27. 27. PAPER PROTOTYPING: ADVANTAGES Fast Cheap No special software skills needed Encourages collaboration (in person) Can model a wide variety of interfaces and interactions Can modify during the test
  28. 28. PAPER PROTOTYPING: LIMITATIONS Harder to collaborate with remote or distributed teams
  29. 29. PAPER PROTOTYPING TOOLKIT Essentials: paper and pen Nice-to-Haves: heavy cardstock or construction paper, tracing paper or vellum pens, markers, highlighters, colored pencils, charcoal pencils erasers sticky notes re-stickable tape and labels glue / glue-sticks index cards cardboard cutting tools printed UI elements and device frames
  30. 30. TIME TO BUILD YOUR OWN (and then test it!)
  31. 31. BREAK
  32. 32. CHALLENGE 1: PAPER PROTOTYPING Prototype a login / register process for a website on a smartphone. Goal / Purpose - to plan out the login process flow Include the following features: Login flow Create a new account Wrong username or password Reset password Login using social media (Google, Facebook, Twitter) - no need to prototype these third-party apps of course Bonus: Twowords:landscapemode!
  33. 33. PERSONAS
  34. 34. WHAT IS A PERSONA? A fictional character developed to accurately and realistically represent one type of user your product is designed to serve.
  35. 35. WHY USE PERSONAS? A way to distill the goals and desires of the users you serve, make them memorable and human Talk about product features as they relate to a specific person instead of The User Focus the user experience your product Prioritize improvements to your product Get all the assumptions out in the open and aligned Uncover disconnects Get everyone to buy in
  36. 36. PERSONAS ARE NOT... User Profiles Market segments Real people Statistically representative Comprehensive Absolute Static
  37. 37. FULL PERSONAS Based on extensive user research Site visits Interviews Analytics data and logs Tech support logs Market research Sales team notes ...other data on real users
  38. 38. HOW DO I GET DATA? User Researcher Third-party data Government, NGOs, or Think-tanks (Pew, data.gov, yougov.com) Commercial (Nielsen, Gallup) UX {UIE, AnswerLab} Approach with a question in mind
  39. 39. WHAT IF I HAVE NO REAL DATA? And no budget for UX research... AD-HOC PERSONAS a.k.a. Assumption personas, Quick personas, Thin personas... Get whatever general data you can Who are you building for? Test, research, modify... repeat!
  40. 40. AD-HOC PERSONAS Can be advantageous even if you have data Quick to create Jump-starts the process of developing personas Makes data analysis easier Focuses future research: validation, answering relevant questions
  41. 41. WHAT DOES A PERSONA LOOK LIKE? Typical Characteristics: Category A fictional name Job title, role, responsibilities Their goals, needs, and priorities Their environment Demographics (if relevant) A quote or key statement A photo (usability.gov) An example persona
  42. 42. CHALLENGE 2: CREATE PERSONAS 1. Brainstorm user goals (both UX and accomplishments), user roles (as many as possible) 2. Group them 3. Name the groups & identify key characteristics (facts - no assumptions or narratives) 4. Create a persona for one of these 'skeletons' (can use a )template
  43. 43. BALSAMIQ
  44. 44. BALSAMIQ: ADVANTAGES Fast No special software skills needed Large library of UI elements Can be used for remote collaboration Hand-drawn look may encourage focus on layout & functionality Automatically stores revision history Integrates with other online apps (Jira, Google Drive)
  45. 45. BALSAMIQ: LIMITATIONS Not intended for high visual design fidelity Not designed for complex UI interactions
  46. 46. DEMO
  47. 47. INVISION
  48. 48. INVISION: ADVANTAGES Simple and easy to learn / use Simulates hover and click interactions No extra effort needed to create a professional presentation for clients / stakeholders
  49. 49. INVISION: LIMITATIONS Not a graphic design tool Not designed for complex UI interactions
  51. 51. POWERPOINT / KEYNOTE: ADVANTAGES Familiar and widely available Easy to learn and use Can export to PDF or HTML Useful for collaboration among distributed teams Can draw on existing resources for UI elements Can simulate some interactivity
  52. 52. POWERPOINT / KEYNOTE: LIMITATIONS Limited tools for visual designers Limited interactivity
  53. 53. EXAMPLES Keynote prototype for iPhone interface Credit:amirkhella/YouTube.com Viewonline
  54. 54. KEYNOTE DEMO
  55. 55. MUSE
  56. 56. MUSE: ADVANTAGES Highly flexible Can simulate many interactions with higer fidelity Designate common and reusable elements Integrates with Photoshop and Illustrator Can be exported to PDF, HTML, Air, ... Can distribute and collaborate remotely
  57. 57. MUSE: DISADVANTAGES Learning curve for those new to Adobe apps Less widely available (must be purchased)
  58. 58. MUSE DEMO
  59. 59. CHALLENGE 3: PROTOTYPING WITH... THE TOOL THAT WORKS FOR YOU Create a prototype for a conference website Goal: Establish website layout and model interactions Include: Introduction and descriptions Date, location, featured speakers A schedule of talks Pricing and registration Nearby hotels, parking, local restaurants
  60. 60. PROTOTYPING AND PERSONAS KEY TAKEAWAYS Help you create a great user experience Key tools in user-centered design Great for aligning teams and getting buy-in from clients, execs, etc. Prototyping is easy and inexpensive Start by using the tools you have & know. You can learn something else later if you need to.
  61. 61. RESOURCES & ADDITIONAL INFORMATION Paper Prototyping: , , , Usability Testing: and - Steve Krug Personas: - Pruitt & Adlin PowerPoint / Keynote: Muse: General UX: , , , , , , , Ditch the pixel-perfect comp and use iOS design elements Sneakpeekit UI Stencils Speckyboy list Dont Make Me Think Rocket Surgery Made Easy The Essential Persona Lifecycle Keynotopia Muse Jams UIE UX Magazine Rosenfeld Media UXMastery A List Apart Lynda Interaction Design Foundation 52 Weeks of UX Style Tiles
  62. 62. THANKS! ShilpaThanawala @skthana