SlideShare uma empresa Scribd logo
1 de 68
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 engajando em uma microinteração
"
“
Dan Saffer
Criador do termo Microinterações em 2013
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
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 Stewart
Diretora design de produtos no Facebook
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
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
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.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çanha
Designer CI&T
andersoncf@ciandt.com
@kardelly
behance.net/kardelly
Obrigado

Mais conteúdo relacionado

Semelhante a Microinterações: pequenos detalhes que fazem a diferença em smartwatches

FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design MobileFrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design MobileHorácio Soares
 
Os Desafios do Design Mobile - Jun/2012
Os Desafios do Design Mobile - Jun/2012Os Desafios do Design Mobile - Jun/2012
Os Desafios do Design Mobile - Jun/2012Horácio Soares
 
Mobile First (ou boas razões para investir em Mobile)
Mobile First (ou boas razões para investir em Mobile)Mobile First (ou boas razões para investir em Mobile)
Mobile First (ou boas razões para investir em Mobile)Edu Agni
 
Natural User Interface Design
Natural User Interface DesignNatural User Interface Design
Natural User Interface DesignEdu Agni
 
Projetando Mobile
Projetando MobileProjetando Mobile
Projetando MobiledevMob
 
O mercado de trabalho para a T.I.
O mercado de trabalho para a T.I.O mercado de trabalho para a T.I.
O mercado de trabalho para a T.I.Yan Magalhães
 
Memorias das trincheiras
Memorias das trincheirasMemorias das trincheiras
Memorias das trincheirasElton Minetto
 
As vantagens de se tornar um desenvolvedor mobile
As vantagens de se tornar um desenvolvedor mobileAs vantagens de se tornar um desenvolvedor mobile
As vantagens de se tornar um desenvolvedor mobileDirceu Belém
 
User experience e a vida real do time Dev
User experience e a vida real do time DevUser experience e a vida real do time Dev
User experience e a vida real do time DevGiu Vicente
 
Interfaces Naturais
Interfaces NaturaisInterfaces Naturais
Interfaces NaturaisEdu Agni
 
Campus Mobile 2013 - Design e usabilidade
Campus Mobile 2013 - Design e usabilidadeCampus Mobile 2013 - Design e usabilidade
Campus Mobile 2013 - Design e usabilidadeLeandro Biazon
 
Chatbots e micromomentos - Social Media Week SP
Chatbots e micromomentos  - Social Media Week SPChatbots e micromomentos  - Social Media Week SP
Chatbots e micromomentos - Social Media Week SPRicardo Grobel
 
Google glass nos eventos. Entrevista Event Point.
Google glass nos eventos. Entrevista Event Point.Google glass nos eventos. Entrevista Event Point.
Google glass nos eventos. Entrevista Event Point.Luis Rasquilha
 
Criando produtos e serviços reais para o mundo virtual.
Criando produtos e serviços reais para o mundo virtual.Criando produtos e serviços reais para o mundo virtual.
Criando produtos e serviços reais para o mundo virtual.Jane Vita
 

Semelhante a Microinterações: pequenos detalhes que fazem a diferença em smartwatches (20)

FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design MobileFrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
 
Os Desafios do Design Mobile - Jun/2012
Os Desafios do Design Mobile - Jun/2012Os Desafios do Design Mobile - Jun/2012
Os Desafios do Design Mobile - Jun/2012
 
Mobile First (ou boas razões para investir em Mobile)
Mobile First (ou boas razões para investir em Mobile)Mobile First (ou boas razões para investir em Mobile)
Mobile First (ou boas razões para investir em Mobile)
 
Revista programar 36
Revista programar 36Revista programar 36
Revista programar 36
 
Natural User Interface Design
Natural User Interface DesignNatural User Interface Design
Natural User Interface Design
 
Projetando Mobile
Projetando MobileProjetando Mobile
Projetando Mobile
 
Prototipação
PrototipaçãoPrototipação
Prototipação
 
O mercado de trabalho para a T.I.
O mercado de trabalho para a T.I.O mercado de trabalho para a T.I.
O mercado de trabalho para a T.I.
 
