Sketching User Experiences Tutorial: Stories, Strategies, Surfaces

Nicolai Marquardt1,2 (nicolai.marquardt@acm.org)

ABSTRACT Paper-pencil sketches are a valuable tool during different stages of experience design in human-computer interaction. This hands-on tutorial will demonstrate how to integrate sketching into researchers’ and interaction designers’ everyday practice – with a particular focus on the design of applications for interactive surfaces (e.g., phones, tablets, tabletops, interactive whiteboards). Participants will learn essential sketching strategies, apply these in practice during various hands-on exercises, and learn the various ways of using sketches as a tool when designing novel interactive systems.

Author Keywords Sketching; interactive surfaces; paper-pencil sketches

ACM Classification Keywords H.5.m. Information interfaces and presentation (e.g., HCI): Miscellaneous.

OVERVIEW When designing user experiences with interactive surfaces, hand drawn paper-pencil sketches are a valuable tool [1] for finding the right design; long before refining the work and getting the design right [2]. Sketches are lightweight and easy to create, and by varying the fidelity of sketches they can be an integral part during all stages of interaction design. This hands-on tutorial will demonstrate how to integrate sketching into researchers’ and interaction designers’ everyday practice – with a particular focus on the design of applications for interactive surfaces (e.g., phones, tablets, large interactive whiteboards). Participants will learn essential sketching strategies, apply these in practice during various hands-on exercises, and learn the various ways of using sketches as a powerful tool when designing novel interactive systems.

TUTORIAL STRUCTURE The tutorial is divided into the following three units:

I will begin with the motivation behind using sketching as a tool for designing user experiences. I will illustrate these points by telling eight short stories of how other researchers' and designers' use of sketches inspire my own work – including sketches drawn by inventors such as Alexander Bell or Thomas Edison. The sketching examples during this part of the talk will also illustrate the unique properties of sketches as introduced by Buxton [2].

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

2Interactions Lab University of Calgary

2500 University Dr NW, Calgary, Canada

Permission to make digital or hard copies of part or all of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. Copyrights for third-party components of this work must be honored. For all other uses, contact the Owner/Author.

Copyright is held by the owner/author(s).

ITS '13, Oct 06-09 2013, St Andrews, United Kingdom ACM 978-1-4503-2271-3/13/10. http://dx.doi.org/10.1145/2512349.2512355

Figure 1. Examples of the sketching techniques covered in the tutorial (from left to right): sketching vocabulary, sketch notes, photo tracing of hand postures, hybrid sketches combining photos with sketched elements, and storyboards describing an interaction sequence over time.

Workshops and Tutorials ITS'13, October 6–9, 2013, St. Andrews, UK

495

Next, in the main part of the tutorial, I will guide participants through selected sketching techniques and strategies. These techniques are partially based on our “Sketching User Experiences Workbook” [4], but also include many 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 your own ideas. Some of the demonstrated techniques include (see Figure 1, and [4]):

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

• Sketch notes [5]: keeping visual notes of ideas, meetings, and other events

• 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 [3]: 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 templates, the participants of the tutorial can directly apply the learned techniques in practice (see examples in Figure 2). A focus throughout these examples will be the sketching of novel interactive surface applications.

Finally, during the third part of the tutorial, I will demonstrate how I used sketches in six recent projects of designing novel user experiences for interactive surfaces

(e.g., tabletops, wall displays, tablets, phones). These examples highlight how to apply the learned sketching techniques during all stages of the design process. I end the tutorial with an overview of additional resources and books about sketching techniques, and software and hardware for digital sketching.

SHORT BIOGRAPHY Nicolai Marquardt is Lecturer in Physical Computing 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. Nicolai did his PhD in Computer Science at the University of Calgary working with his advisor Saul Greenberg. He is a former intern at Microsoft Research Cambridge/UK and Redmond/USA and received an MSc/diplom degree in Media Systems from the Bauhaus-University Weimar. Nicolai is co-author of the book Sketching User Experiences: The Workbook (Morgan Kaufmann 2012) with Saul Greenberg, Sheelagh Carpendale, and Bill Buxton.

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. Cheng, K. See what I mean: how to use comics to communicate ideas. Rosenfeld Media, Brooklyn, N.Y., 2012.

4. Greenberg, S., Carpendale, S., Marquardt, N., and Buxton, B. Sketching User Experiences: The Workbook. Morgan Kaufmann, 2012.

5. Rohde, M. The sketchnote handbook: the illustrated guide to visual note taking. Peachpit Press, San Francisco, CA, USA, 2013.

Figure 2. Sketching-in-action during the tutorial: (left) exploring sketching vocabulary techniques and drawing people, postures, and activities; (right) using sketching templates of large surfaces to quickly visualize a novel interactive application (all sketches are drawings by participants of the tutorial).

Workshops and Tutorials ITS'13, October 6–9, 2013, St. Andrews, UK

496