Transcript
Page 1: Sketching interactions (GUADEC 2012)

Sketching interactions

Felipe Erias

[email protected]@felipeerias

Page 2: Sketching interactions (GUADEC 2012)

Introduction

SW Engineering at Uni. Coruña

Erasmus + internship in Germany

Joined Igalia in 2007

Development on GNOME and mobile

MSc. HCI - Uni. York

Page 3: Sketching interactions (GUADEC 2012)

"Getting the design right,

and the right design"

Page 4: Sketching interactions (GUADEC 2012)

“Getting the design right...”

Discoverability

Usability

Accessibility

Visual appearance

Performance

Page 5: Sketching interactions (GUADEC 2012)

… and the right design”

What does that mean?

Page 6: Sketching interactions (GUADEC 2012)

patrick_nouhailler - Flickr

Page 7: Sketching interactions (GUADEC 2012)

Osakajon - Flickr

Page 8: Sketching interactions (GUADEC 2012)

“A little figurine I got when I was in Franceto remind me of my visit to the Eiffel Tower”

Esm723 - Flickr

Page 9: Sketching interactions (GUADEC 2012)

Levels of processing

Donald Norman, "Emotional design"

Visceral

Behavioural

Reflective

Page 10: Sketching interactions (GUADEC 2012)

What is "cool"?

Karen Holtzblatt (InContext)

Accomplish Direct into action

Connection The hassle factor

Identity The delta

Sensation

Page 11: Sketching interactions (GUADEC 2012)

What is "cool"?

Accomplish my intent anywhere, on my time

Direct into action without hassle

Connection

Identity

Sensation & Aesthetics

Page 12: Sketching interactions (GUADEC 2012)

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

Page 13: Sketching interactions (GUADEC 2012)

Bill Buxton, “Sketching User Experiences”

Page 14: Sketching interactions (GUADEC 2012)

Laseau (1980) – cited by Buxton

Page 15: Sketching interactions (GUADEC 2012)

Design is a negative craft

Page 16: Sketching interactions (GUADEC 2012)

Leonardo Da Vinci (c. 1488) - Wikipedia

Page 17: Sketching interactions (GUADEC 2012)

Picasso, “Don Quijote” (1955) - Wikipedia

Page 18: Sketching interactions (GUADEC 2012)

We need to sketch behaviour

Page 19: Sketching interactions (GUADEC 2012)

Sketches

Fast

Cheap

Plentiful

Disposable

Page 20: Sketching interactions (GUADEC 2012)

Sketches vs prototypes

Continuum: start with sketches, gradually

use prototypes as the product becomes

more defined

Page 21: Sketching interactions (GUADEC 2012)

Benefits

Ideation

Organise, clarify your thoughts

Communication

Thought aid

Ideation, “Exhaust the design space”

Communication (designers, community)

Page 22: Sketching interactions (GUADEC 2012)

Techniques and Examples

Page 23: Sketching interactions (GUADEC 2012)

The Wizard of Oz (1939)

Page 24: Sketching interactions (GUADEC 2012)

The Wizard of Oz (1939)

Page 25: Sketching interactions (GUADEC 2012)

The Wizard of Oz (1939)

Page 26: Sketching interactions (GUADEC 2012)

Wizard of Oz

What matters is the fidelity of the experience

Examples

Airline ticket kiosk – Erdman & Neal, 1971

Speech-to-text – IBM, 1983

Page 27: Sketching interactions (GUADEC 2012)

“Forum Theatre as a Requirements Gathering Methodology...” (2007) - University of Dundee

Page 28: Sketching interactions (GUADEC 2012)

“Forum Theatre as a Requirements Gathering Methodology...” (2007) - University of Dundee

Page 29: Sketching interactions (GUADEC 2012)

“Forum Theatre as a Requirements Gathering Methodology...” (2007) - University of Dundee

Page 30: Sketching interactions (GUADEC 2012)

“Forum Theatre as a Requirements Gathering Methodology...” (2007) - University of Dundee

Page 31: Sketching interactions (GUADEC 2012)

Stories

Page 32: Sketching interactions (GUADEC 2012)

Storyboard - The Birds

Page 33: Sketching interactions (GUADEC 2012)

Interaction flow

Page 34: Sketching interactions (GUADEC 2012)

Interaction flow

Page 35: Sketching interactions (GUADEC 2012)

Interaction flow

Page 36: Sketching interactions (GUADEC 2012)

Interaction flow

Page 37: Sketching interactions (GUADEC 2012)

Interaction flow

Page 38: Sketching interactions (GUADEC 2012)

Interaction flow

Page 39: Sketching interactions (GUADEC 2012)

Interaction flow

Page 40: Sketching interactions (GUADEC 2012)

Interaction flow

Page 41: Sketching interactions (GUADEC 2012)

Paper interface for a tablet music app.

Page 42: Sketching interactions (GUADEC 2012)

Palm Pilot wooden prototype (1995) – computerhistory.org

Page 43: Sketching interactions (GUADEC 2012)

CWI – University of Amsterdam

Page 44: Sketching interactions (GUADEC 2012)

CWI – University of Amsterdam

Page 45: Sketching interactions (GUADEC 2012)

CWI – University of Amsterdam

Page 46: Sketching interactions (GUADEC 2012)

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

Page 47: Sketching interactions (GUADEC 2012)

In GNOME

Communication of design decisions, a

problem in GNOME

Small teams, a lot of potential

stakeholders

Remote + different organisations

Page 48: Sketching interactions (GUADEC 2012)

In summary...

Turn off your computer from time to time :-)

Grab some pen & paper

Don't settle, try new things out

Page 49: Sketching interactions (GUADEC 2012)

Thanks!