Palestra sobre design centrado do usuário realizada junto com meu colega de AG2 Guilherme Dienstmann para a equipe de internet do Bradesco. A idéia foi contextualizar o público sobre o que está acontecendo com a internet e mostrar a importância de deixar o usuário no centro do seu projeto. Para isto explicamos em forma de caça ao tesouro o caminho que as empresas devem percorrer para produzirem seus sites.

1. DESIGN CENTRADO
NO USUÁRIO
O cliente tem sempre a razão
mesmo, e mais do que nunca.

2. Quem vai assistir a palestra?

3. Quem vai assistir a palestra?

5. Qual é o nosso real objetivo?

6. Christian Pablo
Designer
Arquiteto de Informação da AG2
*Créditos - Personagem: McMillan Digital Art

7. [Vídeo com colegas de trabalho do público da palestra
apresentando o outro palestrante, Guilherme Dienstmann]

8. Grau de Confiança
(Abril de 2009)
Recomendações de pessoas conhecidas 90%
Opiniões de consumidores postadas online 70%
Site da Marca/Empresa 70%
Conteúdo Editorial (Ex: Jornal) 69%
Patrocínio da Marca em Eventos/Projetos 64%
TV 62%
Jornal 61%
Revistas 59%
Radio 55%
Cartazes/Outdoor 55%
Anúncio em Banners online 33%
Anúncio de texto em celulares 24%
* Fonte: Nielsen Online Global Consumer Survey April 2009 / Base: All Respondents

9. “ A verdade não é verdade até que as pessoas
acreditem em você
e as pessoas não acreditarão em você se elas
não souberem o que você está dizendo,
e elas não saberão o que você está dizendo se
elas não ouvirem você,
e elas não ouvirão você se você não for
interessante,
e você não será interessante a menos que você
diga coisas imaginativas, originais e frescas.
William “Bill” Bernbach
”

10. “ A verdade não é verdade até que as pessoas
acreditem em você
e as pessoas não acreditarão em você se elas
não souberem o que você está dizendo,
e elas não saberão o que você está dizendo se
elas não ouvirem você,
e elas não ouvirão você se você não for
interessante,
e você não será interessante a menos que você
diga coisas imaginativas, originais e frescas.
William “Bill” Bernbach
”

11. “ A verdade não é verdade até que as pessoas
acreditem em você
e as pessoas não acreditarão em você se elas
não souberem o que você está dizendo,
e elas não saberão o que você está dizendo se
elas não ouvirem você,
e elas não ouvirão você se você não for
interessante,
e você não será interessante a menos que você
diga coisas imaginativas, originais e frescas.
William “Bill” Bernbach
”

12. “ A verdade não é verdade até que as pessoas
acreditem em você
e as pessoas não acreditarão em você se elas
não souberem o que você está dizendo,
e elas não saberão o que você está dizendo se
elas não ouvirem você,
e elas não ouvirão você se você não for
interessante,
e você não será interessante a menos que você
diga coisas imaginativas, originais e frescas.
William “Bill” Bernbach
”

13. “ A verdade não é verdade até que as pessoas
acreditem em você
e as pessoas não acreditarão em você se elas
não souberem o que você está dizendo,
e elas não saberão o que você está dizendo se
elas não ouvirem você,
e elas não ouvirão você se você não for
interessante,
e você não será interessante a menos que você
diga coisas imaginativas, originais e frescas.
William “Bill” Bernbach
”

14. “ A verdade não é verdade até que as pessoas
acreditem em você
e as pessoas não acreditarão em você se elas
não souberem o que você está dizendo,
e elas não saberão o que você está dizendo se
elas não ouvirem você,
e elas não ouvirão você se você não for
interessante,
e você não será interessante a menos que você
diga coisas imaginativas, originais e frescas.
William “Bill” Bernbach
”

15. Modelo Tradicinal
Produto
Embalagem
Distribuição
CRM
Propaganda
Usuário
* Fonte: What’s Next in Marketing and Advertising – Paul Isakson – http://www.slideshare.net/paulisakson/whats-next-in-marketing-advertising-318143
Marketing Digital - Lógica Digital - http://www.slideshare.net/logicadigital/marketing-digital-1842283?src=embed

16. Novo Modelo
Produto
Embalagem
Distribuição
CRM
Propaganda
Usuário
* Fonte: What’s Next in Marketing and Advertising – Paul Isakson – http://www.slideshare.net/paulisakson/whats-next-in-marketing-advertising-318143
Marketing Digital - Lógica Digital - http://www.slideshare.net/logicadigital/marketing-digital-1842283?src=embed

17. Por que vamos falar disto?

