Design is an iterative process. The more quickly you can test ideas and make improvements, the faster you reach the finished product. That’s where prototyping comes in. It is an iterative process of testing ideas collaboratively until you reach the desired outcome. Each iterative loop increases the fidelity of the prototype. Ideally, you want to progress from low-fidelity prototypes to high-fidelity prototypes. The reason: The more detail a prototype has, the more time-consuming it is to make changes to the prototype.
For example, a sketch of your design is very simple to alter. You just need a fresh piece of paper. Making changes to a clickable design prototype is going to be slightly more time-consuming. The complexity will increase depending on the number of elements you have in the prototype and the interactions between the elements.
The Benefits And Importance Of Prototyping
Fortunately, modern design tools allow us to build realistic prototypes that can simulate the feel of the desired product. You can test your assumptions about visual hierarchies and interaction design to see what works and what does not.
Prototyping is a key activity we undertake in our practice to ensure that the product we develop meets the needs of the audience. This includes websites, applications and mobile apps—anything that a user will interact with.
There are several tangible benefits of prototyping, such as:
- You can save time and money. Prototyping allows you to identify areas of concern early on in the project. You can avoid costly mistakes, which means you can improve your time-to-market substantially.
- End users can get involved. Ultimately, you are building any product for end users. They are the most important audience. Prototyping allows you to roll out products for early testing, thus helping you get tangible feedback from everyday users. It also allows different stakeholders—project managers, developers, analysts—to get involved from an early stage of design. It makes collaborating across teams a lot easier.
- You can build better solutions. The biggest advantage of prototyping is, perhaps, that you can build more user-friendly products. You can identify problem areas early on in the design stage. Collaboration between designers and developers is typically smoother. And since you get feedback from actual end users, you are able to validate what will work and what will not.
Best Practices For Better Prototyping
The first rule of prototyping is to test often and at every stage of fidelity. Low-fidelity prototypes are great for testing out concepts. Higher-fidelity prototypes that include interactions are useful for testing user experience. I recommend using realistic data when testing prototypes. Instead of using placeholder text, add meaningful content to your prototype, even if it’s a rough draft. Similarly, use realistic phone numbers, names and email addresses in contact forms to minimize distractions and bias.
Here are four other tips for better prototyping, which can eventually improve your end product.
1. Start from the inside out.
A common prototyping approach is to get the basic navigation elements down before focusing on the content. This is the outside-in approach, where content is the secondary focus. A more user-focused approach is the inside-out process, which prioritizes the information that is important to users. For example, the call-to-action button is higher up on the visual hierarchy than a navigation bar. Create a content inventory that lists all the elements that are important to users. Ideally, you should rank them, too, in order of priority.
By doing so, you also automatically build a mobile-friendly prototype. Given the limited real estate of mobile devices, you get to prioritize elements that are absolutely crucial for an engaging user experience.
2. Prototype only what you need.
Don’t get too caught up in the details in an attempt to build the perfect prototype. Quick iterations are the name of the game. Typically, only 20% of your website’s functionality accounts for most user interactions. Think menus, call-to-action buttons and primary links. Get the basics down, and move to the next stage.
The level of detail that your prototype has will also depend on the kind of interactions your end product is going to have. For example, if animations form a crucial part of your UX, you should ideally build a mid-level prototype.
3. Focus on user scenarios.
Create user personas and identify all the different ways that the personas might interact with your website or mobile app. It is important that you design for user flow and not for individual sections of your product. Focusing on user scenarios also helps you build functional prototypes that simulate the desired end product.
4. Get the right users for testing.
Usability tests can vary widely. However, a basic requirement for any kind of successful usability testing is to recruit the right users. Ideally, you want a balance between users who are experienced in a domain and completely new users. For example, if you are redesigning your online travel portal, you can segment users into two categories: existing account holders and completely new users.
Picking The Right Tools For Prototyping
The prototyping method and tools you choose will, primarily, depend on the stage of ideation you are at. For example, if you are at the conceptualization stage, a paper prototype will work. If you want to build a higher-fidelity prototype, there are a lot of user-friendly prototyping tools that allow you to build one without any coding knowledge. Adobe XD, Figma and UXPin are popular choices. All of these platforms allow designers to easily include interactions in their prototypes. They also facilitate collaboration across teams, among other advantages.
The bottom line: Design quickly and test often to get the most out of prototyping.
