Understand your Prototype

Before running off to make a series of drawings and sketches, take time to understand your prototype and how it supports your design work. A prototype is not a substitute for your design. A prototype is a small portion or representation of your design solution. It is there to help you test various aspects of the user interaction. It is not meant not to show the user the final look or feel of the product. When testing a prototype remember to be “clear first, clever second” with your UI design and  presentation.

User Real Data, Avoid Lorem Ipsum

In my previous article on sketching and prototyping, I discussed why possible design solutions can only be estimated if you’re using a placeholder. Real content needs to be provided to give users context. This holds especially true when testing a prototype. It is necessary for the user to have context to fully understand the nature of a (web) page (is it authoritative content, does it require user input, and what type of input?) and the type of tasks that can be performed. Without context, the user can only guess how to complete tasks and the prototype may give them the wrong impression of how the site or application is meant to work.

Avoid generic labels and categorization. Having several boxes labeled “product” will not produce the same testing outcomes as when using informative labels. What are the products that will actually be displayed? Users can become easily distracted by placeholders when they’re trying to interpret or understand the context or meaning of the page layout.

Wrenches are a great example. If you say “wrench” to someone, they will visualize an image of wrench that arises from their previous experiences and knowledge. For example, when someone says “wrench” to me, I often think of the game piece from the mystery game, Clue. There are, however, several other types of wrenches that may come to someone’s mind, for example: Box-end Wrench, Open-end Wrench, Combination Wrench, Adjustable Wrench, Socket Wrench,  Allen Wrench,  Spanner Wrench, Torque Wrench, Pipe Wrench. If you use one of these specific types of wrenches rather than using a generic wrench placeholder, they will provide a much stronger context to users, even if they don’t know the uses of the different types of wrenches.

Be Mindful of Users’ Expectations

Before starting any testing session, explain the prototype to users so that they can understand what they will be experiencing. Users’ expectations can create bias when interacting with your prototype that may not be indicative of how they would use the final product. Be aware that users may not be fully honest during testing and most likely temper their feedback. Look for cues during testing that user are “holding back” such as  long pauses before providing answers, deep sighs or facial expressions masking their confusion or frustration.

By introducing the prototype at various stages you can do quick user testing with low fidelity prototypes; with each subsequent round of testing you can increase the fidelity from low, to medium, to high. Test on yourself first, especially when trying to implement a new approach to complex interactions.

Keep in mind that your paper prototype will not be able to show users some contextual and tactile interactions. These include page load times and image loading. Show users the need to scroll vertically or interact with horizontal pagination. Visual cues and animations are difficult to mimic or present on paper. Paper prototypes are best used to test a specific part of your design.

Set Tasks, Set Goals

Regardless of fidelity, it is important to approach each testing session with clearly defined tasks and measurable goals. Make sure the prototype supports those tasks. Tasks can be anything from identifying the login or placing a product into a shopping cart. Run through your prototype several times to identify potential pitfalls and and dead ends in functionality that can get the user lost or stuck in an area of the prototype that will require you to intervene or reset the testing scenario. Define the one metric you will be testing to ensure consistency and measurable results.

Note feedback on simple friction points like confusing labels or size and position of buttons and links and assess their effect on the interaction and interface. The user will often navigate and interact with interfaces by what Steven Krug refers to as “muddling” and “satisficing.” These two concepts will reveal if paths were used the way they were intended (or not). Did users have a preferred path and which paths went unused? Remember, “users don’t read pages, they scan them.”

Be Open-Ended

Use a participatory design approach to give users a chance to articulate their feedback on the design solution. Users may not be able to fully articulate their expectations or thoughts on the interactions and interface, so give them the opportunity to sketch. Provide the users with blank sheets of paper to enable them to sketch out their solution and their sketches will provide the designers with a hard copy of the users’ feedback.

Benefits of Paper Prototyping

In addition to being a quick and easy way to iterate designs, paper prototyping is an interdisciplinary activity that encourages input from team members. A prototype can help identify a range of problems within the interface and can also address issues with layout, content labels and button placement. For your next design project, remember to “test early, test often.”