Slides from my intro UX class at School for Visual Concepts. This week, were going to dive into the basics of prototyping! For our studio exercise, we're going to have a clickable prototype by the end of the class using the POP app (Prototyping on Paper). And since a good prototype always has a purpose, were going to dip our toe into guerrilla usability testing and learn just enough to understand what we need to prototype.
Prototypes + Guerrilla Usability Testing Session 4 - July 17, 2014 School of Visual Concepts - UX1 http://svc-ux1.leannagingras.com
Week 1: what does doing UX mean? what does UX look like in the real world? how do we talk to users? Week 2: User-centered design how do we transform interview insights to design ideas? Week 3: Sketching and ideating how do we create good ideas and good designs? Week 4: Prototyping and guerrilla testing how do we communicate our designs and measure their impact? Everything below here is tentative and will be adjusted to taste! Week 5: Panel - Making an impact with UX how do we make our UX work count?
Agenda A week in the life Homework! Lecture: Prototyping Guerrilla usability Studio: Make a POP prototype
From Bill Buxtons Sketching the User Experience
Shit or get off the pot.
Sketches and prototypes are both instantiations of the design concept. However they serve different purposes, and therefore are concentrated at different stages of the design process. Sketches dominate the early ideation stages, whereas prototypes are more concentrated at the later stages where things are converging within the design funnel. Bill Buxton, Sketching User Experiences
PROTOTYPES HAVE PURPOSES Working through a design Shared communication Selling your idea internally Usability testing Gauging technical feasibility and value From Protoyping: A Practitioner's Guide
WORKING THROUGH A DESIGN
Example: 93 Stars
From Bill Buxtons Sketching the User Experience
Sketch a Move - https://vimeo.com/5125096 CREATE SHARED COMMUNICATION
Prototype example: ARMuseum. We used a sliding paper prototype to show how the augmented reality overlay would change as the user panned their phone across the room. We took this approach because it was difficult to communicate this with static images.
Example: TMO DR
Clay model of an Audi. Industrial designers, architects and engineers build models to align investors and stakeholders before investing in costly builds. SELL YOUR IDEA INTERNALLY
Prototype example: TMO Coverage Kiosk
USABILITY TESTING Jeff Hawkins tested the PalmPilots design with his model, using a chopstick for a stylus. He took pretend notes in meetings, and counted the steps it took to perform common tasks.
Pong prototype, 1972. From Wikipedia: Dabney wanted the game to "boo" and "hiss" when a player lost a round. Alcorn had limited space available for the necessary electronics and was unaware of how to create such sounds with digital circuits. After inspecting the sync generator, he discovered that it could generate different tones and used those for the game's sound effects. The prototype impressed Bushnell and Dabney so much that they felt it could be a profitable product and decided to test its marketability. In September 1972, Bushnell and Alcorn installed the Pong prototype at a local bar, Andy Capp's Tavern. FEASIBILITY
TOOLS There are dozens and dozens out there. Use what fits the job. Here are some very basic and cheap options: Paper prototypes POP iPhone app Balsamiq Fluid
ONLY PROTOTYPE WHAT YOU NEED Scenario 3: Find Performance Details for a Particular Printer. Goals Review the way the participant searches for products, and finds specific product performance specifications. Determine if the nomenclature reflects the users expectation for the content areas. Possible Paths Path 1: Homepage > Our Solutions > Navigation: Small Character Ink Jet Path 2: Homepage > Our solutions > Printers > Small Character Ink Jet > 1550 Product page Tasks Now we would like to know where you would expect to find performance details. Please show us where to find the maximum line speed for our new small character printer, the Videojet 1550 printer. The pages I built for this prototype was based on what I needed for the usability test:
PROTOTYPING POP QUIZ Your R&D team wants to develop a smart ball that you can play augmented reality games with, such as Catch or Capture the Flag. How would you prototype for these scenarios? You want to make sure that target users such as teenagers or college students like the concept. You want to make sure its easy to use the iPhone app to program the ball. The balls hardware team and iPhones design/dev team need to collaboratively build the interaction between the two devices. You want to convince your companys C-level executives to fund your project. You want to fine-tune the gameplay mechanics before you finalize it and take it to market.
VALIDATE EARLY & OFTEN The earlier you start getting feedback about your design, the better. Dont wait for perfect; get your rough prototypes in front of users ASAP
93 STARS GUERRILLA USABILITY TEST In-class guerrilla usability test of the 93 Stars POP Prototype! What were your findings? couldnt figure out camera button confused by initial screen - could eat? have eaten? trends - doesnt make sense until you understand that theyre from taking pics of the food trends - is yellow good or bad? gray stars I forgot to put anything in 7 stars? pictures more attractive than camrea button (2 users) the pizza must not have been very yummy potato chips 3 stars! hard to understand what the stars are rating, no way to know what it means at the start you cant tell when youre done! what screen is the end? the trend page isnt a good indicator that youre done - and its not clear what the trend page is 93 stars means you ate poorly! I ate such great food this week
93 STARS GUERRILLA TEST VIDEOS https://www.youtube.com/watch?v=tuB0PGCKFZkhttps://www.youtube.com/watch?v=1qUEpKYpvGY
93 STARS GUERRILLA TEST FINDINGS not clear what the camera icon does need clearer confirmation after photo is taken not clear that this is a healthy eating app (stars = delicious) Trends button looks like a Settings gear icon Trends screen is overall confusing, especially with color coding This informal model of guerrilla testing lends itself well to iterative prototyping. Its relatively straightforward to pick out big problems and use paper, tape and scissors to tweak the prototype before inflicting it on the next participant.
GUERRILLA USABILITY: PLANNING Test goals: specific things you want to learn from this do people understand what the camera icon does? Tasks: give them a specific task, dont just say try it out word tasks as scenarios - imagine you need a new ski outfit dont tell them how to do it - ask them to show you how to do it
GUERRILLA USABILITY: EXECUTION TIPS usability testing is actually an interview in disguise ask them to think aloud and narrate what theyre doing describe what youre looking at what did you do there? what were you expecting to happen? if they click on something that you didnt build? ask them what they expected
Studio: Make a POP prototype Get into groups of 3-4. Pick up where you left off last week (or mix it up with a different group) and build a POP prototype. Well share our prototypes and discuss!
Julie doesnt want to manage any paper documents. Shes gone paperless wherever she can, but she still gets paperwork that needs to go into her records, for example, hospital discharge papers. She wants to be able to take pictures of these documents and then easily search through them whenever she wants.
Homework: Prototype your project Sketch out one key workflow Make a prototype in anything you want: paper, POP, Axure, Balsamiq... Put it in front of some people and get feedback!