Os processos de UX, entregas e desafios da experiência de usuário (UX) em agências de publicidade.

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

2. Antes de
qualquer
coisa...

3. UI não é UX

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

5. UX não é só
usabilidade

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

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

8. DIGITAL ONTEM
Anúncios
Web

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

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

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

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

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

14. MODELO DE MATURIDADE
Humano
Tecnologia
PESQUISA
DESIGN
FRONT-END
Arquiteto da Informação UI Designer
UX Designer
BACK-END
Desenvolvedor

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

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

17. Como entregamos isso?

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

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

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

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

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

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

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

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

26. ANTIGO CONTEXTO
•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

27. NOVO CONTEXTO
•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

28. Mobile não é um nicho.

29. 2015 MOBILE ULTRAPASSA DESKTOP
MOBILE
usuários conectados no
mundo hoje
1.2
bilhões
de pessoas
15% DO TRÁFEGO GLOBAL É MOBILE
58% EUA JÁ POSSUI SMARTPHONES
48% JÁ USOU PARA COMPRAR
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

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

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

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

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

34. QR CODE

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

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

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

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

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

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

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

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

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

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

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

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

47. Objetivos de Negócio
Enganando
Negócio
Usuário
Destruindo
Negócio
Usuário
Equilibrando
Negócio
Usuário
Sonhando
Negócio
Necessidades de Pessoas
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. O QUE É REALMENTE
É OPCIONAL?
Pão e Salsicha
Mostarda
Ketchup
Purê
Batata Palha
Vinagrete

51. A MENSAGEM É ACESSÍVEL?

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

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

54. MOBILE
Uso desnecessário de Flash
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.

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

56. A MENSAGEM É COMPREENSÍVEL?

57. A MENSAGEM É RELEVANTE?

58. Calma. Estamos quase lá.

59. Design
BOM DESIGN
≠
BOA EXPERIÊNCIA

60. Passos antes
4
de abrir o PSD

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

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

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

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

79. Botões Acessíveis
FÁCIL
DIFÍCIL
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.

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

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

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

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

84. Não querem saber de esperar

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

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

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

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

89. Carregue Progressivamente

90. Reduza todos os arquivos possíveis

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

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
IDEIA
•Maior chance de erro
•Menor Aprendizado
•Sem Continuidade
DESENVOLVIMENTO
LANÇAMENTO

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

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

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

98. QUE TESTE USAR?

99. QUANTOS?
Se a pergunta é:
Qual o preço que
mais efetivo?
Qual CTA recebe
mais clicks?
Qual layout gera
mais vendas?
Qual email performa
melhor?
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
LIMITE AS
DISTRAÇÕES
USE PADRÕES
APROPRIADOS
FAÇA COISAS
FUNCIONAIS
TORNE AÇÕES
REVERSÍVEIS
EXPERIÊNCIA
PERTENCE AO USUÁRIO
SEJA CREDÍVEL E
CONFIÁVEL
DESENVOLVA
EMPATIA
ESTABELEÇA
SEJA
CONSISTENTE
CONTEXTO
FORNEÇA
FEEDBACK
BOM PARA
O USUÁRIO
E BOM PARA
O NEGÓCIO
MOSTRE
COMO FUNCIONA