Please enable JavaScript.

Coggle requires JavaScript to display documents.

(1.2 Why Should I Sketch? a synopsis of Buxton’s Sketching User…

- - - - ii) The problem is that the above design can only be as good as that particular idea. If the idea is not a good one, then the ‘best’ design solution will only be so-so.
        
        Consider the figure on the right, which envisages how other design ideas may have fared in the design space.
      - iii) No matter how hard you work on that first idea, you won’t get to other potentially better ideas.
        
        The point is that if you consider many ideas rather than a single one, you may find a better overall solution.
        
        Computer Scientists even have a name for this problem: local hill climbing, where the local maxima is potentially much less than the optimal (the global) maxima.
      - iv) To illustrate, consider cell phone design. For years, cell phones were based on the design idea of a physical keyboard and screen. They evolved considerably. Yet it was a different idea – the cell phone with a touch display and no physical
        keyboard – that radically moved cell phone design into a new direction and created a new market
  - - - i) the creativity that you bring to enumerating meaningfully distinct options from which to choose
      - ii) the creativity that you bring to defining
        the criteria, or heuristics, that you apply to
        help make your choices
- - - - Film makers use specific terminology to describe the composition of a certain scene within a storyboard. We use some of their terms to describe the scenes in our sketched storyboards, and you
        can use those terms to think about how you want to compose and vary your own narrative images.
        A partial list of popular 'camera shots' is provided below; a more complete description of these and
        other terms is found in Katz 1991 and Block 2007.
        
        1- Extreme long shot (wide shot): A view showing details of the setting, location, etc.
        2- Long shot: Showing the full height of a person.
        3- Medium shot: Shows a person’s head and shoulders.
        4- Over-the-shoulder shot: Looking over the shoulder of a person.
        5-Point of view shot (POV): Seeing everything a person sees.
        6- Close-up: such as showing details of a user interface on a device the person is holding
    - - With our first 'sketching storyboard' method, you create a storyboard via hand-drawn sketches.
        As an example, we illustrate the interaction of a person using a mobile phone to capture
        information displayed on a physical announcement board via a bar code located near that
        information.
        
        1- Outline storyboard frames
        
        Take a blank piece of paper and draw a grid of 5 rectangular boxes. These frames are the basic template for our storyboard. Depending on the type of storyboard you want to create and the complexity of the interaction, you might need more than five boxes to draw all your scenes.
        
        Using only five sketches for the storyboard, however, has the benefit of limiting the interaction shown in the storyboard to one particular scenario. If necessary, you can draw additional storyboards later; either as variations of the first one, or as storyboards illustrating a different kind of interaction with the system.
        
        2- Develop the storyline
        
        a) Before you start sketching scenes, you need to plan a storyline for the storyboard you want
        to create. Some aspects to consider when describing a storyline are:
        • Where does the interaction takes place?
        • What is the problem?
        • What is the task that people are trying to do?
        • Which people are present and what are their actions?
        • What kind of objects or digital devices do they use?
        • What is the possible input and output for each digital system?
        • How do the actions of people and/or devices solve the problem?
        
        b) You will develop this storyline across your five frames. The first beginning frame introduces
        your story, and is also called the ‘establishing shot’. The following frames develop the story,
        eventually leading toward a climax, i.e., the solution to the problem. The last end frame
        concludes the story, and often indicates a scene that emphasizes that the interaction
        illustrated in the storyboard is completed (e.g., a person walking away).
        
        c) Here is one possible storyline for your example scenario:
        (a) a person is passing by an announcement board in a public setting,
        (b) the person then notices one particular announcement and is interested in more information,
        (c) the person uses a mobile phone to capture the bar code displayed next to the announcement,
        (d) detailed information appears on the mobile phone display, and
        (e) the person walks away from the board.
        
        Write the storyline text underneath each of the five frames of our storyboard.
        
        The next step is to draw each of these scenes from the storyline in our storyboard. Give it a try before you see our solution below (which is one of many possible solutions).
        
        3- Sketch establishing shot (introduction)
        
        a) As mentioned above, our first sketch of our storyboard – the establishing shot – will be used to ‘set the scene’ of our storyboard. In particular, it gives an overview of the location where the interaction takes place and shows the people involved. For this kind of sketch you can use an ‘extreme long shot’ (as described earlier) to show details of the environment.
        
        In our solution, we sketched a hallway containing a door and an announcement board, and a person as a simple stick figure (similar to those of Chapter 3.3). Similar to many of our sketches before, a key aspect is simplicity. Do quick sketches instead of spending too much time with unnecessary details. Keep the elements you are sketching (people or features of the environment) to the bare minimum.
        
        b) If you want to try different scenarios, do that as separate storyboards. For example, using different sheets containing five blank panels, you can create similar establishing long shots of other environments and situations: a person walking through an airport with many surrounding people and an electronic display, or a couple arriving at an enclosed bus stop with posters hung on it
        
        4- Continue the storyline sketches with appropriate camera shots
        
        a)Now continue with the remaining sketches of the storyboard. Apply the simple sketching techniques we introduced in earlier chapters. Use stick figures to illustrate people’s postures and orientation (Chapter 3.3), or draw simple silhouettes of people and objects with the photo tracing technique (Chapter 3.9). Our five sketches are shown below.
        
        b) In each of the above sketched scenes you can apply the cinematographic techniques of varying camera shots. For the beginning and end we used the extreme wide shot to illustrate context. The over-the-shoulder view in the second frame shows details of the person and the board, as this emphasizes what the person is looking at. We then used the first person point of view shot in frame 3 to emphasize the action a person is doing (i.e., taking a photo of the bar code). Finally, the close-up in frame 4 allows us to show details of the information displayed on the screen.
        
        5- Emphasize actions and motions
        
        If needed, you can now add visual annotations to the sketches. Annotations (drawn in yellow
        below) are a valuable way of indicating and emphasizing important motions or actions that
        are otherwise difficult to show in a static image.
        
        For example, we used various arrows to indicate a person’s motion.
        
        In our establishing scene, we drew a large arrow on the floor indicating that the person is walking by the announcement board.
        
        In the 2nd frame, the circling arrow emphasizes the head-turning motion of the person just noticing something of interest on the board.
        
        The last frame also uses a large arrow, this time showing the person walking away
        
        We also used a variety of other annotations to emphasize people’s actions or thoughts, or changes happening in a device’s user interface:
        
        These lines in the 3rd frame emphasize the photo taking action and what is being captured.
        
        The question mark above a person’s head reveals emotion, such as an expression of surprise and interest.
        
        The lines around the screen of the person’s mobile phone emphasize that new content just appeared on the screen
        
        6- Demonstrate to others and iterate
        
        Your first narrative storyboard is now complete. Try other variations of this scenario by building alternate scenarios, such as the airport and bus stop situation described earlier. Also try developing a separate interface storyboard showing what the person does on screen; use this to explain the details the person must do in frame 3 above. Finally, use the techniques shown in Chapters 6.4 and 6.5 to demonstrate this storyboard to others. Get feedback: colleagues, friends, or clients. At this point, use that feedback to see if your storyboard is effective: do they understand your story, i.e., how you envisage the context of use of the system by the actors portrayed within it?
    - - Narrative storyboards illustrate the context of an interaction sequence: the physical environment,
        the actions of people, and events that unfold over time. They show what is happening in the
        world, and thus complement the interface storyboard that emphasizes what is happening on
        the screen. You can create narratives via sketches, and via photos. You can also use techniques
        developed within fi lm storyboarding to show the unfolding story: starting and ending with an
        overview scene, varying camera shots to capture necessary detail of particular activities, using
        arrows to indicate motion, adding annotation to emphasize what is going on, and including short
        explanatory phrases under each frame. Collectively, these support the story-telling character of
        these narrative sketches.
    - - Photo-based storyboards are an alternative method for portraying narratives. Instead of
        sketches, you will now take and use photos as your source material. To illustrate, you will create
        a storyboard for the same situation: a person using a mobile phone to gather digital information
        from a poster via a bar code. As before, you need to have your storyline developed; for our
        example, we will use the same storyline developed in Step 1 above.
        
        1- Take photo snapshots
        
        Take a series of photos of a person in front of a public announcement board. Vary the camera shots: long shots for overview, over-the-shoulder and point-of-view for people’s actions, close-ups for details of an interface or a particular action, etc.
        
        Select five photos as your sources for your storyboard. Again, begin with a long shot introducing the setting, followed by three photos illustrating the interaction, and a single photo for the ending of the storyboard.
        
        2- Manipulate your photos
        
        Using your favorite image manipulation tool, decrease the contrast and increase the brightness of the photos, and then convert them to gray scale photos.
        
        This makes it easier for you to add annotations and sketch over the photos.
        
        3- Print your photos
        
        We recommend a minimum size of around 10x10cm (4”x4”)
        
        4- Add annotations
        
        Similar to our earlier sketched storyboard, we also add annotations to our photo storyboard. Again we use these to indicate a person’s movement (arrows for walking direction, or head turning). Use a thick marker and different colors to make these annotations stand out from the photo underneath. Alternately, use office supplies (Chapter 3.7) to add editable and movable annotations atop your storyboard. For example, if you place a transparency over the photo, you can draw your arrow atop of that. You can move that transparency to move the arrow, or replace it with a new transparency if you change your mind.
        
        Annotations can also extend over the boundaries of the photo, such as the motion arrow in this sketch. In this case, the arrow’s extension out of the frame emphasizes that the person is walking away.
        
        Add any additional elements (e.g., other objects or devices) as sketches over the photos. In this photo the bar code of the poster is added as a sketch over the original photo.
        
        5- Use office supplies to create overlays
        
        Drawing annotations on top of dark areas of the photo makes them diffi cult to read (e.g., the
        dark black area of the mobile phone’s screen). To overcome this problem, create small paper
        cut outs out of sticky notes in the size of the area (e.g., the screen). Or use paper and just glue
        it onto the photo printouts.
        
        Sketch atop these paper cut outs. For
        example, in frame 4 you can sketch the
        user interface elements of the screen .
        
        6- Add storyline text and comments
        
        Write the storyline text below the printout of the photos. This makes it easier 6 for others to follow the story you are telling when they read your storyboard Your photo-based narrative storyboard is now complete
