UX

para agncias de publicidade

Richard Jesus

@richardrx

Antes de qualquer coisa...

UI no UX

INTERFACE DE USURIO (UI)

PESSOAS

SISTEMAS

INTERFACE

UX no s usabilidade

Matador de Drages

SALVAR PRINCESA
PRESSIONE O BOTO PARA SALVAR A PRINCESA

ref: Why Usability Engineers Dont Design Video Games - SmashingApps

Foco em!

EXPERINCIAS
(pessoas, atividades, contexto)

SIGNIFICATIVA
possui significado pessoal

AGRADVEL
vale a pena compartilhar

CONVENIENTE
Funciona examente como voc pensa

USVEL
pode ser usvel sem dificuldade

CONFIVEL
sempre disponvel quando preciso

FUNCIONAL
trabalhar como o programado

Foco em!

TAREFAS
(produtos, caractersticas)

ref: UX Hierarchy of neeeds - Stephen Anderson

DIGITAL ONTEM

Anncios

Web

DIGITAL HOJE

Anncios

Web

Search

Mobile

Social

Eventos

PDV

Embalagem

Garantir que a experincia seja positiva em todos os pontos de contato com a marca.

UX

MODELO DE MATURIDADE

5 4 3 2 1

Embutido UX est no tecido da organizao, no discutido separadamente

Comprometido UX um dos principais princpios da estratgia organizacional

Praticado UX crtico e executivos esto ativamente envolvidos

Investido UX muito importante e programas formais surgem

Interessado UX importante, mas recebe pequeno incentivo

Desconhecido UX no importante

MODELO DE MATURIDADE

Humano

Tecnologia

PESQUISA

DESIGN

FRONT-END

BACK-END

?
Planejamento Fornecedor Diretor de Arte Desenvolvedor

MODELO DE MATURIDADE

Humano

Tecnologia

PESQUISA

DESIGN

FRONT-END

BACK-END

Arquiteto da Informao UI Designer

Desenvolvedor

MODELO DE MATURIDADE

Humano

Tecnologia

PESQUISA

DESIGN

FRONT-END

BACK-END

Arquiteto da Informao UI Designer

Desenvolvedor

UX Designer

UX depende de...

CONTEXTO

CONTEDO

USURIO

Contexto ao mesmo tempo

QUANTITATIVO & QUALITATIVO

Tamanho da tela Conectividade Processamento Capacidade Mtodos de entrada Objetivos do usurio Ambiente do usurio Ateno do usurio Capacidade do usurio

Como entregamos isso?

Pesquisa e Anlise

Estratgia e Conceito

Design

Desenvolvimento

Implementao

Monitoramento

ENTREGVEIS

Pesquisa e Anlise

Estratgia e Conceito

Design

Desenvolvimento

Implementao

Benchmark Entrevistas Pesquisa Quantitativa Definio de KPIs Anlise de Tarefas Inventrio de Contedo

Monitoramento

ENTREGVEIS

Pesquisa e Anlise

Estratgia e Conceito

Design

Desenvolvimento

Implementao

Personas Blueprint Jornada de Consumidor Ecossistema Mapa do Site Card Sorting Wireframe Prottipos Navegveis

Monitoramento

ENTREGVEIS

Pesquisa e Anlise

Estratgia e Conceito

Design

Moodboards

Desenvolvimento

Implementao

Monitoramento

ENTREGVEIS

Pesquisa e Anlise

Estratgia e Conceito

Design

Desenvolvimento

Especicaes de Projeto Recomendaes de SEO

Implementao

Monitoramento

ENTREGVEIS

Pesquisa e Anlise

Estratgia e Conceito

Design

Desenvolvimento

Implementao

Controle de Qualidade

Monitoramento

ENTREGVEIS

Pesquisa e Anlise

Estratgia e Conceito

Design

Desenvolvimento

Implementao

Monitoramento

Teste de Usabilidade Avaliao Heurstica Testes A/B Anlise de Mtricas

Pesquisa e Anlise

sobre pessoas, e no dispositivos.

ANTIGO CONTEXTO

TELA GRANDE CONEXO RPIDA NAVEGADOR CAPAZ HARDWARE POTENTE POSIO ESTACIONRIA AMBIENTE CONFORTVEL SISTEMA OPERACIONAL ROBUSTO ENTRADA EFICIENTE DE INFORMAO

NOVO CONTEXTO

MLTIPLAS TELAS CONEXES DIVERSAS NAVEGADORES VARIADOS HARDWARE VARIVEL INMERAS POSIES QUALQUER AMBIENTE SISTEMAS OPERACIONAIS LIMITADOS ENTRADA LIMITADA DE INFORMAO

Mobile no um nicho.

MOBILE

2015 MOBILE ULTRAPASSA DESKTOP

1.2
de pessoas
Brasil j possui 14% de adoo representando um total de

