This document discusses the importance and benefits of sketching interactions and designs. It argues that sketching helps with ideation, organizing thoughts, communicating designs, and exploring the design space. Sketches can be fast, cheap, plentiful, and disposable. The document provides examples of sketching techniques like storyboards, interaction flows, and paper prototypes. It emphasizes that sketching, even with low fidelity, can elicit useful feedback about user experiences. Sketching is presented as a valuable tool that product teams should use more frequently, especially for requirements gathering and communicating design decisions.

1. Sketching interactions
Felipe Erias
felipeerias@igalia.com
@felipeerias

2. Introduction
SW Engineering at Uni. Coruña
Erasmus + internship in Germany
Joined Igalia in 2007
Development on GNOME and mobile
MSc. HCI - Uni. York

3. "Getting the design right,
and the right design"

4. “Getting the design right...”
Discoverability
Usability
Accessibility
Visual appearance
Performance

5. … and the right design”
What does that mean?

6. patrick_nouhailler - Flickr

7. Osakajon - Flickr

8. “A little figurine I got when I was in France
to remind me of my visit to the Eiffel Tower”
Esm723 - Flickr

9. Levels of processing
Donald Norman, "Emotional design"
Visceral
Behavioural
Reflective

10. What is "cool"?
Karen Holtzblatt (InContext)
Accomplish
Direct into action
Connection
The hassle factor
Identity
The delta
Sensation

11. What is "cool"?
Accomplish my intent anywhere, on my time
Direct into action without hassle
Connection
Identity
Sensation & Aesthetics

12. Achieving this
Requirements-driven development does
not respond to what people really value
Need to evaluate and refine designs
Need to elicit the real user requirements

13. Bill Buxton, “Sketching User Experiences”

14. Laseau (1980) – cited by Buxton

15. Design is a negative craft

16. Leonardo Da Vinci (c. 1488) - Wikipedia

17. Picasso, “Don Quijote” (1955) - Wikipedia

18. We need to sketch behaviour

19. Sketches
Fast
Cheap
Plentiful
Disposable

20. Sketches vs prototypes
Continuum: start with sketches, gradually
use prototypes as the product becomes
more defined

21. Benefits
Ideation
Organise, clarify your thoughts
Communication
Thought aid
Ideation, “Exhaust the design space”
Communication (designers, community)

22. Techniques and Examples

23. The Wizard of Oz (1939)

24. The Wizard of Oz (1939)

25. The Wizard of Oz (1939)

26. Wizard of Oz
What matters is the fidelity of the experience
Examples
Airline ticket kiosk – Erdman & Neal, 1971
Speech-to-text – IBM, 1983

27. “Forum Theatre as a Requirements Gathering Methodology...” (2007) - University of Dundee

28. “Forum Theatre as a Requirements Gathering Methodology...” (2007) - University of Dundee

29. “Forum Theatre as a Requirements Gathering Methodology...” (2007) - University of Dundee

30. “Forum Theatre as a Requirements Gathering Methodology...” (2007) - University of Dundee

31. Stories

32. Storyboard - The Birds

33. Interaction flow

34. Interaction flow

35. Interaction flow

36. Interaction flow

37. Interaction flow

38. Interaction flow

39. Interaction flow

40. Interaction flow

41. Paper interface for a tablet music app.

42. Palm Pilot wooden prototype (1995) – computerhistory.org

43. CWI – University of Amsterdam

44. CWI – University of Amsterdam

45. CWI – University of Amsterdam

46. In GNOME
Wireframes and visual mockups
Demo: multiple selection
http://jimmac.fedorapeople.org/gnome3/boxes/overlay-toolbar2/
Demo: Epiphany navigation
https://mail.gnome.org/archives/desktop-devel-list/2012-May/msg00318.html
https://mail.gnome.org/archives/desktop-devel-list/2012-May/msg00327.html

47. In GNOME
Communication of design decisions, a
problem in GNOME
Small teams, a lot of potential
stakeholders
Remote + different organisations

48. In summary...
Turn off your computer from time to time :-)
Grab some pen & paper
Don't settle, try new things out

49. Thanks!