BEM VINDOS AO E-BRANDINGRENATO MELO – 2016

O E-BRANDINGNÃO BASTA SER DIFERENTE E FAZER COISAS QUE NINGUÉM FAZ. TEM QUE

TER BOA IMAGEM E AGIR COMO HUMANO.

O E-BRANDINGSIM, O SEGREDO É AGIR COMO UM HUMANO, OU BEM, QUASE ISSO...

VAMOS A ALGUNS EXEMPLOS?

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

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

O E-BRANDING

CHICKEN FRIES ASSUME O TWITTER DO BRUGER KING

O E-BRANDING

MUDE O COMPORTAMENTO!CASE DO PONTO FRIO

TODDY BRASIL

CONEXÃO COM O PÚBLICO ALVO

HEINEKEN NO SNAP

CONEXÃO COM O PÚBLICO ALVO

NUBANK

NASCEU DIGITAL,PARA O PÚBLICO DIGITAL

NUBANK

MIMOS PARA O CLIENTE, MESMO QUE PAREÇA CARO

(caro é trazer um cliente novo)

FAQ PORVÍDEO.

RESPOSTASHUMANAS

UX e UIInjeção de personalidade no seu brandingRENATO MELO - 2016

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

INTERNET ONTEM

Anúncios Sites Institucionais

INTERNET HOJE: INTEGRAÇÃOE CONVERSÃO

Anúncios Sites Institucionais SEO Mobile

RedesSociais

Geo localização ConversãoNo PDV

Logística

O CONCEITO

E-BRANDIN

G

UIUX

UXExperiência do Usuário

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.

UX Design

Conteúdo

5 passos do UXEstratégia – Escopo – Estrutura –

Wireframe – Visual Design

BriefingPergunte, pergunte e

pergunte até esgotar suas dúvidas. O site deve

converter em vendas!

UXNa prática

#1 – Refaça todos os passosSimule e trace com sua equipe todos

os passos que um usuário pode percorrer no seu site.

#2 – Trace metas concretasO problema nunca será número de

visitas! Trace metas como aumentar número de leads, contatos,

orçamentos...

Design Responsivo e Disposição:Passou de

500 inscrições para 1200 por

mês

35% da operação do Call Center

existia apenas para responder uma demanda: Onde encontrar

a 2ª via do boleto.

#3 – Faça um protótipoAntes de ir ao ar, faça um protótipo

para ver se todo seu projeto caminhou bem

#4 – MétricasAvalie pouco a pouco seus resultados

via Google Analytics

#5 – TráfegoSEO, 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.

UIInterface do Usuário

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

UIIdeias para utilizar

#1 – AgruparAgrupe funções similares ao invés de

fragmentá-las.

#2 – Destaque a conversãoColoque cores e destaque somente a conversão. Tome cuidado para não

confundir e distrair seu usuário.

#3 – Menos é maisColoque nos campos de formulário

somente o necessário.

#4 – Excesso de linksSó use em caso de todos levarem ao

mesmo local. Tome cuidado em distrair demais seu usuário.

#5 – Call to Action?Troque “Cadastre-se agora” por

“Quero receber as melhores ofertas”, por exemplo

USABILIDADEComo aplicar no seus projetosRENATO MELO - 2016

USABILIDADEE sua importância

O QUE É USABILIDADE?

SIMPLES E FUNCIONAL. DÁ PARA MELHORAR?

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.

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.

RADARESO motorista não recebe alertas chamativos, tem que

prestar atenção no caminho e na tela do aplicativo a todo momento.

MUDANÇAS + SINAL SONORO

FORMULÁRIOSMedida é MP/H ao invés de KM/H o que pode confundir o

usuário.

USABILIDADETestes

1) FEEDBACK

até 0,1s: ideia de continuidade até 1s: delay percebido, mas okdepois de 10s: o usuário muda de tarefa.

O USUÁRIO NÃO QUER ESPERAR!

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

AMAZON

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

GOOGLE

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.

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

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.

4) CAIXA DE BUSCA

5) ETAPAS DO SEU SITE

1. Escolhas dos produtos

2. Cadastro ou login

3. Entrega e embalagem

4. Pagamento

Testes de Usabilidade

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

Maior controle de dados e variáveis;Mais fácil de envolver o cliente;Maior custoUsuário pode se sentir desconfortávelComportamento distante do seu universo real

LABORATÓRIO

Mais barato;Usuário se sente mais a vontade;Mais próximo de seu uso real;Menor controle dos dados e variáveisDificuldade de envolver o cliente (quem contrata)

AMBIENTE DO USUÁRIO

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ápidoProjetos com recursos

reduzidosTestar conceitos e

interfaces em fases iniciais de design

USABILIDADEPesquisas com Usuários

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

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

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

USABILIDADESoluções Nielsen

MUDANÇAS:De: A interface agiu como esperado?

Para: O que você esperava queacontecesse quando você ____?

MUDANÇAS:De: Você encontrou o que procurava?

Para: Onde você encontrou o item?

MUDANÇAS:De: Você acha que usaria esse

produto?

Para: Como você acha que esse produto se encaixaria no seu trabalho?

MUDANÇAS:De: Você achou fácil de usar?

Para: Qual a parte mais confusa da experiência?

USABILIDADERoteiro

• 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

ConversãoTestes, Vendas e Landing PagesRENATO MELO - 2016

ConversãoFazer seu usuário agir da forma desejada e mensurável

CONVERSÃOLANDING PAGE

PÁGINA ÚNICA PARA SOLICITAR OPT-IN DE

E-MAIL E GERAR LEADS

ANTES DE TUDO PENSE

EM UM PRÊMIO!

HOTEL = GUIA COMPLETO DA

CIDADE

CONVERSÃOTamanho da Página

662% de aumento na taxa de conversão.

Então, qual é a relação entre o

tamanho da página e a taxa de conversão?

NÃO HÁ RELAÇÃO!!

TESTE!!

CONVERSÃODesejo de Recompensa

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

Tangível

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

Intangível

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

CONVERSÃOMedo da Punição

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

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

Tangível

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

Intangível

Recompensa x Punição

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.

CONVERSÃOPunição ou Recompensa?

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.

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.

ESTA AULA ESTÁDISPONÍVEL EM:renatomelo.com.br/slides

ou no grupo do Facebook:bit.ly/gruporenato