usurios conectados no mundo hoje

15% DO TRFEGO GLOBAL MOBILE 58% EUA J POSSUI SMARTPHONES 48% J USOU PARA COMPRAR

bilhes

27 milhes
de pessoas.

28% Android

13% Symbian

12% iOS

ref: ThinkwithGoogle 2012 - Ipsos, iab and Mobile Marketing Association

20%
de marketshare

Nenhum tamanho de tela possui mais de

No ser otimizado para mobile como fechar sua loja um dia por semana.

Operadoras 3G no Brasil
Vivo 724 Claro 421 Oi Brasil Telecom 429,6 Oi Telemar 368,7 Tim 363,6
Nmeros em kilobits por segundo.

3G
NO BRASIL

#signica
Um iPad com 3G da TIM leva quase 2 minutos a pgina inicial do NoSalvo.

3G
NO BRASIL

QR CODE

NO VEM INSTALADO NA MAIORIA DOS SMARTPHONES

QR CODE

EXIGE CONEXO COM A INTERNET

6.2%

DA AUDIENCIA TOTAL NOS ESTADOS UNIDOS J USOU QR CODE

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%
tablets

Cada vez mais mobilidade Tablets cresceram 49.5% em 2012 em relao ao ano anterior.

ref: Q3 Tablet Shipments Up 49.5% Vs. Yr Ago; Up 6.7% Vs.Q2 - FORBES / IDC

CONSUMO DE INFORMAO

33% 20%
Atividades consecutivas no tablet enquanto assistem televiso

Buscaram informao relacionada ao programa que assistiam.

Buscaram informao de um produto que viram o anncio na TV.

13%

Buscaram cupons e ofertas relacionadas ao comercial que assistiram.

ref: Advertising and Audiences: The State of the Media 2012 - NIELSEN

CONSUMO DE INFORMAO

33% 20%
Atividades consecutivas no tablet enquanto assistem televiso

Buscaram informao relacionada ao programa que assistiam.

Buscaram informao de um produto que viram o anncio na TV.

13%

Buscaram cupons e ofertas relacionadas ao comercial que assistiram.

ref: Advertising and Audiences: The State of the Media 2012 - NIELSEN

CONSUMO DE INFORMAO

33% 20%
Atividades consecutivas no tablet enquanto assistem televiso

Buscaram informao relacionada ao programa que assistiam.

Buscaram informao de um produto que viram o anncio na TV.

13%

Buscaram cupons e ofertas relacionadas ao comercial que assistiram.

ref: Advertising and Audiences: The State of the Media 2012 - NIELSEN

CONSUMO SIMULTNEO
INTERNET + TELEVISO

70%

dos consumidores simultneos navegam motivados pela TV

80%

destes consumidores que tambm comentam assistem TV motivados pela internet

TAMANHO FAZ DIFERENA

10

9
7
5

125 pageviews

116 pageviews

90 pageviews

79 pageviews

ref: Amazon Kindle Fire is 54% of US Android tablets 2012 - comScore / Luke Wroblewski

TAMANHO FAZ DIFERENA

17

30

39

43*

(*) NMERO DE MINUTOS EM MDIA

ref: The Multi Screen World 2012 - Google / Sterling Brand / Ipsos

Voc deve comear com a experincia do usurio e depois ir pra tecnologia.

Steve Jobs

Estratgia e Conceito

CRIAR UM APLICATIVO NO IR RESOLVER O PROBLEMA.

Aplicativator CRIAR APLICATIVO

OU SELECIONE PELO TIPO

Geo-localizao

Fotos com filtros

Mensagens instantneas

Enganando

Equilibrando

Objetivos de Negcio

Negcio

Usurio

Negcio

Usurio

Destruindo

Sonhando

Negcio

Usurio

Negcio

Usurio

Necessidades de Pessoas

Quais so os objetivos do negcio e como eles se conectam nas necessidades das pessoas.

O QUE REALMENTE NECESSRIO?

Po e Salsicha Mostarda Ketchup Pur Batata Palha Vinagrete

O QUE REALMENTE OPCIONAL?

Po e Salsicha Mostarda Ketchup Pur Batata Palha Vinagrete

A MENSAGEM ACESSVEL?

NEM TODO MUNDO TEM UM...

Galaxy S9

iPhone 8S

MOBILE

Tamanho de tela

Processador limitado

Aquilo que chamamos de mobile compreende mais que apenas celulares e smartphones, mas tambm tablets, jogos portteis.

Conectividade reduzida

Sistema operacional limitado

MOBILE

Uso desnecessrio de Flash Um caso clssico de tecnologia no acessvel para alguns dispositivos mveis, mas que pode se repetir com outras tecnologias que no considerem dispositivos mveis.

MOBILE

Conexo Limitada A conexo 3G no Brasil no atinge 1 Mbps (megabit por segundo)

