Upcoming Courses

go to course
Emotional Design: How to make products people will love
Starts the day after tomorrow !
go to course
UI Design Patterns for Successful Software
85% booked. Starts in 10 days
 
 

Featured chapter

Marc Hassenzahl explains the fascinating concept of User Experience and Experience Design. Commentaries by Don Norman, Eric Reiss, Mark Blythe, and Whitney Hess

User Experience and Experience Design !

 
 

Our Latest Books

 
 
The Social Design of Technical Systems: Building technologies for communities. 2nd Edition
by Brian Whitworth and Adnan Ahmad
start reading
 
 
 
 
Gamification at Work: Designing Engaging Business Software
by Janaki Mythily Kumar and Mario Herger
start reading
 
 
 
 
The Social Design of Technical Systems: Building technologies for communities
by Brian Whitworth and Adnan Ahmad
start reading
 
 
 
 
The Encyclopedia of Human-Computer Interaction, 2nd Ed.
by Mads Soegaard and Rikke Friis Dam
start reading
 
 

Mock-ups

Mock-ups are used by designers mainly to acquire feedback from users about designs and design ideas early in the design process. Mock-ups are 'very early prototypes' made of cardboard or otherwise low-fidelity materials. The user, aided by the designer, may test the mock-up (imagining that it works) and thus provide valuable feedback about functionality/usability/understanding of the basic design idea/etc.

The advantages of mock-ups (and prototypes) are numerous. For example:

Mock-ups address the idea captured in a popular engineering one-liner:

You can fix it now on the drafting board with an eraser or you can fix it later on the construction site with a sledge hammer.

Examples of mockups

Figure 1 shows a mock-up of a calendar application for school kids made of cardboard and plastic. The mock-up was used to test early design ideas with school children and thus obtain early feedback in the development process. Alternative spellings: Mockup/mockups.

Figure 1: Cardboard Mockup of a calendar application for school kids

After a couple of tests with the mock-up, it was made into a prototype programmed in Macromedia Flash (figure 2). The prototype was more 'polished' and allowed for more interactivity. Using prototype, various scenarios of use (use cases) were tested with the users, after which the Flash prototype was built into a real application (programmed in Java).

Figure 2: The same calendar application,
this time as a prototype made in Macromedia Flash.

Most projects may benefit from using mock-ups early in the design process. Figure 3 shows a mock-up of a webpage being tested by a user.

 

Figure 3: A mock-up of a website
(source and copyright of picture is unknown)

Please note: The terms "mock-ups", "low-fidelity prototypes", or "paper prototypes" are usually used as synonyms.

 
 

Join our community and advance:

Your
Skills

Your
Network

Your
Career

 
Join our community!
 
 

User-contributed notes

Give us your opinion! Do you have any comments/additions
that you would like other visitors to see?

 
comment You (your email) say: Oct 23rd, 2014
#1
Oct 23
Add a thoughtful commentary or note to this page ! 
 

will be spam-protected
How many?
= e.g. "6"
User ExperienceBy submitting you agree to the Site Terms