digital day bh - microinterações

68
Microinterações: pequenos detalhes que fazem a diferença em Smartwatches Digital Day - Belo Horizonte 19/09/2015

Upload: anderson-facanha

Post on 22-Jan-2018

591 views

Category:

Design


1 download

TRANSCRIPT

Page 1: Digital Day BH - Microinterações

Microinterações:pequenos detalhes que fazema diferença em Smartwatches

Digital Day - Belo Horizonte19/09/2015

Page 2: Digital Day BH - Microinterações

Anderson FaçanhaDesigner CI&T

Page 3: Digital Day BH - Microinterações

Microinterações estão

presentes em todos lugares...

Page 4: Digital Day BH - Microinterações

Sao momentos

contidos em um

produto que giram

em torno de um

unico caso de uso

Page 5: Digital Day BH - Microinterações
Page 6: Digital Day BH - Microinterações
Page 7: Digital Day BH - Microinterações

A diferença entre um produto que

você ama e um produto que você

tolera, muitas vezes, está em suas

microinterações com ele.

Page 8: Digital Day BH - Microinterações
Page 9: Digital Day BH - Microinterações
Page 10: Digital Day BH - Microinterações

Cada vez que você muda uma

configuração, sincroniza seu dispositivo,

cria um password, ‘curte’ algo... você está

se engajando em uma microinteração"“

Dan SafferCriador do termo Microinterações em 2013

Page 11: Digital Day BH - Microinterações

280 horaspara evolução de um dos elementos

de design mais vistos na história

Page 12: Digital Day BH - Microinterações

Havia todo tipo de restrição

para o design deste botão

Parâmetros

específicos de

altura e largura

Ter uma boa aparência em

navegadores antigos e

outras plataformas

Funcionar em

vários idiomas

diferentes, , ...

Page 13: Digital Day BH - Microinterações
Page 14: Digital Day BH - Microinterações

A primeira coisa a saber

sobre design em grande escala

é que as pequenas coisas

realmente importam "

Margaret Gould StewartDiretora design de produtos no Facebook

Page 15: Digital Day BH - Microinterações

Watch OS 22015

OS X Lion2011

IOS2007

Mac OS X2001

Win XP2001

Mac OS 81997

Win 3.01990

NeXTstep1989

Windows1985

Macintosh1984

Apple Lisa1983

Xerox Star1981

Page 16: Digital Day BH - Microinterações

Microinteração

realiza uma única tarefa

rápido

de fácil realização

simples

vários tipos de uso

lento

grande carga cognitiva

pode ser complexa

Feature

X

Page 17: Digital Day BH - Microinterações

Estrutura da microinteração

Page 18: Digital Day BH - Microinterações
Page 19: Digital Day BH - Microinterações

TRIGGER

Iniciam a microinteração:

● Manual

● Invisível

● Sistema

Page 20: Digital Day BH - Microinterações

TRIGGERMANUAL

Page 21: Digital Day BH - Microinterações
Page 22: Digital Day BH - Microinterações
Page 24: Digital Day BH - Microinterações

TRIGGERINVISÍVEL

Page 25: Digital Day BH - Microinterações
Page 26: Digital Day BH - Microinterações
Page 27: Digital Day BH - Microinterações
Page 28: Digital Day BH - Microinterações
Page 29: Digital Day BH - Microinterações

TRIGGERSISTEMA

Page 30: Digital Day BH - Microinterações
Page 31: Digital Day BH - Microinterações
Page 32: Digital Day BH - Microinterações
Page 33: Digital Day BH - Microinterações

RULES

Conjunto de regras invisiveis:

● como funciona?

● o que pode e o que não pode?

Page 34: Digital Day BH - Microinterações
Page 35: Digital Day BH - Microinterações
Page 36: Digital Day BH - Microinterações

Previna

erros humanos!

Page 37: Digital Day BH - Microinterações

Informe o que esta

acontecendo de

errado

Page 38: Digital Day BH - Microinterações

Notifique itens

importantes para seu

usuário

Page 39: Digital Day BH - Microinterações

1 2 3 4 5 6 FINAL

Page 40: Digital Day BH - Microinterações

Não comece

do zero● Qual device está em uso?

● GPS habilitado?

● Câmera?

● Está chovendo?

● A bateria está carregada?

Page 41: Digital Day BH - Microinterações
Page 42: Digital Day BH - Microinterações
Page 43: Digital Day BH - Microinterações

Microinterações são diálogos:

● permite aprender as regras.

● fale com o usuároFEEDBACK

Page 44: Digital Day BH - Microinterações

Seja humano

em seus feedbacks :)

Page 45: Digital Day BH - Microinterações
Page 46: Digital Day BH - Microinterações
Page 47: Digital Day BH - Microinterações
Page 48: Digital Day BH - Microinterações

Ajude seu usuário a se localizar:

● onde estou

● para onde vou

● o que posso fazerLOOPS AND MOODS

Page 49: Digital Day BH - Microinterações
Page 50: Digital Day BH - Microinterações
Page 51: Digital Day BH - Microinterações

O que acontece com a microinteração

quando é utilizada pela primeira vez?

Pela segunda? Daqui 10 anos?

Page 52: Digital Day BH - Microinterações
Page 53: Digital Day BH - Microinterações
Page 54: Digital Day BH - Microinterações

Mas, e na prática, como fica

a estrutura da microinteração?

Page 55: Digital Day BH - Microinterações

Trigger do sistema

Rules Feedback Loops and moods

Alcatel Watch, China

Page 56: Digital Day BH - Microinterações

Trigger manual

Rules Feedback Loops and moods

iCab, EUA

Page 57: Digital Day BH - Microinterações

Trigger manual

Rules Feedback Loops and moods

Sales Force Brasil Kirin, CI&T

Page 58: Digital Day BH - Microinterações

Não tente fazer

mini aplicativos

de smartphones

Page 60: Digital Day BH - Microinterações
Page 61: Digital Day BH - Microinterações
Page 62: Digital Day BH - Microinterações
Page 63: Digital Day BH - Microinterações
Page 64: Digital Day BH - Microinterações
Page 65: Digital Day BH - Microinterações
Page 66: Digital Day BH - Microinterações

Os detalhes não são detalhes.

Eles fazem o design "“

Charles Eames(1907 - 1978)

Page 67: Digital Day BH - Microinterações

SAFFER, Dan. Microninteractions Designing with Details http://microinteractions.com

Amazon, Dash Button http://www.amazon.com/b/?node=10667898011&lo=digital-text

TED, Margaret Gould Stewart http://www.ted.com/talks/margaret_gould_stewart_how_giant_websites_design_for_you_and_a_billion_others_too

TNW, Handsfree tinder http://thenextweb.com/apps/2015/07/07/because-tinder-is-about-your-heart-right

Empty states http://emptystat.es

Little big details http://littlebigdetails.com

Alcatel Watch, Denys Nevozhai https://medium.com/user-experience-design-1/alcatel-watch-ux-f721a88bff33

24 Hours, Alexander Komarov https://medium.com/@komarov/apple-watch-journey-learning-through-doing-474b23c65121

Pttrns http://pttrns.com

Referências

Page 68: Digital Day BH - Microinterações

Anderson FaçanhaDesigner CI&T

[email protected]

@kardelly

behance.net/kardelly

Obrigado