Ux para agencias de publicidade

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