Memorias das trincheiras
Memorias das trincheirasMemorias das trincheiras
Memorias das trincheiras
 
As vantagens de se tornar um desenvolvedor mobile
As vantagens de se tornar um desenvolvedor mobileAs vantagens de se tornar um desenvolvedor mobile
As vantagens de se tornar um desenvolvedor mobile
 
User experience e a vida real do time Dev
User experience e a vida real do time DevUser experience e a vida real do time Dev
User experience e a vida real do time Dev
 
Interfaces Naturais
Interfaces NaturaisInterfaces Naturais
Interfaces Naturais
 
Campus Mobile 2013 - Design e usabilidade
Campus Mobile 2013 - Design e usabilidadeCampus Mobile 2013 - Design e usabilidade
Campus Mobile 2013 - Design e usabilidade
 
UX.. Vale a pena?
UX.. Vale a pena?UX.. Vale a pena?
UX.. Vale a pena?
 
Pessoas Ou Processos
Pessoas Ou ProcessosPessoas Ou Processos
Pessoas Ou Processos
 
Chatbots e micromomentos - Social Media Week SP
Chatbots e micromomentos  - Social Media Week SPChatbots e micromomentos  - Social Media Week SP
Chatbots e micromomentos - Social Media Week SP
 
02 sxsw guilherme gomide complete
02 sxsw guilherme gomide complete02 sxsw guilherme gomide complete
02 sxsw guilherme gomide complete
 
Novas Tendências Em TI
Novas Tendências Em TINovas Tendências Em TI
Novas Tendências Em TI
 
Google glass nos eventos. Entrevista Event Point.
Google glass nos eventos. Entrevista Event Point.Google glass nos eventos. Entrevista Event Point.
Google glass nos eventos. Entrevista Event Point.
 
Criando produtos e serviços reais para o mundo virtual.
Criando produtos e serviços reais para o mundo virtual.Criando produtos e serviços reais para o mundo virtual.
Criando produtos e serviços reais para o mundo virtual.
 

Microinterações: pequenos detalhes que fazem a diferença em smartwatches

Notas do Editor

  1. Segundo um estudo do psicólogo Irving Bierdeman 30 mil objetos prontamente identificaveis pelo ser humano
  2. eles têm apenas uma função principal
  3. A maioria dos eletrodomésticos e alguns aplicativos são construídos inteiramente em torno de uma microinteração.
  4. Tinder
  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. Botão que indica através de leds qual o nivel da bateria do macbook pro
  7. 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.
  8. 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
  9. Ja trabalhou no Youtube e foi responsavel por remover as estrelas do rating e inserir apenas um botão de like e deslike
  10. Olhes os detalhes na evolução da barra de rolagem, desde os primórdios Xerox star 1981 até a rolagem no watch os 2
  11. Para explicar melhor Dan Saffer dividiu a estrtura das microinterações em 4 passos
  12. 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
  13. 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.
  14. Modo silencioso no iPhone
  15. Amazoon dash button realiza a ação de adicion ar o produto ha um carrinho de compra para ser entregue em sua casa
  16. https://youtu.be/aFYs9zqYpdM
  17. Pull to refresh
  18. Notification center
  19. Shake for photo MotoX
  20. Mover a cabeça para habilitar o google glass
  21. Postagem
  22. Sistema de notificação do instagram que informa algumas informacões basicas sobre minhas postagens
  23. 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 .
  24. 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
  25. Dropbox
  26. Slack senha do app via link no email
  27. 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?
  28. Game do Chrome quando não tem conexão
  29. 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
  30. badges do nike+
  31. Onboarding google calendar ensine o user
  32. Exemplos de datas
  33. O que acontece quando as pessoas usam a microinteraction, pela primeira vez fi? Pela sétima vez? Para o tempo de 700?
  34. Handsfree tinder http://thenextweb.com/apps/2015/07/07/because-tinder-is-about-your-heart-right/
  35. Problemas de fuso com equipe alocado em varios outros paises