Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

UX Prototyping and Personas 9-5-14

•
•
Shilpa Thanawala
Shilpa Thanawala

This document discusses UX prototyping and personas as essential tools for creating great user experiences. It provides an overview of different prototyping methods like paper prototyping, digital tools like Balsamiq and Fireworks, and the benefits of each. It also covers what personas are, how to develop them, and how prototyping can be improved by focusing on specific persona goals and needs. The document encourages prototyping as early as possible using whatever tools are available and provides various activities to prototype interfaces using different methods.

Related slideshows

Discount User Experience Design
Discount User Experience DesignDiscount User Experience Design
Discount User Experience Design
 
UXPA DC UX 101 - User Research
UXPA DC UX 101 - User Research UXPA DC UX 101 - User Research
UXPA DC UX 101 - User Research
 
UX Research - Overview
UX Research - OverviewUX Research - Overview
UX Research - Overview
 
1 of 67
Download to read offline
UX PROTOTYPING AND PERSONAS Essential tools for creating great user experiences
WHO AM I? Shilpa Thanawala @skthana
WHO ARE YOU?
WHAT IS A PROTOTYPE? A simulation of how a product or feature will work Practice for people who build things
PROTOTYPES VERSUS... Sketches Wireframes Storyboards Mockups
WHY?
BENEFITS OF PROTOTYPING Explore your ideas Innovate Collaborate Get everyone on the same page Persuade Test assumptions Reduce risk Saves time / effort / money
WHEN? As early as possible Throughout the design and development process
WHAT’S THE GOAL? What question are you trying to answer? How will the video library work? Will users have problems filling in this form? What are the possible user pathways through this interface? Generate ideas Foster collaboration Convince team, stakeholders, clients... etc.
WHAT ABOUT FIDELITY? visual design interaction environment content and data social ...others?
CHOOSE THE RIGHT LEVEL OF FIDELITY IN EACH AREA What’s your objective? Who’s your audience?
PROTOTYPING TOOLS
WHAT KINDS OF TOOLS DO PEOPLE USE? Paper HTML / CSS (hand-coded or WYSIWYG generated) Clickable screen imagemaps in HTML Software-generated ( , , , , Omnigraffle , etc.) Balsamiq Fireworks Visio Axure PowerPoint / Keynote / Impress Online tools ( iRise , Solidify , Moqups , ProtoShare , Proto ...) ...many others (Acrobat,Rails, Java, Excel, Filemaker ...)
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
TESTING YOUR PROTOTYPES
USABILITY TESTING What are you trying to measure? Roles Facilitator Tester Observer(s)
THE FACILITATOR Explains the testing process Sets expectations Guides the Tester through Asks questions during & after testing
THE TESTER Usually, best if unfamiliar with your product Ideally, representative of your target market Customary to compensate Testers for their time
THE OBSERVERS Simply watch, listen, and take notes Don’t interact directly with Tester Ideally, all stakeholders and team members In another room, watching video and audio If no observers, then it’s you!
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
RINSE AND REPEAT Make improvements, create a new prototype, test again
PAPER PROTOTYPING
EXAMPLES Paper prototype of a game Credit: Derek Lee / YouTube.com View online
EXAMPLES Paper prototype of blood-testing kiosk Credit: lukenwarm / YouTube.com View online
EXAMPLES Paper prototype of a kids’ website Credit: BlueDuckLabs / YouTube.com View online
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
PAPER PROTOTYPING: DISADVANTAGES Harder to collaborate with remote or distributed teams
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 index cards cardboard cutting tools printed UI elements and device frames
TIME TO BUILD YOUR OWN
ACTIVITY 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) Bonus: What changes when the phone is oriented in landscape mode? Suppose this login is for a music-based website (Pandora, Spotify). What does an existing user see upon successful login? What does a new user see just after account creation? Try prototyping these screens.
BALSAMIQ
BALSAMIQ: ADVANTAGES Fast No special software skills needed Large library of UI elements Can be used for remote collaboration Hand-drawn look encourages focus on layout & functionality Automatically stores revision history Integrates with other online apps (Jira, Google Drive)
BALSAMIQ: DISADVANTAGES Not meant for high visual design fidelity Not free
EXAMPLE Balsamiq prototype for an iPhone interface Credit: AppsForGood / YouTube.com View online
DEMO
YOUR TURN
ACTIVITY 2: PROTOTYPING WITH BALSAMIQ Create a prototype for an airline’s website reservation functionality on a tablet. Goal: Simulate interaction flow Include: Search for flights Specials Bonus: Add features -- check flight status, online check-in
PERSONAS
WHAT IS A PERSONA? A fictional character developed to accurately and realistically represent one type of user your product is designed to serve.
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
PERSONAS ARE NOT... User Profiles Market segments Real people Statistically representative Comprehensive Absolute Static
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
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
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!
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
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 An example persona (usability.gov)
ACTIVITY 3: CREATE PERSONAS
ACTIVITY 3: MODIFY YOUR PROTOTYPE Choose one persona as your primary one Modify your Balsamic prototype from Activity 2 to serve the specific needs and goals of that primary persona
POWERPOINT / KEYNOTE / (OTHER)
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
POWERPOINT / KEYNOTE: DISADVANTAGES Limited tools for visual designers Limited interactivity
EXAMPLES Keynote prototype for iPhone interface Credit: amir khella / YouTube.com View online
KEYNOTE DEMO
ACTIVITY 4: PROTOTYPING WITH POWERPOINT OR KEYNOTE Create a prototype for a weather webapp Goal: Determine if key user needs are met Include: Current conditions Forecast Chance of precipitation Multiple locations Sunrise and sunset times Bonus: Additional features like an extended forecast, hourly forecast How will your design change on smaller screens / mobile devices?
FIREWORKS
FIREWORKS: ADVANTAGES Highly flexible Can simulate many interactions with higer fidelity Designate common and reusable elements Comes with built-in UI elements library Integrates well with Photoshop and Illustrator Can be exported to PDF, HTML, Air, ... Can distribute and collaborate remotely Additional tools for responsive and touch prototyping
FIREWORKS: DISADVANTAGES Learning curve Less widely available (must be purchased)
DEMO
HTML / CSS PROTOTYPES
HTML / CSS: ADVANTAGES The real thing Together with Javascript, can prototype actual interactivity Or, without JS, fake it Modular & collaborative Free, requires no special software Can use frameworks Responsive - one prototype for all screen sizes Might be possible to reuse code (but rarely)
HTML / CSS: DISADVANTAGES Learning curve Time-consuming Could be mistaken for the end product Difficult to collaborate with non-coding team members
TOOLS FOR HTML PROTOTYPING Hand-code Frameworks ( Bootstrap , Foundation , Centurion , others) Content Management System (eg. WordPress ) Visual tools ( Dreamweaver , Edge , Muse , Jetstrap , others)
DEMO: FOUNDATION FRAMEWORK
ACTIVITY 5: 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
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.
RESOURCES & FURTHER STUDY Paper Prototyping: , , Stencils , Speckyboy list iOS design elements Sneakpeekit UI Usability Testing: and - Steve Krug Don’t Make Me Think Rocket Surgery Made Easy Personas: The Essential Persona Lifecycle - Pruitt & Adlin PowerPoint / Keynote: Keynotopia Fireworks: Export Responsive Prototypes , iOS Touch Prototyping Muse: Muse Jams General UX: UIE , UX Magazine , Rosenfeld Media , UXMastery , A List Apart , Lynda , Interaction Design Foundation , 52 Weeks of UX My Client is Obsessed with the Design: Style Tiles
THANKS! Shilpa Thanawala @skthana

