Alex Mulder, Creative Partner, Nimbletank
Prototyping is becoming an essential part of the process for making mobile products that matter – both interactions and OS capabilities are becoming more complex and feature-rich – yet designers strive for simple elegant final results that don’t confuse users.
What is a prototype?
Prototyping is not about reproducing the entire application or crafting visual aesthetics, but about focusing on key interactions that can be quickly tested, iterated and validated. A prototype is not a scamp. A prototype is not coloured or leading in terms of the visual language. A prototype IS focussed on function. The point of prototyping is to…
Fail faster
The faster you can test your prototype, the faster you can test if it fails. Discarding ideas that will not work in the early stage of the project will help prevent issues from arising later on and will also lead to refining new solutions at a rapid pace.
Working to a prototyping aesthetic also means clients are not hung up on the aesthetic allowing you to gauge clients’ reactions faster to help validate design and UX decisions.
Prototyping is also a nice way to get the full team involved (including members not working on design) as what you can quickly craft with paper might be the only technical restriction.
Choose your fidelity
Once you have the brief or have a specific problem in mind, it is time to choose your fidelity. This will define how much time you have versus what level of detail you bring to the prototype. While prototyping, it is often easy to go too far or end up focussing on areas which are not needed.
(Show marking of where a prototype sits)
The rough diagram above is one way to consider what shape your prototype might take depending on time and what level you need to produce the work.
Visual fidelity – (sketch vs styled)
Simple black and white lines to represent key elements are a good starting point and time effective. Going too detailed too soon can result in people becoming distracted with logos and ui elements, however these can be nice to add later in the process.
Function fidelity – (static ↔ interactive)
Interactions can be quickly concepted. Folding paper and even cut-together pages can be used to show how someone might move journey. As you refine your prototype you could move to prototyping applications.
Content fidelity – (lorem ipsum ↔ real content)
With time in mind content can often be represented in outline boxes with some consideration to the amount. Unless text or headings are key to the interaction, you almost do not need to add the detail until later in the process.
The diagram above is another way to consider how prototyping is effective in a studio environment. It helps ease the gap from jumping too quickly on to the computer to defining the final creative solution.
Choosing the tools for the job
There are a number of prototyping tools available but ultimately time dictates which one should be used. Prototypes do not need to be perfect, they just have to simulate core or selected functionality.
Prototyping vs Available Time
0 – 15mins
0 – 15mins – Paper all the way. Black pen, scissors and maybe even a cardboard mock up if you are up for the challenge. When focusing on a particular interaction a few different sketches around the key areas brings the design to life.
A cardboard-mock device is also great to help frame the concept and provide focus on the screens.
15 – 30 mins
15 – 30 mins – Both Pop & Marvel native apps have some nice features around photographing and building basic prototypes. You still need to draw key screens but it is a nice way to quickly get concept designs into a real device.
60 mins +
60 mins + Marvel, invision & proto.io are just a few of the tools available which are becoming popular in many studios. With enough time, you can really set up a prototype with multiple interactions to be tested across devices.
This has become the benchmark for working with clients, however, with the greater fidelity comes more time required to craft the perfect interaction. In some cases clients mistake prototypes for the actual build- both entertaining but problematic for the development team.
The process… & repeat
A simple approach to iterative prototyping is as follows: creating the prototype, reviewing/refining and repeat.
1. Create Prototype
From the initial brief or problem, decide on the key problem areas to focus on and fidelity in which you would like to create the prototype. A nice way to approach it is to focus on the 20% of the functionality that will be used 80% of the time, to be created in your chosen medium. Also think about the story that goes along with the problem as this will form the basis for the testing.
2.Test and Review
When testing your prototype be sure to create realistic scenarios to test. Even if the prototype is paper, designate a human-computer* to shift pages and content around. Working around a scenario or story should give focus to testing the interaction with a number of users, this could then be recorded or presented as a series of questions at the end.
*the human computer helps test users’ movement through screens, considering realistic delays and transitions between screens.
3. Refine
Once you have results from testing, look to refine or even start afresh. As it is a prototype, it should be altered and iterated on as the process continues. This will help define the solution and help validate the design direction. Repeat this process until the problem is resolved.
Summing up
There are so many ways to effectively prototype, your choice should be about finding the solution that will work for what you are creating. From Paper to mockup applications, producing a prototype quickly will enforce the project and reveal the flaws or solution faster.
Do’s
Do Start with low level prototypes, paper is always the quickest way to to produce a quick mockup!
Do When creating interactive high-fidelity prototypes, think about realistic delays, screen load or moving through steps of a transaction so that users do not expect instant response times from the final product.
Do Reuse & save stencils, templates and mockups for future projects.
Do Focus on the outcome of the prototype. Set expectations for the process and avoid scope creep!
Do Most importantly, begin every prototype review session with the disclaimer that this is just a prototype, it prevents users from mistaking it for a working solution.
Don’ts
Don’t Begin prototype review sessions without clear guidelines for feedback. Be very specific about the type of feedback you are looking for.
Don’t prototype everything. Most of the time, you should not have to.
MMA UK Blog 