Unless you work in a purely 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 and challenges 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?”, or “what do you mean when you say mockup?”, only to understand via more probing questions that they require the creation of a wireframe or something else.
So what is the difference between Wireframes, Mockups and Prototypes?
Wireframes
A wireframe is a 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 UI 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. However, a high-fidelity wireframe may still contain mostly shades of grey – this is dependant upon the UX professional.
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 create great conversation leading to unexpected discoveries, in turn helping to further innovate the end product. The potential trade-off is that it may create project scoping issues (scope creep). On the other hand, it may not. Whatever the case, 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 and feasibility testing.
Think about the inclusion of…UX disciplines in your project to make sure a better level of user experience is attained
Conclusion
Hopefully, the above information helps you to see that there are big differences between Wireframes Mockups and Prototypes. If your goal is about “power to the users” (ala Tron), 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.