3D-Sketches

Before talking about techniques to sketch in a three-dimensional manner, it is necessary to think about what is meant by this term. The MIT Online Class [Sketch Models,2012] defines a Sketch Model as simple physical model made of soft, low cost and easy-to work materials.

Again, if you keep in mind that we are still sketching, just use every imaginable material that is available to you:

• Cardboard
• Foam Core (so called centafoam)
• Modelling Clay
• Pins, Magnets
• …

Of course, even if we are sketching three-dimensional now, the good old paper, pencil and scissor would still be of great help!

The basic idea of sketching with foam core is to get your device, for which you are designing interfaces, tangible to users and colleagues.

• Use multiple layers of foam core to get your device tangible in a three-dimensional way.
• Imitate the screens of your device with simple paper sketches, changing them accordingly to the user's action:
  • Sketch individual screens, removing from or adding to your device.
  • Generate a strip of sketches, pushing or pulling it through the device.

• As your device is plastically, the user gets an impression of the device to be used later.
• The physical interaction brings a more realistic feeling and idea of the technology.

(1) Tutorial: Ebook Reader Menue with individual Screens

1. To sketch a three dimensional ebook reader, you begin with cutting out the shape of the reader of foam core and card board. You need:

• The back layer in the same size as your reader.
• The front layer with a opening for your display.
• The middle layer with a u-shaped display and a bigger opening so that your paper screens stay between the middle and the front layer.

2. After you have glued the layers and sketched the front of the reader, you have to go for the screens:

• Cut out several slices of a piece of paper with the same width as the u-shaped inner display of your middle layer and a little bit longer, so that you can still handle it.
• Put the pieces of paper in your reader and draw the outlines of your display with a pencil.
• Define the sketches of your screens with a black marker.

3. The last step is to combine the paper screens with the foam-device:

• Place the screens in the u-shaped display, ordering them according to your scenario.
• When a user is interacting with the screen and the screen has to change, pull out the actual paper, so that the screen underneath is revealed.
• For a more realistic device, take a printed image of the reader and glue it on top of the card board.

(2) Digital Watch with a Strip of Screens
Another possibility to handle the screens in a digital device of foam is shown in the following example. Here, the same techniques are applied as in the tutorial above, to construct the foam arm. But instead of slicing a u-shape in the middle layer, both ends are open. Instead of sketching several screens, just sketch one paper strip with the screens on it. To simulate the dynamics, pull the strip in one of both directions.

Excursus: Have you seen the difference between the two methods?
Of course, the obvious difference is the different way to change the screens. In the first technique, you have a separate sketch for every interface state. The second one just uses one single paper strip that is pulled through the hole of the display. While the latter appears smoother at first glance, it is stuck to a particular scenario. The technique of the single paper slices offers more flexibility in reacting to the user's actions.

• With this method you can give a sense of the sequence of your screens, but you do not capture the real dynamics.
• Exchanging or pulling/pushing the sketches of the screens interrupts the user experience.
• [Buxton,2007] solves this problem by shooting his interaction with the sketch and then cutting the resulting video in a way that the actions of pulling the strip are not seen any more.

When talking about sketch collages, we are talking about three dimensional sketches built from any kind of appropriate material.

• Think about which parts of your idea are necessary to be included in the sketch to demonstrate your concept.
• Choose any possible material that could fit the purpose to sketch your idea in a three dimensional manner.

• Using any material that is available to you enhances the possibilities of demonstrating your ideas with the sketch.
• Furthermore you generate a more realistic feeling of what you meant, by using similar materials or shapes like the later system.
• Like this it is possible to answer a lot more important questions, e.g. regarding the shape, of your later device.

(1) Tutorial: The Bifocal Display The idea of the bifocal display from [Spence et al.,2013] addresses the „windowing-problem“ that describes the problem of the loss of context when you are looking at too much data on a too small screen. For example, the information on your screen could consist of many different documents, images etc., like illustrated in the following picture:

To maintain the global awareness while the user is looking through a small window, they wrapped the screen around two bars. As the screen was bent with angles of more than 90 degrees, the user can still be aware of what is shown left and right of the actual screen:

1. To sketch the bifocal display with the collage-technique using everyday material is quite simple. You need:

• A rectangle from cardboard with a whole to imitate the screen of your computer.
• Two pencils or similar bars, that you can use to wrap your information screen around.
• The „information-screen“: You can use for example a column of the daily newspaper, or create your own screen with different documents, pictures, etc.

2. The next step is to combine your material in a way that you will get a rough three dimensional sketch:

• Make two holes for each pencil in the opposed sides of the cardboard to serve as a fastener for the pencil.
• Wrap your information paper around the pencils as shown in the picture. Optionally, you can slice two grooves in the back of your cardboard to better guide your piece of paper.
• If your pencil has a spring clip, you could use it to keep your paper in line.

3. Now you already have a working sketch to demonstrate the idea of the bifocal display. To finally complete your sketch there are only two more steps:

• Print the desktop or a folder of your operating system and glue it to the front of your cardboard.
• Make a photograph or even better a video to demonstrate how your concept is working. With the video, you can rotate the newspaper around the pencil, demonstrating the final idea of the bifocal display.

(2) Beatbearing - a tangible Sequencer

[Bennett et al.,2008] had the idea to develop a tangible sequencer. Their idea was to vary a beat through arranging balls on a grid. Starting with simple paper sketches, they very soon developed three-dimensional ideas of their musical instrument. With the help of cardboard and modeling clay they finally came up with the best solution.

The video to the final product can be seen here: Youtube Beatbearing.

• Since you are using every kind of material, it is a lot more difficult to figure out which materials fit the purpose of your sketch best.
• Due to the big choice of material and details that can be implemented, one could lose the focus on sketching.

As we have seen in the examples and tutorials, working on three-dimension sketches really enhances the possibility of demonstrating user experience.

• Three-dimensional sketches allow more interaction and role playing and therefore a greater exploration of the style of interaction.
• Tangible sketches offer a different kind of feedback that is not possible from a drawn sketch.

• Obviously, three-dimensional sketches bring a lot more work in comparison to simple paper sketches.
• The designer could lose himself in irrelevant details, and do prototyping rather than sketching.

To get a more realistic impression and to have a tangible ground for discussion, we developed a three dimensional prototype out of foam core of the library. This can be categorized as sketching with foam core as well as sketch collages, as we used small playmobil figures to imitate the visitors in the library.

• Peter Bennett and Sile O'Modhrain. The beatbearing: a tangible rhythm sequencer. In Proceedings of NordiCHI 2008: 5th Nordic Conference on Computer-Human Interaction, 2008.
• Bill Buxton. Sketching User Experiences getting the design right and the right design. 2007.
• Saul Greenberg, Sheelagh Carpendale, Nicolai Marquardt and Bill Buxton. Sketching User Experiences - The Workbook. Academic Press, 2012.
• Robert Spence and Mark Apperley. Bifocal Display, chapter 7. The Interaction Design Foundation, Aarhus, Denmark, 2013. (Online-Version)
• Slides from the Queen‘s University Belfast „Physical Sketching“ by Peter Bennett „Physical Sketching“ by Peter Bennett, 2008
• Slides for the MIT Webcourse „Product Engineering Processes“, Sketch Models, 2012

• Interacting with Paper
• Simple Animation