O documento discute os principais pontos sobre UX para agências de publicidade, destacando: (1) UX não é só sobre usabilidade, mas sobre criar experiências positivas para as pessoas; (2) é necessário considerar o contexto do usuário, incluindo dispositivos móveis, ao projetar interfaces; (3) pesquisa com usuários é fundamental para entender suas necessidades e melhorar continuamente a experiência.

1. UX para agências
de publicidade
Richard Jesus
@richardrx

2. Antes de
qualquer
coisa...

3. UI não é UX

4. INTERFACE
PESSOAS SISTEMAS
INTERFACE DE USUÁRIO (UI)

5. UX não é só
usabilidade

6. SALVAR PRINCESA
PRESSIONE O BOTÃO PARA SALVAR A PRINCESA
Matador de Dragões
X
ref: Why Usability Engineers Don’t Design Video Games - SmashingApps

7. FUNCIONAL
trabalhar como o programado
Foco em
TAREFAS
(produtos, características)
CONFIÁVEL
sempre disponível quando preciso
USÁVEL
pode ser usável sem dificuldade
CONVENIENTE
Funciona examente como você pensa
AGRADÁVEL
vale a pena compartilhar
Foco em
EXPERIÊNCIAS
(pessoas, atividades, contexto)
SIGNIFICATIVA
possui significado pessoal
ref: UX Hierarchy of neeeds - Stephen Anderson

8. DIGITAL ONTEM
Anúncios Web

9. Anúncios Web Search Mobile
Social Eventos PDV Embalagem
DIGITAL HOJE

10. Garantir que a experiência seja positiva em
todos os pontos de contato com a marca.

11. 1Desconhecido
UX não é importante
2 Interessado
UX é importante, mas recebe pequeno incentivo
3 Investido
UX é muito importante e programas formais surgem
4 Praticado
UX é crítico e executivos estão ativamente envolvidos
5
Comprometido
UX é um dos principais princípios da
estratégia organizacional
6
Embutido
UX está no tecido da organização, não
discutido separadamente
MODELO DE
MATURIDADEUX

12. DESIGNPESQUISA FRONT-END BACK-END
Humano Tecnologia
Diretor de Arte Desenvolvedor
?
Planejamento
MODELO DE MATURIDADE
Fornecedor

13. DESIGNPESQUISA FRONT-END BACK-END
Humano Tecnologia
Arquiteto da Informação UI Designer Desenvolvedor
MODELO DE MATURIDADE

14. DESIGNPESQUISA FRONT-END BACK-END
Humano Tecnologia
UI Designer DesenvolvedorArquiteto da Informação
UX Designer
MODELO DE MATURIDADE

15. CONTEÚDO USUÁRIO
UX depende de...
CONTEXTO

16. Contexto é ao mesmo tempo
QUANTITATIVO & QUALITATIVO
Tamanho da tela
Conectividade
Processamento
Capacidade
Métodos de entrada
Objetivos do usuário
Ambiente do usuário
Atenção do usuário
Capacidade do usuário

17. Como entregamos isso?

18. Pesquisa e Análise
Estratégia e Conceito
Design
Desenvolvimento
Implementação
Monitoramento

19. •Benchmark
•Entrevistas
•Pesquisa Quantitativa
•Definição de KPI’s
•Análise de Tarefas
•Inventário de Conteúdo
ENTREGÁVEIS
Pesquisa e Análise
Estratégia e Conceito
Design
Desenvolvimento
Implementação
Monitoramento

20. •Personas
•Blueprint
•Jornada de Consumidor
•Ecossistema
•Mapa do Site
•Card Sorting
•Wireframe
•Protótipos Navegáveis
ENTREGÁVEIS
Pesquisa e Análise
Estratégia e Conceito
Design
Desenvolvimento
Implementação
Monitoramento

21. •Moodboards
ENTREGÁVEIS
Pesquisa e Análise
Estratégia e Conceito
Design
Desenvolvimento
Implementação
Monitoramento

22. •Especificações de Projeto
•Recomendações de SEO
ENTREGÁVEIS
Pesquisa e Análise
Estratégia e Conceito
Design
Desenvolvimento
Implementação
Monitoramento