3G

A MENSAGEM COMPREENSVEL?

A MENSAGEM RELEVANTE?

Calma. Estamos quase l.

Design

BOM DESIGN

!
BOA EXPERINCIA

Passos antes 4 de abrir o PSD

VALIDE INTERNAMENTE DESENVOLVA PROTTIPOS TESTE EXTERNAMENTE APRENDA COM O COMPORTAMENTO DO USURIO

VALIDE INTERNAMENTE
Entreviste sua me Entreviste seu vizinho No precisa gastar

DESENVOLVA PROTTIPOS
Navegao Esboo Fluxograma Interao Elementos Visuais Funcionalidades Alta Fidelidade Processo Dinmico

Wireframe

Prottipo

Simulao

TESTE EXTERNAMENTE
Teste com a faxineira Teste com o mecnico Teste com o entregador

APRENDA COM O USURIO

Observe e oua Pergunte e tome notas No influencie decises

Torne a mensagem clara.

Contraste
Fonte Idioma Call to action

Use baixo contraste de cores para restries

Contraste

Fonte
Idioma Call to action

Use fontes legveis

Contraste Fonte

Idioma
Call to action

Use linguagem apropriada

Contraste Fonte Idioma

Call to action

Uma ao primria por tela

Comparao como as pessoas tomam decises

Interfaces existem para possibilitar interao.

Mantenha os usurios no controle

Promova um prximo passo natural ao usurio

A forma segue a funo.

ADEQUAR A MENSAGEM?

PENSE MOBILE PRIMEIRO

Mobile First Design

PENSAR RESPONSIVO
Fazendo que o contedo seja acessvel e seja entregue para vrios dispositivos.

1024+

1023-768

767-480

at-479

1 2 3

5
7

Botes Acessveis
FCIL

A localizao dos elementos deve ser levada em conta na criao de solues onde o uso mobile seja foco da ao.

DIFCIL

Movimentos Fceis
FCIL

Interfaces que utilizam gestos para desencadear aes devem levar em conta a usabilidade para o pblico em dispositivos conhecidos.

DIFCIL

A FORMA DE USAR

15%

49%
36%

ref: How do users really hold mobile devices - Steven Hoober

Desenvolvimento

NO EXISTE BOM UX SEM BOM DESENVOLVIMENTO.

Usurios no querem saber de tecnologia

No querem saber de esperar

com problemas de congelamento, crash ou muito tempo de carregamento de pgina simplesmente

75% dos usurios

no compraram.

Akamai reportou

Forbes: Web Performance is User Experience

A cada 100 milissegundos

do tempo de carregamento de pgina reduz

das vendas no Amazon

Kohavi and Longbotham 2007

1%

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

1 2 3

Diminue o tempo de carregamento

Pode economizar dinheiro

Pode auxiliar em melhor posicionamento em motores de busca.

Carregue Progressivamente

Reduza todos os arquivos possveis

Implementao e QA

TUDO FUNCIONA COMO PLANEJADO?

TUDO RASCUNHO. TUDO TESTE. TUDO BETA.

Ato de repetir o processo com a inteno de se aproximar de um objetivo, meta ou resultado desejado.

ITERAO

MODELO ATUAL

Maior chance de erro Menor Aprendizado Sem Continuidade

IDEIA

DESENVOLVIMENTO

LANAMENTO

NOVO MODELO

Menor chance de erro Maior Aprendizado Melhoria Continua

IDEIA

DESENVOLVIMENTO

LANAMENTO

VALIDAO

ITERAO

NO
EXISTE
UMA SOLUO QUE SIRVA PARA TODOS

Monitoramento

NO SE PODE MELHORAR O QUE NO SE MEDE.

QUE TESTE USAR?

Se a pergunta :

QUANTOS?
Qual o preo que mais efetivo? Qual CTA recebe mais clicks? Qual layout gera mais vendas? Qual email performa melhor?

TESTE A/B

Se a pergunta :

PORQUE?
Porque no usam meu produto? Porque esto navegando nessa pgina? Onde as pessoas esto presas no site? Porque as pessoas no compram?
TESTE DE USABILIDADE

Publicitrios que ignoram pesquisa so to perigosos como generais que ignoram sinais do inimigo.

David Ogilvy

LIMITE AS
DISTRAES
USE PADRES APROPRIADOS

MENSURE SEUS KPIS

FAA COISAS

SEJA CREDVEL E

FUNCIONAIS

CONFIVEL

TORNE AES

REVERSVEIS

EXPERINCIA PERTENCE AO USURIO

SEJA CONSISTENTE
BOM PARA O USURIO E BOM PARA O NEGCIO

DESENVOLVA

EMPATIA
ESTABELEA

CONTEXTO

FORNEA FEEDBACK

MOSTRE
COMO FUNCIONA