1.
UX: Creating
Killer
Experiences

2.
Olá!
Alexandre Tarifa
Camila Mariano
2

3.
“
“Uma boa experiência é
aquela que deixa o
usuário feliz porque ele
consegue cumprir seu
objetivo.”
3

4.
A experiência do seu usuário
depende ...
╺ do que você tem para oferecer para ele
╺ de como ele está se sentindo quando chega até você
╺ das regras do seu negócio (promoção, devolução..)
╺ e da usabilidade do seu produto!
4

5.
1.
Introdução à
Usabilidade e
Arquitetura de
Informação
5

6.
O que é
usabilidade?
6

7.
Funções da usabilidade
╺ aprendizagem
╺ eficiência
╺ memorabilidade
╺ prevenção de erros
╺ satisfação
7

8.
8

9.
O que
acontece
se a usabilidade do projeto está ruim?
9

10.
As 10 heurísticas de
Nielsen

11.
As 10 heurísticas de
Nielsen
1. Mantenha o
status visível

12.
As 10 heurísticas de
Nielsen
2. Tenha
proximidade
com o
mundo real

13.
As 10 heurísticas de
Nielsen
3. Exerça o
controle,
sem tirar
liberdade

14.
As 10 heurísticas de
Nielsen
4. Mantenha
consistência
e padrões

15.
As 10 heurísticas de
Nielsen
5. Previna os
erros

16.
As 10 heurísticas de
Nielsen
6. Crie
reconhecimento

17.
As 10 heurísticas de
Nielsen
7.
Flexibilidade
e eficiência
de uso

18.
As 10 heurísticas de
Nielsen
8. Escolha
um design
minimalista

19.
As 10 heurísticas de
Nielsen
9. Ajude a
diagnosticar
e consertar
erros

20.
As 10 heurísticas de
Nielsen
10. Ofereça
documentação
e ajuda

21.
O que é
arquitetura de
informação?

22.
Etapas da arquitetura
╺ inventário de conteúdo
╺ auditoria de conteúdo
╺ agrupamento de informações
╺ taxonomia
╺ informações descritivas
23

23.
Como detectar problemas na
arquitetura?
- baixo tráfego em determinada categoria
- conversão baixa
- altas taxas de rejeição
- baixo número de entradas
- alto volume de pesquisas
24

24.
Atividade 1
a sala deve se dividir em 10 grupos
cada grupo representa 1 empresa, mas todas do
mesmo ramo de atividade: é um e-commerce de
sapatos
cada empresa deve definir qual será seu tipo de
produto (para mulheres? homens? esportistas?
crianças?) e buscar referências de ecommerce no ramo
(já considerando o que são boas práticas ou não de UX)

25.
2.
Para quem você
está criando sua
UX?
26

26.
Você não é
o seu
usuário
#ficaadica

27.
4 motivos para querer saber
quem é seu usuário
- vai ser mais fácil aprimorar o desenvolvimento do
produto
- o conteúdo vai ser muito melhor
- você vai descobrir quem são seus melhores
clientes
- com certeza você vai ver impacto nos resultados
28

28.
Público Alvo e Persona tem
diferença? Sim!
PÚBLICO ALVO
- É uma definição mais ampla do público que se interessa pelo
seu produto
- Não se refere a alguém específico
- Não aborda os hábitos do usuário
Exemplo: “meu público-alvo é composto por mulheres, entre 18
e 35 anos de idade, classes A e B, solteiras, com nível superior
(cursando ou completo), interessadas em assuntos de amor e
relacionamento.”

29.
Persona
- É a definição de um cliente real, de forma mais humanizada
- Faz referência à uma personagem específica
- Aborda detalhes dos seus hábitos ou comportamento
Exemplo: “Marília tem 31 anos, é formada em Publicidade e é autônoma. Ela é
solteira, gosta muito de viajar e curtir a noite. Está conectada a todas as redes
sociais e tem muitos amigos, mas às vezes se sente sozinha porque ainda não
encontrou a pessoa certa para se relacionar. Ela quer encontrar um companheiro e
sente falta de poder falar mais sobre seus problemas de relacionamento e
aceitação sem ser julgada pelos seus amigos ou familiares.”

30.
Como criar uma persona?
- se baseie em dados de pessoas reais
- se puder, faça em equipe
- agrupe os usuários por características comuns
Finalmente, crie a persona

31.
Exemplos de
personas
Consultoria de
negócios
Ecommerce de
bikes

32.
Casos de uso de
personas

33.
Casos de uso de
personas

34.
Atividade 2
É hora de criar uma persona para sua empresa!
Ela precisa ter:
Nome
Idade
Nível de escolaridade
Ocupação (trabalha fora? cargo? estudante?)
Meios de comunicação que mais usa (redes sociais, jornais, portais, tv)
Objetivos (o que ela pretende? quais são os principais objetivos?)
Desafios (quais dificuldades enfrenta? quais são as dores dela?)
Como sua empresa pode ajudar (como seus produtos e serviços podem ajudar?)

35.
3.
Como usar
pesquisas e
dados para
melhorar seu UX
36

