Digital Day BH - Microinterações

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

Digital Day - Belo Horizonte19/09/2015

Anderson FaçanhaDesigner CI&T

Microinterações estão

presentes em todos lugares...

Sao momentos

contidos em um

produto que giram

em torno de um

unico caso de uso

A diferença entre um produto que

você ama e um produto que você

tolera, muitas vezes, está em suas

microinterações com ele.

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

280 horaspara evolução de um dos elementos

de design mais vistos na história

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, , ...

A primeira coisa a saber

sobre design em grande escala

é que as pequenas coisas

realmente importam "

“

Margaret Gould StewartDiretora design de produtos no Facebook

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

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

Estrutura da microinteração

TRIGGER

Iniciam a microinteração:

● Manual

● Invisível

● Sistema

TRIGGERMANUAL

TRIGGERINVISÍVEL

TRIGGERSISTEMA

RULES

Conjunto de regras invisiveis:

● como funciona?

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

Previna

erros humanos!

Informe o que esta

acontecendo de

errado

Notifique itens

importantes para seu

usuário

1 2 3 4 5 6 FINAL

Não comece

do zero● Qual device está em uso?

● GPS habilitado?

● Câmera?

● Está chovendo?

● A bateria está carregada?

Microinterações são diálogos:

● permite aprender as regras.

● fale com o usuároFEEDBACK

Seja humano

em seus feedbacks :)

Ajude seu usuário a se localizar:

● onde estou

● para onde vou

● o que posso fazerLOOPS AND MOODS

O que acontece com a microinteração

quando é utilizada pela primeira vez?

Pela segunda? Daqui 10 anos?

Mas, e na prática, como fica

a estrutura da microinteração?

Trigger do sistema

Rules Feedback Loops and moods

Alcatel Watch, China

Trigger manual

Rules Feedback Loops and moods

iCab, EUA

Trigger manual

Rules Feedback Loops and moods

Sales Force Brasil Kirin, CI&T

Não tente fazer

mini aplicativos

de smartphones

Os detalhes não são detalhes.

Eles fazem o design "“

Charles Eames(1907 - 1978)

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

Anderson FaçanhaDesigner CI&T

andersoncf@ciandt.com

@kardelly

behance.net/kardelly

Obrigado