Microinterações:
pequenos detalhes que
fazem
a diferença em Smartwatches
Digital Day - Belo Horizonte
19/09/2015
Anderson Façanha
Designer CI&T
Microinterações estão
presentes em todos lugares...
São momentos
contidos em um
produto que giram
em torno de um
único 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 engaja...
280 horas
para 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...
A primeira coisa a saber
sobre design em grande escala
é que as pequenas coisas
realmente importam
"
“
Margaret Gould Stew...
Watch OS 2
2015
OS X Lion
2011
IOS
2007
Mac OS X
2001
Win XP
2001
Mac OS 8
1997
Win 3.0
1990
NeXTstep
1989
Windows
1985
Ma...
Microinteração
realiza uma única tarefa
rápido
de fácil realização
simples
vários tipos de uso
lento
grande carga cognitiv...
Estrutura da microinteração
TRIGGER
Iniciam a microinteração:
● Manual
● Invisível
● Sistema
TRIGGER
MANUAL
TRIGGER
INVISÍVEL
TRIGGER
SISTEMA
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áro
FEEDBACK
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....
Anderson Façanha
Designer CI&T
andersoncf@ciandt.com
@kardelly
behance.net/kardelly
Obrigado
Digital Day BH - Microinterações
Digital Day BH - Microinterações
Digital Day BH - Microinterações
Digital Day BH - Microinterações
Digital Day BH - Microinterações
Digital Day BH - Microinterações
Digital Day BH - Microinterações
Digital Day BH - Microinterações
Digital Day BH - Microinterações
Digital Day BH - Microinterações
Digital Day BH - Microinterações
Digital Day BH - Microinterações
Digital Day BH - Microinterações
Digital Day BH - Microinterações
Digital Day BH - Microinterações
Digital Day BH - Microinterações
Digital Day BH - Microinterações
Digital Day BH - Microinterações
Digital Day BH - Microinterações
Digital Day BH - Microinterações
Digital Day BH - Microinterações
Digital Day BH - Microinterações
Digital Day BH - Microinterações
Digital Day BH - Microinterações
Digital Day BH - Microinterações
Digital Day BH - Microinterações
Digital Day BH - Microinterações
Digital Day BH - Microinterações
Digital Day BH - Microinterações
Digital Day BH - Microinterações
Digital Day BH - Microinterações
Digital Day BH - Microinterações
Digital Day BH - Microinterações
Digital Day BH - Microinterações
Próximos SlideShares
Carregando em…5
×

Digital Day BH - Microinterações

565 visualizações

Publicada em

Microinterações: pequenos detalhes que fazem a diferença em Smartwatches
Anderson Façanha, Designer na CI&T