23. •Controle de Qualidade
ENTREGÁVEIS
Pesquisa e Análise
Estratégia e Conceito
Design
Desenvolvimento
Implementação
Monitoramento

24. •Teste de Usabilidade
•Avaliação Heurística
•Testes A/B
•Análise de Métricas
ENTREGÁVEIS
Pesquisa e Análise
Estratégia e Conceito
Design
Desenvolvimento
Implementação
Monitoramento

25. É sobre pessoas,
e não dispositivos.
Pesquisa e Análise

26. •TELA GRANDE
•CONEXÃO RÁPIDA
•NAVEGADOR CAPAZ
•HARDWARE POTENTE
•POSIÇÃO ESTACIONÁRIA
•AMBIENTE CONFORTÁVEL
•SISTEMA OPERACIONAL ROBUSTO
•ENTRADA EFICIENTE DE INFORMAÇÃO
ANTIGO CONTEXTO

27. •MÚLTIPLAS TELAS
•CONEXÕES DIVERSAS
•NAVEGADORES VARIADOS
•HARDWARE VARIÁVEL
•INÚMERAS POSIÇÕES
•QUALQUER AMBIENTE
•SISTEMAS OPERACIONAIS LIMITADOS
•ENTRADA LIMITADA DE INFORMAÇÃO
NOVO CONTEXTO

28. Mobile não é um nicho.

29. MOBILE
Brasil já possui 14% de
adoção representando um
total de
27 milhões
de pessoas.
28% Android 13% Symbian 12% iOS
ref: ThinkwithGoogle 2012 - Ipsos, iab and Mobile Marketing Association
1.2bilhões
de pessoas
usuários conectados no
mundo hoje
58% EUA JÁ POSSUI SMARTPHONES
2015 MOBILE ULTRAPASSA DESKTOP
15% DO TRÁFEGO GLOBAL É MOBILE
48% JÁ USOU PARA COMPRAR

30. 20%
Nenhum tamanho
de tela possui mais de
de marketshare

31. Não ser otimizado para mobile é como fechar sua loja um dia por semana.

32. 3GNO BRASIL
Vivo 724
Claro 421
Oi Brasil Telecom 429,6
Oi Telemar 368,7
Tim 363,6
Números em kilobits por segundo.
Operadoras 3G no Brasil

33. Um iPad com 3G da TIM leva
quase 2 minutos a página inicial
do NãoSalvo.
#significa
3GNO BRASIL

34. QR CODE

35. NÃO VEM
INSTALADO NA
MAIORIA DOS
SMARTPHONES
EXIGE
CONEXÃO COM
A INTERNET
QR CODE

36. DA AUDIENCIA TOTAL NOS ESTADOS
UNIDOS JÁ USOU QR CODE6.2%
53%
homens
18-34
49%
revistas
ou jornais
35%
embalagem
de produto
58%
escanearam
em casa
ref: 14 Million Americans Scanned QR Codes in june 2011 - comScore

37. 49%
ref: Q3 Tablet Shipments Up 49.5% Vs. Yr Ago; Up 6.7% Vs.Q2 - FORBES / IDC
Tablets cresceram 49.5% em 2012 em
relação ao ano anterior.
Cada vez mais mobilidade
tablets

38. ref: Advertising and Audiences: The State of the Media 2012 - NIELSEN
Atividades consecutivas no tablet
enquanto assistem televisão
Buscaram informação de um
produto que viram o anúncio
na TV.
20%
33%
Buscaram informação
relacionada ao programa
que assistiam.
Buscaram cupons e ofertas
relacionadas ao comercial que
assistiram.
13%
CONSUMO DE INFORMAÇÃO

39. Atividades consecutivas no tablet
enquanto assistem televisão
Buscaram informação de um
produto que viram o anúncio
na TV.
20%
33%
Buscaram informação
relacionada ao programa
que assistiam.
Buscaram cupons e ofertas
relacionadas ao comercial que
assistiram.
13%
CONSUMO DE INFORMAÇÃO
ref: Advertising and Audiences: The State of the Media 2012 - NIELSEN

