3.10 Hybrid Sketches
combining sketches with photos
Some designers often add details to their sketches in a way that adds ‘life’ to the sketched idea. These details may emphasize the context of use by showing the surrounding environment, or exaggerate interaction sequences that may be easy to miss. The problem is that this usually demands a high degree of artistic skill. Hybrid sketches are a way to let you, the non-artist, add considerable detail to your sketches simply by combining your sketched elements with photos. The idea is that the photos preserve information about the context of where a particular interaction takes place, while the sketched elements and annotations add information about how your actual system design fits within that context. The sketched elements could also highlight how you would alter or add to existing designs.
Case Study 1: A Transit Information Application
We illustrate the hybrid sketch method by example, where we want to create a sketch of a person using a transit information application on a tablet computer. The challenge is to show the person using that application in a particular context: the train station.
1. Take a photo, or series of photos, of a place where the interaction takes place.
As a starting point for our sketch, we use a photo taken on the platform of a public transit train system. The position and orientation of the photo are taken from the point of view of where the user would actually be using the table application.
2. Create or reuse a photo trace sketch of the person and/or system.
We now add our sketched element atop this photo. In this case, we reuse the photo trace sketch we created in the previous chapter: a person’s hand holding a tablet computer. Using a suitable editor (Photoshop, PowerPoint, etc.), we overlay this sketch atop the existing photo.
3. Create an opaque background for our outline sketch.
Depending on how we made the photo trace, the sketch may only show the lines. This means that the photo is visible under the sketch. To have our photo trace sketch stand out from the photo, we fill its background, usually with a solid white fill. This will also let us sketch onto the ‘empty space’ of the tablet. Filling the background could be done in the software used to generate the photo trace. For example, if the path of the photo trace outline is a closed shape, we could apply a FILL command to this path. If the photo trace is composed only of lines rather than shapes, we can trace a separate polygon around the outline of the shape, set its fill color to white and its outline to none. We then reorder the polygon so it appears behind the sketch (i.e., where the sketched lines are atop the white).
We now sketch details about our visual interface of our transit application atop the tablet display.
Case Study 2: Emphasizing a Person’s Interaction with a Device
The next example uses identical methods for a different situation. Here we want to highlight not only the way a person is using his mobile phone to interact with a large display (the context) but the actual interaction he is using (where he is pointing at it). See Greenberg et. al. for an article that uses these hybrid sketches.
1. As before, we take a photo of the scene. In this case, the photo also includes the person and the device, i.e., the person holding the phone and pointing at the screen. The problem is that it is hard to see at a glance what is going on.
2. We create a photo trace atop this photo that outlines the person holding the phone.
3. We fill the outline of the person with a white background.
4. We now outline and fill the phone the person is holding in a different color to make it stand out visually.
5. We annotate the image, with a bright red pointing ray that emphasizes that the phone is pointing toward the screen.
Compare this final sketch with our original photo. By making the person, the phone and the annotation appear as a sketch atop the photo, the viewer can easily grasp the context of the scene, and the interaction technique the sketch is supposed to illustrate and how the person is using the phone within the environment.
Case Study 3: Augmented-Reality Thermostat Visualization
Hybrid sketches can also help you explore and sketch out different design ideas within a given context.
In this example, we took a photo of a home thermostat control. The sketches illustrate three alternative visualizations that a micro-projector of a mobile phone could display when pointing the phone next to the thermostat. The visualizations projected to the right of the thermostat provide the viewer with information about the usage of the heating in the home (over the last day, week, or month).
Take a photo of a control panel of any kitchen or household appliance (e.g., microwave, oven). Your challenge is to imagine that this appliance has a touch panel instead of these controls, and that you have to design an interface for that touch panel.
Create a hybrid trace of a touch screen atop the stove. Then sketch at least three different ways that illustrate how you could reproduce the functionality offered by the physical controls. Use a black marker or felt tip pen to increase visibility of the sketched portion of the hybrid sketch.
As a further exercise, stick to the physical controls, where you sketch variations of the layout and design of these physical controls over the existing photo.
You Now Know
Hybrid sketches have several purposes. They let you add information about the location’s context to the sketch. By overlaying photos with sketches, you can emphasize and annotate people’s interaction that could otherwise be missed. They can also show how you can vary existing designs by emphasizing what your redesign would add to it.