Designing For Flow

Designing for Flow BRUNO FIGUEIREDO

hoppiness

Who am I?

Architect by educationas in buildings

Interaction Designer by choice

Leandro’s World Tour & RC Fotos

Between Lisbon and London

Fighting Static

PanchoWatkins

Led by the gaming industry

More than enough power

b d solis

Ajax helped a lot

blakespot

Early adopters will use anything

Matt Stafford

Seniors lead growth

15%15%2000 2000

20020066

Most apps are still static

Mimic real life tools

purpleslog

Teleportation is Scary

Nesting doll

Slideshows are not OK

enviziondotnet

Stop the Ping Pong

celerrimus

Landing on the unknown

Cheo70

Context of the trip is lost

Shadows fool you

Natural User Interfaces

Microsoft

Abstract Real

Natural User Interface

Command Line

Flow Applications

Graphical User Interface

User Interfaces

Time

Control Selection

The Problem

State 1State 1 State 2State 2

Action is Performed

USER

SYSTEM

Data is ready

Server fetches data

Output

Adding flow

gocarts

Patrick J. Lynch

Understanding how we work

Mark Erickson

1% of our Retina100% Visual Acuity

The fovea

Like a Flashlight in the Dark

lrargerich

specialkrb

How we see

50 miliseconds

rcoster

Apple

Rapid Serial Visual Presentation

Animating

Change

Movement

You can only see so much

SolYoung

Don’t overdo it

too much emphasys=

no emphasys at all

• Enhanced system visibility

• Easier to pinpoint errors

• Easier to complete complex tasks

• Enhanced findability

• Increased task performance

• Lower frustration levels

Benefits

Examples of flow

mandj98

Sung Sook

Shopping Cart

Traditional

Add to Basket

Quantity: 3

Web Design - Estrutura, Concepção e Produção de sites Web2ª Edição Actualizada e Aumentada Author: Bruno Figueiredo ISBN: 972-722-433-4 Pages: 300Size: 17,0 x 24,0 cm

Price: 25,00 Euros

Shopping Basket

EMPTY

Add to Basket

Quantity: 3


Price: 25,00 Euros

Shopping Basket

3 Web Design - Estrutura, Concepção e Produção de sites WebBruno FigueiredoPrice: 75,00 Euros

Subtotal: 75,00 Euros

Change

Add to Basket

Quantity: 3


Price: 25,00 Euros

Shopping Basket

EMPTY

Add to Basket

Quantity: 3


Price: 25,00 Euros

Shopping Basket



Change +

Movement

Add to Basket

Quantity: 3


Price: 25,00 Euros

Shopping Basket

EMPTY


Price: 25,00 Euros

3

Add to Basket

Quantity: 3

Shopping Basket



Bookshelf

chotda


3

X

Change +

Size

Sieve

Indigo Goat

Flash CS3 Definitive Guide Michael NorrisFlash CS3 Definitive Guide Michael Norris

Photoshop CS3 Hands On Jane WilburPhotoshop CS3 Hands On Jane Wilbur

Web Design Bruno FigueiredoWeb Design Bruno Figueiredo

PHP Quick Reference Tom CoatesPHP Quick Reference Tom Coates

Illustrator CS3 Anna StevensonIllustrator CS3 Anna Stevenson

ASP.net Quick Reference Joanna GeddesASP.net Quick Reference Joanna Geddes

Python Hands-on Brian ThomasPython Hands-on Brian Thomas

Show Only Books:Design





PHP Quick Reference Tom CoatesPHP Quick Reference Tom Coates

ASP.net Quick Reference Joanna GeddesASP.net Quick Reference Joanna Geddes

Python Hands-on Brian ThomasPython Hands-on Brian Thomas


Change +

Movement

• Map out actions to real examples• Smooth transitions between states• Use subtle animations• Stay within view• Animate with change, movement and size• One thing at a time• Don’t overdo it

Wrap up

Questions?

[email protected]

Thank you

hoppiness

All pictures are CC from Flickr and the author’s name is on the lower right

Designing For Flow

Technology

Transcript of Designing For Flow