Digital Day BH - Microinterações
-
Upload
anderson-facanha -
Category
Design
-
view
591 -
download
1
Transcript of Digital Day BH - Microinterações
![Page 1: Digital Day BH - Microinterações](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/1.jpg)
Microinterações:pequenos detalhes que fazema diferença em Smartwatches
Digital Day - Belo Horizonte19/09/2015
![Page 2: Digital Day BH - Microinterações](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/2.jpg)
Anderson FaçanhaDesigner CI&T
![Page 3: Digital Day BH - Microinterações](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/3.jpg)
Microinterações estão
presentes em todos lugares...
![Page 4: Digital Day BH - Microinterações](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/4.jpg)
Sao momentos
contidos em um
produto que giram
em torno de um
unico caso de uso
![Page 5: Digital Day BH - Microinterações](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/5.jpg)
![Page 6: Digital Day BH - Microinterações](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/6.jpg)
![Page 7: Digital Day BH - Microinterações](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/7.jpg)
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](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/8.jpg)
![Page 9: Digital Day BH - Microinterações](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/9.jpg)
![Page 10: Digital Day BH - Microinterações](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/10.jpg)
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](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/11.jpg)
280 horaspara evolução de um dos elementos
de design mais vistos na história
![Page 12: Digital Day BH - Microinterações](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/12.jpg)
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](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/13.jpg)
![Page 14: Digital Day BH - Microinterações](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/14.jpg)
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](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/15.jpg)
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](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/16.jpg)
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](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/17.jpg)
Estrutura da microinteração
![Page 18: Digital Day BH - Microinterações](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/18.jpg)
![Page 19: Digital Day BH - Microinterações](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/19.jpg)
TRIGGER
Iniciam a microinteração:
● Manual
● Invisível
● Sistema
![Page 20: Digital Day BH - Microinterações](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/20.jpg)
TRIGGERMANUAL
![Page 21: Digital Day BH - Microinterações](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/21.jpg)
![Page 22: Digital Day BH - Microinterações](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/22.jpg)
![Page 24: Digital Day BH - Microinterações](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/24.jpg)
TRIGGERINVISÍVEL
![Page 25: Digital Day BH - Microinterações](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/25.jpg)
![Page 26: Digital Day BH - Microinterações](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/26.jpg)
![Page 27: Digital Day BH - Microinterações](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/27.jpg)
![Page 28: Digital Day BH - Microinterações](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/28.jpg)
![Page 29: Digital Day BH - Microinterações](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/29.jpg)
TRIGGERSISTEMA
![Page 30: Digital Day BH - Microinterações](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/30.jpg)
![Page 31: Digital Day BH - Microinterações](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/31.jpg)
![Page 32: Digital Day BH - Microinterações](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/32.jpg)
![Page 33: Digital Day BH - Microinterações](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/33.jpg)
RULES
Conjunto de regras invisiveis:
● como funciona?
● o que pode e o que não pode?
![Page 34: Digital Day BH - Microinterações](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/34.jpg)
![Page 35: Digital Day BH - Microinterações](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/35.jpg)
![Page 36: Digital Day BH - Microinterações](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/36.jpg)
Previna
erros humanos!
![Page 37: Digital Day BH - Microinterações](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/37.jpg)
Informe o que esta
acontecendo de
errado
![Page 38: Digital Day BH - Microinterações](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/38.jpg)
Notifique itens
importantes para seu
usuário
![Page 39: Digital Day BH - Microinterações](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/39.jpg)
1 2 3 4 5 6 FINAL
![Page 40: Digital Day BH - Microinterações](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/40.jpg)
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](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/41.jpg)
![Page 42: Digital Day BH - Microinterações](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/42.jpg)
![Page 43: Digital Day BH - Microinterações](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/43.jpg)
Microinterações são diálogos:
● permite aprender as regras.
● fale com o usuároFEEDBACK
![Page 44: Digital Day BH - Microinterações](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/44.jpg)
Seja humano
em seus feedbacks :)
![Page 45: Digital Day BH - Microinterações](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/45.jpg)
![Page 46: Digital Day BH - Microinterações](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/46.jpg)
![Page 47: Digital Day BH - Microinterações](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/47.jpg)
![Page 48: Digital Day BH - Microinterações](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/48.jpg)
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](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/49.jpg)
![Page 50: Digital Day BH - Microinterações](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/50.jpg)
![Page 51: Digital Day BH - Microinterações](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/51.jpg)
O que acontece com a microinteração
quando é utilizada pela primeira vez?
Pela segunda? Daqui 10 anos?
![Page 52: Digital Day BH - Microinterações](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/52.jpg)
![Page 53: Digital Day BH - Microinterações](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/53.jpg)
![Page 54: Digital Day BH - Microinterações](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/54.jpg)
Mas, e na prática, como fica
a estrutura da microinteração?
![Page 55: Digital Day BH - Microinterações](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/55.jpg)
Trigger do sistema
Rules Feedback Loops and moods
Alcatel Watch, China
![Page 56: Digital Day BH - Microinterações](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/56.jpg)
Trigger manual
Rules Feedback Loops and moods
iCab, EUA
![Page 57: Digital Day BH - Microinterações](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/57.jpg)
Trigger manual
Rules Feedback Loops and moods
Sales Force Brasil Kirin, CI&T
![Page 58: Digital Day BH - Microinterações](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/58.jpg)
Não tente fazer
mini aplicativos
de smartphones
![Page 60: Digital Day BH - Microinterações](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/60.jpg)
![Page 61: Digital Day BH - Microinterações](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/61.jpg)
![Page 62: Digital Day BH - Microinterações](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/62.jpg)
![Page 63: Digital Day BH - Microinterações](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/63.jpg)
![Page 64: Digital Day BH - Microinterações](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/64.jpg)
![Page 65: Digital Day BH - Microinterações](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/65.jpg)
![Page 66: Digital Day BH - Microinterações](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/66.jpg)
Os detalhes não são detalhes.
Eles fazem o design "“
Charles Eames(1907 - 1978)
![Page 67: Digital Day BH - Microinterações](https://reader033.fdocument.pub/reader033/viewer/2022051710/58ee67841a28abbf078b4621/html5/thumbnails/67.jpg)
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