Publicada em: Design
0 comentários
7 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
565
No SlideShare
0
A partir de incorporações
0
Número de incorporações
25
Ações
Compartilhamentos
0
Downloads
11
Comentários
0
Gostaram
7
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide
  • Segundo um estudo do psicólogo Irving Bierdeman 30 mil objetos prontamente identificaveis pelo ser humano
  • eles têm apenas uma função principal
  • A maioria dos eletrodomésticos e alguns aplicativos são construídos inteiramente em torno de uma microinteração.
  • Tinder
  • A diferença entre um produto que você ama e um produto que você tolera, muitas vezes, está em suas microinterações com ele.
  • Botão que indica através de leds qual o nivel da bateria do macbook pro
  • Amazon Echo - Assitente pessoal É possível perguntar sobre o tempo, notícias e fazer buscas na internet, uma vez que ele fica conectado à sua rede WiFi.
  • Cada vez que você muda uma configuração, sincroniza seu dispositivo, configura um alarme, cria um password, faz login em um site, define uma mensagem de status, favorita ou ‘curte’ algo, você está engajando com uma microinteração. Elas estão em todo lugar: nos dispositivos que carregamos, nos eletrodomésticos da nossa casa, nos aplicativos no nosso celular e computador, e até embutidos nos ambientes em que vivemos e trabalhamos. Muitos produtos e aplicações são construídos inteiramente em torno de uma única microinteração.”

    realizar uma única tarefa
    interagindo com um único pedaço de dados, tais como a temperatura
    controle de um processo em curso, tais como o volume da música
  • Ja trabalhou no Youtube e foi responsavel por remover as estrelas do rating e inserir apenas um botão de like e deslike
  • Olhes os detalhes na evolução da barra de rolagem, desde os primórdios Xerox star 1981 até a rolagem no watch os 2
  • Para explicar melhor Dan Saffer dividiu a estrtura das microinterações em 4 passos
  • Trigger - que como o próprio nome diz é o gatilho iniciador
    Regras - que são quem nos permite entender melhor, o que pode? o que não pode?
    Feedbacks - que é a forma de contato da microinteração com o usuário
    Loops & moods - mostram qual caminhoi seguir e estão diretamente ligado as regras
  • Gatilho iniciador, iniciam a microinteração,
    pode ser um controle manual, invisivel e de sistema.
    Exemplo: quando uma mensagem chega e o celular vibra, a mensagem é uma trigger para a vibração.
  • Modo silencioso no iPhone
  • Amazoon dash button realiza a ação de adicion ar o produto ha um carrinho de compra para ser entregue em sua casa
  • https://youtu.be/aFYs9zqYpdM
  • Pull to refresh
  • Notification center
  • Shake for photo MotoX
  • Mover a cabeça para habilitar o google glass
  • Postagem
  • Sistema de notificação do instagram que informa algumas informacões basicas sobre minhas postagens
  • detector de fumaça inteligente
    Google nest protect - um brilho verde rápido, quando as luzes se apagam significa que as baterias e sensores estão funcionando. Isso também significa que não há silvos à meia-noite . Se há um problema, como as baterias precisam ser substituídas , o anel de luz vai brilhar amarelo.Também tem um gatilho manual: Apenas um aceno e ele vai lhe dizer o que está errado .
  • determinam a sequência de eventos e o que pode ou não ser feito. Exemplo: quando se ultrapassa o limite de 140 caracteres, o Twitter deverá destacar em vermelho os excedentes.
    Previnir erro humano
  • Dropbox
  • Slack senha do app via link no email
  • Regras são invisíveis, então a única forma de entendermos elas é através do feedback.
    é como entendemos as regras e seu modo de funcionamento. Por exemplo, ao abrir o Waze no estacionamento do trabalho ele pergunta: você está indo para a sua casa?

  • Game do Chrome quando não tem conexão
  • Loop and modesModes são úteis para indicar ao usuário onde estão, para onde vão e o que podem fazer naquele momento Navigation (ios) ou view mode, Loop and modesLoops estão ligados diretamente ou indiretamente através das regrasUtilize loops para estender a vida da micro interação
    os Modes são usados quando uma ação não usual interrompe a microinteração, exemplo: quando você troca a cidade onde mora (obtida pela sua geolocalização) para verificar dados climáticos de outra cidade. Loops, por sua vez, determinam por quanto tempo a microinteração irá se prolongar, se ela se repete ou como ela muda com o tempo, exemplo: a notificação de uma mensagem instantânea ficará por 5 segundos na tela principal até ir para um segundo plano.
    oque acontece ao longo do tempo com a microinteração

  • badges do nike+
  • Onboarding google calendar ensine o user
  • Exemplos de datas
  • O que acontece quando as pessoas usam a microinteraction, pela primeira vez fi? Pela sétima vez? Para o tempo de 700?
  • Handsfree tinder
    http://thenextweb.com/apps/2015/07/07/because-tinder-is-about-your-heart-right/
  • Problemas de fuso com equipe alocado em varios outros paises
  • Digital Day BH - Microinterações

    1. 1. Microinterações: pequenos detalhes que fazem a diferença em Smartwatches Digital Day - Belo Horizonte 19/09/2015
    2. 2. Anderson Façanha Designer CI&T
    3. 3. Microinterações estão presentes em todos lugares...
    4. 4. São momentos contidos em um produto que giram em torno de um único caso de uso
    5. 5. A diferença entre um produto que você ama e um produto que você tolera, muitas vezes, está em suas microinterações com ele.
    6. 6. 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 Saffer Criador do termo Microinterações em 2013
    7. 7. 280 horas para evolução de um dos elementos de design mais vistos na história
    8. 8. 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 , , ...
    9. 9. A primeira coisa a saber sobre design em grande escala é que as pequenas coisas realmente importam " “ Margaret Gould Stewart Diretora design de produtos no Facebook
    10. 10. Watch OS 2 2015 OS X Lion 2011 IOS 2007 Mac OS X 2001 Win XP 2001 Mac OS 8 1997 Win 3.0 1990 NeXTstep 1989 Windows 1985 Macintosh 1984 Apple Lisa 1983 Xerox Star 1981
    11. 11. 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
    12. 12. Estrutura da microinteração
    13. 13. TRIGGER Iniciam a microinteração: ● Manual ● Invisível ● Sistema
    14. 14. TRIGGER MANUAL
    15. 15. TRIGGER INVISÍVEL
    16. 16. TRIGGER SISTEMA
    17. 17. RULES Conjunto de regras invisiveis: ● como funciona? ● o que pode e o que não pode?
    18. 18. Previna erros humanos!
    19. 19. Informe o que esta acontecendo de errado
    20. 20. Notifique itens importantes para seu usuário
    21. 21. 1 2 3 4 5 6 FINAL
    22. 22. Não comece do zero ● Qual device está em uso? ● GPS habilitado? ● Câmera? ● Está chovendo? ● A bateria está carregada?
    23. 23. Microinterações são diálogos: ● permite aprender as regras. ● fale com o usuáro FEEDBACK
    24. 24. Seja humano em seus feedbacks :)
    25. 25. Ajude seu usuário a se localizar: ● onde estou ● para onde vou ● o que posso fazerLOOPS AND MOODS
    26. 26. O que acontece com a microinteração quando é utilizada pela primeira vez? Pela segunda? Daqui 10 anos?
    27. 27. Mas, e na prática, como fica a estrutura da microinteração?
    28. 28. Trigger do sistema Rules Feedback Loops and moods Alcatel Watch, China
    29. 29. Trigger manual Rules Feedback Loops and moods iCab, EUA
    30. 30. Trigger manual Rules Feedback Loops and moods Sales Force Brasil Kirin, CI&T
    31. 31. Não tente fazer mini aplicativos de smartphones
    32. 32. Os detalhes não são detalhes. Eles fazem o design " “ Charles Eames (1907 - 1978)
    33. 33. 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
    34. 34. Anderson Façanha Designer CI&T andersoncf@ciandt.com @kardelly behance.net/kardelly Obrigado

    ×