O documento discute a importância da experiência do usuário (UX) para desenvolvedores. Ele explica como entender as necessidades dos usuários segundo a pirâmide de Maslow e como projetar produtos que atendam suas necessidades de funcionalidade, segurança e realização. O documento também fornece ferramentas, soluções prontas e referências para ajudar desenvolvedores a melhorarem a UX.

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