Sketching interactions (GUADEC 2012)

Uploaded on

By Felipe Erias Morandeira. …

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Sketching interactions Felipe Erias @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) –
  • 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 Demo: Epiphany navigation
  • 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!