Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Prototyping in UX

DZone's Guide to

Prototyping in UX

Read to learn about a few different types of UX prototyping which can help you to increase the usability of your next web application.

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

“I am sure you will be surprised to know that this is not the actual product that you are looking at. This is a high fidelity interactive prototype where you can move through the pages, experience the flow, interactions and even animations of some elements. In short, you can see almost the real system behavior,” explained my client proudly to her counterpart, with the Interactive prototype that I created for a project.

Prototypes are very much essential for UX designers to showcase solutions for a small interaction or for the complete application to the client and the stakeholders. It is a mockup that helps to test and evaluate concepts and functionality before taking it to development. Prototypes come in handy when you are trying to collaborate with your team in creating solutions. It is always better to show something rather than trying to explain things to your audience. With this, the communication gap between the designer, developer, and the business team is lessened and everyone stays on the same page. It is easy and cheap to make iterations in prototypes, which cannot be said for the final, developed version. The quote by the global design company IDEO describes prototype in a perfect way: “If a picture is worth 1,000 words, a prototype is worth 1,000 meetings.”

Prototypes can be of Low, Medium, and High Fidelity, where each has its own pros and cons. They are intended to be used in specific stages of the UX design process based on the needs and the requirements of the development team.

Low Fidelity Prototype

Low-fi prototypes are often paper-based, including sketches of ideas, concepts, or solutions either hand drawn or printed. This is easy to create and consumes less time to iterate as well when compared to the other types. To test with low-fi prototype, one can sketch simple screens for the required scenario and mimic user interactions. The problem with this type is that the viewer might start providing feedback on the prototype’s looks rather than the concepts themselves. These are better when used at the early stage of a project.

Medium Fidelity Prototype

Mid-fi prototypes can be achieved by creating and linking digitally structured screens, formatted and refined from the sketches without many graphics or design aesthetics. We can use placeholders or stock images wherever it is necessary. This can be done with PowerPoint, Visio, Balsamiq, or similar tools when the style guide or graphical assets are not completely ready. This is best to use when we want to test if the user needs are met. We still can make proper layouts and make use of reusable stencils and widgets to minimize the time in creating the prototype. With this, the audience is made to view it as a draft in terms of concept and functionality rather than focusing on the visual look and feel.

High Fidelity Prototype

Hi-fi prototypes are the ones which resemble the final product. They are valuable as they allow us to create rich and live user experience with high functional and visual fidelity. There are many tools like Axure, Invision, JustinMind, etc., to create high fidelity prototypes. It depends on the designer to choose the tool with which they are most comfortable. The current prototyping tools often have ready to use templates, as well as features like generating specification documents, version control, and collaborations. They also support the creation of designs for touch-based devices. This type of prototype is a great reference for the developers. We can use this to test the navigation, interactions, information hierarchy, and, to an extent, the visual design. The drawback is the time and resources which go into producing this version.

Conclusion

Prototypes are highly essential when it comes to UX design. It is good to collect feedback by testing the prototypes instead of the live system to avoid unhappy users. The need is always to create the best possible user-centered design. 

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:
web dev ,ui/ux ,development process

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}