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 mobile

MSc. HCI - Uni. York

"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 Franceto 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 delta

Sensation

What is "cool"?

Accomplish my intent anywhere, on my time

Direct into action without hassle

Connection

Identity

Sensation & Aesthetics

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

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”

Communication (designers, community)

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-text – IBM, 1983

“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-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

In GNOME

Communication of design decisions, a

problem in GNOME

Small teams, a lot of potential

stakeholders

Remote + different organisations

In summary...

Turn off your computer from time to time :-)

Grab some pen & paper

Don't settle, try new things out

Thanks!