# Sketching User Experiences Tutorial

Nicolai Marquardt

► To cite this version:

Nicolai Marquardt. Sketching User Experiences Tutorial. 15th Human-Computer Interaction (INTERACT), Sep 2015, Bamberg, Germany. pp.644-646, 10.1007/978-3-319-22723-8_84. hal-01610850

HAL Id: hal-01610850

https://inria.hal.science/hal-01610850

Submitted on 5 Oct 2017

HAL is a multi-disciplinary open access
archive for the deposit and dissemination of sci-
entific research documents, whether they are pub-
lished or not. The documents may come from
teaching and research institutions in France or
abroad, or from public or private research centers.

L'archive ouverte pluridisciplinaire HAL, est
destinée au dépôt et à la diffusion de documents
scientifiques de niveau recherche, publiés ou non,
émanant des établissements d'enseignement et de
recherche français ou étrangers, des laboratoires
publics ou privés.

<figure><img src="image_1.png" /></figure>

Distributed under a Creative Commons Attribution 4.0 International License
# Sketching User Experiences Tutorial

Nicolai Marquardt

University College London, UCL Interaction Centre
Gower Street, London, UK

nicolai.marquardt@acm.org

**Abstract.** When designing novel user interfaces, paper-pencil sketches can support the design thinking process and are valuable for communicating design ideas to others. In this hands-on tutorial we will demonstrate how to integrate sketching into researchers' and interaction designers' everyday practice – with a particular focus on the design of novel user experiences. Participants will learn essential sketching strategies, apply these in practice during many hands-on exercises, and learn the various ways of using sketches as a tool during all stages of the HCI research and design process. Our emphasis is on quick, easy to learn, and easy to apply methods for generating and refining ideas.

## Tutorial Structure

Creating hand drawn paper-pencil sketches [1] can be a valuable tool for finding the right design; before later refining the work and getting the design right [2]. This hands-on tutorial will demonstrate how to integrate sketching into researchers' and interaction designers' everyday practice.

In this half-day tutorial we will guide participants through selected sketching techniques and strategies. These techniques are partially based on the Sketching User Experiences Workbook [3], but also include other techniques and examples not covered in the book. Live sketching demonstrations and step-by-step instructions will illustrate a basic toolset for getting started sketching when working on HCI research projects. In particular, the demonstrated techniques include, for example (also see techniques in [2,3]):

* **Sketching vocabulary:** learning to quickly draw objects, people, and activities

* **Rapid sketching of people, emotions, gestures, and objects:** learning sketching shortcuts and strategies to rapidly sketch common elements of sketches in HCI

* **10 plus 10 design funnel:** developing 10 different ideas and refinements of selected ideas

* **Photo tracing:** create collections of sketch outlines that form the basis of composed sketches

* **Hybrid sketches:** combining sketches with photos

* **Storyboards for interaction sequences:** creating visual illustrations of an interaction sequence and telling a story about use and context over time

* **Sketch boards:** sharing and discussing sketches with others; running critiques
With a series of hands-on exercises during the tutorial and different provided tem-
plates, the participants of the tutorial can directly apply the learned techniques in
practice (see activities in Figure 1). We will demonstrate many best practices and
sketching shortcuts, and involve all participants in joint sharing and discussion ses-
sions of the sketches created during the different hands-on activities (see examples in
Figure 2). We will demonstrate how we used sketching techniques in our recent re-
search projects when designing interactive systems, and highlight how to apply the
learned sketching techniques during all stages of the design and research process. We
end the tutorial with an overview of additional resources and books about sketching
techniques, and also possible software and hardware for digital sketching.

This tutorial is open for everyone and does not require any previous drawing ex-
pertise. We will provide sketching materials, but please feel free to bring your own
sketches to share, sketchbooks, pens or paper.

<figure><img src="image_2.png" /><figcaption>**Fig. 1.** Activities from previous sketching tutorials and workshops (from top-left to bottom-
right): live sketching demonstrations, learning photo tracing, participant's sketch of interactive
system, sharing and discussing participants sketches, an rapidly sketching wireframes.</figcaption></figure>

The tutorial instructor Nicolai Marquardt is Lecturer in Physical Computing in the Department of Computer Science at the University College London. At the UCL Interaction Centre he is working in the research areas of ubiquitous computing, physical user interfaces, proxemic interactions, and interactive surfaces. He is co-author (with Saul Greenberg, Sheelagh Carpendale and Bill Buxton) of ‘Sketching User Experiences: The Workbook’ (Morgan Kaufmann 2011).
<figure><img src="image_3.png" /><figcaption>**Fig. 2.** Sketching techniques covered in the course (from top left to bottom right): sketching vocabulary, photo tracing, templates sketches, hybrid sketches, sketching storyboards, and creating photo-based storyboards [3].</figcaption></figure>

References

1. Baskinger, M. Pencils before pixels: a primer in hand-generated sketching. *interactions* 15, 2 (2008), 28-36.

2. Buxton, B. *Sketching User Experiences: Getting the Design Right and the Right Design*. Morgan Kaufmann, 2007.

3. Greenberg, S., Carpendale, S., Marquardt, N., and Buxton, B. *Sketching User Experiences: The Workbook*. Morgan Kaufmann, 2011.