Low-fi prototyping: What, Why and How?

The creation of digital products usually involves a range of roles and functions collaborating on a project. The apparent ones are the business analysts who map out the requirements for the end product to fulfil, the visual designers who create beautiful interface screens, and developers who turn those into a tangible reality. What is mostly hidden in the process (and invisible to the end user’s eye) is the work of the user experience designer. The aim of this series of posts is to shed some light on what happens in the backstage of a product development process, and to describe some of the tools and methods our UX researchers and designers use in creating our greatest products.

As UXers, we often get our hands dirty drawing the flows on paper before taking them on to the digital screens. While most of the design process is described in the previously written post, an important step in the user experience design is usability validation. At different stages of the development process, and depending on the objectives one wants to achieve, there are various tools a UXer can use to validate their concepts or designs and test their products. The most commonly used distinction describes the level of finishing of the test products, namely low-fidelity and high-fidelity prototyping.

Today, we are going to talk specifically about low-fidelity prototyping.

What is it?

A low-fidelity prototype is a quick and easy tangible representation of a concept, a use flow, or an information structure created for getting quick feedback and improving the product. These prototypes are generally characterized by low technology implementation and can use a variety of materials, including sheets of paper, cardboard, glue, straws, lego blocks, among many others.

Why do we do it?

Rettig in his famous paper mentioned “Lo-fi prototyping works because it effectively educates developers to have a concern for usability and formative evaluation, and because it maximises the number of times you get to refine your design before you must commit to code.”

At MOBGEN, we often make use of low-fi prototyping (most commonly paper prototyping) when in need of quick feedback on our concepts, ideas or flows, along with quickly communicating the aforementioned to colleagues and clients.The greatest virtue of the method is in its speed — generally rough paper sketches or wireframes can be used if we do not have designs yet. By testing them with our users we can get feedback and learn from mistakes and then we iterate. We define use cases for what other questions need to be answered, test and recreate. These iterations of early tests help a lot to avoid delivering a half-baked product to the market.

Apart from its speed, there are a number of benefits of paper prototyping:

• The changes to the test prototypes can be made on the go. If you detect a flaw in the flow, you can quickly replace it and test with the same user.
• Testers generally tend to comment on the finishing of what they see. Hence, if you want to test the flow of the conversation, the layout of the elements, or the terminology — it is best to go with rough paper prototypes so the users are not distracted by details of the UI elements.
• Because generally the paper prototypes do not have a very polished look, users feel more comfortable in being critical and pointing out UX problems. If this was to be done with highly finished design screens, users are most likely to be frustrated with themselves for not understanding or doing it right. This gives more opportunity to find out the problems.

Nevertheless, there are some downsides to testing with paper prototypes, so we need to know when to go with other prototyping methods.

• Users have to be “trained” to think in terms of digital screens, even with paper screens. Paper prototypes are usually limited in terms of testing certain interactions, transitions or animations.
• Using paper prototypes during the test can be more time- and space-consuming as opposed to using digital screens. The transition to a next screen will include a change of the physical papers, which takes time. In addition, with flows containing many stages, you need to make sure to have enough space to orient.
• Usability tests with paper prototypes require a thorough planning. You need to think through how you are going to present the information to the user, what happens when they click a certain element, how does the navigation work on paper, and so on.

How to use it?

As mentioned before, usability tests with paper prototypes require thorough planning (but really, what testing doesn’t, right? ;)). A loose formula for successfully conducting a usability test with paper prototypes would include three ingredients:

1. People
2. Materials
3. Methods

People

People refers to all the human participants of the usability testing. These include:

• Users. Generally, for qualitative testing we invite 5 users, according to the recommendations by Nielsen research stating that 5 users should able to identify about 85% of all usability problems. During the test the users interact with the paper prototypes of the interface to be tested and additionally, may be interviewed about their impressions and experiences.
• A facilitator to conduct the usability testing. They are in direct contact with the users, they explain the objectives and plan of the test to the user, provide the users with tasks to perform during the test and ensure that everything runs smoothly in the process.
• Observer(s) to watch the behavior of the users and their actions, interpret the interactions with the prototype and jot down any important observations or comments. Observers do not communicate with the users, and only perform the role of taking feedback.
• Depending on the chosen method and complexity of the prototypes, you might additionally need what has been termed as the “human computer” . This person manipulates the paper prototype so that it can provide the feedback based on the user’s interaction. The human computer is not allowed to give hints or answer the user’s questions so that the users are left entirely on their own to perform the tasks that they have been assigned. Most of the times, this role can be performed by the Facilitator.

Materials

• Paper prototypes. Previously prepared screens or sketches on papers to test with the users. For mobile interfaces, we often create them on a template of a phone. If you want to be able to directly make changes according to the feedback and test the new changes with the same users, prepare some blank templates to draw new screens.
• Depending on the method you choose, you may need a physical phone or computer stencil to represent your device and put the user in the mindset of working with a device. These can be laser printed to match the size and shape of the desired device or even simply a cut out from a cardboard.
• Pens and pencils if you want to redraw screens on the go or take notes.

Methods

Various methods can be used to test with paper prototypes. The following are some examples:

• Draw or print out screen layouts, lay them out on a table or wall and go through the flow. Based on the stage of your development process, the screens can use either wireframes or visuals.
• Create moodboards for testing the overall impressions of the interface.
• Use storyboards with different use scenarios for explaining the usage of the product and “putting yourself in the user’s shoes”.
• For simulating an environment (e.g. “imagine you are at a gas-station”) you can use Google cardboards and 3D models to recreate the needed props and surroundings.

The following is a nice example of paper prototyping for a mobile interface with a phone stencil that is broadly used in usability testing.

Some practical tips

Through specific cases and experimentations from client to client at MOBGEN, we have developed paper prototyping methods to fit our own needs for usability testing.

When briefing users, it is important for them to understand that they need to feel as though they are using a digital device. For this case, users need to be educated about imagining the different digital interactions (e.g. “imagine you scroll down from this screen to this”) and are aware of the terminology used. Generally, storyboards can help to explain the usage scenario and full product cycle.

The paper prototypes prove to work very well in validating the concept, and the UI elements with the involved stakeholders, getting direct feedback and applying changes.

In conclusion

Paper prototypes have been found useful in testing both the bigger picture and details of the user interface. This tool helps to detect problems at an earlier stage and tackle problems ahead of time. As opposed to high fidelity prototypes, lo-fi paper prototyping is efficient and saves both money and time in getting quick feedback.

In the end, we believe that using different tools at different stages will complement each other, allowing for more concrete feedback and the opportunities to improve and perfect the product. Depending on the needs, available resources and how far your team is in the process, the design researcher makes the decision on which methods to use.

In our next posts we will discuss high-fidelity prototypes and when, why, and how to use them in the design process.

Post originally published at MOBGEN labs.

Eleonora is a UX designer currently solving complex problems at MOBGEN in Amsterdam. Follow her on twitter or connect on linkedin.