1.
User Experience
para Developers
@shiota | www.eshiota.com | contato@eshiota.com

2.
1
Entendendo o problema:
UX vs. Devs

3.
Quero fazer meu site que
vai revolucionar a
Interwebz!

4.
O Produto

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

6.
User Experience?

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

8.
Developers?

9.
Mais ou menos Ergonomia
Valores de Negócio
Estratégia de Conteúdo
Design Visual
Design de Interação
Arquitetura da Informação
Quality Assurance
Desenvolvimento de Back-end
Arquitetura de Software
Desenvolvimento de Front-end
Infraestrutura
De vez em quando

10.
#comofas/

11.
Golden Rule
para devs

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

13.
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

14.
2
Entendendo o usuário:
Maslow

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

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

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

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

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

20.
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, abra a página (lembre-
se: não seja convencido)

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

22.
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á?”

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

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

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

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

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

28.
Segurança » Testes/Performance
Páginas rápidas: otimize na infra, no front e
no back
Feedback: spinners e loadings nos AJAX (mas
não exagere)
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

29.
Segurança » Testes/Performance
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

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

31.
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?”

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

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

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

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

36.
Relacionamento » AI/Features
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.

37.
Relacionamento » AI/Features
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

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

39.
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.

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

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

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

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

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

45.
Estima » AI/Customização
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

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

47.
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.

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

49.
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.

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

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

52.
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.

53.
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.

54.
Realização » Visual/Emoção/Conforto/Desejo
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

55.
3
Colocando na prática:
#comofas/

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

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

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

59.
Soluções prontas
HTML 5 Boilerplate
http://html5boilerplate.com/

60.
3.b
Colocando na prática:
Ferramentas

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

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

63.
Ferramentas
Typekit
http://typekit.com/

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

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

66.
Soluções prontas
Subtle Patterns
http://www.subtlepatterns.com

67.
Soluções prontas
Silverback
http://www.silverbackapp.com

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

69.
Referências
JavaScript: The Good Parts

70.
Referências
Eloquent JavaScript

71.
Referências
Hardboiled Web Design

72.
Referências
HTML 5 for Web Designers

73.
Referências
Responsive Web Design

74.
Referências
O Design do Dia a Dia

75.
Referências
Universal Principles of Design

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

77.
Referências
UI Patterns
http://ui-patterns.com/

78.
Referências
A List Apart
http://alistapart.com

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

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

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

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

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

84.
Inspirações
House of Buttons
http://houseofbuttons.tumblr.com/

85.
4
Resumindo....
(se você dormiu, a hora é agora)

86.
O usuário NÃO é burro.

87.
Entenda o usuário
Visual/Emoção/
Realização
Conforto/Desejo
Estima AI/Customização
Relacionamento AI/Features
Testes/Performance/
Segurança
AI
Testes/
Fisiologia
Funcionalidade

88.
Use. Observe.
Pergunte. Teste.
Melhore. Repita.

89.
Obrigado!
@shiota | www.eshiota.com | contato@eshiota.com