O documento fornece orientações sobre e-branding e usabilidade para marcas digitais. Resume três pontos essenciais: 1) É importante que as marcas se comportem como humanos no ambiente digital e foquem na experiência do usuário; 2) Testes com usuários reais são fundamentais para garantir usabilidade e conversão; 3) Apelos emocionais como desejo de recompensa e medo da punição podem aumentar a taxa de conversão em landing pages.

1. BEM VINDOS AO E-BRANDING
RENATO MELO – 2016

2. O E-BRANDING
NÃO BASTA SER DIFERENTE E FAZER COISAS
QUE NINGUÉM FAZ. TEM QUE TER BOA
IMAGEM E AGIR COMO HUMANO.

3. O E-BRANDING
SIM, O SEGREDO É AGIR COMO UM
HUMANO, OU BEM, QUASE ISSO... VAMOS
A ALGUNS EXEMPLOS?

4. COMO
SUA
MARCA É
VISTA NO
DIGITAL
UM NOVO PÚBLICO ESTÁ À FRENTE E NÃO
TOLERA OS ERROS DAS EMPRESAS, ACEITOS
PELA GERAÇÃO PASSADA

5. PÚBLICO
DIGITAL
É DIFERENTE
DA MÍDIA
DE MASSA

7. O E-BRANDING
CHICKEN FRIES ASSUME O TWITTER DO
BRUGER KING

8. O E-BRANDING
MUDE O COMPORTAMENTO!
CASE DO PONTO FRIO

9. TODDY BRASIL
CONEXÃO COM O PÚBLICO ALVO

10. HEINEKEN NO SNAP
CONEXÃO COM O PÚBLICO ALVO

11. NUBANK
NASCEU DIGITAL,
PARA O PÚBLICO DIGITAL

12. NUBANK
MIMOS PARA O CLIENTE, MESMO
QUE PAREÇA CARO
(caro é trazer um cliente novo)

13. FAQ POR
VÍDEO.
RESPOSTAS
HUMANAS

14. UX e UI
Injeção de personalidade no seu branding
RENATO MELO - 2016

15. “Você deve
começar com
a experiência
do usuário e
depois ir para a
tecnologia”

16. INTERNET ONTEM
Anúncios Sites Institucionais

17. INTERNET HOJE: INTEGRAÇÃO
E CONVERSÃO
Anúncios Sites Institucionais SEO Mobile
Redes
Sociais
Geo localização Conversão
No PDV
Logística

18. O CONCEITO
E-
BRANDING
UIUX

19. UX
Experiência do Usuário

20. UX Design é o processo
de aumentar a
satisfação e lealdade
do cliente.
Como?
Melhorando a
usabilidade, facilidade
do uso e o prazer
proporcionado com a
interação entre
consumidor e produto.

21. UX Design
Conteúdo

22. 5 passos do UX
Estratégia – Escopo – Estrutura –
Wireframe – Visual Design

23. Briefing
Pergunte, pergunte e pergunte até
esgotar suas dúvidas. O site deve
converter em vendas!

24. UX
Na prática

25. #1 – Refaça todos os passos
Simule e trace com sua equipe todos os
passos que um usuário pode percorrer no
seu site.

26. #2 – Trace metas concretas
O problema nunca será número de visitas!
Trace metas como aumentar número de
leads, contatos, orçamentos...

27. Design
Responsivo e
Disposição:
Passou de 500
inscrições para
1200 por mês

28. 35% da operação
do Call Center
existia apenas
para responder
uma demanda:
Onde encontrar a
2ª via do boleto.

29. #3 – Faça um protótipo
Antes de ir ao ar, faça um protótipo para
ver se todo seu projeto caminhou bem

30. #4 – Métricas
Avalie pouco a pouco seus resultados via
Google Analytics

31. #5 – Tráfego
SEO, Google Adwords e Redes Sociais vão
aumentar o seu tráfego. Mas eles irão sair
se o site não tiver um layout que prenda
sua atenção e converta.

32. UI
Interface do Usuário

33. UI é o processo de
guiar visualmente o
usuário através da
interface de um
produto, utilizando
elementos interativos e
em todos os
tamanhos /
plataformas.
O UI é o
responsável
pela UX

34. UI
Ideias para utilizar

