Your SlideShare is downloading. ×
Sketching interactions (FOSDEM 2013)
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Sketching interactions (FOSDEM 2013)


Published on

By Felipe Erias Morandeira. …

By Felipe Erias Morandeira.

In an analogue way to traditional hand-drawn sketching, 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.

The talk will start by defining sketching and positioning its role in a general design process. It will then present a number of techniques than may be used to sketch interactive solutions, ranging from simple pen and paper to Free SW tools and frameworks. Several examples of real-world work from academical and Free SW communities will be discussed.

More information at

Published in: Technology

  • Be the first to comment

  • Be the first to like this

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 Felipe Erias Morandeira SW Engineering at U. Corunna (ES) MsC. HCIT at U. York (UK) At Igalia since 2007
  • 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"
  • 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 Visceral Behavioural Reflective Donald Norman, "Emotional design"
  • 10. What is "cool"? Accomplish Connection Identity Sensation Karen Holtzblatt Direct into action The hassle factor The delta
  • 11. What is "cool"? Accomplish my intent anywhere, on my time Direct into action without hassle Connection Identity Sensation & Aesthetics
  • 12. Getting there Setting the problem What do we build? Solving the problem How do we build it?
  • 13. Laseau (1980) – cited by Buxton
  • 14. Design is a negative craft
  • 15. Picasso, “Don Quijote” (1955) - Wikipedia
  • 16. We need to sketch behaviour
  • 17. Sketches Fast Cheap Plentiful Disposable
  • 18. The Wizard of Oz (1939)
  • 19. The Wizard of Oz (1939)
  • 20. The Wizard of Oz (1939)
  • 21. Examples
  • 22. Paper interface for a tablet music app.
  • 23. Palm Pilot wooden prototype (1995) –
  • 24. CWI – University of Amsterdam
  • 25. CWI – University of Amsterdam
  • 26. CWI – University of Amsterdam
  • 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. In GNOME Text, wireframes and visual mockups Multiple selection HTML demo (jimmac)
  • 31. Example: Epiphany
  • 32. Interactive sketch QML: WebView, Animations Smoke and mirrors: no widgets, images Hardcoded Focus on the point
  • 33. Demo
  • 34. Review Fast? Cheap? Plentiful? Disposable?
  • 35. In summary... Need to find the right problem to fix Drafts, sketches, mock-ups help: Ideation Organisation Communication Not just looks: behaviour, experience
  • 36. Thanks!