67
UX PROTOTYPING AND PERSONAS Essential tools for creating great user experiences

UX Prototyping and Personas 4-25-14

Embed Size (px)

DESCRIPTION

Slides from my course "UX Prototyping and Personas" taught at BAVC 4/25/2014

Citation preview

Page 1: UX Prototyping and Personas 4-25-14

UX PROTOTYPING AND PERSONASEssential tools for creating great user experiences

Page 2: UX Prototyping and Personas 4-25-14

WHO AM I?Shilpa Thanawala

@skthana

Page 3: UX Prototyping and Personas 4-25-14

WHO ARE YOU?

Page 4: UX Prototyping and Personas 4-25-14

WHAT IS A PROTOTYPE?A simulation of how a product or feature will work

Practice for people who build things

Page 5: UX Prototyping and Personas 4-25-14

PROTOTYPES VERSUS...SketchesWireframesStoryboardsMockups

Page 6: UX Prototyping and Personas 4-25-14

WHY?

Page 7: UX Prototyping and Personas 4-25-14

BENEFITS OF PROTOTYPINGExplore your ideasInnovateCollaborateGet everyone on the same pagePersuadeTest assumptionsReduce riskSaves time / effort / money

Page 8: UX Prototyping and Personas 4-25-14

WHEN?As early as possibleThroughout the design and development process

Page 9: UX Prototyping and Personas 4-25-14

WHAT’S THE GOAL?What question are you trying to answer?How will the interface work?

Will users understand where to click next?

Have I covered all possible user pathways?

Generate ideasFoster collaborationConvince team, stakeholders, clients... etc.

Page 10: UX Prototyping and Personas 4-25-14

WHAT ABOUT FIDELITY?visual designinteractionenvironmentcontent and datasocial...others?

Page 11: UX Prototyping and Personas 4-25-14

CHOOSE THE RIGHT LEVEL OF FIDELITY IN EACH AREAWhat’s your objective?

Who’s your audience?

Page 12: UX Prototyping and Personas 4-25-14

PROTOTYPING TOOLS

Page 13: UX Prototyping and Personas 4-25-14

WHAT KINDS OF TOOLS DO PEOPLE USE?PaperHTML / CSS (hand-coded or WYSIWYG generated)Clickable screen imagemaps in HTMLSoftware-generated ( , , , ,

, etc.)PowerPoint / Keynote / Online tools ( , , , , ...)...many others (Acrobat,Rails, Java, Excel, Filemaker ...)

Balsamiq Fireworks Visio AxureOmnigraffle

ImpressiRise Solidify Moqups ProtoShare Proto

Page 14: UX Prototyping and Personas 4-25-14

HOW TO CHOOSE?familiarity (or learning curve)availabilitycostcapability to create a usable prototypebuilt-in tools (UI elements, interactivity)collaborative capabilitesaudience & distribution

Page 15: UX Prototyping and Personas 4-25-14

TESTING YOUR PROTOTYPES

Page 16: UX Prototyping and Personas 4-25-14

USABILITY TESTINGWhat are you trying to measure?

Roles

FacilitatorTesterObserver(s)

Page 17: UX Prototyping and Personas 4-25-14

THE FACILITATORExplains the testing processSets expectationsGuides the Tester throughAsks questions during & after testing

Page 18: UX Prototyping and Personas 4-25-14

THE TESTERUsually, best if unfamiliar with your productIdeally, representative of your target marketCustomary to compensate Testers for their time

Page 19: UX Prototyping and Personas 4-25-14

THE OBSERVERSSimply watch, listen, and take notesDon’t interact directly with TesterIdeally, all stakeholders and team membersIn another room, watching video and audioIf no observers, then it’s you!

Page 20: UX Prototyping and Personas 4-25-14

THE TESTING SESSION3-5 Testers30-45 minutes each, with short breaksClear tasks or objectivesDiscuss and evaluate results right afterward

Categorize results based on the original goal(s)Separate unexpected or extra results so as not to getsidetracked

Page 21: UX Prototyping and Personas 4-25-14

RINSE AND REPEATMake improvements, create a new prototype, test again

Page 22: UX Prototyping and Personas 4-25-14

PAPER PROTOTYPING

Page 23: UX Prototyping and Personas 4-25-14

EXAMPLES

Paper prototype of a game

Credit: Derek Lee / YouTube.com

View online

Page 24: UX Prototyping and Personas 4-25-14