40. Buscaram informação de um
produto que viram o anúncio
na TV.
20%
33%
Buscaram informação
relacionada ao programa
que assistiam.
Buscaram cupons e ofertas
relacionadas ao comercial que
assistiram.
13%
CONSUMO DE INFORMAÇÃO
ref: Advertising and Audiences: The State of the Media 2012 - NIELSEN
Atividades consecutivas no tablet
enquanto assistem televisão

41. dos consumidores
simultâneos navegam
motivados pela TV
destes consumidores que
também comentam assistem TV
motivados pela internet
70% 80%
CONSUMO SIMULTÂNEO
INTERNET + TELEVISÃO

42. 10’’
125 pageviews
9’’
7’’
5’’
116 pageviews 90 pageviews 79 pageviews
ref: Amazon Kindle Fire is 54% of US Android tablets 2012 - comScore / Luke Wroblewski
TAMANHO FAZ DIFERENÇA

43. 17 30 39 43*
ref: The Multi Screen World 2012 - Google / Sterling Brand / Ipsos(*) NÚMERO DE MINUTOS EM MÉDIA
TAMANHO FAZ DIFERENÇA

44. “Você deve começar com a experiência
do usuário e depois ir pra tecnologia.
Steve Jobs

45. CRIAR UM
APLICATIVO NÃO
IRÁ RESOLVER O
PROBLEMA.
Estratégia e Conceito

46. Aplicativator
CRIAR APLICATIVO
OU SELECIONE PELO TIPO
Geo-localização
Fotos com filtros
Mensagens instantâneas

47. ObjetivosdeNegócio
Necessidades de Pessoas
Enganando
Destruindo Sonhando
Equilibrando
Negócio Usuário Negócio Usuário
Negócio Usuário Negócio Usuário

48. Quais são os objetivos do negócio
e como eles se conectam nas
necessidades das pessoas.

49. O QUE É REALMENTE
É NECESSÁRIO?
Pão e Salsicha
Mostarda
Ketchup
Purê
Batata Palha
Vinagrete

50. Pão e Salsicha
Mostarda
Ketchup
Purê
Batata Palha
Vinagrete
O QUE É REALMENTE
É OPCIONAL?

51. A MENSAGEM É ACESSÍVEL?

52. Galaxy S9 iPhone 8S
NEM TODO MUNDO TEM UM...

53. Sistema
operacional
limitado
Tamanho
de tela
Processador
limitado
Conectividade
reduzida
Aquilo que chamamos de
mobile compreende mais
que apenas celulares e
smartphones, mas também
tablets, jogos portáteis.
MOBILE

54. Um caso clássico de tecnologia não
acessível para alguns dispositivos
móveis, mas que pode se repetir com
outras tecnologias que não considerem
dispositivos móveis.
Uso desnecessário de Flash
MOBILE

55. Conexão Limitada
3GA conexão 3G no Brasil não atinge
1 Mbps (megabit por segundo)
MOBILE

56. A MENSAGEM É COMPREENSÍVEL?

57. A MENSAGEM É RELEVANTE?

58. Calma. Estamos quase lá.

59. BOM DESIGN
BOA EXPERIÊNCIA
≠
Design

60. Passos antes
de abrir o PSD
4

61. DESENVOLVA
PROTÓTIPOS
VALIDE
INTERNAMENTE
APRENDA COM
O COMPORTAMENTO
DO USUÁRIO
TESTE
EXTERNAMENTE

62. VALIDE
INTERNAMENTE
· Entreviste sua mãe
· Entreviste seu vizinho
· Não precisa gastar

63. Wireframe Protótipo Simulação
Esboço Fluxograma
Navegação
Elementos
Visuais
Interação
Funcionalidades
Alta
Fidelidade
Processo
Dinâmico
DESENVOLVA PROTÓTIPOS

64. TESTE
EXTERNAMENTE
· Teste com a faxineira
· Teste com o mecânico
· Teste com o entregador

65. APRENDA COM
O USUÁRIO
· Observe e ouça
· Pergunte e tome notas
· Não influencie decisões

66. Torne a mensagem clara.

67. Contraste
Fonte
Idioma
Call to action
Use baixo contraste de cores
para restrições

68. Contraste
Fonte
Idioma
Call to action
Use fontes legíveis

69. Contraste
Fonte
Idioma
Call to action
Use linguagem apropriada

70. Contraste
Fonte
Idioma
Call to action Uma ação primária por tela