More Related Content

UX Prototyping and Personas 9-5-14

  • 1. UX PROTOTYPING AND PERSONAS Essential tools for creating great user experiences
  • 2. WHO AM I? Shilpa Thanawala @skthana
  • 4. WHAT IS A PROTOTYPE? A simulation of how a product or feature will work Practice for people who build things
  • 5. PROTOTYPES VERSUS... Sketches Wireframes Storyboards Mockups
  • 7. BENEFITS OF PROTOTYPING Explore your ideas Innovate Collaborate Get everyone on the same page Persuade Test assumptions Reduce risk Saves time / effort / money
  • 8. WHEN? As early as possible Throughout the design and development process
  • 9. WHAT’S THE GOAL? What question are you trying to answer? How will the video library work? Will users have problems filling in this form? What are the possible user pathways through this interface? Generate ideas Foster collaboration Convince team, stakeholders, clients... etc.
  • 10. WHAT ABOUT FIDELITY? visual design interaction environment content and data social ...others?
  • 11. CHOOSE THE RIGHT LEVEL OF FIDELITY IN EACH AREA What’s your objective? Who’s your audience?
  • 13. WHAT KINDS OF TOOLS DO PEOPLE USE? Paper HTML / CSS (hand-coded or WYSIWYG generated) Clickable screen imagemaps in HTML Software-generated ( , , , , Omnigraffle , etc.) Balsamiq Fireworks Visio Axure PowerPoint / Keynote / Impress Online tools ( iRise , Solidify , Moqups , ProtoShare , Proto ...) ...many others (Acrobat,Rails, Java, Excel, Filemaker ...)
  • 14. 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
  • 16. USABILITY TESTING What are you trying to measure? Roles Facilitator Tester Observer(s)
  • 17. THE FACILITATOR Explains the testing process Sets expectations Guides the Tester through Asks questions during & after testing
  • 18. THE TESTER Usually, best if unfamiliar with your product Ideally, representative of your target market Customary to compensate Testers for their time
  • 19. THE OBSERVERS Simply watch, listen, and take notes Don’t interact directly with Tester Ideally, all stakeholders and team members In another room, watching video and audio If no observers, then it’s you!
  • 20. 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
  • 21. RINSE AND REPEAT Make improvements, create a new prototype, test again
  • 23. EXAMPLES Paper prototype of a game Credit: Derek Lee / YouTube.com View online
  • 24. EXAMPLES Paper prototype of blood-testing kiosk Credit: lukenwarm / YouTube.com View online
  • 25. EXAMPLES Paper prototype of a kids’ website Credit: BlueDuckLabs / YouTube.com View online
  • 26. 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
  • 27. PAPER PROTOTYPING: DISADVANTAGES Harder to collaborate with remote or distributed teams
  • 28. 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 index cards cardboard cutting tools printed UI elements and device frames
  • 29. TIME TO BUILD YOUR OWN
  • 30. ACTIVITY 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) Bonus: What changes when the phone is oriented in landscape mode? Suppose this login is for a music-based website (Pandora, Spotify). What does an existing user see upon successful login? What does a new user see just after account creation? Try prototyping these screens.
  • 32. BALSAMIQ: ADVANTAGES Fast No special software skills needed Large library of UI elements Can be used for remote collaboration Hand-drawn look encourages focus on layout & functionality Automatically stores revision history Integrates with other online apps (Jira, Google Drive)
  • 33. BALSAMIQ: DISADVANTAGES Not meant for high visual design fidelity Not free
  • 34. EXAMPLE Balsamiq prototype for an iPhone interface Credit: AppsForGood / YouTube.com View online
  • 35. DEMO
  • 37. ACTIVITY 2: PROTOTYPING WITH BALSAMIQ Create a prototype for an airline’s website reservation functionality on a tablet. Goal: Simulate interaction flow Include: Search for flights Specials Bonus: Add features -- check flight status, online check-in
  • 39. WHAT IS A PERSONA? A fictional character developed to accurately and realistically represent one type of user your product is designed to serve.
  • 40. 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
  • 41. PERSONAS ARE NOT... User Profiles Market segments Real people Statistically representative Comprehensive Absolute Static
  • 42. 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
  • 43. 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
  • 44. 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!
  • 45. 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
  • 46. 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 An example persona (usability.gov)
  • 47. ACTIVITY 3: CREATE PERSONAS
  • 48. ACTIVITY 3: MODIFY YOUR PROTOTYPE Choose one persona as your primary one Modify your Balsamic prototype from Activity 2 to serve the specific needs and goals of that primary persona
  • 49. POWERPOINT / KEYNOTE / (OTHER)
  • 50. 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
  • 51. POWERPOINT / KEYNOTE: DISADVANTAGES Limited tools for visual designers Limited interactivity
  • 52. EXAMPLES Keynote prototype for iPhone interface Credit: amir khella / YouTube.com View online
  • 54. ACTIVITY 4: PROTOTYPING WITH POWERPOINT OR KEYNOTE Create a prototype for a weather webapp Goal: Determine if key user needs are met Include: Current conditions Forecast Chance of precipitation Multiple locations Sunrise and sunset times Bonus: Additional features like an extended forecast, hourly forecast How will your design change on smaller screens / mobile devices?
  • 56. FIREWORKS: ADVANTAGES Highly flexible Can simulate many interactions with higer fidelity Designate common and reusable elements Comes with built-in UI elements library Integrates well with Photoshop and Illustrator Can be exported to PDF, HTML, Air, ... Can distribute and collaborate remotely Additional tools for responsive and touch prototyping
  • 57. FIREWORKS: DISADVANTAGES Learning curve Less widely available (must be purchased)
  • 58. DEMO
  • 59. HTML / CSS PROTOTYPES
  • 60. HTML / CSS: ADVANTAGES The real thing Together with Javascript, can prototype actual interactivity Or, without JS, fake it Modular & collaborative Free, requires no special software Can use frameworks Responsive - one prototype for all screen sizes Might be possible to reuse code (but rarely)
  • 61. HTML / CSS: DISADVANTAGES Learning curve Time-consuming Could be mistaken for the end product Difficult to collaborate with non-coding team members
  • 62. TOOLS FOR HTML PROTOTYPING Hand-code Frameworks ( Bootstrap , Foundation , Centurion , others) Content Management System (eg. WordPress ) Visual tools ( Dreamweaver , Edge , Muse , Jetstrap , others)
  • 64. ACTIVITY 5: 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
  • 65. 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.
  • 66. RESOURCES & FURTHER STUDY Paper Prototyping: , , Stencils , Speckyboy list iOS design elements Sneakpeekit UI Usability Testing: and - Steve Krug Don’t Make Me Think Rocket Surgery Made Easy Personas: The Essential Persona Lifecycle - Pruitt & Adlin PowerPoint / Keynote: Keynotopia Fireworks: Export Responsive Prototypes , iOS Touch Prototyping Muse: Muse Jams General UX: UIE , UX Magazine , Rosenfeld Media , UXMastery , A List Apart , Lynda , Interaction Design Foundation , 52 Weeks of UX My Client is Obsessed with the Design: Style Tiles