35. #1 – Agrupar
Agrupe funções similares ao invés de
fragmentá-las.

36. #2 – Destaque a conversão
Coloque cores e destaque somente a
conversão. Tome cuidado para não
confundir e distrair seu usuário.

37. #3 – Menos é mais
Coloque nos campos de formulário
somente o necessário.

38. #4 – Excesso de links
Só use em caso de todos levarem ao
mesmo local. Tome cuidado em distrair
demais seu usuário.

39. #5 – Call to Action?
Troque “Cadastre-se agora” por “Quero
receber as melhores ofertas”, por exemplo

40. USABILIDADE
Como aplicar no seus projetos
RENATO MELO - 2016

41. USABILIDADE
E sua importância

42. O QUE É USABILIDADE?

43. SIMPLES E FUNCIONAL. DÁ PARA
MELHORAR?

44. WAZE: ROTAS SEGURAS
Muitas vezes o aplicativo induz o condutor a trafegar por
ruas perigosas, expondo-os a riscos potenciais de assaltos,
violência e outros infortúnios.

45. WAZE: ROTAS SEGURAS
API integrado com notícias ou cadastro de ocorrências ou
a comunidade Waze poderia marcar alterações de
segurança e ganhar pontos.

47. RADARES
O motorista não recebe alertas chamativos, tem que
prestar atenção no caminho e na tela do aplicativo a todo
momento.

48. MUDANÇAS + SINAL SONORO

49. FORMULÁRIOS
Medida é MP/H ao invés de KM/H o que pode confundir o
usuário.

51. USABILIDADE
Testes

52. 1) FEEDBACK

53. até 0,1s: ideia de
continuidade
até 1s: delay
percebido, mas ok
depois de 10s: o
usuário muda de
tarefa.
O USUÁRIO NÃO
QUER ESPERAR!

54. A CADA 100 MILISSEGUNDOS DE TEMPO DE
CARREGAMENTO DE PÁGINA REDUZ 1% DE
VENDAS NA AMAZON.
AMAZON

55. AO AUMENTAR O CARREGAMENTO DO SITE
DE 0.4 PARA 0.9 SEGUNDOS, PERDEU 20% DA
RECEITA EM PUBLICIDADE,
GOOGLE

56. 2) PÁGINAS DE ERRO
O usuário deve saber o que está acontecendo
em uma linguagem fácil.
O usuário deve saber que a culpa não foi dele.
O usuário deve conseguir voltar para o site.

57. 3) ERROS DE FORMULÁRIO
Nome:
Endereço:
CEP:
CPF:
Telefone:
Renato Melo
Rua dos Bobos, número zero
01234-000
12345678900
48 6666-6666
Houve um erro no preenchimento do formulário.
Onde?
Não use espaços ou hifens no
telefone. Utilize somente números.
13 6666-6666

58. 3) DADOS DO FORMULÁRIO
Remover um único campo do formulário (telefone) foi capaz
de aumentar as conversões em 167%. A taxa média de
conversão da página foi de 20,18% para 53,90%.
Pense que para cada R$ 100 investidos em mídia
anteriormente, agora conseguiríamos o mesmo resultado
investindo apenas R$37,45, ou então teríamos quase três
vezes esse resultado se investíssemos o mesmo valor.

59. 4) CAIXA DE BUSCA

60. 5) ETAPAS DO SEU SITE
1. Escolhas dos produtos
2. Cadastro ou login
3. Entrega e embalagem
4. Pagamento

61. Testes de
Usabilidade

62. TESTE COM USUÁRIOS!
Nunca mencione a palavra teste, ela assusta as pessoas.

63. Maior controle de dados e
variáveis;
Mais fácil de envolver o
cliente;
Maior custo
Usuário pode se sentir
desconfortável
Comportamento distante
do seu universo real
LABORATÓRIO

64. Mais barato;
Usuário se sente mais a
vontade;
Mais próximo de seu uso
real;
Menor controle dos dados
e variáveis
Dificuldade de envolver o
cliente (quem contrata)
AMBIENTE DO USUÁRIO

65. Laboratório
Medir performance
(tempo, número de
erros)
Produção acadêmica
(maior “aceitação”
científica para teses,
artigos e dissertações)
Estudos permanentes
com equipe dedicada
(Globo, Nokia)
Ambiente do Usuário
Obter feedback rápido
Projetos com recursos
reduzidos
Testar conceitos e
interfaces em fases
iniciais de design

