CSS e UX

Talk que fala sobre a importância dos detalhes na experiência do usuário e como eles podem influenciar no resultado final.

Transcript

1. CSS e UX @raphaelfabeni a importância dos detalhes
2. @raphaelfabeni raphaelfabeni.com.br
4. bit.ly/css-sp
5. + de 900 inscritos falar, discutir, aprender sobre CSS
6. Quero apresentar um tema! bit.ly/meetup-css-quero-palestrar Quero sediar uma edição! bit.ly/meetup-css-quero-sediar
7. ANTES DE COMEÇARMOS... É a verdade absoluta? É a fórmula do sucesso?
8. CSS e UX a importância dos detalhes
9. CSS e UX a importância dos detalhes
10. detalhes
11. ٩◔‿◔۶
12. (◕︵◕)
14. Vindo para o mundo da web…
20. Usabilidade Atendimento humano (mundo real) Prevenção de erros Detalhes Experiência se adequa ao usuário
21. X Y Arquitetura Modularização Componentes Z
23. Componentes estáticos ಥ_ಥ
24. Enviar
26. Enviar
27. O que é mais triste? a) Ter um feedback escondido b) Não ter um feedback c) n.d.a.
28. O usuário não tem que adivinhar o que aconteceu...
29. ... e se ele tiver que parar pra pensar? :(
30. Dá p/ o CSS nos ajudar um pouco \o/
31. Animações não são apenas detalhes...
32. ... elas podem ser funcionais.
33. lista de itens
35. item novo
37. Calma…
38. Vamos entender primeiro as coisa tudo..
41. trigger y feedback y x
42. opacity background height transform entering-x increase show-color-item show-item
43. increase entering-x show-item show- color-item 4 animações específicas
44. increase show-item entering-x show-color-item increase show-item entering-x show-color-item
45. @keyframes show-item { from { opacity: 0; } to { opacity: 1; } } @keyframes increase { from { max-height: 0px; } to { max-height: 100px; } } @keyframes entering-x { 0% { transform:translateX(-100%); } 100% { transform: translateX(0); } } @keyframes show-color-item { 0%, 80% { background: purple; } 100% { background: gray; } } melhor que position
46. http://bit.ly/css-list-ux .new { animation: increase .3s ease both, show-item .4s ease .1s both, entering-x .7s cubic-bezier(0.680, -0.550, 0.265, 1.550) .1s both, show-color-tem 2s ease both; }
52. bit.ly/lab-css3
53. daneden.github.io/animate.css/
54. github.com/chenglou/react-motion
55. Não tempos tempo parar ler manuais.
58. Então..
59. Já sei.. 
 Vou animar tudão!
61. Não é porque você pode que você deve…
62. O que realmente importa, é que você não deixe seu usuário perdido…
63. e que ele tenha uma boa experiência ao realizar a sua tarefa.
64. etalhes detalhes detalhes detalhes detalhes detalh etalhes detalhes detalhes detalhes detalhes detalh etalhes detalhes detalhes detalhes detalhes detalh etalhes detalhes detalhes detalhes detalhes detalh etalhes detalhes detalhes detalhes detalhes detalh etalhes detalhes detalhes detalhes detalhes detalh etalhes detalhes detalhes detalhes detalhes detalh etalhes detalhes detalhes detalhes detalhes detalh etalhes detalhes detalhes detalhes detalhes detalh etalhes detalhes detalhes detalhes detalhes detalh etalhes detalhes detalhes detalhes detalhes detalh etalhes detalhes detalhes detalhes detalhes detalh usuário prevenção erro ajuda usuário interfaces intuitivas animação css usabilidade
65. Queria lhes apresentar a Sra. Ambrozina…
67. Referências - Post Facebook/Twitter - 10 Heurísticas de Nielsen. Uma fórmula pra evitar erros básicos de usabilidade - Blog Caelum - Introdução e boas práticas em UX Design - Fabricio Teixeira - Casa do Código - Microinteractions: why details matter - Dan Saffer - Smart Design - Enriquecendo seus sistemas com Microinteractions - Blog Caelum - What is a microinteraction? - Dan Saffer - microinteractions.com - 7 secrets for enhancing UX with micro-interactions - Dymtro Svarytsevych - webdesignerdepot.com - Experiência é tudo - Grupo TV1 - TrendMe
68. Valeu! @raphaelfabeni