ux prototyping and personas 9-5-14

UX PROTOTYPING AND PERSONASEssential 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...SketchesWireframesStoryboardsMockups

WHY?

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

WHEN?As early as possibleThroughout 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 ideasFoster collaborationConvince team, stakeholders, clients... etc.

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

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

Who’s your audience?

PROTOTYPING TOOLS

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

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

TESTING YOUR PROTOTYPES

USABILITY TESTINGWhat are you trying to measure?

Roles

FacilitatorTesterObserver(s)

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

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

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!

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

RINSE AND REPEATMake 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: ADVANTAGESFastCheapNo special software skills neededEncourages collaboration (in person)Can model a wide variety of interfaces and interactionsCan modify during the test

PAPER PROTOTYPING: DISADVANTAGESHarder to collaborate with remote or distributed teams

PAPER PROTOTYPING TOOLKITEssentials: paper and pen

Nice-to-Haves:

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

TIME TO BUILD YOUR OWN

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:

Login flowCreate a new accountWrong username or passwordReset passwordLogin 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 uponsuccessful login?What does a new user see just after account creation?Try prototyping these screens.

BALSAMIQ

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)

BALSAMIQ: DISADVANTAGESNot meant for high visual design fidelityNot free

EXAMPLE

Balsamiq prototype for an iPhone interface

Credit: AppsForGood / YouTube.com

View online

DEMO

YOUR TURN

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

PERSONAS

WHAT IS A PERSONA?A fictional character developed to accurately and realisticallyrepresent 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 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

PERSONAS ARE NOT...User ProfilesMarket segmentsReal peopleStatistically representativeComprehensiveAbsoluteStatic

FULL PERSONASBased on extensive user research

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

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

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!

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

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

ACTIVITY 3: CREATE PERSONAS

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

POWERPOINT / KEYNOTE / (OTHER)

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

POWERPOINT / KEYNOTE: DISADVANTAGESLimited tools for visual designersLimited interactivity

EXAMPLES

Keynote prototype for iPhone interface

Credit: amir khella / YouTube.com

View online

KEYNOTE DEMO

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?

FIREWORKS

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

FIREWORKS: DISADVANTAGESLearning curveLess widely available (must be purchased)

DEMO

HTML / CSS PROTOTYPES

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)

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

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

Bootstrap Foundation CenturionWordPress

Dreamweaver Edge Muse Jetstrap

DEMO: FOUNDATION FRAMEWORK

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

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.

RESOURCES & FURTHER STUDYPaper Prototyping: , ,

, Usability Testing: and

- Steve KrugPersonas: - Pruitt & AdlinPowerPoint / Keynote: Fireworks: ,

Muse: General UX: , , , ,

, , ,

My Client is Obsessed with the Design:

iOS design elements Sneakpeekit UIStencils Speckyboy list

Don’t Make Me Think Rocket Surgery MadeEasy

The Essential Persona LifecycleKeynotopia

Export Responsive Prototypes iOS TouchPrototyping

Muse JamsUIE UX Magazine Rosenfeld Media UXMastery

A List Apart Lynda Interaction Design Foundation 52 Weeksof UX

Style Tiles

THANKS!

Shilpa Thanawala@skthana