- - - - Lines, rectangles, triangles, and circles will be essential visual elements of many of your sketches. Sketching and drawing tutorials often begin with ‘warming up’ exercises of filling a page with a random collection of these basic shapes. Become familiar with this variety of shapes. Play with line thickness and hatching styles.
    - - Comic Storytelling
        
        Comic artists use these and many other techniques for their expressive sketches to tell stories. Scott McCloud’s books Understanding Comics (1993) and Making Comics (2006) can give you more insight about story telling in comics.
        
        As well, look for the many books
        – especially those oriented to kids – that teach specific methods on how to actually draw comics
      - People Who Sketch on Computers
        
        i) Libraries of Sketch Elements:
        
        Designers sometimes use tablets instead of paper to compose sketches. If this is something you want to do, take ] advantage of software that lets you save and reuse your sketch elements as a library. For example, and similar to clipart, you can create a variety of elements and save them on a slide in PowerPoint. You can then copy, reuse and maybe even alter them later for use in particular sketches.
        
        ii) Objects:
        
        Most drawing software includes a range of drawing primitives: rectangles, circles, arrows, callouts, etc. When choosing software to support your sketching, consider if the range of drawing primitives available suffices to help you in your sketching process.
        
        iii) Clipart:
        
        If you use computers for your sketches, you can also take advantage of the many clipart or equivalent libraries of images out there. For example, if you search for ‘stick men’ on the web, you will likely find many images that fit your purposes.
      - Learning How to
        Sketch
        
        This chapter introduces but does not teach you all the different techniques of how to draw. Many books and tutorials are available if you want to improve your drawing skills:
        
        For example, Betty Edward’s Drawing on the Right Side of the Brain or Kurt Hanks and Larry Belliston’s Rapid Viz books
        are excellent primers of drawing and sketching techniques.
    - - By combining these basic sketch elements you can compose a variety of shapes and
        objects that will form part of your sketching vocabulary.
        
        Below is a collection of such
        composed objects – some drawn as simple two dimensional outlines, others in a perspective side view.
        
        Remember that simplicity is key: in many sketches it is better to draw objects as simple shapes rather than as detailed and fine grained objects.
        
        Note that many of the examples below are in fact very simple combinations of a few rectangles, circles, and lines, but that the level of detail is sufficient to clearly identify the object’s function (e.g., the mobile phone, or the photo)
        
        1- Tools (pencil, pen, magnifying glass, wrench, scissors)
        
        2- Digital Devices (camera, phone, cell phone, computer, mouse)
        
        3- Documents (paper, books, photos, piles)
        
        Physical Objects (tables, chair, boxes, light bulb, clock)
        
        Abstract Shapes (arrows, signs)
    - - a) Many sketches in interaction design include people performing their actions, motions, and activities while interacting with information technology.
        
        There are many different techniques to draw people: from simple stick figures to detailed and realistic outlines of a person.
        
        Often, simple stick figures are preferable to detailed drawings of people: they are expressive enough to illustrate people and their actions in a variety of situations.
      - b) Alternatively, even comic-like sketches or abstract shapes can represent people in your sketches.
        
        The choice of drawing style depends on your preferences, but also on the type of sketch you create. For example, in a drawing that just suggests the presence of people, abstract shapes can be sufficient.
        
        But in a sketch of (say) a multi-user tabletop interaction, details about people’s postures might be important to portray the interaction techniques.
    - - By varying people’s poses you can express a variety of different activities. For example, the sketches below show a person’s activities, e.g., running, pointing, lifting a box.
        
        Notice how two of the sketches use action lines (also called motion lines) to illustrate the movements of the person’s activity (also see Scott McCloud’s Understanding Comics).
    - - Different postures can also show the state of the person: surprised, puzzled, disgruntled. Here, we also used symbols above the head of the person (in addition to posture) as an additional indicator of a person’s state.
    - - Through simple variations of how you draw people’s faces (in particular their mouth and eyebrows) you can let your sketched people express their emotions.
        
        The 3x3 grid illustrates 9 different combinations of how to draw people’s faces, simpy by the way you remix 6 eyebrow and mouth shapes.
        
        The result is expressions such as: happy, relieved, sad, angry, confused, or surprised.
    - - Adding a body posture matching the person’s facial expression can amplify how you communicate the person’s current emotional state.
        
        For example, this sketch shows a person in three different moods: happy and waving the hand, angry and raising the arms, and scratching the head while being confused.
    - - You can combine these postures of people and the simple objects to compose simple sketches that illustrate specific situations and actions.
        
        For example, the sketches below illustrate a person in different moods and situations: happy while being on the phone, confused while deciphering a map, and sad while searching the floor for a lost item.
