User Experience para Developers

Slide 1

Slide 1 text

User Experience para Developers @shiota | www.eshiota.com | [email protected] | Dev in Sampa 2011

Slide 2

Slide 2 text

Entendendo o problema: 1 UX vs. Devs

Slide 3

Slide 3 text

Quero fazer meu site que vai revolucionar a Interwebz!

Slide 4

Slide 4 text

O Produto

Slide 5

Slide 5 text

Arquitetura da Informação Design Visual Ergonomia Design de Interação Estratégia de Conteúdo Valores de Negócio Arquitetura de Software Desenvolvimento de Front-end Desenvolvimento de Back-end Infraestrutura Quality Assurance

Slide 6

Slide 6 text

User Experience?

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Developers?

Slide 9

Slide 9 text

Slide 10

Slide 10 text

#comofas/

Slide 11

Slide 11 text

Golden Rule para devs

Slide 12

Slide 12 text

O usuário NÃO é burro. VOCÊ que é convencido demais. #prontofalei

Slide 13

Slide 13 text

Keep hearing “nobody reads the manual”... people would RTFM if the FM was a treat, not a chore (and treated user's time as HIGHLY valued). — Kathy Sierra

Slide 14

Slide 14 text

Entendendo o usuário: 2 Maslow

Slide 15

Slide 15 text

Fisiologia Segurança Relacionamento Estima Realização Testes/ Funcionalidade Testes/Performance/ AI AI/Features AI/Customização Visual/Emoção/ Conforto/Desejo Maslow vs. Produto

Slide 16

Slide 16 text

Entendendo o usuário: 2.a Fisiologia » Funcionalidade

Slide 17

Slide 17 text

O produto precisa funcionar É simples: se o produto não funciona, o usuário vai embora. Fisiologia » Testes/Funcionalidade

Slide 18

Slide 18 text

Fisiologia » Testes/Funcionalidade [Vídeo] Bad: A loja da Vivo simplesmente não funciona fora do IE. Nada é clicável.

Slide 19

Slide 19 text

Fisiologia » Testes/Funcionalidade [Vídeo] Bad: Ao clicar no input ﬁeld, a página magica-bizarramente dá um refresh.

Slide 20

Slide 20 text

Fisiologia » Testes/Funcionalidade Unit tests, continuous integration, basic stuff Teste nos browsers e devices do público-alvo Eat your own food: use o produto, convide pessoas para testar Não confie no código (lembre-se: não seja convencido)

Slide 21

Slide 21 text

Entendendo o usuário: 2.b Segurança » Testes/Performance

Slide 22

Slide 22 text

Segurança » Testes/Performance O usuário precisa se sentir seguro e confiante “Estou fazendo a coisa certa? Será que foi? Será de deu erro? Será que isso funciona mesmo? Será que vão invadir minha conta? Será? Será?”

Slide 23

Slide 23 text

Segurança » Testes/Performance [Vídeo] Good: As mensagens de feedback do Twitter dão segurança ao usuário.

Slide 24

Slide 24 text

Segurança » Testes/Performance Bad: Funcionamento duvidoso e erros gramaticais geram insegurança pelo usuário.

Slide 25

Slide 25 text

Segurança » Testes/Performance [Vídeo] Bad: Muitos spinners, muito AJAX, alto risco de quebrar o funcionamento.

Slide 26

Slide 26 text

Segurança » Testes/Performance Bad: Cadastro que pedem dados sensíveis logo de início geram desconﬁança.

Slide 27

Slide 27 text

Segurança » Testes/Performance Bad: Opções fora da lógica tradicional geram confusão e erros.

Slide 28

Slide 28 text

Páginas rápidas: otimize na infra, no front e no back Feedback: spinners e loadings nos AJAX Feedback: o usuário deve saber o que deu certo e o que deu errado Revise o conteúdo e o layout: gramática e harmonia aumentam a confiança Segurança » Testes/Performance

Slide 29

Slide 29 text

Don’t be evil: não peça dados sensíveis se não forem necessários Previna erros: quanto menor a chance de erros, maior a confiança Segurança » Testes/Performance

Slide 30

Slide 30 text

Entendendo o usuário: 2.c Relacionamento » AI/Features

Slide 31

Slide 31 text

Relacionamento » AI/Features O usuário quer se comunicar, usar, relacionar As features e as informações devem ser relevantes, fáceis de achar e de usar. “O que eu ganho com isso?”

Slide 32

Slide 32 text

Relacionamento » AI/Features [Vídeo] Bad: O extrato do TAM Fidelidade é feito em outro site, com cadastro e interface separados.

Slide 33

Slide 33 text

Relacionamento » AI/Features [Vídeo] Bad: Um ponto de interrupção no ﬂow pode fazer com que o usuário desista da ação.

Slide 34

Slide 34 text

Relacionamento » AI/Features Good: Logo de início o usuário sabe do que se trata, o que vai ganhar e quanto custa.

Slide 35

Slide 35 text

Relacionamento » AI/Features Good: A página de cadastro deixa claro as principais dúvidas — quando, como, o que ocorre no ﬁnal e se é possível cancelar.

Slide 36

Slide 36 text

Pergunte ao usuário o que ele quer Não apenas pergunte: observe o usuário Navegação consistente e bem estruturada Padrões de interface: botões são botões, links são links Estratégia de conteúdo: a mensagem deve ser clara, consistente. Invista em copywriting. Relacionamento » AI/Features

Slide 37

Slide 37 text

Transparência: seja claro e honesto sobre o que o usuário vai ganhar/perder Facilite: use tutoriais, screencasts ou passo-a- passo Proporcione uma experiência fluida Evite pontos de dúvida ou falha: o usuário facilmente desiste da ação Relacionamento » AI/Features

Slide 38

Slide 38 text

Entendendo o usuário: 2.d Estima » AI/Customização

Slide 39

Slide 39 text

Estima » AI/Customização O usuário quer ter controle e ser bem tratado É como em um restaurante: você quer ser bem atendido e quer poder pedir seu prato sem salsinha.

Slide 40

Slide 40 text

Estima » AI/Customização Bad: Erro nada amigável e agressivo pode assustar o usuário.

Slide 41

Slide 41 text

Estima » AI/Customização [Vídeo] Good: O Twitter usa mensagens amigáveis e humanas.

Slide 42

Slide 42 text

Estima » AI/Customização Good: O Wordpress oferece muitos controles para customização dos posts.

Slide 43

Slide 43 text

Estima » AI/Customização Good: O Google Plus permite controle total sobre quem vai poder ler o post.

Slide 44

Slide 44 text

Estima » AI/Customização Good: O Facebook tem um controle granular sobre quem vê o quê.

Slide 45

Slide 45 text

Não seja técnico ou agressivo nos erros: o usuário não tem culpa Liberdade: ofereça controles, customizações, opções de privacidade e notificação O usuário quer cumprir tarefas o mais rápido possível: otimize o flow No front-end: tabindex, autofocus, autocomplete, AJAX checks Responsive design: layouts que se adaptam ao contexto Estima » AI/Customização

Slide 46

Slide 46 text

Entendendo o usuário: 2.e Realização » Visual/Emoção/ Conforto/Desejo

Slide 47

Slide 47 text

Realização » Visual/Emoção/Conforto/Desejo O usuário quer se sentir satisfeito, feliz Tempo é valioso e irreversível. Não gaste o tempo do usuário sem que no final ele se sinta realizado com o que fez.

Slide 48

Slide 48 text

Realização » Visual/Emoção/Conforto/Desejo 12px/14px Bad: O texto no terra.com.br possui corpo e entrelinha pequenos, diﬁcultando a leitura em telas pequenas ou resoluções de dpi alto.

Slide 49

Slide 49 text

Realização » Visual/Emoção/Conforto/Desejo 15px/21px Good: O G1 utiliza um corpo maior e entrelinha proporcional de 1.4em, proporcionando boa legibilidade e maior conforto.

Slide 50

Slide 50 text

Realização » Visual/Emoção/Conforto/Desejo 15px/21px Este é o mesmo texto do terra.com.br, com o corpo e entrelinha do G1.

Slide 51

Slide 51 text

Realização » Visual/Emoção/Conforto/Desejo 12px/14px Comparando, antes era assim: bem menos legível.

Slide 52

Slide 52 text

Realização » Visual/Emoção/Conforto/Desejo [Vídeo] Good: O Google Plus é exemplo de animações sutis e naturais que contribuem para a experiência do usuário.

Slide 53

Slide 53 text

Realização » Visual/Emoção/Conforto/Desejo Good: O app do Highrise oferece um jogo da velha para distrair enquanto o banco de dados é baixado.

Slide 54

Slide 54 text

Legibilidade: give typography some love Eye candy: o visual deve complementar a experiência Design de interação: efeitos e transições melhoram a experiência Seja amigável: os usuários tendem a voltar Pequenas recompensas, easter eggs Realização » Visual/Emoção/Conforto/Desejo

Slide 55

Slide 55 text

Colocando na prática: 3 #comofas/

Slide 56

Slide 56 text

Colocando na prática: 3.a Soluções prontas

Slide 57

Slide 57 text

Soluções prontas Bootstrap, from Twitter http://twitter.github.com/bootstrap/

Slide 58

Slide 58 text

Soluções prontas jQuery Mobile http://www.jquerymobile.com

Slide 59

Slide 59 text

Colocando na prática: 3.b Ferramentas

Slide 60

Slide 60 text

Ferramentas Spin.js http://fgnass.github.com/spin.js/

Slide 61

Slide 61 text

Ferramentas Google Web Fonts http://www.google.com/webfonts

Slide 62

Slide 62 text

Ferramentas Typekit http://typekit.com/

Slide 63

Slide 63 text

Ferramentas CSS 3 Button Generator http://css3buttongenerator.com/

Slide 64

Slide 64 text

Ferramentas Adobe Kuler http://kuler.adobe.com/

Slide 65

Slide 65 text

Colocando na prática: 3.b Referências

Slide 66

Slide 66 text

Referências JavaScript: The Good Parts

Slide 67

Slide 67 text

Referências Eloquent JavaScript

Slide 68

Slide 68 text

Referências Hardboiled Web Design

Slide 69

Slide 69 text

Referências HTML 5 for Web Designers

Slide 70

Slide 70 text

Referências Responsive Web Design

Slide 71

Slide 71 text

Referências O Design do Dia a Dia

Slide 72

Slide 72 text

Referências Universal Principles of Design

Slide 73

Slide 73 text

Referências Dive into HTML 5 http://diveintohtml5.org/

Slide 74

Slide 74 text

Referências Jakob Nielsen http://useit.com

Slide 75

Slide 75 text

Referências CSS Tricks http://css-tricks.com/

Slide 76

Slide 76 text

Referências Smashing Magazine http://smashingmagazine.com

Slide 77

Slide 77 text

Colocando na prática: 3.c Inspirações

Slide 78

Slide 78 text

Inspirações Little Big Details http://littlebigdetails.com/

Slide 79

Slide 79 text

Inspirações Dribbble http://www.dribbble.com

Slide 80

Slide 80 text

Estude, estude, estude, pratique, pratique, pratique

Slide 81

Slide 81 text

Pergunte, teste, refine, rinse, repeat

Slide 82

Slide 82 text

Obrigado! @shiota | www.eshiota.com | [email protected] | Dev in Sampa 2011