What are the differences between Wireframe, Prototype and Mockup?

Question

In the contexts of Interaction Design, Usability and User Experience, there are differences between the artifacts called Wireframe, Prototype and Mockup? If yes, what are?

Answer 1

Although these artifacts are sometimes used as synonyms, there are important differences between them.

Wireframes

According to the Cambridge Dictionary (in free translation), the English word "wireframe" means:

(computing) a digital 3D model of something where only lines are displayed and the places where they unite

(internet & telecom) a basic plan for a website that displays only the types of information it will contain and how that information is organized, but that does not include design features such as color or specific details

As can be seen from the second definition above, wireframes are used to describe the artifacts created to discuss, communicate and mainly document the general structure of a website. This type of Omega is quite common in content agencies, but such artifacts are also generally used in the design of interactive products when it is intended to plan how information will be exchanged between the user and the system during human interaction-computer. The way in which actions (commands, data inputs, etc.) and feedbacks (text presentation, sound emission, haptic feedback, etc.) connect in the loop of interactions can be represented by means of links between the various interfaces (screens, in the case of websites), resembling the lines of the 3D model of the first meaning expressed above and therefore receiving this name.

Because they do not involve the concern with aesthetic criteria (color, font size, etc.), wireframes are commonly constructed simply as illustrated in the following image. These artifacts play an important role in the planning of usability criteria - involving ease of learning, feedback, security (in the sense of avoiding errors), efficiency, etc - and user experience - involving choice, sense of control, balancing difficulties and skills, etc -, also serving as a form of documentation of interface design.

Mock-ups (or mockups, in American English)

Also the from the Cambridge dictionary (in free translation) it is noted that the English word "mock-up" means:

a life-size model of something large that has not yet been built, which displays how it will look or operate

The translation of the word into Portuguese (considerably easier than the previous one, since it is not such a recent technical term) is "model", and this is exactly what it is: a more detailed model of the final product, where aesthetic issues are important and basic functionalities are demonstrated in a static way.

This type of artifact has little relation with the planning and evaluation of usability criteria, because they are static representations do not allow the observation of the interaction occurring. But, due to the exploration of aesthetic characteristics, it allows to evaluate some of the subjective issues of user experience, such as preference, appeal, and expectations created by perceived possibilities of action of the product’s own appearance.

An example of a mock-up of a website is the following image. Because it is an image, it naturally no longer allows interaction. But even if it was built in HTML5+CSS, if it doesn’t provide feedback for user actions it’s a mock-up and not a prototype.

Prototypes

Prototypes are initial and functional of a product. They do not have all the features planned, otherwise they would be the final product itself, but they allow the user to interact as if he did with the actual final product. That way, they’re not static models as mock-ups, and yes simulators with the intention of planning and, chiefly, evaluate usability and user experience criteria.

The observation of potential users using prototypes that simulate important parts of an interactive system allows to evaluate low comprehension points (where the user did not understand what to do or does not know how to proceed)find and correct interactions that facilitate the occurrence of errors, improve visual, haptic and auditory feedback of interface elements, and especially evaluate the emotional responses of product use in individual and social contexts. In interactive entertainment systems, this latter type of evaluation is even more important, since the product does not have functional requirements in the same mold as computational systems of commercial or scientific purpose.

An example prototype could be the previous image itself (presented in the mock-ups description), but actually built in HTML5 + CSS and that allowed the user to interact by selecting dates, changing tabs and saving records, so that the user could perceive the system’s responses (although simulated).

On the question of fidelity

Some argue that fidelity (i.e., the quality with which each of these artifacts is/should be made) is increasing from wireframes to prototypes and ultimately mock-ups, in the sense that wireframes have low fidelity (being made with pen and paper), prototypes have medium and high fidelity and mock-ups have high fidelity. But this argument is debatable, because fidelity is only related to the time available to produce such artifacts and mainly the purpose in doing so.

Prototypes can be built in low fidelity with pen and paper to evaluate the possibilities of interaction from the beginning of the project and even discover the most interesting options from the point of view of experience (as commonly done in the case of entertainment systems such as video games). The fact of having an artifact made on paper and pen does not prevent the creation of prototypes that simulate functionality through manual methods such as the Wizard of Oz or other creative solutions (like the one illustrated in the animated GIF below!), and it is also possible to build very faithful wireframes (even fairly close to a mock-up) using tools like Microsoft Powerpoint or other more specialized.

---

Image sources:

• 25 Examples of Wireframes and Mockups Sketches
• Ultimate Guide to Wireframing Website
• Just Because It’s Low-Tech Doesn’t Mean It’s Not Cool

To learn more:

• Wireframing is NOT prototyping
• Wireframing, prototyping, mockuping - what’s the Difference?