71. Comparação é
como as pessoas
tomam decisões

72. Interfaces existem para
possibilitar interação.

73. Mantenha os usuários no controle

74. Promova um próximo passo natural ao usuário

75. A forma segue a função.

76. ADEQUAR A MENSAGEM?

77. PENSE MOBILE PRIMEIRO
Mobile First Design

78. 6
PENSAR RESPONSIVO
Fazendo que o conteúdo seja acessível e seja entregue para vários dispositivos.
1
2
3
1
2
4
5
1024+
7
1023-768 767-480 até-479
7

79. Botões Acessíveis
A localização dos elementos deve ser
levada em conta na criação de soluções
onde o uso mobile seja foco da ação.
FÁCIL
DIFÍCIL

80. Movimentos Fáceis
Interfaces que utilizam gestos para
desencadear ações devem levar em conta a
usabilidade para o público em dispositivos
conhecidos.
FÁCIL
DIFÍCIL

81. ref: How do users really hold mobile devices - Steven Hoober
49%
36%
15%
A FORMA DE USAR

82. NÃO EXISTE BOM UX
SEM BOM
DESENVOLVIMENTO.
Desenvolvimento

83. Usuários não querem saber de tecnologia

84. Não querem saber de esperar

85. Forbes: Web Performance is User Experience
Akamai reportou
75% dos usuários
com problemas de congelamento, crash
ou muito tempo de carregamento de
página simplesmente
não compraram.

86. do tempo de carregamento de página reduz
A cada 100 milissegundos
das vendas no Amazon
1%
Kohavi and Longbotham 2007

87. 0.4 para 0.9 segundos
20%
Marissa Mayer - Web 2.0 Conference 2006
reduziu a receita de publicidade em
Google ao aumentar de carregamento de

88. 2
Diminue o tempo de carregamento1
Pode economizar dinheiro
3 Pode auxiliar em melhor posicionamento em motores de busca.

89. Carregue Progressivamente

90. Reduza todos os arquivos possíveis

91. TUDO FUNCIONA
COMO PLANEJADO?
Implementação e QA

92. TUDO É RASCUNHO.
TUDO É TESTE.
TUDO É BETA.

93. ITERAÇÃO
Ato de repetir o processo com a
intenção de se aproximar de um
objetivo, meta ou resultado
desejado.

94. MODELO ATUAL
•Maior chance de erro
•Menor Aprendizado
•Sem Continuidade
IDEIA LANÇAMENTODESENVOLVIMENTO

95. •Menor chance de erro
•Maior Aprendizado
•Melhoria Continua
IDEIA LANÇAMENTO
VALIDAÇÃO ITERAÇÃO
NOVO MODELO
DESENVOLVIMENTO

96. UMA SOLUÇÃO QUE SIRVA PARA TODOS
NÃO
EXISTE

97. NÃO SE PODE
MELHORAR O QUE
NÃO SE MEDE.
Monitoramento

98. QUE TESTE USAR?

99. QUANTOS?
Se a pergunta é:
Qual o preço que
mais efetivo?
Qual CTA recebe
mais clicks?
Qual email performa
melhor?
Qual layout gera
mais vendas?
TESTE A/B

100. PORQUE?
Se a pergunta é:
Porque não usam
meu produto?
Porque estão navegando
nessa página?
Onde as pessoas estão
presas no site?
Porque as pessoas
não compram?
TESTE DE
USABILIDADE

101. Publicitários que ignoram pesquisa são
tão perigosos como generais que ignoram
sinais do inimigo.
David Ogilvy

102. MENSURE SEUS KPI’S
EXPERIÊNCIAPERTENCE AO USUÁRIO
BOM PARA
O USUÁRIO
E BOM PARA
O NEGÓCIO
LIMITE AS
DISTRAÇÕES
FAÇA COISAS
FUNCIONAIS
TORNE AÇÕES
REVERSÍVEIS
SEJA CREDÍVEL E
CONFIÁVEL
DESENVOLVA
EMPATIA
ESTABELEÇA
CONTEXTO
FORNEÇA
FEEDBACK
USE PADRÕES
APROPRIADOS
SEJA
CONSISTENTE
MOSTRE
COMO FUNCIONA