UX Prototyping and Personas 11 20-15

  • Published on
    15-Apr-2017

  • View
    249

  • Download
    1

Transcript

  • UX PROTOTYPING AND PERSONASHere early? While were waiting for the others...

    We'll use a communal Google Doc to pass links easily amongstthe class. Open .http://j.mp/proto-nov-20

    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

    http://j.mp/proto-nov-20http://webdemo.balsamiq.com/

  • UX PROTOTYPING AND PERSONASEssential tools for creating great user experiences

  • WHO AM I?Shilpa Thanawala

    @skthana

  • YOUR TURNInterview & introduce your neighbor

    (feel free to take notes)

    namerole, independent or agencydesigner or developer backgroundexperience in prototyping & how you think prototyping can beuseful to 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 riskSave time / effort / money

  • WHEN?As early as possibleThroughout the design and development process

  • 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.

  • FIDELITYHow closely a prototype models reality

    visual designinteractionenvironmentcontent and datasocial...others?

  • CHOOSE THE RIGHT LEVEL OF FIDELITY IN EACH AREAWhats your objective?

    Whos 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 Muse Visio AxureOmnigraffle

    ImpressiRise Solidify Moqups ProtoShare Proto

    http://balsamiq.com/http://www.adobe.com/products/muse.htmlhttp://office.microsoft.com/en-us/visio/http://www.axure.com/http://www.omnigroup.com/omniGrafflehttp://www.openoffice.org/product/impress.htmlhttp://www.irise.com/http://www.solidifyapp.com/https://moqups.com/http://www.protoshare.com/http://proto.io/

  • 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 we trying to learn about the experience of your users?

    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 notesDont interact directly with TesterIdeally, all stakeholders and team membersIn another room, watching video and audioIf no observers, then its 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

    https://www.youtube.com/watch?v=JMoVMFkU8gE

  • EXAMPLES

    Paper prototype of blood-testing kiosk

    Credit: lukenwarm / YouTube.com

    View online

    https://www.youtube.com/watch?v=_g4GGtJ8NCY

  • EXAMPLES

    Paper prototype of a kids website

    Credit: BlueDuckLabs / YouTube.com

    View online

    https://www.youtube.com/watch?v=9wQkLthhHKA

  • 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: LIMITATIONSHarder 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 labelsglue / glue-sticksindex cardscardboardcutting toolsprinted UI elements and device frames

  • TIME TO BUILD YOUR OWN(and then test it!)

  • BREAK

  • CHALLENGE 1: PAPER PROTOTYPINGIn groups, prototype a login / register process for a website on asmartphone.

    Goal / Purpose - to plan out the login process flow

    Include the following features & flows:

    A successful loginCreate and verify a new accountWrong username or passwordReset password (no need to prototype email clients)

    Test within your group

    Run a formal test on a volunteer from the other group

  • 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 UserFocus 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

    http://www.usability.gov/how-to-and-tools/methods/personas.html

  • 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

    http://creativecompanion.files.wordpress.com/2011/05/persona-core-poster_creative-companion1.pdf

  • BALSAMIQ

  • 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)

  • BALSAMIQ: LIMITATIONSNot intended for high visual design fidelityNot designed for complex UI interactions

  • DEMO: BALSAMIQ1. In a browser, go to: 2. First, let's get oriented3. Next, let's create a simple example prototype for our airline's

    homepage

    http://bavc.balsamiq.com

    http://bavc.balsamiq.com/

  • INVISION

  • INVISION: ADVANTAGESSimple and easy to learn / useSimulates hover and click interactionsNo extra effort needed to create a professional presentationfor clients / stakeholders

  • INVISION: LIMITATIONSNot a graphic design toolNot designed for complex UI interactions

  • DEMO: INVISION1. In a browser, go to: 2. First, let's get oriented3. Next, let's create a simple example prototype for an existing

    website

    http://invision.com

    http://invision.com/

  • POWERPOINT / KEYNOTE / (SIMILAR)

  • 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: LIMITATIONSLimited tools for visual designersLimited interactivity

  • EXAMPLES

    Keynote prototype for iPhone interface

    Credit: amir khella / YouTube.com

    View online

    https://www.youtube.com/watch?v=JZUsk5b_bNQ

  • DEMO: KEYNOTE1. Open Keynote2. First, let's get oriented3. Next, let's create a simple example prototype for a website

  • MUSE

  • 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

  • MUSE: DISADVANTAGESLearning curve for those new to Adobe appsLess widely available (must be purchased)

  • DEMO: MUSE1. Open Muse2. First, let's get oriented3. Next, let's create a simple example prototype for a website

  • 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

  • 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 & 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 POP 2.0

    Dont 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

    http://www.teehanlax.com/blog/iphone-sketch-elements-ai/http://sneakpeekit.com/http://www.uistencils.com/http://speckyboy.com/2013/04/29/30-wireframe-templates-and-toolkits/https://popapp.in/http://www.amazon.com/Dont-Make-Me-Think-Usability/dp/0321344758http://www.amazon.com/Rocket-Surgery-Made-Easy-Do-It-Yourself/dp/0321657292/ref=pd_sim_b_2?ie=UTF8&refRID=182NMDAPSGKET5Y4594Shttp://www.amazon.com/The-Essential-Persona-Lifecycle-Building/dp/0123814189http://keynotopia.com/http://muse.adobe.com/events.htmlhttps://www.uie.com/http://uxmag.com/http://rosenfeldmedia.com/training/http://uxmastery.com/resources/ux-courses/http://alistapart.com/topics/user-experiencehttp://www.lynda.com/https://www.interaction-design.org/courses/http://52weeksofux.com/http://styletil.es/

  • THANKS!

    Shilpa Thanawala@skthana

    https://twitter.com/skthana