CSS e UX - Speaker Deck

Slide 1

Slide 1 text

CSS e UX @raphaelfabeni a importância dos detalhes

Slide 2

Slide 2 text

@raphaelfabeni raphaelfabeni.com.br

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

bit.ly/css-sp

Slide 5

Slide 5 text

+ de 900 inscritos falar, discutir, aprender sobre CSS

Slide 6

Slide 6 text

Quero apresentar um tema! bit.ly/meetup-css-quero-palestrar Quero sediar uma edição! bit.ly/meetup-css-quero-sediar

Slide 7

Slide 7 text

ANTES DE COMEÇARMOS... É a verdade absoluta? É a fórmula do sucesso?

Slide 8

Slide 8 text

CSS e UX a importância dos detalhes

Slide 9

Slide 9 text

CSS e UX a importância dos detalhes

Slide 10

Slide 10 text

detalhes

Slide 11

Slide 11 text

٩◔‿◔۶

Slide 12

Slide 12 text

(◕︵◕)

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

Vindo para o mundo da web…

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

Usabilidade Atendimento humano (mundo real) Prevenção de erros Detalhes Experiência se adequa ao usuário

Slide 21

Slide 21 text

X Y Arquitetura Modularização Componentes Z

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

Componentes estáticos ಥ_ಥ

Slide 24

Slide 24 text

Enviar

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

Enviar

Slide 27

Slide 27 text

O que é mais triste? a) Ter um feedback escondido b) Não ter um feedback c) n.d.a.

Slide 28

Slide 28 text

O usuário não tem que adivinhar o que aconteceu...

Slide 29

Slide 29 text

... e se ele tiver que parar pra pensar? :(

Slide 30

Slide 30 text

Dá p/ o CSS nos ajudar um pouco \o/

Slide 31

Slide 31 text

Animações não são apenas detalhes...

Slide 32

Slide 32 text

... elas podem ser funcionais.

Slide 33

Slide 33 text

lista de itens

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

item novo

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

Calma…

Slide 38

Slide 38 text

Vamos entender primeiro as coisa tudo..

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

trigger y feedback y x

Slide 42

Slide 42 text

opacity background height transform entering-x increase show-color-item show-item

Slide 43

Slide 43 text

increase entering-x show-item show- color-item 4 animações especíﬁcas

Slide 44

Slide 44 text

increase show-item entering-x show-color-item increase show-item entering-x show-color-item

Slide 45

Slide 45 text

@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

Slide 46

Slide 46 text

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; }

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

bit.ly/lab-css3

Slide 53

Slide 53 text

daneden.github.io/animate.css/

Slide 54

Slide 54 text

github.com/chenglou/react-motion

Slide 55

Slide 55 text

Não tempos tempo parar ler manuais.

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

Então..

Slide 59

Slide 59 text

Já sei..   Vou animar tudão!

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

Não é porque você pode que você deve…

Slide 62

Slide 62 text

O que realmente importa, é que você não deixe seu usuário perdido…

Slide 63

Slide 63 text

e que ele tenha uma boa experiência ao realizar a sua tarefa.

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

Queria lhes apresentar a Sra. Ambrozina…

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

Valeu! @raphaelfabeni