3.7 Sketching with Office Supplies
using commonly available office supplies to create editable sketches
While paper and pencil is the best way to create rapid sketches, you can also use other common office supplies to create designs that are easily altered on the fly. The basic idea, advocated in Rettig’s 1994 article Prototyping for Tiny Fingers, is this. You use sticky notes of various types and sizes as graphical user interface elements, where you assemble these elements onto a poster board to create your layout. You write atop these sticky notes to bring your interface to life. If you change your mind about something, you just peel off that sticky note and replace it with a new one, or move it to a new position to experiment with different layouts. It gives you some of the flexibility of digital tools, while still letting you work with traditional media.
The side bar shows a sampling of office supplies that you will find handy. The most useful are: the sticky notes of various sizes; a sticky-note glue stick that will let you transform any piece of plain, colored or transparent paper into a sticky note; scissors to cut paper and notes into different sizes; and a reasonably stiff and sufficiently large poster board where you can assemble your interface. Of course, there are many other office supplies that you can exploit that aren’t included on this list. Visit an office supply store to look for opportunities. Both Marc Rettig and Michael Muller, in their articles listed at the end of this chapter, suggest other places where you can find supplies, or other supplies you can exploit for sketching.
The Versatile Sticky Note
Sticky notes come in various sizes. You can also, of course, cut them down to any size. This means you can rapidly use sticky notes as buttons, dialog boxes, menus, icons, tooltips, as individual input fields in a form, as containers of labels and other fixed text, and so on. Samplings of stickies used in this way, along with other office supplies, are shown in the figure to the right.
Try It Yourself
As an exercise, reconstruct one or more pencil sketches that appeared in previous chapters using these (and other) office supplies (try the one shown here of the online shopping system, without looking at my own solution).
You will quickly discover that you will be making decisions on how much should be put on a single sticky. To help you make these decisions, ask yourself what would serve as the best ‘unit’ to use as a building block? This will depend on how likely it is that you will be changing the contents or location of a particular graphical element, and how that element matches standard graphical elements of an interface.
If you know you are going to repeatedly use many graphical elements of a particular type, you can premake sticky notes as that type. For example, let’s say you are going to be creating many menus. Instead of doing them one-by-one, you can creat a sheet of menus (like the one on the top right) and make copies of that sheet. You can then cut out these menus, glue them on their backs with sticky note glue, and make your own ‘menu pad’ (as shown on the bottom right). You can, of course, do the same thing with other graphical items, such as pad of buttons, dialog boxes, and so on. These pads can help speed up your construction of sketches.
The figure below is my reconstruction of the pencil sketch of the online shopping system using office supplies. My decisions regarding sticky note ‘units’ relate to what I thought I may change as I explore this sketch: the text of the labels, the images used, the contents of the instructions, the item(s) used as examples, the kinds of buttons I wanted, and so on. If you look closely, you will also notice two more ‘unusual’ things in this sketch. First, one of the sticky notes is of a person’s finger, where that finger has selected the first item in the shopping list. Second, the highlight around that first item (invoked when a person selects it) is ‘implemented’ as a strip of acetate transparency, where an outline was drawn on its edges. I dabbed some sticky note glue onto this transparency, which means I can replace the finger repeatedly atop of the sketch (this is important when the sketch is placed on a wall, so no bits fall off).
Admittedly, this sketch took me longer to do than the pencil sketch. Yet the advantage is that I can now alter this sketch, For example, I can replace certain sticky notes without having to completely redraw the sketch.
Interacting with Office Supplies Over Time
The real power of this method, however, comes from animating the interaction over time, where people can ‘play out’ an interaction sequence to explore design possibilities. For our example, we could animate what happens when the ‘Delete’ button is pressed. We would perhaps remove the sticky containing the JPG Stroller item, create a new sticky showing a different tax and total figure, and have the ‘clerk’ icon provide feedback of that action by changing the text in the speech bubble to say what was deleted. This can continue through many interactions.
The problem is that the designer would just be left with memories and a mess of paper. To solve this, the process could be captured as a storyboard via a camera (Chapter 4.4), or as a video animation (Chapter 5.5). These can be used to review the various interaction scenarios.
Try it yourself by designing the next steps in the example interface that would occur if a user pressed the ‘Order’ button.
Using Office Supplies with Others
The familiar paper medium also means that others on your team can easily collaborate over this sketch. As Michael Muller describes in his 1991 article on Pictive, all members of a design team can be involved as, unlike digital drawing systems, no special training on the technology is required. All can compose, explore and change this sticky-note interface. Work can be done in parallel. If multiple people work on the same part, then they can compare their designs, perhaps even merging the best parts of each design into a new design simply by moving their sticky notes around. Each person can even work on one or more parts of the interface on his or her own as a ‘homework assignment’ and bring in the solution for others to see.
Reconsider our example above in a group design session. Perhaps one person could be sketching out the sticky notes involved in the ‘What to do’ section, while another could be creating the example in the ‘What you selected’ section. Or different people may work separately on the same interface component, where they place their own version into the sketch to show others. In critiquing this interface, all can rapidly create alternate design solutions as revealed by discussions, and place them on the interface to show how they work. This flexibility is why Muller calls these kinds of sketches ‘plastic’.
You Now Know
Office supplies – especially sticky notes – are very useful for crafting editable paper interfaces. By composing key interface elements onto single sticky notes, you can edit the interface by substituting another sticky, by moving it, or by altering its contents. It provides you and your collaborators with the flexibility of digital tools, while letting you all work with traditional media.