UX para agências de publicidade
Richard Jesus @richardrx
Antes de qualquer coisa...
UI não é UX
INTERFACE
PESSOAS SISTEMAS
INTERFACE DE USUÁRIO (UI)
UX não é só usabilidade
SALVAR PRINCESA
PRESSIONE O BOTÃO PARA SALVAR A PRINCESA
Matador de DragõesX
ref: Why Usability Engineers Don’t Design Video Games - SmashingApps
FUNCIONAL trabalhar como o programado
Foco emTAREFAS
(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 emEXPERIÊNCIAS
(pessoas, atividades, contexto)
SIGNIFICATIVA possui significado pessoal
ref: UX Hierarchy of neeeds - Stephen Anderson
DIGITAL ONTEM
Anúncios Web
Anúncios Web Search Mobile
Social Eventos PDV Embalagem
DIGITAL HOJE
Garantir que a experiência seja positiva em todos os pontos de contato com a marca.
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
DESIGNPESQUISA FRONT-END BACK-END
Humano Tecnologia
Diretor de Arte Desenvolvedor
?Planejamento
MODELO DE MATURIDADE
Fornecedor
DESIGNPESQUISA FRONT-END BACK-END
Humano Tecnologia
Arquiteto da Informação UI Designer Desenvolvedor
MODELO DE MATURIDADE
DESIGNPESQUISA FRONT-END BACK-END
Humano Tecnologia
UI Designer DesenvolvedorArquiteto da InformaçãoUX Designer
MODELO DE MATURIDADE
CONTEÚDO USUÁRIO
UX depende de...
CONTEXTO
Contexto é ao mesmo tempoQUANTITATIVO & 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
Como entregamos isso?
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
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
ENTREGÁVEIS
Pesquisa e Análise
Estratégia e Conceito
Design
Desenvolvimento
Implementação
Monitoramento
•Moodboards
ENTREGÁVEIS
Pesquisa e Análise
Estratégia e Conceito
Design
Desenvolvimento
Implementação
Monitoramento
•Especificações de Projeto •Recomendações de SEO
ENTREGÁVEIS
Pesquisa e Análise
Estratégia e Conceito
Design
Desenvolvimento
Implementação
Monitoramento
•Controle de Qualidade
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
ENTREGÁVEIS
Pesquisa e Análise
Estratégia e Conceito
Design
Desenvolvimento
Implementação
Monitoramento
É sobre pessoas, e não dispositivos.
Pesquisa e Análise
•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
•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
Mobile não é um nicho.
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.2 bilhõ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
20%Nenhum tamanho
de tela possui mais de
de marketshare
Não ser otimizado para mobile é como fechar sua loja um dia por semana.
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
Um iPad com 3G da TIM leva quase 2 minutos a página inicial do NãoSalvo.
#significa
3GNO BRASIL
QR CODE
NÃO VEM INSTALADO NA MAIORIA DOS
SMARTPHONES
EXIGE CONEXÃO COM
A INTERNET
QR CODE
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
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
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
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
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
dos consumidores simultâneos navegam motivados pela TV
destes consumidores que também comentam assistem TV motivados pela internet70% 80%
CONSUMO SIMULTÂNEOINTERNET + TELEVISÃO
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
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
“Você deve começar com a experiência do usuário e depois ir pra tecnologia.
Steve Jobs
CRIAR UM APLICATIVO NÃO IRÁ RESOLVER O PROBLEMA.
Estratégia e Conceito
Aplicativator
CRIAR APLICATIVO
OU SELECIONE PELO TIPO
Geo-localização
Fotos com filtros
Mensagens instantâneas
Obj
etivo
s de
Neg
ócio
Necessidades de Pessoas
Enganando
Destruindo Sonhando
Equilibrando
Negócio Usuário Negócio Usuário
Negócio Usuário Negócio Usuário
Quais são os objetivos do negócio e como eles se conectam nas necessidades das pessoas.
O QUE É REALMENTE É NECESSÁRIO?
Pão e Salsicha Mostarda Ketchup Purê Batata Palha Vinagrete
Pão e Salsicha Mostarda Ketchup Purê Batata Palha Vinagrete
O QUE É REALMENTE É OPCIONAL?
A MENSAGEM É ACESSÍVEL?
Galaxy S9 iPhone 8S
NEM TODO MUNDO TEM UM...
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
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
Conexão Limitada 3GA conexão 3G no Brasil não atinge 1 Mbps (megabit por segundo)
MOBILE
A MENSAGEM É COMPREENSÍVEL?
A MENSAGEM É RELEVANTE?
Calma. Estamos quase lá.
BOM DESIGN
BOA EXPERIÊNCIA
≠
Design
Passos antes de abrir o PSD4
DESENVOLVA PROTÓTIPOS
VALIDE INTERNAMENTE
APRENDA COM O COMPORTAMENTO DO USUÁRIO
TESTE EXTERNAMENTE
VALIDE INTERNAMENTE
· Entreviste sua mãe · Entreviste seu vizinho · Não precisa gastar
Wireframe Protótipo Simulação
Esboço FluxogramaNavegação
Elementos Visuais
Interação
Funcionalidades Alta Fidelidade
Processo Dinâmico
DESENVOLVA PROTÓTIPOS
TESTE EXTERNAMENTE
· Teste com a faxineira · Teste com o mecânico · Teste com o entregador
APRENDA COM O USUÁRIO
· Observe e ouça · Pergunte e tome notas · Não influencie decisões
Torne a mensagem clara.
Contraste
Fonte
Idioma
Call to action
Use baixo contraste de cores para restrições
Contraste
Fonte
Idioma
Call to action
Use fontes legíveis
Contraste
Fonte
Idioma
Call to action
Use linguagem apropriada
Contraste
Fonte
Idioma
Call to action Uma ação primária por tela
Comparação é como as pessoas tomam decisões
Interfaces existem para possibilitar interação.
Mantenha os usuários no controle
Promova um próximo passo natural ao usuário
A forma segue a função.
ADEQUAR A MENSAGEM?
PENSE MOBILE PRIMEIROMobile First Design
6
PENSAR RESPONSIVOFazendo 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
Botões AcessíveisA 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
Movimentos FáceisInterfaces que utilizam gestos para desencadear ações devem levar em conta a usabilidade para o público em dispositivos conhecidos.
FÁCIL
DIFÍCIL
ref: How do users really hold mobile devices - Steven Hoober
49%
36%
15%
A FORMA DE USAR
NÃO EXISTE BOM UX SEM BOM DESENVOLVIMENTO.
Desenvolvimento
Usuários não querem saber de tecnologia
Não querem saber de esperar
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.
do tempo de carregamento de página reduz
A cada 100 milissegundos
das vendas no Amazon
1%Kohavi and Longbotham 2007
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
2
Diminue o tempo de carregamento1
Pode economizar dinheiro
3 Pode auxiliar em melhor posicionamento em motores de busca.
Carregue Progressivamente
Reduza todos os arquivos possíveis
TUDO FUNCIONA COMO PLANEJADO?
Implementação e QA
TUDO É RASCUNHO. TUDO É TESTE. TUDO É BETA.
ITERAÇÃOAto de repetir o processo com a intenção de se aproximar de um objetivo, meta ou resultado desejado.
MODELO ATUAL•Maior chance de erro •Menor Aprendizado •Sem Continuidade
IDEIA LANÇAMENTODESENVOLVIMENTO
•Menor chance de erro •Maior Aprendizado •Melhoria Continua
IDEIA LANÇAMENTO
VALIDAÇÃO ITERAÇÃO
NOVO MODELO
DESENVOLVIMENTO
UMA SOLUÇÃO QUE SIRVA PARA TODOS
NÃO EXISTE
NÃO SE PODE MELHORAR O QUE NÃO SE MEDE.
Monitoramento
QUE TESTE USAR?
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
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
Publicitários que ignoram pesquisa são tão perigosos como generais que ignoram sinais do inimigo.
David Ogilvy
MENSURE SEUS KPI’S
EXPERIÊNCIA PERTENCE 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
Top Related