EXAMPLES

Paper prototype of blood-testing kiosk

Credit: lukenwarm / YouTube.com

View online

Page 25: UX Prototyping and Personas 4-25-14

EXAMPLES

Paper prototype of a kids’ website

Credit: BlueDuckLabs / YouTube.com

View online

Page 26: UX Prototyping and Personas 4-25-14

PAPER PROTOTYPING: ADVANTAGESFastCheapNo special software skills neededEncourages collaboration (in person)Can model a wide variety of interfaces and interactionsCan modify during the test

Page 27: UX Prototyping and Personas 4-25-14

PAPER PROTOTYPING: DISADVANTAGESHarder to collaborate with remote or distributed teams

Page 28: UX Prototyping and Personas 4-25-14

PAPER PROTOTYPING TOOLKITEssentials: paper and pen

Nice-to-Haves:

heavy cardstock or construction paper, tracing paper orvellumpens, markers, highlighters, colored pencils, charcoal pencilseraserssticky notesre-stickable tape and labelsindex cardscardboardcutting toolsprinted UI elements and device frames

Page 29: UX Prototyping and Personas 4-25-14

TIME TO BUILD YOUR OWN

Page 30: UX Prototyping and Personas 4-25-14

ACTIVITY 1: PAPER PROTOTYPINGPrototype a login / register process for a website on asmartphone.

Goal / Purpose - to plan out the login process flow

Include the following features:

Page 31: UX Prototyping and Personas 4-25-14

BALSAMIQ

Page 32: UX Prototyping and Personas 4-25-14

BALSAMIQ: ADVANTAGESFastNo special software skills neededLarge library of UI elementsCan be used for remote collaborationHand-drawn look encourages focus on layout & functionalityAutomatically stores revision historyIntegrates with other online apps (Jira, Google Drive)

Page 33: UX Prototyping and Personas 4-25-14

BALSAMIQ: DISADVANTAGESNot meant for high visual design fidelityNot free

Page 34: UX Prototyping and Personas 4-25-14

EXAMPLE

Balsamiq prototype for an iPhone interface

Credit: AppsForGood / YouTube.com

View online

Page 35: UX Prototyping and Personas 4-25-14

DEMO

Page 36: UX Prototyping and Personas 4-25-14

YOUR TURN

Page 37: UX Prototyping and Personas 4-25-14

ACTIVITY 2: PROTOTYPING WITH BALSAMIQCreate a prototype for an airline’s website reservationfunctionality on a tablet.

Goal: Simulate interaction flow

Include:

Search for flightsSpecials

Bonus: Add features -- check flight status, online check-in

Page 38: UX Prototyping and Personas 4-25-14

PERSONAS

Page 39: UX Prototyping and Personas 4-25-14

WHAT IS A PERSONA?A fictional character developed to accurately and realisticallyrepresent one type of user your product is designed to serve.

Page 40: UX Prototyping and Personas 4-25-14

WHY USE PERSONAS?A way to distill the goals and desires of the users you serve,make them memorable and humanTalk about product features as they relate to a specific personinstead of “The User”Focus the user experience your productPrioritize improvements to your productGet all the assumptions out in the open and alignedUncover disconnectsGet everyone to buy in

Page 41: UX Prototyping and Personas 4-25-14

PERSONAS ARE NOT...User ProfilesMarket segmentsReal peopleStatistically representativeComprehensiveAbsoluteStatic

Page 42: UX Prototyping and Personas 4-25-14

FULL PERSONASBased on extensive user research

Site visitsInterviewsAnalytics data and logsTech support logsMarket researchSales team notes...other data on real users

Page 43: UX Prototyping and Personas 4-25-14

HOW DO I GET DATA?User ResearcherThird-party data

Government, NGOs, or Think-tanks (Pew, data.gov,yougov.com)Commercial (Nielsen, Gallup)UX {UIE, AnswerLab}

Approach with a question in mind

Page 44: UX Prototyping and Personas 4-25-14

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 canWho are you building for?Test, research, modify... repeat!

Page 45: UX Prototyping and Personas 4-25-14

AD-HOC PERSONASCan be advantageous even if you have data

Quick to createJump-starts the process of developing personasMakes data analysis easierFocuses future research: validation, answering relevantquestions

Page 46: UX Prototyping and Personas 4-25-14

WHAT DOES A PERSONA LOOK LIKE?Typical Characteristics:

CategoryA fictional nameJob title, role, responsibilitiesTheir goals, needs, and prioritiesTheir environmentDemographics (if relevant)A quote or key statementA photo

(usability.gov)An example persona

Page 47: UX Prototyping and Personas 4-25-14

ACTIVITY 3: CREATE PERSONAS

Page 48: UX Prototyping and Personas 4-25-14

ACTIVITY 3: MODIFY YOUR PROTOTYPEChoose one persona as your primary oneModify your Balsamic prototype from Activity 2 to serve thespecific needs and goals of that primary persona

Page 49: UX Prototyping and Personas 4-25-14

POWERPOINT / KEYNOTE / (OTHER)

Page 50: UX Prototyping and Personas 4-25-14

POWERPOINT / KEYNOTE: ADVANTAGESFamiliar and widely availableEasy to learn and useCan export to PDF or HTMLUseful for collaboration among distributed teamsCan draw on existing resources for UI elementsCan simulate some interactivity

Page 51: UX Prototyping and Personas 4-25-14

POWERPOINT / KEYNOTE: DISADVANTAGESLimited tools for visual designersLimited interactivity

Page 52: UX Prototyping and Personas 4-25-14

EXAMPLES

Keynote prototype for iPhone interface

Credit: amir khella / YouTube.com

View online

Page 53: UX Prototyping and Personas 4-25-14

KEYNOTE DEMO

Page 54: UX Prototyping and Personas 4-25-14

ACTIVITY 4: PROTOTYPING WITH POWERPOINT OR KEYNOTECreate a prototype for a weather webapp

Goal: Determine if key user needs are met

Include:

Current conditionsForecastChance of precipitationMultiple locationsSunrise and sunset times

Bonus:Additional features like an extended forecast, hourly forecastHow will your design change on smaller screens / mobiledevices?

Page 55: UX Prototyping and Personas 4-25-14

FIREWORKS

Page 56: UX Prototyping and Personas 4-25-14

FIREWORKS: ADVANTAGESHighly flexibleCan simulate many interactions with higer fidelityDesignate common and reusable elementsComes with built-in UI elements libraryIntegrates well with Photoshop and IllustratorCan be exported to PDF, HTML, Air, ...Can distribute and collaborate remotelyAdditional tools for responsive and touch prototyping

Page 57: UX Prototyping and Personas 4-25-14

FIREWORKS: DISADVANTAGESLearning curveLess widely available (must be purchased)

Page 58: UX Prototyping and Personas 4-25-14

DEMO

Page 59: UX Prototyping and Personas 4-25-14

HTML / CSS PROTOTYPES

Page 60: UX Prototyping and Personas 4-25-14

HTML / CSS: ADVANTAGESThe real thingTogether with Javascript, can prototype actual interactivityOr, without JS, fake itModular & collaborativeFree, requires no special softwareCan use frameworksResponsive - one prototype for all screen sizesMight be possible to reuse code (but rarely)

Page 61: UX Prototyping and Personas 4-25-14

HTML / CSS: DISADVANTAGESLearning curveTime-consumingCould be mistaken for the end productDifficult to collaborate with non-coding team members

Page 62: UX Prototyping and Personas 4-25-14

TOOLS FOR HTML PROTOTYPINGHand-codeFrameworks ( , , , others)Content Management System (eg. )Visual tools ( , , , , others)

Bootstrap Foundation CenturionWordPress

Dreamweaver Edge Muse Jetstrap

Page 63: UX Prototyping and Personas 4-25-14

DEMO: FOUNDATION FRAMEWORK

Page 64: UX Prototyping and Personas 4-25-14

ACTIVITY 5: PROTOTYPING WITH... THE TOOL THAT WORKSFOR YOU

Create a prototype for a conference website

Goal: Establish website layout and model interactions

Include:

Introduction and descriptionsDate, location, featured speakersA schedule of talksPricing and registrationNearby hotels, parking, local restaurants

Page 65: UX Prototyping and Personas 4-25-14

PROTOTYPING AND PERSONASKEY TAKEAWAYS

Help you create a great user experienceKey tools in user-centered designGreat for aligning teams and getting buy-in from clients, execs,etc.Prototyping is easy and inexpensiveStart by using the tools you have & know. You can learnsomething else later if you need to.

Page 67: UX Prototyping and Personas 4-25-14

THANKS!

Shilpa Thanawala@skthana