Sketching interactions (GUADEC 2012)


Published on

By Felipe Erias Morandeira.

The goal of user-centred design is to understand people and technology to create systems that are usable, useful and attractive. It is more of a general approach than a fixed methodology, although there exist several semi-formal processes. Design usually starts with the gathering of knowledge about users and their goals, contexts of use, existing tools, etc. Those insights are synthesized into design proposals that need to be iteratively evaluated and refined.

This synthesis consists of two overlapping and complementary processes. The first one, prevalent at the beginning, generates and explores ideas. The second one strives to make decisions and narrow down the design, from general concepts to fine details. Sketches are used at the beginning, when the goal is to quickly explore different possibilities; prototypes belong in the later stages, when the goal is to confirm earlier decisions and narrow down the design.

Hand-drawn sketching has been a tool of craftsmen and artists for centuries. In an analogue way, we can sketch interactions and experiences when creating software solutions. These quick and inexpensive sketches are not only an invaluable tool for generating and exploring new ideas: they are also a great way to communicate initial design decisions and involve more people from the community in the design process.

This talk will start by positioning the role of sketching in a general design process. It will then present a number of techniques than may be used to sketch interactive solutions on GNOME, ranging from simple pen and paper to Free SW tools and frameworks. Several practical examples will be discussed, including some from my own work on GNOME applications like the Epiphany browser.

More information at

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Sketching interactions (GUADEC 2012)

  1. 1. Sketching interactions Felipe Erias @felipeerias
  2. 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. 3. "Getting the design right, and the right design"
  4. 4. “Getting the design right...” Discoverability Usability Accessibility Visual appearance Performance
  5. 5. … and the right design” What does that mean?
  6. 6. patrick_nouhailler - Flickr
  7. 7. Osakajon - Flickr
  8. 8. “A little figurine I got when I was in France to remind me of my visit to the Eiffel Tower” Esm723 - Flickr
  9. 9. Levels of processing Donald Norman, "Emotional design" Visceral Behavioural Reflective
  10. 10. What is "cool"? Karen Holtzblatt (InContext) Accomplish Direct into action Connection The hassle factor Identity The delta Sensation
  11. 11. What is "cool"? Accomplish my intent anywhere, on my time Direct into action without hassle Connection Identity Sensation & Aesthetics
  12. 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. 13. Bill Buxton, “Sketching User Experiences”
  14. 14. Laseau (1980) – cited by Buxton
  15. 15. Design is a negative craft
  16. 16. Leonardo Da Vinci (c. 1488) - Wikipedia
  17. 17. Picasso, “Don Quijote” (1955) - Wikipedia
  18. 18. We need to sketch behaviour
  19. 19. Sketches Fast Cheap Plentiful Disposable
  20. 20. Sketches vs prototypes Continuum: start with sketches, gradually use prototypes as the product becomes more defined
  21. 21. Benefits Ideation Organise, clarify your thoughts Communication Thought aid Ideation, “Exhaust the design space” Communication (designers, community)
  22. 22. Techniques and Examples
  23. 23. The Wizard of Oz (1939)
  24. 24. The Wizard of Oz (1939)
  25. 25. The Wizard of Oz (1939)
  26. 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. 27. “Forum Theatre as a Requirements Gathering Methodology...” (2007) - University of Dundee
  28. 28. “Forum Theatre as a Requirements Gathering Methodology...” (2007) - University of Dundee
  29. 29. “Forum Theatre as a Requirements Gathering Methodology...” (2007) - University of Dundee
  30. 30. “Forum Theatre as a Requirements Gathering Methodology...” (2007) - University of Dundee
  31. 31. Stories
  32. 32. Storyboard - The Birds
  33. 33. Interaction flow
  34. 34. Interaction flow
  35. 35. Interaction flow
  36. 36. Interaction flow
  37. 37. Interaction flow
  38. 38. Interaction flow
  39. 39. Interaction flow
  40. 40. Interaction flow
  41. 41. Paper interface for a tablet music app.
  42. 42. Palm Pilot wooden prototype (1995) –
  43. 43. CWI – University of Amsterdam
  44. 44. CWI – University of Amsterdam
  45. 45. CWI – University of Amsterdam
  46. 46. In GNOME Wireframes and visual mockups Demo: multiple selection Demo: Epiphany navigation
  47. 47. In GNOME Communication of design decisions, a problem in GNOME Small teams, a lot of potential stakeholders Remote + different organisations
  48. 48. In summary... Turn off your computer from time to time :-) Grab some pen & paper Don't settle, try new things out
  49. 49. Thanks!