Paper trails, wireframes and high-fidelity prototyping. Is paper prototyping reaching its end? Read on to see what we think.
“Paper is dead, long live interactive prototypes in the world of web design!” is what we’ve been hearing a lot lately, and it’s not far from reality. The concept of paper prototyping is nothing new to user experience designers and is pretty simple: you sketch out your interface and screens on paper. This way of designing can be great to get you started, but can’t take you a whole lot further. Let’s therefore discuss the optimal way to web design using prototypes.
So, you may have seen this hilarious video, or some sort of version of it, that explains why paper is not, nor ever will be dead. Some of us may agree with this: the sensualists and the admirers of the printed word. On a personal level, perhaps you love the feel of pages between your fingers, the notion that someone somewhere may have had the same thoughts run through their mind when reading the same passage, the charming throwbacks to the wherever, whenever. Plus the added bonus that your books can suffer a coffee spill without completely cr*pping out on you! But, times are a-changing, and we move with the times: survival of the fittest and all of that. On that note then, is paper still a good and valid alternative when it comes to wireframing and prototyping?
Know your process and adjust your fidelity accordingly
Low-fidelity paper prototyping is common during the early stages of the design process. But what exactly is a paper prototype? Paper prototyping is a basic technique to collect thoughts and ideas in an organized manner. It’s typically a concept sketch, set of drawings or a storyboard on paper, that are meant to show how your product works. Low-fidelity prototypes serve as a checkpoint for designers and can be a great way to test ideas during the earlier stages of the project because they encourage constructive and timely review feedback for iterative changes. But what happens when you want to gather real-world feedback, find and fix problems in your interface, simulate system responses or perform user tests? Unfortunately, paper prototyping doesn’t have an undo button and mistakes happen, sketches need redrawing and rework can be time and resource hog. This is where high-fidelity screen prototypes come into the picture.
High Fidelity prototyping is essentially a reflection of the final product. Now we’re talking. These prototypes are much more developed and sophisticated compared to low-fidelity wireframes and are useful in the later stages of user testing because participants can provide a response based on aesthetics and functionality, rather than a basic concept. High-fidelity usually implies an interactive functional prototype, capable of providing a real user experience and are usually built with stakeholders, as well as the user, in mind.
Both low and high fidelity are fundamental phases in the web design process. Together, they make up the whole cake. Essentially low-fidelity wireframing is the spongy base of the cake, the foundation of what the product could be. High-fidelity prototyping intends to be the icing on top of the cake, combining the structure, layout, content, and interaction in order to represent a near-finished product. You need both steps for everyone – teams, users and stakeholders alike – to be able to envision the end product. Starting on paper is great for your design process, but it has its limitations.
A hi-fi solution to a high-tech problem
“Oh, you need a design? No worries! I’ll just churn out a static wireframe of the UI, with no interaction, no animation and no way of really seeing its relation to your final product needs.” Sounds awesome.
Ideally, paper prototypes should only ever be for internal use. They’re for you, not for outsiders. And when it comes to stakeholder involvement, you want feedback, not reactions. We’re living in the New World of tech where paper is on its way out, and prototypes are in. Nowadays, it’s a rare project where the use of a prototype is not recommended. A good prototype can be an excellent way of defining a project and testing its validity with real users. With interactive prototyping tools, you can define and visualize your requirements that you would otherwise have to make and rework time and time again in specification docs. As explained on zurb.com: “Documents become less relevant as the team moves forward with the product. Moreover they can be unreliable and lead to risks regarding expired or inaccurate data. A successful team will prototype early and replace their abstract documents with clear and tangible customer feedback“, preventing rework and misunderstandings early on.
Iterate. Iterate Some More. Are You Hi-Fi Iterating Yet?
The way we see it, iterative high-fidelity prototyping is a must-have if you want your project to hit the ground running. Essentially, iterative prototyping allows us to translate our creative vision into a reality, and then perfect that reality through fast-paced iterations. There are a number of factors that make iterative prototyping a step forward in the design process. Firstly, it can save money and resources, and the process makes exploring what the user needs and how to get it to them generally much quicker than documentation, both at kick-off as well as when testing with multiple iterations. In terms of research objectives, the faster the customer can see the interaction flow, design and navigation, the more efficient the process is. Moreover, with the introduction of interactive and high-fidelity prototyping, we’ve seen a more efficient handover of deliverables to stakeholders. But above all, prototyping allows everyone to get involved – designers, developers, business analysts, stakeholders, and users alike.
And you see, you just can’t do all of this with paper prototypes.
That’s great, but what about a paper trail?
Calm down! How about a tool that helps you to translate your ideas from paper to screen? With Justinmind, you can create your low-fidelity wireframes before building up to high-fidelity interactive and animated prototypes.
And the best part is that you can define the navigation of each of your prototypes: your very own high-tech paper trail! By designing and simulating scenarios in your interactive prototypes, you can provide your stakeholders with a better understanding of the flows and user navigation, and validate your prototypes.
Just to give you an example, here’s how we redesigned our website at Justinmind. First of all, we had meetings to brainstorm ideas and define our requirements related to the structure and content of the new site. Then we used paper prototypes to initially document our ideas. The next step was to transform these paper prototypes into low-fidelity wireframes, working on these and adding content. At this stage of the process, both the designers and the content editors worked on the same wireframe simultaneously, using Justinmind’s teamwork features. When this had been approved by the whole team, by sharing the wireframe, we then moved on to make a high-fidelity prototype, sending this on to the front-end development team once approved.
For some of us, paper prototyping is still an important part of the web design process. But, remember that it’s only an initial step and a more advanced wireframing and high-fidelity prototype will really help you out in the long run. You can always begin to design on paper but make sure that you test and validate on screen. Download Justinmind today and take your design from low fidelity sketches to high fidelity wireframes and prototypes with our comprehensive prototyping platform!