High-fidelity prototyping: What, When, Why and How?

As part of the user experience design series at MOBGEN, we have recently covered the benefits of low-fidelity prototyping within design process of digital products. Additional to low-fi prototypes, designers can also make use of high-fidelity prototyping in their process to communicate or validate concepts.

With the recent announcement of Origami studio by Facebook, and the Framer’s upgrade — some of the tools used in the industry for creating high-fidelity interactive prototypes — the timing for this post could not have been better.

What is high-fidelity prototyping?

The fidelity of the prototype refers to the level of details and functionality built into a prototype. In this sense, a high-fidelity (sometimes referred as high-fi or hi-fi) prototype is a computer-based interactive representation of the product in its closest resemblance to the final design in terms of details and functionality. The “high” in high-fidelity refers to the level of comprehensiveness that allows you to examine usability questions in detail and make conclusions about the user behaviour.

The hi-fi prototypes cover not only the user interface (UI) of the product in terms of visuals and aesthetics, but also the user experience (UX) aspects in terms of interactions, user flow and behaviour.

You might be thinking, lo-fi, hi-fi, (do these, by chance, have anything to do with wi-fi?) — what is the need for another technique and how is this better than lo-fi?

Now, it is not a question of which usability testing technique is better, and perhaps you may even need a combination of the two (+ other prototyping methods) in your design process, but it is the matter of when to use which method, and why? Extensive research has been done in literature proving that both methods are basically equivalent in finding usability issues (Walker et al 2002). At MOBGEN, we broadly use both techniques depending on the stage of the design process and the maturity level of our designs. In fact, often designers make various prototypes using more than one technique, moving towards the final production methods as the designs mature towards completion (Newman & Landay, 2000).

When?

So, when is the right time to use hi-fi prototypes?

• When you have visual designs of your product
• When you have an idea about interactive elements, such as navigational schemas from a screen to another; animations; and mini-interactions, and are able to prototype them
• When you want to test the details of your products in terms of UI elements, colour schemes or copy
• When you want to test the transitions, animations, and effects of them on the user and user behaviour
• When you want to know how your target users feel about your product and you want to get their opinions on your designs.

Why?

The main purpose of interactive prototypes is their use in the usability testing of the product have target users validate it. It is important to test your product before launching it in the market to foresee any issues or failures. Getting the most out of the feedback can be done with a prototype that is closest to the final product in its detail and functionality.

In addition to validating designs, interactive prototypes can be used for presentations and pitches. When you want to communicate the designs and functionalities of your product to your team members, clients or other stakeholders in the project, and when the functional build of the software is not developed, a high-fidelity prototype does the job very well.

There are multiple benefits of using high-fidelity prototypes in product design:

• Interactive prototypes are made as close to the true graphical representation of the products as they can to allow thorough testing on all the detailed aspects, including UI components, colours, layouts, the information hierarchy, mental load of the screens on users, and other interactions.
• They provide a good base in terms of project management for making estimates on how much time is needed for implementation and quality assurance testing
• The availability of interactive prototypes can improve the collaboration with developers as they will have a clearer idea on how the application should behave
• Most importantly, by allowing you to test your product, the prototypes can save the company the cost in terms of time and money on building something that would have had little success in the market.

As with everything, there is always the other side of the coin, and so are there drawbacks in using high-fidelity prototypes in your design process:

• Hi-fi prototypes are costly in terms of time and resources to produce compared to their low-fidelity cousins.
• Because it is more time-consuming to change the designs, it is harder to make on-the-go fixes in between users during a usability testing if you want to update your prototype quickly to get better feedback.
• As hi-fi prototypes have a finished look, participants in usability testings may not feel comfortable making critiques or pointing out flaws in the designs.

How? Materials and methods.

In order to create an interactive prototype, you need to get all your ingredients ready. First of all, prepare your visuals and set your user flows. Identify all the transitions and animations you want to create between different objects or screens. Finally, choose the right tool according to your needs. There is a growing list of prototyping tools available for designers.

Some of the top mobile and web software prototyping tools currently in the industry are:

• Proto.io
• InVision
• Pixate
• Axure
• Principle
• Form
• Framer
• Adobe XD (previously known as Project Comet)

The web has enough information on comparing pros and cons of each tool that we do not want to repeat again here. Although, what is important to mention here is that when choosing your most optimal prototyping tool, you need to base your decisions on practical considerations:

