Download - UX Prototyping and Personas 9 25-15
![Page 1: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/1.jpg)
UX PROTOTYPING AND PERSONASHere early? While we’re waiting for the others...
We'll use a communal Google Doc to pass links easily amongstthe 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 familiarizeyourself with it.
What UI elements are provided? How would you be able to use a screenshot of your website as abackground and then change one feature? How would you link to another screen?
http://webdemo.balsamiq.com/
0
![Page 2: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/2.jpg)
UX PROTOTYPING AND PERSONASEssential tools for creating great user experiences
![Page 3: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/3.jpg)
WHO AM I?Shilpa Thanawala
@skthana
![Page 4: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/4.jpg)
YOUR TURNInterview & introduce your neighbor
namerole, indep or agencydesigner or developer backgroundexperience in prototyping & how you think prototyping can beuseful to you
![Page 5: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/5.jpg)
WHAT IS A PROTOTYPE?A simulation of how a product or feature will work
Practice for people who build things
![Page 6: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/6.jpg)
PROTOTYPES VERSUS...SketchesWireframesStoryboardsMockups
![Page 7: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/7.jpg)
WHY?
![Page 8: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/8.jpg)
BENEFITS OF PROTOTYPINGExplore your ideasInnovateCollaborateGet everyone on the same pagePersuadeTest assumptionsReduce riskSave time / effort / money
![Page 9: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/9.jpg)
WHEN?As early as possibleThroughout the design and development process
![Page 10: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/10.jpg)
WHAT'S YOUR GOAL?Why do you need to build a prototype?
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.
![Page 11: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/11.jpg)
FIDELITYHow closely a prototype models reality
visual designinteractionenvironmentcontent and datasocial...others?
![Page 12: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/12.jpg)
CHOOSE THE RIGHT LEVEL OF FIDELITY IN EACH AREAWhat’s your objective?
Who’s your audience?
![Page 13: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/13.jpg)
PROTOTYPING TOOLS
![Page 14: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/14.jpg)
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 Muse Visio AxureOmnigraffle
ImpressiRise Solidify Moqups ProtoShare Proto
![Page 15: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/15.jpg)
HOW TO CHOOSE?familiarity (or learning curve)availabilitycostcapability to create a usable prototypebuilt-in tools (UI elements, interactivity)collaborative capabilitesaudience & distribution
![Page 16: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/16.jpg)
TESTING YOUR PROTOTYPES
![Page 17: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/17.jpg)
USABILITY TESTINGWhat are we trying to learn about the experience of your users?
Roles
FacilitatorTesterObserver(s)
![Page 18: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/18.jpg)
THE FACILITATORExplains the testing processSets expectationsGuides the Tester throughAsks questions during & after testing
![Page 19: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/19.jpg)
THE TESTERUsually, best if unfamiliar with your productIdeally, representative of your target marketCustomary to compensate Testers for their time
![Page 20: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/20.jpg)
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 21: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/21.jpg)
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 22: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/22.jpg)
RINSE AND REPEATMake improvements, create a new prototype, test again
![Page 23: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/23.jpg)
PAPER PROTOTYPING
![Page 24: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/24.jpg)
EXAMPLES
Paper prototype of a game
Credit: Derek Lee / YouTube.com
View online
![Page 25: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/25.jpg)
EXAMPLES
Paper prototype of blood-testing kiosk
Credit: lukenwarm / YouTube.com
View online
![Page 26: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/26.jpg)
EXAMPLES
Paper prototype of a kids’ website
Credit: BlueDuckLabs / YouTube.com
View online
![Page 27: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/27.jpg)
PAPER PROTOTYPING: ADVANTAGESFastCheapNo special software skills neededEncourages collaboration (in person)Can model a wide variety of interfaces and interactionsCan modify during the test
![Page 28: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/28.jpg)
PAPER PROTOTYPING: LIMITATIONSHarder to collaborate with remote or distributed teams
![Page 29: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/29.jpg)
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 labelsglue / glue-sticksindex cardscardboardcutting toolsprinted UI elements and device frames
![Page 30: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/30.jpg)
TIME TO BUILD YOUR OWN(and then test it!)
![Page 31: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/31.jpg)
BREAK
![Page 32: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/32.jpg)
CHALLENGE 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) - no needto prototype these third-party apps of course
Bonus:Two words: landscape mode!
![Page 33: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/33.jpg)
PERSONAS
![Page 34: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/34.jpg)
WHAT IS A PERSONA?A fictional character developed to accurately and realisticallyrepresent one type of user your product is designed to serve.
![Page 35: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/35.jpg)
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 36: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/36.jpg)
PERSONAS ARE NOT...User ProfilesMarket segmentsReal peopleStatistically representativeComprehensiveAbsoluteStatic
![Page 37: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/37.jpg)
FULL PERSONASBased on extensive user research
Site visitsInterviewsAnalytics data and logsTech support logsMarket researchSales team notes...other data on real users
![Page 38: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/38.jpg)
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 39: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/39.jpg)
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 40: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/40.jpg)
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 41: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/41.jpg)
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 42: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/42.jpg)
CHALLENGE 2: CREATE PERSONAS1. Brainstorm user goals (both UX and accomplishments), user
roles (as many as possible)2. Group them3. Name the groups & identify key characteristics (facts - no
assumptions or narratives)4. Create a persona for one of these 'skeletons'
(can use a )template
![Page 43: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/43.jpg)
BALSAMIQ
![Page 44: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/44.jpg)
BALSAMIQ: ADVANTAGESFastNo special software skills neededLarge library of UI elementsCan be used for remote collaborationHand-drawn look may encourage focus on layout &functionalityAutomatically stores revision historyIntegrates with other online apps (Jira, Google Drive)
![Page 45: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/45.jpg)
BALSAMIQ: LIMITATIONSNot intended for high visual design fidelityNot designed for complex UI interactions
![Page 46: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/46.jpg)
DEMO
![Page 47: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/47.jpg)
INVISION
![Page 48: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/48.jpg)
INVISION: ADVANTAGESSimple and easy to learn / useSimulates hover and click interactionsNo extra effort needed to create a professional presentationfor clients / stakeholders
![Page 49: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/49.jpg)
INVISION: LIMITATIONSNot a graphic design toolNot designed for complex UI interactions
![Page 50: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/50.jpg)
POWERPOINT / KEYNOTE / (SIMILAR)
![Page 51: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/51.jpg)
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 52: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/52.jpg)
POWERPOINT / KEYNOTE: LIMITATIONSLimited tools for visual designersLimited interactivity
![Page 53: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/53.jpg)
EXAMPLES
Keynote prototype for iPhone interface
Credit: amir khella / YouTube.com
View online
![Page 54: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/54.jpg)
KEYNOTE DEMO
![Page 55: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/55.jpg)
MUSE
![Page 56: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/56.jpg)
MUSE: ADVANTAGESHighly flexibleCan simulate many interactions with higer fidelityDesignate common and reusable elementsIntegrates with Photoshop and IllustratorCan be exported to PDF, HTML, Air, ...Can distribute and collaborate remotely
![Page 57: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/57.jpg)
MUSE: DISADVANTAGESLearning curve for those new to Adobe appsLess widely available (must be purchased)
![Page 58: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/58.jpg)
MUSE DEMO
![Page 59: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/59.jpg)
CHALLENGE 3: 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 60: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/60.jpg)
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 61: UX Prototyping and Personas 9 25-15](https://reader033.vdocuments.us/reader033/viewer/2022042800/58eeda8f1a28ab8a588b459f/html5/thumbnails/61.jpg)
RESOURCES & ADDITIONAL INFORMATIONPaper Prototyping: , ,
, Usability Testing: and
- Steve KrugPersonas: - Pruitt & AdlinPowerPoint / Keynote: Muse: General UX: , , , ,
, , ,
Ditch the pixel-perfect comp and use
iOS design elements Sneakpeekit UIStencils Speckyboy list
Don’t Make Me Think Rocket Surgery MadeEasy
The Essential Persona LifecycleKeynotopia
Muse JamsUIE UX Magazine Rosenfeld Media UXMastery
A List Apart Lynda Interaction Design Foundation 52 Weeksof UX
Style Tiles