UX: Creating Killer Experiences - FIAP
2 gostaram476 visualizações
O documento discute a importância da experiência do usuário (UX) e fornece diretrizes para projetar interfaces de alta qualidade. Ele aborda tópicos como usabilidade, arquitetura da informação, pesquisas com usuários, prototipação e design para dispositivos móveis. O objetivo é ajudar os leitores a criar experiências que atendam às necessidades e expectativas dos usuários.
UX: Creating Killer Experiences - FIAP
- 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
- 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
- 11. As 10 heurísticas de Nielsen
- 12. As 10 heurísticas de Nielsen 1. Mantenha o status visível
- 13. As 10 heurísticas de Nielsen 2. Tenha proximidade com o mundo real
- 14. As 10 heurísticas de Nielsen 3. Exerça o controle, sem tirar liberdade
- 15. As 10 heurísticas de Nielsen 4. Mantenha consistência e padrões
- 16. As 10 heurísticas de Nielsen 5. Previna os erros
- 17. As 10 heurísticas de Nielsen 6. Crie reconhecimento
- 18. As 10 heurísticas de Nielsen 7. Flexibilidade e eficiência de uso
- 19. As 10 heurísticas de Nielsen 8. Escolha um design minimalista
- 20. As 10 heurísticas de Nielsen 9. Ajude a diagnosticar e consertar erros
- 21. As 10 heurísticas de Nielsen 10. Ofereça documentação e ajuda
- 22. O que é arquitetura de informação?
- 23. Etapas da arquitetura ╺ inventário de conteúdo ╺ auditoria de conteúdo ╺ agrupamento de informações ╺ taxonomia ╺ informações descritivas 23
- 24. 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
- 25. 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)
- 26. 2. Para quem você está criando sua UX? 26
- 27. Você não é o seu usuário #ficaadica
- 28. 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
- 29. 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.”
- 30. 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.”
- 31. 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
- 33. Casos de uso de personas
- 34. Casos de uso de personas
- 35. 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?)
- 36. 3. Como usar pesquisas e dados para melhorar seu UX 36
- 37. 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
- 38. 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
- 39. Função dos dados QUALITATIVOS – por que ╺ Testes de usabilidade ╺ Pesquisas com usuários Satisfação, intenção, feedback ╺ Focus Group
- 40. 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
- 41. 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.
- 43. Design persuasivo = credibilidade ╶qualidade do design ╶informação, fotos e vídeos atualizados ╶jogo aberto ╶outras opiniões a seu respeito
- 44. Design persuasivo = credibilidade
- 45. Wireframe, protótipo e mockup? ╺ Wireframe baixa fidelidade usado para discutir elementos da tela
- 46. Wireframe, protótipo e mockup? - Protótipo reprodução mais fiel da tela pode ser navegável usado nos testes de usabilidade
- 47. Wireframe, protótipo e mockup? - Mokup layout final bem definido usado para discutir ajustes finais ou vender projetos
- 48. Precisamos falar sobre mobile Site mobile, responsivo ou app? 48 😉
- 49. 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
- 50. 50 6 dicas para design mobile
- 51. 1. Targets ╺ atenção à zona de clique ╺ evite que seu usuário não consiga clicar ou que ele clique no lugar errado
- 52. 2. Fácil de ler não significa fácil de clicar Como os usuários consomem o conteúdo Zonas de clique
- 53. 3. Navegação por barra, menu e ícones Action bar Tab bar
- 54. Menu e lista 3. Navegação por barra, menu e ícones
- 55. 4. Sugerindo interatividade links botões
- 56. 4. Sugerindo interatividade swipe scroll
- 57. 5. Performance carregamento da página e otimização de imagens feedback para os usuários
- 58. 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 ☹
- 59. 6. Performance do usuário cadastro ou login formulários
- 60. 6. Performance do usuário filtros mapas
- 61. 4 lembretes finais para melhorar sua UX 61
- 62. 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
- 63. 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
- 64. 3. Siga boas práticas de design ╺adotar comunicação, simbologia e comportamentos comuns ╺procure ser minimalista ╺facilite a vida do seu usuário
- 65. 4. Faça testes ╺teste de usabilidade ╺teste A/B ╺sem testes, você pode ter surpresas
- 66. 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