Digital Day BH - Microinterações
Transferir como PPTX, PDF7 gostaram762 visualizações
Microinterações são pequenos detalhes em dispositivos como smartwatches que melhoram a experiência do usuário. Elas podem ser acionadas manualmente pelo usuário ou pelo sistema e seguem regras de funcionamento. Feedback é importante para guiar o usuário e melhorar a interação repetida com o tempo.
Digital Day BH - Microinterações
- 1. Microinterações: pequenos detalhes que fazem a diferença em Smartwatches Digital Day - Belo Horizonte 19/09/2015
- 3. Microinterações estão presentes em todos lugares...
- 4. São momentos contidos em um produto que giram em torno de um único caso de uso
- 7. A diferença entre um produto que você ama e um produto que você tolera, muitas vezes, está em suas microinterações com ele.
- 10. 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
- 11. 280 horas para evolução de um dos elementos de design mais vistos na história
- 12. 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 , , ...
- 14. 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
- 15. 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
- 16. 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
- 19. TRIGGER Iniciam a microinteração: ● Manual ● Invisível ● Sistema
- 20. TRIGGER MANUAL
- 29. TRIGGER SISTEMA
- 33. RULES Conjunto de regras invisiveis: ● como funciona? ● o que pode e o que não pode?
- 37. Informe o que esta acontecendo de errado
- 38. Notifique itens importantes para seu usuário
- 39. 1 2 3 4 5 6 FINAL
- 40. Não comece do zero ● Qual device está em uso? ● GPS habilitado? ● Câmera? ● Está chovendo? ● A bateria está carregada?
- 43. Microinterações são diálogos: ● permite aprender as regras. ● fale com o usuáro FEEDBACK
- 44. Seja humano em seus feedbacks :)
- 48. Ajude seu usuário a se localizar: ● onde estou ● para onde vou ● o que posso fazerLOOPS AND MOODS
- 51. O que acontece com a microinteração quando é utilizada pela primeira vez? Pela segunda? Daqui 10 anos?
- 54. Mas, e na prática, como fica a estrutura da microinteração?
- 55. Trigger do sistema Rules Feedback Loops and moods Alcatel Watch, China
- 56. Trigger manual Rules Feedback Loops and moods iCab, EUA
- 57. Trigger manual Rules Feedback Loops and moods Sales Force Brasil Kirin, CI&T
- 58. Não tente fazer mini aplicativos de smartphones
- 66. Os detalhes não são detalhes. Eles fazem o design " “ Charles Eames (1907 - 1978)
- 67. 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
Notas do Editor
- #4: Segundo um estudo do psicólogo Irving Bierdeman 30 mil objetos prontamente identificaveis pelo ser humano
- #5: eles têm apenas uma função principal
- #6: A maioria dos eletrodomésticos e alguns aplicativos são construídos inteiramente em torno de uma microinteração.
- #7: Tinder
- #8: A diferença entre um produto que você ama e um produto que você tolera, muitas vezes, está em suas microinterações com ele.
- #9: Botão que indica através de leds qual o nivel da bateria do macbook pro
- #10: 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.
- #11: 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
- #15: Ja trabalhou no Youtube e foi responsavel por remover as estrelas do rating e inserir apenas um botão de like e deslike
- #16: Olhes os detalhes na evolução da barra de rolagem, desde os primórdios Xerox star 1981 até a rolagem no watch os 2
- #18: Para explicar melhor Dan Saffer dividiu a estrtura das microinterações em 4 passos
- #19: 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
- #20: 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.
- #22: Modo silencioso no iPhone
- #23: Amazoon dash button realiza a ação de adicion ar o produto ha um carrinho de compra para ser entregue em sua casa
- #24: https://youtu.be/aFYs9zqYpdM
- #26: Pull to refresh
- #27: Notification center
- #28: Shake for photo MotoX
- #29: Mover a cabeça para habilitar o google glass
- #31: Postagem
- #32: Sistema de notificação do instagram que informa algumas informacões basicas sobre minhas postagens
- #33: 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 .
- #34: 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
- #42: Dropbox
- #43: Slack senha do app via link no email
- #44: 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?
- #46: Game do Chrome quando não tem conexão
- #49: 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
- #50: badges do nike+
- #51: Onboarding google calendar ensine o user
- #53: Exemplos de datas
- #54: O que acontece quando as pessoas usam a microinteraction, pela primeira vez fi? Pela sétima vez? Para o tempo de 700?
- #60: Handsfree tinder http://thenextweb.com/apps/2015/07/07/because-tinder-is-about-your-heart-right/
- #65: Problemas de fuso com equipe alocado em varios outros paises