Download - UX: Creating Killer Experiences - FIAP
UX: CreatingKillerExperiences
Olá!Alexandre Tarifa
Camila Mariano
2
““Uma boa experiência é
aquela que deixa o usuário feliz porque ele consegue cumprir seu
objetivo.”
3
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
1.Introdução à Usabilidade e Arquitetura de Informação
5
O que é usabilidade?
6
Funções da usabilidade
╺ aprendizagem
╺ eficiência
╺ memorabilidade
╺ prevenção de erros
╺ satisfação
7
8
O que acontece
se a usabilidade do projeto está ruim?
9
As 10 heurísticas de Nielsen
As 10 heurísticas de Nielsen
1. Mantenha o status visível
As 10 heurísticas de Nielsen
2. Tenha proximidade com o mundo real
As 10 heurísticas de Nielsen
3. Exerça o controle, sem tirar liberdade
As 10 heurísticas de Nielsen
4. Mantenha consistência e padrões
As 10 heurísticas de Nielsen
5. Previna os erros
As 10 heurísticas de Nielsen
6. Crie reconhecimento
As 10 heurísticas de Nielsen
7. Flexibilidade e eficiência de uso
As 10 heurísticas de Nielsen
8. Escolha um design minimalista
As 10 heurísticas de Nielsen
9. Ajude a diagnosticar e consertar erros
As 10 heurísticas de Nielsen
10. Ofereça documentação e ajuda
O que é arquitetura de informação?
Etapas da arquitetura
╺ inventário de conteúdo
╺ auditoria de conteúdo
╺ agrupamento de informações
╺ taxonomia
╺ informações descritivas
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
Atividade 1a 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)
2.Para quem você está criando sua UX?
26
Você não é o seu
usuário#ficaadica
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
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.”
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.”
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
Exemplos de personas
Consultoria de negócios
Ecommerce de bikes
Casos de uso de personas
Casos de uso de personas
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?)
3.Como usar pesquisas e dados para melhorar seu UX
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
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
Função dos dados
QUALITATIVOS – por que
╺ Testes de usabilidade
╺ Pesquisas com usuários
Satisfação, intenção, feedback
╺ Focus Group
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
Atividade 3Considerando 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.
4.Protótipos e design
42
Design persuasivo = credibilidade
╶qualidade do design
╶informação, fotos e vídeos atualizados
╶jogo aberto
╶outras opiniões a seu respeito
Design persuasivo = credibilidade
Wireframe, protótipo e mockup?
╺ Wireframe
baixa fidelidade
usado para discutir elementos da tela
Wireframe, protótipo e mockup?
- Protótipo
reprodução mais fiel da tela
pode ser navegável
usado nos testes de usabilidade
Wireframe, protótipo e mockup?
- Mokup
layout final bem definido
usado para discutir ajustes finais ou vender projetos
Precisamos falar sobre mobile
Site mobile, responsivo ou app?
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 Androide 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
50
6 dicas para design mobile
1. Targets
╺ atenção à zona de clique
╺ evite que seu usuário não consiga clicar ou que ele clique no lugar errado
2. Fácil de ler não significa fácil de clicar
Como os usuários consomem o conteúdo
Zonas de clique
3. Navegação por barra, menu e ícones
Action bar Tab bar
Menu e lista
3. Navegação por barra, menu e ícones
4. Sugerindo interatividade
links botões
4. Sugerindo interatividade
swipe scroll
5. Performance
carregamento da página e otimização de imagens
feedback para os usuários
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 ☹
6. Performance do usuário
cadastro ou login formulários
6. Performance do usuário
filtros mapas
4 lembretes
finaispara melhorar sua UX
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
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
3. Siga boas práticas de design
╺adotar comunicação, simbologia e comportamentos comuns
╺procure ser minimalista
╺facilite a vida do seu usuário
4. Faça testes
╺teste de usabilidade
╺teste A/B
╺sem testes, você pode ter surpresas
Atividade 4Cada 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
Apresentação dos grupos
67
68
Obrigado!Perguntas?
Alexandre Tarifa
Camila Mariano