Victória Cavalcante / Barbara Rodrigues

1. Barbara e Victória
UX:
O QUE É E COMO PODE MUDAR A
SUA VIDA COMO DESENVOLVEDOR

2. O que é experiência?
Quem é o usuário?

3. Afinal, o que é
experiência do usuário?
PREOCUPAÇÃO EM COMO
A PESSOA SE SENTE
DURANTE TODO O
PROCESSO DE INTERAÇÃO
DONALD NORMAM
MINDSET

4. Afinal, o que é
experiência do usuário?
A FORMA COMO A PESSOA
SE SENTE DURANTE A
INTERAÇÃO COM O SEU
PRODUTO, DITA COMO O
MESMO É VISTO
ENTREGAR O QUE ´USUÁRIO
PRECISA E NÃO
NECESSARIAMENTE O QUE
O CLIENTE DIZ QUERER.
O QUE? QUANDO? COMO? QUEM? ONDE?
EM ALGUNS CASOS, GARANTIR A BOA
EXPERIÊNCIA É CRUCIAL

5. Colméia
de
Peter Morville

6. Guarda chuva
de UX

7. Áreas de UX

8. Uma coisa é uma
coisa, outra coisa é
outra coisa

9. Uma coisa é uma coisa,
outra coisa é outra coisa:
"user-friendly"

10. Uma coisa é uma coisa,
outra coisa é outra coisa:
UX x Usabilidade
UX é o todo,
usabilidade é parte
Fácil e prazeroso
preocupações com a
facilidade/dificuldade de uso

11. UX na prática
COMO UM DEV PODE APLICAR UX EM SEUS PROJETOS?

12. Heurísticas de Nielsen
10 PRINCIPIOS GERAIS PARA UMA ITERFACE COM BOA UX
Fonte: Linkedin.com
JAKOB NIELSEN, RENOMADO CIÊNTISTA DA
COMPUTAÇÃO TAMBÉM CONHECIDO POR
SER UMA DAS PRINCIPAIS REFERENCIAS EM
USABILIDADE
PROPOS NA DÉCADA DE 90 AS 10
HEURÍSTICAS CONSIDERADAS OS PILARES
PARA SE CONSEGUIR UMA BOA UX

13. Vantagens
GARANTIA DE UM CAMINHO CLARO E COESO PARA
DESENVOLVIMENTO O SISTEMA
SISTEMAS MVP - MÍNIMO PRODUTO VIÁVEL, ENTREGA
POR PARTES DE UM SISTEMA

14. Fonte: https://kodity.com/mvp-minimo-produto-viavel/

15. Heurísticas
VISIBILIDADE DO STATUS DO SISTEMA /
RECONHECER AO INVÉS DE
LEMBRAR
PREVENÇÃO DE ERROS /
AUXILIAR USUÁRIOS A RECONHECER,
DIAGNOSTICAR E RECUPERAR ERROS
CORRESPONDENCIA ENTRE O SISTEMA
E O MUNDO REAL / CONSISTÊNCIA E
PADRÕES
CONTROLE E LIBERDADE PARA O
USUÁRIO / FLEXIBILIDADE E EFICIÊNCIA
ESTÉTICA E DESIGN MINIMALISTA /
AJUDA E DOCUMENTAÇÃO

16. VISIBILIDADE DO STATUS DO SISTEMA /
RECONHECER AO INVÉS DE LEMBRAR
sistemas precisam explicitar aos usuários através de feedbacks instantâneos o
que está acontecendo naquele exato momento e e como o usuário chegou ali.
FONTE: YOUTUBE

17. VISIBILIDADE DO STATUS DO SISTEMA /
RECONHECER AO INVÉS DE LEMBRAR
Reconhecer ao invés de lembrar :
minimizar sempre o fardo de o usuário ter que memorizar passos
FONTE: CANVA.COM

18. Heurísticas
VISIBILIDADE DO STATUS DO SISTEMA /
RECONHECER AO INVÉS DE
LEMBRAR
PREVENÇÃO DE ERROS /
AUXILIAR USUÁRIOS A RECONHECER,
DIAGNOSTICAR E RECUPERAR ERROS
CORRESPONDENCIA ENTRE O SISTEMA
E O MUNDO REAL / CONSISTÊNCIA E
PADRÕES
CONTROLE E LIBERDADE PARA O
USUÁRIO / FLEXIBILIDADE E EFICIÊNCIA
ESTÉTICA E DESIGN MINIMALISTA /
AJUDA E DOCUMENTAÇÃO

19. PREVENÇÃO DE ERROS / AUXILIAR USUÁRIOS A
RECONHECER, DIAGNOSTICAR E RECUPERAR ERROS
Nunca podemos descartar a possibilidade do usuário cometer um erro. Sempre dar
ao usuário a possibilidade de reparar algum erro
FONTE: FOLHAGERAL.COM

20. PREVENÇÃO DE ERROS / AUXILIAR USUÁRIOS A
RECONHECER, DIAGNOSTICAR E RECUPERAR ERROS
Auxiliar os usuários a reconhecer e diagnosticar os erros cometidos:
FONTE: SRIPTCASE.COM
FONTE: SPOTIFY.COM

