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 http://blogs.igalia.com/femorandeira/2013/01/29/a-few-more-ideas-for-web-navigation-and-a-talk-at-fosdem/

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

2. Introduction
Felipe Erias Morandeira
SW Engineering at U. Corunna (ES)
MsC. HCIT at U. York (UK)
At Igalia since 2007

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

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

6. "… and the right design"

7. patrick_nouhailler - Flickr

8. Osakajon - Flickr

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

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

11. What is "cool"?
Accomplish
Connection
Identity
Sensation
Karen Holtzblatt
Direct into action
The hassle factor
The delta

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

13. Getting there
Setting the problem
What do we build?
Solving the problem
How do we build it?

14. Laseau (1980) – cited by Buxton

15. Design is a negative craft

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

17. We need to sketch behaviour

18. Sketches
Fast
Cheap
Plentiful
Disposable

19. The Wizard of Oz (1939)

20. The Wizard of Oz (1939)

21. The Wizard of Oz (1939)

22. Examples

23. Paper interface for a tablet music app.

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

26. CWI – University of Amsterdam

27. CWI – University of Amsterdam

28. CWI – University of Amsterdam

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. “Forum Theatre as a Requirements Gathering Methodology...” (2007) - University of Dundee

32. In GNOME
Text, wireframes and visual mockups
https://live.gnome.org/Design/
Multiple selection HTML demo (jimmac)
http://jimmac.fedorapeople.org/gnome3/boxes/overlay-toolbar2/

33. Example: Epiphany

37. Interactive sketch
QML: WebView, Animations
Smoke and mirrors: no widgets, images
Hardcoded
Focus on the point

38. Demo

39. Review
Fast?
Cheap?
Plentiful?
Disposable?

40. In summary...
Need to find the right problem to fix
Drafts, sketches, mock-ups help:
Ideation
Organisation
Communication
Not just looks: behaviour, experience

41. Thanks!