Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS e UX

C4d7da8ef43f08bdbf8cc23fd822c7f9?s=47 Raphael Fabeni
February 26, 2015

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.

C4d7da8ef43f08bdbf8cc23fd822c7f9?s=128

Raphael Fabeni

February 26, 2015
Tweet

Transcript

  1. CSS e UX @raphaelfabeni a importância dos detalhes

  2. @raphaelfabeni raphaelfabeni.com.br

  3. None
  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. (◕︵◕)

  13. None
  14. Vindo para o mundo da web…

  15. None
  16. None
  17. None
  18. None
  19. None
  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

  22. None
  23. Componentes estáticos ಥ_ಥ

  24. Enviar

  25. None
  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

  34. None
  35. item novo

  36. None
  37. Calma…

  38. Vamos entender primeiro as coisa tudo..

  39. None
  40. None
  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; }
  47. None
  48. None
  49. None
  50. None
  51. None
  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.

  56. None
  57. None
  58. Então..

  59. Já sei.. 
 Vou animar tudão!

  60. None
  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…

  66. None
  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