SALVAR PRINCESA PRESSIONE O BOTÃO PARA PARA SALVAR SALVAR A PRINCESA
X
Foco em
EXPERIÊNCIAS (pessoas, atividades, contexto)
SIGNIFICATIVA possui significado pessoal
AGRADÁVEL vale a pena compartilhar
CONVENIENTE Funciona examente como você pensa
USÁVEL pode ser usável sem dificuldade
CONFIÁVEL sempre disponível quando preciso
FUNCIONAL trabalhar como o programado
Foco em
TAREFAS
DIGITAL ONTEM
Anúncios
Web
Anúncios
Web
Search
Mobile
Social
Eventos
PDV
Embalagem
Garantir que a experiência seja positiva em todos os pontos de contato com a marca.
UX
MODELO DE MATURIDADE Embutido UX está no tecido da organização, não discutido separadamente Comprometido UX é um dos principais princípios da estratégia organizacional
6
5 4 3 2 1
Praticado UX é crítico e executivos estão ativamente envolvidos
Investido UX é muito importante e programas formais surgem
Interessado UX é importante, mas recebe pequeno incentivo
Desconhecido UX não é importante
MODELO DE MATURIDADE
Humano
Tecnologia
DESIGN
PESQUISA
FRONT-END
BACK-END
? Planejamento
Diretor de Arte
Desenvolvedor
MODELO DE MATURIDADE
Humano
Tecnologia
PESQUISA
DESIGN
FRONT-END
Arquiteto da Informação UI Designer
BACK-END
Desenvolvedor
MODELO DE MATURIDADE
Humano
Tecnologia
PESQUISA
DESIGN
FRONT-END
Arquiteto da Informação UI Designer
UX Designer
BACK-END
Desenvolvedor
UX depende de...
CONTEXTO
CONTEÚDO
USUÁRIO
Contexto é ao mesmo tempo
QUANTITATIVO & QUALITATIVO Tamanho da tela
Objetivos do usuário
Conectividade
Ambiente do usuário
Processamento
Atenção do usuário
Capacidade
Capacidade do usuário
Métodos de entrada
Como entregamos isso?
Pesquisa e Análise
Estratégia e Conceito
Design
Desenvolvimento
Implementação
Monitoramento
ENTREGÁVEIS 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
Pesquisa e Análise
É sobre pessoas, e não dispositivos.
ANTIGO CONTEXTO
•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
NOVO 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
Mobile não é um nicho.
2015 MOBILE ULTRAPASSA DESKTOP
MOBILE usuários conectados no mundo hoje
15% DO TRÁFEGO GLOBAL É MOBILE
1.2
58% EUA JÁ POSSUI SMARTPHONES
bilhões
de pessoas
48% JÁ USOU PARA COMPRAR
Brasil já possui 14% de adoção representando um total de
27 milhões de pessoas.
28% Android
13% Symbian
12% iOS
Nenhum tamanho de tela possui mais de
20% de marketshare
Não 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 Números em kilobits por segundo.
3G NO BRASIL
#significa Um iPad com 3G da TIM leva quase 2 minutos a página inicial do NãoSalvo.
3G NO BRASIL
QR CODE
NÃO VEM INSTALADO NA MAIORIA DOS SMARTPHONES
QR CODE
EXIGE CONEXÃO COM A INTERNET
6.2%
DA AUDIENCIA TOTAL NOS ESTADOS UNIDOS JÁ USOU QR CODE
53%
49%
35%
58%
homens 18-34
revistas ou jornais
embalagem de produto
escanearam em casa
49% tablets
Cada vez mais mobilidade Tablets cresceram 49.5% em 2012 em relação ao ano anterior.
CONSUMO DE INFORMAÇÃO
33%
Atividades consecutivas no tablet enquanto assistem televisão
Buscaram informação relacionada ao programa que assistiam.
CONSUMO DE INFORMAÇÃO
20% Atividades consecutivas no tablet enquanto assistem televisão
Buscaram informação de um produto que viram o anúncio na TV.
CONSUMO DE INFORMAÇÃO
Atividades consecutivas no tablet enquanto assistem televisão
13%
Buscaram cupons e ofertas relacionadas ao comercial que assistiram.
CONSUMO SIMULTÂNEO INTERNET + TELEVISÃO
70%
dos consumidores simultâneos navegam motivados pela TV
80%
destes consumidores que também comentam assistem TV motivados pela internet
TAMANHO FAZ DIFERENÇA
10’’
9’’ 7’’ 5’’
125 pageviews
116 pageviews
90 pageviews
79 pageviews
TAMANHO FAZ DIFERENÇA
17
30
39
(*) NÚMERO DE MINUTOS EM MÉDIA
43*
“Você deve começar com a experiência do usuário e depois ir pra tecnologia.
Steve Jobs
Estratégia e Conceito
CRIAR UM APLICATIVO NÃO IRÁ RESOLVER O PROBLEMA.
Aplicativator CRIAR APLICATIVO OU SELECIONE PELO TIPO
Geo-localização
Fotos com filtros
Mensagens instantâneas
Enganando
o i c ó g e N
e d s o v i t e j b O
Negócio
Usuário
Destruindo
Negócio
Usuário
Equilibrando
Negócio
Usuário
Sonhando
Negócio
Necessidades de Pessoas
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
O QUE É REALMENTE É OPCIONAL?
Pão e Salsicha Mostarda Ketchup Purê Batata Palha Vinagrete
A MENSAGEM É ACESSÍVEL?
NEM TODO MUNDO TEM UM...
Galaxy S9
iPhone 8S
MOBILE
Tamanho de tela
Processador limitado
Conectividade reduzida
Sistema operacional limitado
Aquilo que chamamos de mobile compreende mais que apenas celulares e smartphones, mas também tablets, jogos portáteis.
MOBILE
Uso desnecessário de Flash 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.
MOBILE
Conexão Limitada A conexão 3G no Brasil não atinge 1 Mbps (megabit por segundo)
3G
A MENSAGEM É COMPREENSÍVEL?
A MENSAGEM É RELEVANTE?
Calma. Estamos quase lá.
Design
BOM DESIGN !
BOA EXPERIÊNCIA
Passos antes 4 de abrir o PSD
VALIDE INTERNAMENTE DESENVOLVA PROTÓTIPOS TESTE EXTERNAMENTE APRENDA COM O COMPORTAMENTO DO USUÁRIO
VALIDE INTERNAMENTE · Entreviste sua mãe · Entreviste seu vizinho · Não precisa gastar
DESENVOLVA PROTÓTIPOS Navegação Esboço
Fluxograma
Wireframe
Interação Elementos Visuais
Funcionalidades
Protótipo
Alta Fidelidade
Simulação
Processo Dinâmico
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 PRIMEIRO Mobile First Design
PENSAR RESPONSIVO Fazendo que o conteúdo seja acessível e seja entregue para vários dispositivos.
1024+
1023-768
1
767-480
4 1
2
7
2 5 7
3
6
até-479
Botões Acessíveis FÁCIL
DIFÍCIL
A localização dos elementos deve ser levada em conta na criação de soluções onde o uso mobile seja foco da ação.
Movimentos Fáceis FÁCIL
DIFÍCIL
Interfaces que utilizam gestos para desencadear ações devem levar em conta a usabilidade para o público em dispositivos conhecidos.
A FORMA DE USAR
15%
49%
36%
Desenvolvimento
NÃO EXISTE BOM UX SEM BOM DESENVOLVIMENTO.
Usuários não querem saber de tecnologia
Não querem saber de esperar
Akamai reportou
75% dos usuários com problemas de congelamento, crash ou muito tempo de carregamento de página simplesmente
não compraram.
A cada 100 milissegundos do tempo de carregamento de página reduz
1% das vendas no Amazon
Google ao aumentar de carregamento de
0.4 para 0.9 segundos reduziu a receita de publicidade em
20%
1
Diminue o tempo de carregamento
2
Pode economizar dinheiro
3
Pode auxiliar em melhor posicionamento em motores de busca.
Carregue Progressivamente
Reduza todos os arquivos possíveis
Implementação e QA
TUDO FUNCIONA COMO PLANEJADO?
TUDO É RASCUNHO. TUDO É TESTE. TUDO É BETA.
ITERAÇÃO Ato de repetir o processo com a intenção de se aproximar de um objetivo, meta ou resultado desejado.
MODELO ATUAL
IDEIA
•Maior chance de erro •Menor Aprendizado •Sem Continuidade
DESENVOLVIMENTO
LANÇAMENTO
NOVO MODELO
•Menor chance de erro •Maior Aprendizado •Melhoria Continua
DESENVOLVIMENTO
IDEIA
VALIDAÇÃO
LANÇAMENTO
ITERAÇÃO
NÃO EXISTE
UMA SOLUÇÃO QUE SIRVA PARA TODOS
Monitoramento
NÃO SE PODE MELHORAR O QUE NÃO SE MEDE.
QUE TESTE USAR?
QUANTOS? Se a pergunta é:
Qual o preço que mais efetivo? Qual CTA recebe mais clicks? Qual layout gera mais vendas? Qual email performa melhor?
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.