36.
Por que pesquisas e dados
podem melhorar seu UX?
- elimina os projetos desnecessários
- diminui a tomada de decisão baseada em opinião
pessoal
- possibilita levantamento de hipóteses e testes

37.
Função dos dados
QUANTITATIVOS – quem, o que, onde
╺ Apontar os problemas
Audiência, aquisição, comportamento, conversão
╺ Orientar estrategicamente
Necessidade de um projeto, jornada do usuário, dados para criar
personas, investimento certo
╺ Monitorar KPI’s
Ferramentas: Google analytics, Mixpanel, Kissmetrics, Crazyegg, Clicktale

38.
Função dos dados
QUALITATIVOS – por que
╺ Testes de usabilidade
╺ Pesquisas com usuários
Satisfação, intenção, feedback
╺ Focus Group

39.
O que fazer com resultado dos
dados quali e quanti?
╺ levante hipóteses e faça testes A/B
Ferramentas: google optmizer, optimizely,
google analytics e VWO
╺ estabeleça metas

40.
Atividade 3
Considerando este cenário e supondo que a tela de
venda do seu produto seja similar a esta, crie
hipóteses e sugira um teste A/B para solucionar o
problema
A conversão da tela de detalhe do produto para o
carrinho de compra caiu de 15% para 10% depois de
uma atualização
Em pesquisa com os usuários, eles disseram que
não estão concluindo a compra porque há dúvidas
sobre o prazo de entrega e valor do frete. Eles não
querem seguir adiante, sem saber essas
informações.

41.
4.
Protótipos e
design
42

42.
Design persuasivo = credibilidade
╶qualidade do design
╶informação, fotos e vídeos atualizados
╶jogo aberto
╶outras opiniões a seu respeito

43.
Design persuasivo = credibilidade
 

44.
Wireframe, protótipo e mockup?
╺ Wireframe
baixa fidelidade
usado para discutir
elementos da tela

45.
Wireframe, protótipo e mockup?
- Protótipo
reprodução mais fiel da tela
pode ser navegável
usado nos testes de
usabilidade

46.
Wireframe, protótipo e mockup?
- Mokup
layout final bem definido
usado para discutir ajustes
finais ou vender projetos

47.
Precisamos falar
sobre mobile
Site mobile, responsivo ou app?
48
😉

48.
Cenários
Site mobile
2ª versão do seu site
desenvolvido
unicamente
pensando no uso
pelo celular
exige atualização e
manutenção
Site responsivo
versão única do seu
site
se adapta aos
diferentes tamanhos
de tela
facilita a atualização
e manutenção
App
tem a função de engajar o usuário
não custa barato desenvolver e manter um app nativo Android
e iOS, seguindo os padrões de cada um deles
tem a vantagem de contar com recursos do celular para
oferecer ferramentas diferentes (como a câmera, por exemplo)
ou comunicação por push notification ou ainda funções offline
49

49.
50
6 dicas para design
mobile

50.
1. Targets
╺ atenção à zona de clique
╺ evite que seu usuário não consiga clicar
ou que ele clique no lugar errado

51.
2. Fácil de ler não significa fácil de clicar
Como os usuários consomem o
conteúdo
Zonas de clique

52.
3. Navegação por barra, menu e ícones
Action bar Tab bar

53.
Menu e lista
3. Navegação por barra, menu e ícones

54.
4. Sugerindo interatividade
links botões

55.
4. Sugerindo interatividade
swipe scroll

56.
5. Performance
carregamento da página e
otimização de imagens
feedback para os usuários

57.
5. Performance
comunicando o progresso
╺0,1 segundo: sensação de
resposta direta
╺0,2 – 1 segundo: sente atraso,
mas ainda no controle
╺1-10 segundos: já se sente
sujeito à boa vontade do site
funcionar, mas ainda tolera uma
espera
╺Mais de 10 segundos: chegou ao
limite de atenção. Pode desistir
agora de esperar ☹

58.
6. Performance do usuário
cadastro ou login formulários

59.
6. Performance do usuário
filtros mapas

60.
4
lembretes
finais
para melhorar sua UX
61

61.
1. Monte uma equipe multidisciplinar
╺pontos de vista diversos
╺profissionais das áreas de marketing, TI,
atendimento, vendas, criação...
╺use processos e ferramentas para que seja
produtivo

62.
2. Entenda seus usuários
╺tem que conhecer bem seu usuário
╺entender suas necessidades e
expectativas
╺seu usuário pode usar seu produto de
forma inesperada 

63.
3. Siga boas práticas de design
╺adotar comunicação, simbologia e
comportamentos comuns
╺procure ser minimalista
╺facilite a vida do seu usuário 

64.
4. Faça testes
╺teste de usabilidade
╺teste A/B
╺sem testes, você pode ter surpresas

65.
Atividade 4
Cada grupo deverá representar o fluxo de
venda de um produto, em um wireframe. O
fluxo deve conter as seguintes etapas:
- Login/cadastro
- Dados de pagamento
- Confirmação de compra
Use sua imaginação e lembre-se de usar
todos os recursos possíveis para facilitar a
vida (e a compra) do seu usuário

66.
Apresentação
dos grupos
67

67.
68
Obrigado!
Perguntas?
Alexandre Tarifa
Camila Mariano