Sketching interactions
Felipe Erias
felipeerias@igalia.com
@felipeerias
Introduction
SW Engineering at Uni. Coruña
Erasmus + internship in Germany
Joined Igalia in 2007
Development on GNOME and ...
"Getting the design right,
and the right design"
“Getting the design right...”
Discoverability
Usability
Accessibility
Visual appearance
Performance
… and the right design”

What does that mean?
patrick_nouhailler - Flickr
Osakajon - Flickr
“A little figurine I got when I was in France
to remind me of my visit to the Eiffel Tower”
Esm723 - Flickr
Levels of processing
Donald Norman, "Emotional design"
Visceral
Behavioural
Reflective
What is "cool"?
Karen Holtzblatt (InContext)
Accomplish

Direct into action

Connection

The hassle factor

Identity

The ...
What is "cool"?
Accomplish my intent anywhere, on my time
Direct into action without hassle
Connection
Identity
Sensation ...
Achieving this

Requirements-driven development does
not respond to what people really value
Need to evaluate and refine d...
Bill Buxton, “Sketching User Experiences”
Laseau (1980) – cited by Buxton
Design is a negative craft
Leonardo Da Vinci (c. 1488) - Wikipedia
Picasso, “Don Quijote” (1955) - Wikipedia
We need to sketch behaviour
Sketches
Fast
Cheap
Plentiful
Disposable
Sketches vs prototypes

Continuum: start with sketches, gradually
use prototypes as the product becomes
more defined
Benefits
Ideation
Organise, clarify your thoughts
Communication
Thought aid
Ideation, “Exhaust the design space”
Communica...
Techniques and Examples
The Wizard of Oz (1939)
The Wizard of Oz (1939)
The Wizard of Oz (1939)
Wizard of Oz

What matters is the fidelity of the experience
Examples
Airline ticket kiosk – Erdman & Neal, 1971
Speech-to...
“Forum Theatre as a Requirements Gathering Methodology...” (2007) - University of Dundee
“Forum Theatre as a Requirements Gathering Methodology...” (2007) - University of Dundee
“Forum Theatre as a Requirements Gathering Methodology...” (2007) - University of Dundee
“Forum Theatre as a Requirements Gathering Methodology...” (2007) - University of Dundee
Stories
Storyboard - The Birds
Interaction flow
Interaction flow
Interaction flow
Interaction flow
Interaction flow
Interaction flow
Interaction flow
Interaction flow
Paper interface for a tablet music app.
Palm Pilot wooden prototype (1995) – computerhistory.org
CWI – University of Amsterdam
CWI – University of Amsterdam
CWI – University of Amsterdam
In GNOME
Wireframes and visual mockups
Demo: multiple selection
http://jimmac.fedorapeople.org/gnome3/boxes/overlay-toolba...
In GNOME
Communication of design decisions, a
problem in GNOME
Small teams, a lot of potential
stakeholders
Remote + diffe...
In summary...

Turn off your computer from time to time :-)
Grab some pen & paper
Don't settle, try new things out
Thanks!
Upcoming SlideShare
Loading in...5
×

Sketching interactions (GUADEC 2012)

132

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 http://blogs.igalia.com/femorandeira/2012/07/31/sketching-interactions-talk-at-guadec-2012/

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
132
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Sketching interactions (GUADEC 2012)

  1. 1. Sketching interactions Felipe Erias felipeerias@igalia.com @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) – computerhistory.org
  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 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. 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!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×