66. USABILIDADE
Pesquisas com Usuários

67. Perguntas abertas são aquelas que permitem
ao participante responder da forma que quiser,
no formato que quiser, e com a profundidade e
duração que quiser.
Perguntas abertas vs.
Perguntas fechadas

68. Perguntas fechadas são aquelas que podem ser
respondidas com um “Sim? ou “Não”, ou outra
opção sugerida.
Perguntas abertas vs.
Perguntas fechadas

69. Perguntas fechadas funcionam melhor para
questionários quantitativos (porcentagem de
sim ou não). Já para usabilidade, o melhor é
utilizar questões abertas.
Perguntas abertas vs.
Perguntas fechadas

70. USABILIDADE
Soluções Nielsen

71. MUDANÇAS:
De: A interface agiu como esperado?
Para: O que você esperava que
acontecesse quando você ____?

72. MUDANÇAS:
De: Você encontrou o que procurava?
Para: Onde você encontrou o item?

73. MUDANÇAS:
De: Você acha que usaria esse
produto?
Para: Como você acha que esse
produto se encaixaria no seu trabalho?

74. MUDANÇAS:
De: Você achou fácil de usar?
Para: Qual a parte mais confusa da
experiência?

75. USABILIDADE
Roteiro

76. • Planejar o teste: com quantas pessoas?
• Criar um roteiro: como devem ser as
perguntas?
• Moderação do teste: o que fazer e o que não
fazer, exercício prático
• Como analisar: o que observar, o que fazer
com as informações obtidas
• Como adaptar: teste mobile, teste caseiro,
teste em contexto de uso

77. Conversão
Testes, Vendas e Landing Pages
RENATO MELO - 2016

78. Conversão
Fazer seu usuário agir da forma
desejada e mensurável

79. CONVERSÃO
LANDING PAGE

80. PÁGINA ÚNICA PARA
SOLICITAR OPT-IN DE E-
MAIL E GERAR LEADS

81. ANTES DE TUDO
PENSE EM UM
PRÊMIO!

82. HOTEL = GUIA
COMPLETO DA
CIDADE

83. CONVERSÃO
Tamanho da Página

84. 662% de aumento na
taxa de conversão.

85. Então, qual é a
relação entre o
tamanho da página
e a taxa de
conversão?

86. NÃO HÁ RELAÇÃO!!
TESTE!!

88. CONVERSÃO
Desejo de Recompensa

89. Apelo informacional. Exemplo:
Comprar um freezer novo para deixar as bebidas
geladas mais rapidamente
Tangível

90. Apelo Transformacional. Exemplo:
Comprar uma caneta de grife para simbolizar
sucesso e status social
Intangível

91. Possibilitar ao usuário dar acesso a músicas
ilimitadas para toda sua família por um preço
acessível. Este é um apelo que apresenta um
benefício tangível

92. CONVERSÃO
Medo da Punição

93. O medo da punição está relacionado à nossa
vontade de não sermos privados de algo que temos
ou que gostaríamos de obter.

94. Apelo informacional. Exemplo:
Não perder a chance de assistir ao jogo do seu time
comprando o pacote da TV por assinatura
Tangível

95. Apelo Transformacional. Exemplo:
Não criar memórias incríveis ao deixar de passar o
Revéillon em Copacabana
Intangível

96. Recompensa x
Punição

97. O Booking é basicamente um site que utiliza muito
bem apelos que enfatizam o medo da punição e
também o desejo de recompensa. Nesta imagem,
vemos a utilização do medo da punição associado à
criação de um senso de urgência, que incentiva o
usuário a agir imediatamente.

98. CONVERSÃO
Punição ou Recompensa?

99. A escolha está relacionada à característica do seu
produto e sua proposta de valor, assim como ao
comportamento do seu cliente em potencial
enquanto está navegando em seu site.

100. Uma dica muito valiosa é que você pode testar duas
versões da sua página em um Teste A/B e verificar
qual desses motivadores fundamentais é mais
poderoso em termos de levar os usuários à
conversão.

101. ESTA AULA ESTÁ
DISPONÍVEL EM:
renatomelo.com.br/slides
ou no grupo do Facebook:
bit.ly/gruporenato