UX PROTOTYPING AND PERSONAS Here early? While we’re waiting for the others... We'll use a communal Google Doc to pass links easily amongst the 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 familiarize yourself with it. What UI elements are provided? How would you be able to use a screenshot of your website as a background and then change one feature? How would you link to another screen? http://webdemo.balsamiq.com/ 0
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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?
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 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: 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 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!
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...
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
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
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
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
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)
MUSE DEMO
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.