HS443 Paper Prototypes
TECH
Low-tech
CHALLENGE
Simple
TIME
1 session (half-day)
TEAM SIZE
1 or 2
About
Computers are machines, with a combination of software and hardware, that do useful things. Some software runs automatically with little or no involvement from the users, such as computer operating systems, or software to control a car’s engine. But every day we choose to use software applications, apps, and websites to do various tasks. Mostly, we control those applications by entering commands on a screen using a mouse, keyboard, trackpad, or touch. Some devices, such as smart speakers, use voice control to enter commands. The means of controlling a computer or machine is called a ‘user interface,’ because it is how users connect to the computer or machine. The job of designing interfaces is known as user interface design or UI design. Paper Prototypes are drawings of user interfaces done with pencil on paper. Paper prototypes are done to design, prototype, and test user interfaces for computer applications, smartphone and tablet apps, websites, or any machine with a screen interface.
FIGURE: A paper prototype for a school app design concept. Three smartphone user interface screens are visible: the student login page, the classes page, and the English class page. There will be more pages to show a complete school app. On the right side is a spare button, a pop-up keyboard, and part of a student feedback page. Buttons, menus, widgets, touch keyboard, and so forth are added or removed while demonstrating the app. Colour was used to improve the visibility of buttons and to highlight features of the school app.
What you need
- A4 or A3 printer paper, and pencil.
- Eraser and sharpener.
- Scissors and glue.
- Set of colour pencils or pens.
- A4 notepad and pen.
- Two or three designers to conduct a test with a user.
- Desktop or tablet computer with presentation software such as Microsoft PowerPoint, or Apple Keynote, to build a final prototype.
Method
Use paper prototypes to design, prototype, and test your screen-based user interface. Design the user interface by drawing it. Experiment by drawing different versions to improve the design. Try the interface yourself, as you go along. Show the paper prototype to users to test your user interface. Finally, you can use the paper prototype to build a final prototype of your user interface.To design
- Draw simple screen interfaces using pencil on paper.
- Draw the interfaces full size, if it is practical.
- Draw them freehand, as it is quicker and just as useful.
- Think about how the interface will be used as you are drawing it. Discuss it with your teammates.
- Improve the interface and make changes as you see fit.
- If your interface has more than one screen, draw them all.
- Some parts of the interface will change as it is being used, such as buttons, menus, widgets, touch keyboard, and so forth.
- You can draw those parts on separate sheets of paper. Then simply cut them out and attach them to the paper prototype when they are needed.
- Add colour to your interface using coloured pens or pencils, if it makes it easier to understand.
- Try out the paper prototype user interface and discuss it with your teammates.
- Improve the paper prototype based on their feedback until you are satisfied with it.
- Now you are ready to test your prototype with a user.
- Test your paper prototype user interface with a user.
- The user should be a person for whom you are designing, or they can be your teacher, your parent, or a classmate who is not in your team.
- Two or three designers (plus a user) are needed to conduct a test.
- The first designer instructs the user.
- The second designer controls the paper prototype.
- The third designer takes notes to record what happened in the test.
- The first designer introduces the application so that the user understands its purpose.
- They then give the user a task to perform, for example, “Buy a concert ticket using this smartphone app.”
- Let the user try the interface for themselves. Don’t explain how it is done.
- As the user attempts to do the task, the second designer controls the paper prototype by switching the paper screens, changing paper buttons, menus, and widgets, as the user interacts with it.
- The third designer takes notes, recording any errors, or problems that the user had, or questions that they asked, while testing the paper prototype.
- Once the user has tried the paper prototype, you should have a good idea of whether your user interface is a success or not, and where to improve it.
- Paper prototypes are made to design the user interface, and to test it, but the final prototype is made to demonstrate your completed design concept. You can turn a paper prototype into a final prototype by drawing it in presentation software such as Microsoft PowerPoint or Apple Keynote.
- You can draw as many screens as you like using this method.
- Presentation software lets you easily make interactive buttons, menus, widgets, and so forth.
- A final prototype of an interface done on presentation software can be made to look and work just like a real software application.
- There are also professional user interface prototyping software applications available, some of which may be used for free.
Tip
- Paper prototyping is a big subject, but fortunately you can find many tips on making paper prototypes on the internet.
More handouts for students of Level IV…
Read the next handout for Level IV students (15 to 17 years old).
About design topics…
Or, return to the section to browse the design topics.