18. 100%
Em Conversão/Vendas
O que se perde 161%
ao não investir em Em Produtividade
Design Centrado no
Usuário? 150%
Em Tráfego/Visitantes
202%
Uso de Funcionalidade
Específica
*Estudo do NN/g com 42 projetos (http://www.useit.com/alertbox/roi-first-study.html)

19. Online A internet já é o
Agência
25%
2° principal canal
55% de solicitação e aquisição
Telefone de novos produtos
15%
financeiros.
Outros
5%
*Fonte: Netpop Research/Google Brasil: Pesquisa com 1003 pessoas que pesquisaram por produtos financeiros nos últimos 6 meses. - http://www.youtube.com/watch?v=VBHeJM3HYsw&feature=related

20. Nova forma de mensurar mídia
2009
Influência
Afinidade com a marca, recompras, transmissão de
conteúdo e poder/score de influência
Intimidade
Sentimento nos blogs, opinião dos consumidores
Interação
Abrir/ Taxa de clique
Envolvimento
Visitas, páginas visualizadas
e tempo no site
1995
Intimidade e Influência
*Measuring Engagement - Forrester

21. Dave Carroll
e a United Airlines

22. 5 mi
Assistiram o vídeo
no You Tube
180 mi
de perdas na bolsa
creditadas ao vídeo

23. “ O ser humano há milênios vive em bandos, em grupos.
Gostamos de nos aproximar
têm interesses similares.
de pessoas que
A diferença é que com a internet,
agora não há mais barreiras geográficas
e ficou muito mais fácil, barato e rápido de se
comunicar.
Seth Codin
(Tribes: We Need You to Lead Us - 2008)
”

24. “ Mercados em rede estão começando a se
auto-organizar mais rápido que as
empresas que os tem tradicionalmente servido.
Graças a web, mercados estão se tornando melhor
informados, mais inteligentes, e
demandando qualidades perdidas na
maioria das organizações.
Christopher Locke, Rick Levine, Doc Searls e David Weinberger
(ClueTrain Manifesto)
”

25. DESIGN CENTRADO
NO USUÁRIO
O cliente tem sempre a razão
mesmo, e mais do que nunca.

26. 1 Maturidade em Usabilidade

27. Modelo de Maturidade em Usabilidade
Empresa guiada pelo Usuário
Design Centrado no Usuário Integrado
Processo sistemático de Usabilidade
Dirigida pela usabilidade
Verba dedicada a usabilidade
Profissionais Experientes com foco em usabilidade
Desenvolvedor Centrado na Usabilidade
Hostilidade com a Usabilidade
*Nielsen Usability Maturity Model (http://www.useit.com/alertbox/maturity.html).

28. *Stuffthathappens.com por Eric Burke

29. Modelo de Maturidade em Usabilidade
Empresa guiada pelo Usuário
Design Centrado no Usuário Integrado
Processo sistemático de Usabilidade
Dirigida pela usabilidade
Verba dedicada a usabilidade
Profissionais Experientes com foco em usabilidade
Desenvolvedor Centrado na Usabilidade
Hostilidade com a Usabilidade
*Nielsen Usability Maturity Model (http://www.useit.com/alertbox/maturity.html).

31. Modelo de Maturidade em Usabilidade
Empresa guiada pelo Usuário
Design Centrado no Usuário Integrado
Processo sistemático de Usabilidade
Dirigida pela usabilidade
Verba dedicada a usabilidade
Profissionais Experientes com foco em usabilidade
Desenvolvedor Centrado na Usabilidade
Hostilidade com a Usabilidade
*Nielsen Usability Maturity Model (http://www.useit.com/alertbox/maturity.html).

33. Modelo de Maturidade em Usabilidade
Empresa guiada pelo Usuário
Design Centrado no Usuário Integrado
Processo sistemático de Usabilidade
Dirigida pela usabilidade
Verba dedicada a usabilidade
Profissionais Experientes com foco em usabilidade
Desenvolvedor Centrado na Usabilidade
Hostilidade com a Usabilidade
*Nielsen Usability Maturity Model (http://www.useit.com/alertbox/maturity.html).

39. 2 Vamos ouvir

42. “ Nós temos algumas idéias para você também: algumas
novas ferramentas que precisamos, alguns serviços
melhores. Coisas que estamos dispostos a pagar.
Tem um minuto?
Christopher Locke, Rick Levine, Doc Searls e David Weinberger
(ClueTrain Manifesto)
”

43. 3 Vamos pensar
a partir do Usuário

44. *Créditos - Personagem: McMillan Digital Art

45. Leonardo
Administrador, 32 anos.
Trabalha na divisão de internet do banco.
Recebeu o “desafio” de
reformular a presença digital
da área de Empréstimos.
*Créditos - Personagem: McMillan Digital Art

46. Júlio
Professor, 27 anos.
Trabalha na Escola Estadual José Ramires.
Suas contas estão no vermelho.
Está endividado, sem poder de
investimento e tem receio de se
endividar mais com credito.
*Créditos - Personagens: McMillan Digital Art

48. Análise
Heurística Análise de
Benchmarking
Focus-Group
Análise de
Métricas
Análise
Hierárquica
de Tarefas
Wireframes
*Créditos - Personagens: McMillan Digital Art / Ícones: Peter Morville e Jeffery Callender

49. Análise
Heurística Análise de
Benchmarking
Focus-Group
Análise de
Métricas
Análise
Hierárquica
de Tarefas
Wireframes
*Créditos - Personagens: McMillan Digital Art / Ícones: Peter Morville e Jeffery Callender

50. 01. Análise Heurística
O que é?
Método de inspeção tendo como base uma lista
de heurísticas ou de critérios de usabilidade.
Heurísticas
de Nielsen

51. 01. Análise Heurística
1. Visibilidade do estado do
sistema;

52. 01. Análise Heurística
1. Visibilidade do estado do
sistema;
2. Compatibilidade do sistema
com o mundo real;

53. 01. Análise Heurística
1. Visibilidade do estado do
sistema;
2. Compatibilidade do sistema
com o mundo real;
3. Controle e liberdade
do usuário;

54. 01. Análise Heurística
1. Visibilidade do estado do
sistema;
2. Compatibilidade do sistema
com o mundo real;
3. Controle e liberdade
do usuário;
4. Consistência e padrões;

55. 01. Análise Heurística
1. Visibilidade do estado do
sistema;
2. Compatibilidade do sistema
com o mundo real;
3. Controle e liberdade
do usuário;
4. Consistência e padrões;
5. Prevenção de erros;

56. 01. Análise Heurística
1. Visibilidade do estado do
sistema;
2. Compatibilidade do sistema
com o mundo real;
3. Controle e liberdade
do usuário;
4. Consistência e padrões;
5. Prevenção de erros;
6. Reconhecimento ao invés de
lembrança;

57. 01. Análise Heurística
1. Visibilidade do estado do
sistema;
2. Compatibilidade do sistema
com o mundo real;
3. Controle e liberdade
do usuário;
4. Consistência e padrões;
5. Prevenção de erros;
6. Reconhecimento ao invés de
lembrança;
7. Flexibilidade e eficiência de uso;

58. 01. Análise Heurística
1. Visibilidade do estado do
sistema;
2. Compatibilidade do sistema
com o mundo real;
3. Controle e liberdade
do usuário;
4. Consistência e padrões;
5. Prevenção de erros;
6. Reconhecimento ao invés de
lembrança;
7. Flexibilidade e eficiência de uso;
8. Estética e design minimalista;

59. 01. Análise Heurística
1. Visibilidade do estado do
sistema;
2. Compatibilidade do sistema
com o mundo real;
3. Controle e liberdade
do usuário;
4. Consistência e padrões;
5. Prevenção de erros;
6. Reconhecimento ao invés de
lembrança;
7. Flexibilidade e eficiência de uso;
8. Estética e design minimalista;
9. Ajudar os usuários a reconhecer,
diagnosticar e corrigir erros;

60. 01. Análise Heurística
1. Visibilidade do estado do
sistema;
2. Compatibilidade do sistema
com o mundo real;
3. Controle e liberdade
do usuário;
4. Consistência e padrões;
5. Prevenção de erros;
6. Reconhecimento ao invés de
lembrança;
7. Flexibilidade e eficiência de uso;
8. Estética e design minimalista;
9. Ajudar os usuários a reconhecer,
diagnosticar e corrigir erros;
10. Ajudas e documentação.

61. Análise
Heurística Análise de
Benchmarking
Focus-Group
Análise de
Métricas
Análise
Hierárquica
de Tarefas
Wireframes
*Créditos - Personagens: McMillan Digital Art / Ícones: Peter Morville e Jeffery Callender

62. 02. Análise de Benchmarking
O que é?
Identificação de padrões, riscos, posicionamento e
oportunidades a partir de soluções de mercado.

68. Análise
Heurística Análise de
Benchmarking
Focus-Group
Análise de
Métricas
Análise
Hierárquica
de Tarefas
Wireframes
*Créditos - Personagens: McMillan Digital Art / Ícones: Peter Morville e Jeffery Callender

69. 03. Análise de Métricas
O que é?
Análise do comportamento dos usuários a partir
de relatórios de métricas. A partir disso, é
possível identificar problemas e oportunidades
para otimização do negócio.

70. 03. Análise de Métricas
Online
Para alguns produtos a contratação
25%
online é ainda mais representativa:
Agência
55%
Telefone Investimentos: 45%
15% Empréstimos: 26%
Outros Seguros: 18%
5%
*Fonte: Netpop Research/Google Brasil: Pesquisa com 1003 pessoas que pesquisaram por produtos financeiros nos últimos 6 meses. - http://www.youtube.com/watch?v=VBHeJM3HYsw&feature=related

71. 03. Análise de Métricas
Top 5 Atividades Realizadas online
Informaram-se a respeito de tarifas ou promoções
especiais 74%
Compararam valores (Ex: Tarifas, Juros e etc) entre
diferentes prestadores de serviços financeiros 69%
Compararam detalhes e especificações de diferentes
produtos financeiros 60%
Procuraram o endereço de uma prestadora de
serviços financeiros 53%
Leram comentários sobre os produtos escritos por
especialistas 47%
*Fonte: Netpop Research/Google Brasil: Pesquisa com 1003 pessoas que pesquisaram por produtos financeiros nos últimos 6 meses. - http://www.youtube.com/watch?v=VBHeJM3HYsw&feature=related

72. 03. Análise de Métricas
Top 5 Atividades Realizadas online para Empréstimos
Valor da parcela mensal 71%
Juros 67%
Opções de pagamento 66%
Reputação da instituição 52%
Valor do empréstimo vs. Valor que a instituição
estava disposta a emprestar 42%
*Fonte: Netpop Research/Google Brasil: Pesquisa com 1003 pessoas que pesquisaram por produtos financeiros nos últimos 6 meses. - http://www.youtube.com/watch?v=VBHeJM3HYsw&feature=related

73. Análise
Heurística Análise de
Benchmarking
Focus-Group
Análise de
Métricas
Análise
Hierárquica
de Tarefas
Wireframes
*Créditos - Personagens: McMillan Digital Art / Ícones: Peter Morville e Jeffery Callender

74. 04. Focus-Group
O que é?
Uma técnica de discussão objetiva com um grupo
de maneira não estruturada e natural. Aplicada
para explorar comportamentos, identificar
tendências e esclarecer questões específicas de
um projeto.

80. Análise
Heurística Análise de
Benchmarking
Focus-Group
Análise de
Métricas
Análise
Hierárquica
de Tarefas
Wireframes
*Créditos - Personagens: McMillan Digital Art / Ícones: Peter Morville e Jeffery Callender

81. 05. Análise Hierárquica de Tarefas
O que é?
Identificação das tarefas a serem executadas
pelos usuários com classificação de relevância e
mapeamento de fluxos alternativos.

82. Análise
Heurística Análise de
Benchmarking
Focus-Group
Análise de
Métricas
Análise
Hierárquica
de Tarefas
Wireframes
*Créditos - Personagens: McMillan Digital Art / Ícones: Peter Morville e Jeffery Callender

83. 06. Wireframes
O que é?
A “planta baixa” de uma interface. Define
organização, relacionamento, relevância e
nomenclaturas de uma interface.

84. 100%
Em Conversão/Vendas
161%
Em Produtividade
O que se perde ao
150%
não investir Em Tráfego/Visitantes
em Design Centrado
no Usuário?
202%
Uso de Funcionalidade
Específica
*Créditos - Personagem: McMillan Digital Art

85. Competências do Arquiteto de Informação
Análise Análise de Análise de Análise de Análise
Heurística Benchmarking Métricas Áreas de Hierárquica
Interfaces de Tarefas
Teste de Eye-Tracking Pesquisa Focus-Group Card Sorting
Usabilidade Etnográfica
Site map Fluxograma Wireframes Definições de
SEO
*Créditos dos Ícones: Peter Morville e Jeffery Callender

86. 4 Não há volta

87. *Créditos: Alan Bailey

88. 5 Lições

89. 1. Escute sempre primeiro.
2. Sim, o cliente tem sempre a razão.
3. O usuário guia o produto.
4. Produza informações e experiências
que interessem e beneficiem as pessoas.
5. Converse, seja autêntico e
transparente. Não busque o controle.

90. 6 Mais sobre o tema

91. O design do dia-a-dia Não me faça pensar Design para a Internet As Leis da Simplicidade
Donald A. Norman Steve Krug Felipe Memória John Maeda
The Cluetrain Do It Wrong Quickly‫‏‬ Fenômenos Cultura da Convergência
Sociais nos Negócios Henry Jenkins
Manifesto: The End Mike Moran
of Business as Usual‫‏‬ (Groundswell)‫‏‬
Charlene Li e Josh Bernoff
Locke, Levine, Searls e Weinberger

92. Muito Obrigado :)
Guilherme Henrique Dienstmann
guilherme.dienstmann@ag2.com.br
twitter.com/guilhermehd
Christian Pablo Antunes
christian.antunes@ag2.com.br
twitter.com/chrisantunes