21. Heurísticas
VISIBILIDADE DO STATUS DO SISTEMA /
RECONHECER AO INVÉS DE
LEMBRAR
PREVENÇÃO DE ERROS /
AUXILIAR USUÁRIOS A RECONHECER,
DIAGNOSTICAR E RECUPERAR ERROS
CORRESPONDÊNCIA ENTRE O SISTEMA
E O MUNDO REAL / CONSISTÊNCIA E
PADRÕES
CONTROLE E LIBERDADE PARA O
USUÁRIO / FLEXIBILIDADE E EFICIÊNCIA
ESTÉTICA E DESIGN MINIMALISTA /
AJUDA E DOCUMENTAÇÃO

22. CORRESPONDÊNCIA ENTRE O SISTEMA E O MUNDO
REAL / CONSISTÊNCIA E PADRÕES
Nunca fugir de padrões convencionais

23. Heurísticas
VISIBILIDADE DO STATUS DO SISTEMA /
RECONHECER AO INVÉS DE
LEMBRAR
PREVENÇÃO DE ERROS /
AUXILIAR USUÁRIOS A RECONHECER,
DIAGNOSTICAR E RECUPERAR ERROS
CORRESPONDENCIA ENTRE O SISTEMA
E O MUNDO REAL / CONSISTÊNCIA E
PADRÕES
CONTROLE E LIBERDADE PARA O
USUÁRIO / FLEXIBILIDADE E EFICIÊNCIA
ESTÉTICA E DESIGN MINIMALISTA /
AJUDA E DOCUMENTAÇÃO

24. CONTROLE E LIBERDADE PARA O USUÁRIO /
FLEXIBILIDADE E EFICIÊNCIA
Seu sistema precisa estar
preparado para atender
usuários inexperientes e
experientes
FONTE: PINTEREST.COM

25. CONTROLE E LIBERDADE PARA O USUÁRIO /
FLEXIBILIDADE E EFICIÊNCIA
Sempre que puder, facilite a vida do seu usuário:
FONTE: WIKIPEDIA.COM

26. Heurísticas
VISIBILIDADE DO STATUS DO SISTEMA /
RECONHECER AO INVÉS DE
LEMBRAR
PREVENÇÃO DE ERROS /
AUXILIAR USUÁRIOS A RECONHECER,
DIAGNOSTICAR E RECUPERAR ERROS
CORRESPONDENCIA ENTRE O SISTEMA
E O MUNDO REAL / CONSISTÊNCIA E
PADRÕES
CONTROLE E LIBERDADE PARA O
USUÁRIO / FLEXIBILIDADE E EFICIÊNCIA
ESTÉTICA E DESIGN MINIMALISTA /
AJUDA E DOCUMENTAÇÃO

27. As heurísticas são pontos chaves
que vão agregar valor e uma boa
UX para a sua aplicação!

28. DESCOBRIR DEFINIR ELABORAR ENTREGAR
AS 4 ETAPAS DE UM
PROJETO DE UX

29. AS 4 ETAPAS DE UM
PROJETO DE UX

30. Descobrir e Definir
Começamos a traçar o público alvo através de
personas, que são representações fictícias dos
nossos futuros usuários
FONTE: AGENCIACANNA.COM.BM

31. AS 4 ETAPAS DE UM
PROJETO D UX

32. Elaborar e Entregar
Nesta etapa, é começado a idealizar através de
rascunhos como será de fato o sistema
FONTE: DULCE-WORK-SCHEDULE.GITHUB.IO
FONTE: RESEARCHGATE.NET/

33. Elaborar e Entregar
E através desses rascunhos começam a surgir os
protótipos de baixa fidelidade até chegar então
no produto final (protótipo de alta fidelidade)
FONTE: SHARE.ATELIE.SOFTWARE.COM

34. USAR OS PROCESSOS DE UX EM SEU PROJETO
OTIMIZA TEMPO E RECURSOS, GARANTINDO
UMA BOA EXPERIÊNCIA AOS SEUS USUÁRIOS,
FAZENDO COM QUE ELES SE FIDELIZEM E QUE O
SEU TRABALHO SEJA MAIS RECONHECIDO
FONTE: blog.uxeria.com
USER EXPERIENCE E O DEV

35. Dicas de
ferramentas
PROTOTIPAGEM
Sketch
Invision
Adobe XD
Figma
UX Pin

36. Dicas de
ferramentas
MÉTRICAS E ANÁLISE
Hotjar
Crazyegg

37. Dicas de
ferramentas
FEEDBACK
Usabilla
Verify App

38. Dicas de
ferramentas
FRONT
Codepen

39. Não se
esqueça
UX E
PROGRAMAÇÃO
PODEM E DEVEM
ANDAR JUNTOS
INTEGRE UX A TODO O
PROCESSO DE
DESENVOLVIMENTO, SEJA QUAL
FOR SUA REALIDADE
TODOS PODEM
SE PREOCUPAR
EM DEIXAR MAIS
INTUITIVO

40. Isso é tudo
pessoal!