• Aesthetics of the produced prototype, in terms of visuals and interactions giving a native feeling; how fluid the animations are, and so on.
• The availability of established interaction models in the software that you can use to drag and drop in order to create your prototypes quickly
• Handling of assets, in terms of syncing with popular cloud-based platforms, ease of storing and searching assets in the software, and ease of updating all instances when changing the source asset.
• Compatibility with Photoshop, Illustrator, Sketch or any of your favourite tools to generate visuals
• Ability to preview your prototypes across different-sized devices and platforms
• Playback speed
• Publishing capabilities to enable sharing with your clients and other stakeholders
• Availability of library with common UI elements to aid creating quick screens
• Collaboration, in terms of allowing colleagues or others to comment or feedback on features

As all design projects have different needs and teams have different standards or goals, you can make your decisions accordingly. We at MOBGEN have used Invision, Pixate, and Principle in the past and have currently opted for Proto.io. We prefer Proto.io for its simplicity and how fast you can create things with it. It has a library with standard interface elements that you can use to create your screens quickly without having to switch to Photoshop for simple elements. It is web-based and keeps your projects on the ‘cloud’ — meaning that if you switch devices, you can access it from anywhere (the mobile app even has an offline mode to access your prototypes without internet). It is suitable for both beginner and advanced users; you get a hold of the app quickly thanks to the simplicity of established triggers and interactions, while the advanced users can enjoy the vast amount of capabilities enabling customised codes.

Practical tips from MOBGEN:

From our experience with creating interactive prototypes and using them in usability testings, we have learned a lot in how to achieve the best results. To save you some time and many lessons to learn, we wanted to share some practical tips:

• Inform the users that it is the prototype that is being tested, and not the user or their capabilities. It is important for users to know that this is only a prototype; it is an early product idea and that there may be areas that are not functioning. They should also not see this as a finished product and should feel comfortable pointing out flaws in the design.
• If time permits, allow yourself a window in between users, in case you need to make improvements before the next user. This way you maximise the amount of improvements you can make during the testing session.
• While formal usability testing sessions are useful, it can also be time-consuming. Use your interactive prototypes to show and get quick feedback anywhere anytime. Ask a colleague (who is not familiar with the project), a friend, or even your mum to use the app and tell you what they think about it.
• Generally, the results of testing with hi-fi prototyping are used to revise your user interface. Even before the test, be clear about what you want to achieve through the usability testing and how you will approach the results. In terms of project management, make it clear to your team how you will be implementing the improvements that you have achieved from your findings.
• When testing a prototype of an app with a long flow, we have found that when something goes wrong and the app crashes, the user will have to start the whole flow from the beginning, to both the tester and user’s annoyance. A practical solution we have come up with to solve this is creating several milestones in the flow (Section 1 — sign up, Section 2 — onboarding, section 3 — personal profile, etc…, for example) and create a starting page in the prototype with shortcuts to each of these milestones. This way, if the app crashes you can pick up from where you were instead of having to start from the beginning.

In conclusion,

In their paper Designing for Usability: Key Principles and What Designers Think, Gould and Lewis (1985) discuss three principles for designing in the field of information technology: (1) early focus on users, (2) empirical measurement using prototypes and (3) iterative design.

Following these principles at MOBGEN, we believe in the motto: “User-centred design starts with the user and ends with the user.” Throughout all the stages of our work, we try to put ourselves in the shoes of the user. We cannot stress enough the importance of testing a prototype as early in the product development process as possible. These prototypes, low-fidelity or high, which can be validated and refined based on feedback gathered, serve as a powerful tool in uncovering the missing gaps in your designs, and when used in iterative cycles of design and development, will bring you closer to the realisation of the killer app you are after.

If you’d like to receive more information regarding prototyping for your project, please don’t hesitate to contact us!

References:

Gould, J. D., & Lewis, C. (1985). Designing for usability: Key principles and what designers think. Communications of the ACM, 28(3), 300–311.

Walker, M., Takayama, L., & Landay, J.A. (2002). High-fidelity or low-fidelity, paper or computer? Choosing attributes when testing web prototypes, Proceedings of the Human Factors and Ergonomics Society 46th Annual Meeting, 661–665.

Newman, M. W., & Landay, J. A. (2000). Sitemaps, storyboards, and specifications: A sketch of web site design practice. Designing Interactive Systems, 263–274.