- - - - For this example, imagine that you need to sketch out some ideas for a large vertical
        or horizontal display that recognizes people’s hand gestures. To do this, you will
        create a series of sketch elements that show a person’s hand in different postures
        
        1- Decide on the hand posture(s) you want. Using a tripod, adjust the camera’s viewing angle of the scene (see Tips sidebar). Then take your photos of the hand postures you would like to sketch.
        
        2- Import the first photo of a hand posture into your digital drawing editor.
        
        Set the opacity of this photo to 50%, which makes it easier to draw the trace outline. Also, set the stoke thickness to a modestly thick stroke (see Tips sidebar).
        
        3- Draw a stroke path along the outline of the hand. It is not necessary to be too accurate with this – the idea is to capture the basic shape outline of the hand as can be seen in the picture above.
        
        4- Remove the original photo from the background (or hide it if its a layer, as in Chapter 3.8). What remains on the drawing page is the outline of the hand posture that you can fine tune (e.g., to scale, to rotate, to re-adjust stroke thickness) and save for later use
        
        5- Repeat steps 1 to 4 for any other hand postures you would like to add to your collection
    - - Example 1: Sequence of Hand Postures
        
        1- Now imagine that you need to sketch out a particular gesture that a horizontal display – a digital table – will understand. To do this, select the appropriate hand sketches to create a time series that shows a person’s hand in different postures over time. Our example uses an open palm forming into a fist.
        
        2- In our solution, we rotate our drawings to present a topdown view of te postures we want. We then compose four of the single hand posture outlines into a single sketch to create a sequence: from straight hand, to an L-shape posture, C-shape posture, and the fist.
        
        3- We then add additional parts of the sequence sketch. In this version of our sketch, arrows now indicate how the orientation of parts of the hand relative to one another are tracked to recognize postures on an interactive tabletop, as viewed from above.
      - Example 2: Using a Single Sketch Element for Two Different Sketches
        
        The two examples below (Example 2 & 3) are part of a series of sketches illustrating possible forms of gestural
        interactions above an interactive tabletop surface, where the surface recognizes objects in the person’s hand. We again begin with a simple outline of a hand posture, but here we use only a single hand sketch to illustrate two different situations. The key idea is that we simplified constructing these sketches by reusing that single hand outline and drawing around it.
        
        1- Using photo traces, create an outline of a grabbing/holding posture of a hand. This posture is reused in all sketches in this example.
        
        2- Copy the hand posture outline into two diff erent drawings, and adjust the size and position.
        
        3- Sketch the physical objects the hand is holding; e.g., a little cube or box
        
        4- Next, sketch parts of the interactive tabletop surface. These are straight lines for the outline of the table, and a cross-hatched shadow at the side of the table.
        
        5- Draw other objects on the table, or visualizations displayed on the tabletop surface (e.g., virtual shadows).
        
        6- For the final sketches, add any annotations to the sketch, such as arrows indicating movements and gestures. Using a different color for these annotations can clarify the fact that these are not part of the actual drawing itself, but meta annotations.
        
        7- These two sketches were part of a larger collection of images we had developed to illustrate how a person might interact with digital content on an interactive tabletop by performing gestures above the surface (see Marquardt et. al, 2011). Below are further samples of this collection of sketches; all of them using the photo trace technique as a starting point for generating the outlines of hands. We used the same technique to generate the various devices and objects below, e.g., the cell phone, the tablet, and the transparent acrylic sheet. For practice, try using photo traces to reproduce some of these sketches.
      - Example 3: Several Photo Traces Used in this Book
        
        Most first pages introducing each section of this book used photo traces as a starting point. Below are the original photos we took on the left side, and the photo trace sketches we made on the right. Notice how we added features to the sketch that are not in the original photo (e.g., the images in the flipbook, or the details of notes on the poster wall).
    - - Some things are hard to draw. Using photo traces, you can quickly compile a variety of sketch components that will make your sketches look ‘good’, and will be faster than drawing each component by hand.
    - - i) Photo Perspective:
        
        Select an appropriate perspective for shooting the photographs:
        from above, at an angle, or from the side. The best perspective will depend on how you want to use your sketch elements.
        
        To achieve a consistent collection of sketch elements, we take all the photos from the same perspective view by mounting the camera on a tripod.
      - ii) Stroke Thickness:
        
        Most drawing systems have a very thin stroke thickness by default (e.g., 1 pixel).
        
        Instead, draw with a thicker stroke. You will find it easier to (a) see your trace, and (b) produce a rough sketch quickly. A thicker stroke will also make your sketch appear more sketchlike, i.e., like a cartoon.
        
        Most editors will let you adjust your stroke thickness afterwards, which will let you fine tune your trace’s appearance