Mock-up
Design realistic images of the user interface in detail
The mock-up is a refinement of the conceptual user interface design and results in a more or less realistic, though static simulation of the user interface. The zones that were defined in the conceptual design are now filled with concrete, realistic data and controls. Each screen is designed with a representative data population in order to make clear e.g. how many objects will appear in a list and how the user can interact with these objects.
In the broader design context a mock-up is a scale model of a product, used for demonstrating and testing a design. For interaction design, the objectives are the same, but the mock-up is not ‘scaled’ since it needs to look as realistically as possible. It is important here to distinguish a mock-up from a prototype. A prototype is meant to function, be it partially. Mock-ups on the other hand do not function. They consist of static screen drawings, which only ‘look like’ the real user interface.
The detailed design in a mock-up holds a representative set of screens – if not all screens – in order to illustrate a typical sequence of screens in a visual way. Scenarios of use now are combined with the conceptual design and worked out visually into real-life stories of use. By detailing and making alive the user interface in drawings, the conceptual design and its usability are evaluated and fine-tuned without having to modify programming code yet.
Depending on the designer's preferences and mission the deliverable corresponding to the mock-up phase is a set of paper drawings, a set of digital images or a combination of both. The mock-up deliverable is often created in such a way that it can be used in usability tests or to illustrate a detailed specification. Therefore the images are designed at an agreed-upon level of detail and with a thought-out data population.
Mock-ups are still useful to explore different design solutions, but the exploration should remain at a detailed level. The fundamental design decisions are to be taken in the conceptual design phase, so it is important to take enough time for that phase. Modifying a detailed design fundamentally might take a lot of time.
The mock-up is to be considered as a realistic illustration of the interaction and presentation principles, but it is not graphic design yet. Graphic or visual design requires specific points of attention and skills, which are not covered in a mock-up. In addition to that, a graphically finished mock-up used to explore design ideas (which have not always been validated technically) might create too high and wrong expectations.
The main factors influencing the effort required to create a mock-up are
- the number of iterations (or mock-up versions) needed to validate the design
- the number of screens to be designed in detail
- the desired level of graphic finishing
In order to reduce the number of iterations, it is important to take enough time for and explore as many alternatives as possible during the conceptual design. The number of screens can be limited by drawing a mock-up for only the most important screens in which the main principles are illustrated.
Related
While the conceptual design focuses on the navigation and interaction at application or screen level, the detailed design specifies interaction at object and control level within each screen. Conceptual and mock-up design however remain closely intertwined since the latter is based on the principles developed in the conceptual design.
The mock-up forms the base for summative usability testing and is used to illustrate the detailed specification.