UX – Wireframes, Mockups and Prototypes

Unless you work in a pure creative environment such as a web agency you may have experienced this at some point in your career in User Experience.  One of the biggest misconceptions fellow professionals can have in the office in general is how they incorrectly reference the tasks a UX designer does.

Many times I’ve had people ask me to create a mockup.  My reply many times has been, “based on what exactly?”, only to understand via more probing questions that they require the creation of a wireframe.

So what is the difference between Wireframes, Mockups and Prototypes?

Wireframes

A wireframe is skeletal representation of an interface.  This interface could be a webpage, mobile app or software. They look different, they communicate something different and they serve different purposes than a design would. Sketches are normally in black, shades of grey and white. Wireframes generally go to some length to help the observer understand where elements live within a layout and how elements relate to each other. There are two main types of Wireframes; low-fidelity and high-fidelity.

Low-fidelity Wireframes in short contain less detail generally speaking and are quicker to create.

High-fidelity Wireframes in short have a much higher level of detail and more closely match a design in many cases it involves a level of basic interaction (such as next page linkage), capturing key moments of where the user’s experience is enhanced.

The Wireframe should clearly show:- the main groups of content (what?)- the structure of information (where?)- a description and basic visualisation of the user – interface interaction(how?)

How best to use it – Quick visual communication.

Mockups

A mockup is a middle to high fidelity, static, design representation. Very often a mockup is a visual design draft, or even the actual visual design in its early stages of iteration. Mock-ups generally contain images or pictures that closely resemble the future User Interface of what is being created and sometimes to a degree can be interacted with on a very basic level.

A well created mockup represents the structure of information, it visualises the content and demonstrates the basic functionalities in a static way.  It also encourages people to actually review the visual side of the project.

How best to use it – Gathering feedback and getting the needed buy-in from stakeholders, such as a usability test.

Prototypes

A Prototype is a representation of the final product, which simulates the user interface interaction. It generally is middle to high fidelity in interactive detail.  A prototype is interactive, however JavaScript (or similar) code used to make the prototype interactive if custom-built normally will not be included as part of the final code delivery.

The Prototype should allow the user to experience content and interactions with the interface and test the main interactions in a way similar to the final product. This can really open the conversation to unexpected discoveries, therefore helping innovation. The potential trade-off is that it may or may not create project scoping issues (scope creep). However this may not constitute as a trade-off if the client pays for any scope creep and the new innovation discovered proves to be a success. 

How best to use it – User testing and reusable elements of the interface.

Conclusion

If your goal is about “power to the users” (Tron style perhaps?), I can only urge you to think about the inclusion of one or more of the above UX disciplines in your project to make sure a better level of user experience is attained.

If you are new to User Experience, hopefully this has helped to offer a crash course on the definitions of Wireframes, Mockups and Prototypes, otherwise consider yourself empowered to help educate your project stakeholders or team.

Leave a Reply

Your email address will not be published. Required fields are marked *