Your sketches usually show a single moment in time of your user experience. E.g. a particular application screen state or a scene. This tutorial provides a basic technique for drawing and shows some tools which you can use for creating your own sketches of new ideas.

There is a big difference between what you think you see and what you actually see. Example: Most people will say that a human's eyes are located within the top third of his head. But in reality they are almost always in the middle. That is why it is a good idea to have an existing picture which you try to draw.

You need:

• Paper
• Pencil
• A drawing

You do:

1. Place the drawing in front of you.
2. Copy the drawing, but focus on the lines, rather than the complete image. Copy line by line. Take the existing drawing just as a bundle of lines.

As an exercise, it is also recommended to reorient the image top copy from in a way that the picture does not make sense anymore. In this way, it is ensured that you really focus on the lines rather than the picture.

The author of this tutorial has no artistic skills at all, but tried this method by taking the drawing of a human hand from painting-source.com. This is the result:

(left side: original, right side: copy from non-artist)

As you can see, the copied image still does not look artistic nor impressive, but should be good enough to show your ideas in a proper way.

• Observation and drawing can be practiced.
• Assumptions about things might make drawing difficult or lead to wrong results. Observation improves the drawings.
• Lets people identify objects in spite of bad drawing skills.

Before you start sketching your actual stories, you should consider having a so called sketching vocabulary of shapes. That is a library of objects, people, activities, emotions and postures. You can reuse the items of this library in order to save time and to give your sketches a standard look.

There are basically two ways of building your sketches vocabulary:

• Draw all required items once and combine them later in your actual work. This, however, requires some drawing skills.
• Use clipart images and drawing primitives (such as rectangles, lines, etc.) provided by drawing software products.

The library should include:

• Basic Sketch Elements
  Lines, rectangles, triangles and circles.
• Objects
  SImple objects composed by the basic sketch elements. Including, but not limited to:
  • Tools (pencil, wrench, scissors)
  • Digital Devices (camera, phone, computer, mouse)
  • Documents (paper, books, photos)
  • Physical Objects (tables, chair, boxes, clock)
  • Abstract Shapes (arrows, signs)
• People
  Simple stick figures, detailed drawings or comic-like sketches.
• Activities
  Figures showing activities, such as running, pointing, lifting a box, etc.
• Bodies and Emotions
  Showing the state of the person, e.g. surprised or puzzled. Can be indicated by symbols above a figure.
• Faces and Emotions
  Faces which indicate the user's emotion (angry, sad, happy).
• Postures
  The figure's posture can strengthen the facial expression of a figure. E.g. lifting both hands and showing an angry face, makes the figure even more angry and gives the impression of a shouting person.

Collection of common objects:

Show emotions with faces:

which can be also more detailed:

Example for bodies and emotions:

Combining posture, face and objects in order to illustrate a situation:

• Makes your sketches better understandable.
• Ensures a certain quality standard.
• Functions as a starting point for your sketches.

Sketches can be enriched by textual or graphical annotations. These are names, labels or explanatory notes which are connected to parts of the drawing. They can indicate dynamic elements, interactions or any special features.

You can annotate parts of a drawing in the following ways:

• Specify a name to each area of the image and assign numbers to them.
• Point to specific elements via one or more arrows.
• Text directly at the place of the element which is to be labeled.
• Indicate dynamic interactions by labeling arrows.
• Use arrows without text for indicating that specific elements can move into a particular direction.
• Add notes (special requirements, issues to discuss, „to do“s) next to the actual image.

The following sketch uses annotations as described above with different types of notes and annotations:

• Using arrows to assign annotations to elements.
• Separating and labeling areas of the screen.
• Indicating actions via arrows.
• Open question next to the actual sketch.

Another sketch indicating interactions with arrows and linking dynamic parts:

• Helps elaborating ideas.
• Improves collaboration by sharing your thoughts.
• Lets you not forget about certain ideas.
• Might reduce number of required sketches (e.g. describing an interaction instead of drawing it).

Digital sketches have some advantages which paper and pencil cannot provide. Digital images have nice features, such as

• You can copy them easily
• You can modify them without destroying the whole sketch.
• You can create animations in order to demonstrate interactions.

There are specialized sketching software products, but we focus for now on slideware, in particular Microsoft Powerpoint. Slideware products are common and available for all standard operating systems and you most probably have already experience with it.

Powerpoint facilitates drawing by various pre-installted tools and shapes.

You can find basic shapes at Home → Shapes

You can use:

• Automatically connecting arrows.
• Different stroke thicknesses.
• Different colors.
• Cliparts or other digital items from your own library (see chapter above).
• Add notes to the separate „notes“ area.

This is the sketch from the annotation example, but this time drawn in Powerpoint:

As you can see, elements are better to identify and properly aligned, which would be more feasible for a demonstration to the customer.

You can even create very detailed mockups with tht help of PowerPoint and a plugin called PowerMockup:

• Easy modification of sketches.
• Basic shapes already provided by the software.
• Sketches look more realistic (correct alignments, computer font, straight lines)
• Depending on your drawing skills, often times lead to prettier and clearer drawings.

You might have already realized that drawing digital sketches, as shown above with Powerpoint, takes much more time than with paper and pencil. However, as already mentioned, they have the drawback of not being easily editable. Since you are still in the process of brainstorming, you very likely want to rearrange or remove particular elements from time to time. In this case, you should consider using sticky notes for your sketches.

You need:

• A white boards
• sticky notes of various sizes
• Pencils

You do:

• Draw each sketch element on a separate sticky note.
• Combine them on the white board.
• Re-arrange, overlap and remove notes as desired.
• Create sticky notes templates for repeating elements (e.g. create menu item templates, or button templates).

This sketch shows with the help of sticky notes, how the interaction of an image slider works:

Advanced techniques and more examples can be seen at Interacting with Paper.

• Usually faster then digital drawing.
• Easy rearranging of elements.
• Re-usage of single elements in future sketches.
• Demonstrating interactions (as seen in the example).

Sometimes, your task is not to sketch a whole new application screen, but only parts of the screen. E.g. the redesign of a small part of a website or sketching your smartphone app in an existing phone. A quick solution for sch kind of tasks is to use templates. Templates are images which show the fixed part of the sketch and leaves a blank space for your actual sketch.

There are basically two good ways to create templates:

• For website sketches: Make a screenshot of the existing website and crop the dynamic content.
• For other items: Use photo tracing:
  • Load a photograph of the environment in that you want to place your own sketches into a bitmap editor (e.g. Adobe Photoshop).
  • Create a new layer.
  • Draw strokes along the important parts of the picture.
  • Create another layer for your own sketch.

Example 1: Cropping the content area of the HCI group website in order to replace some new dummy content:

Example 2: Take a photograph of someone holding a tablet and use it as a template for tablet app sketches:

which can be used for own sketches without photo background:

• More efficient than drawing everything from scratch.
• Usually looks better than own sketches.
• Can be added to your own library of elements for future sketches.

You can also combine the above described technique of photo tracing with real photographs in order to produce a „augmented reality“ or to better demonstrate interactions.

• Create a template of your device or screen with the help of photo tracing, a showed above.
• Place it on a photograph.
• Add additional sketch elements which indicate some special interaction.

In this example, we want to demonstrate the idea of a tablet App which provides information about a particular wine when you hold the tablet in front of a wine bottle.

• Viewer can better focus on the actual sketch (he/she sees immediately the project scope) due to the contrast between photograph and sketch. It is a form of highlighting.
• Gives better understanding of the use case and possible interactions.
• More efficient than drawing everything by yourself.