O documento discute os conceitos de interface do usuário (UI) e experiência do usuário (UX), comparando as duas abordagens. Apresenta diversas ferramentas para testes A/B, prototipagem, análise de dados e padrões de design. Por fim, apresenta um caso prático de desenvolvimento de produto com foco em UX, desde a criação de hipóteses iniciais até testes e versões sucessivas.

1. VOCÊS JÁ FICARAM
PERDIDOS AO UTILIZAR UM
APP OU SITE?

2. UI VS UX

3. UI VS UX
UI - USER INTERFACE
▸ Parte da aplicação utilizável
por humanos
▸ Onde designers atuam
▸ Esteticamente agradável e
capaz de exibir informações e
ações possível

4. UI VS UX
UI KITS E TEMPLATES
▸ É possível baixar uma série de
pacotes de elementos prontos
▸ Servem tanto para designers
quanto para desenvolvedores
▸ Existe algum para
praticamente todas as
plataformas

5. UI VS UX
UX - USER EXPERIENCE
▸ O que o usuário “sente" e
“experimenta" ao acessar o site
▸ Fundamentação para o Marketing
▸ Adapta o produto ao público alvo
▸ Melhorar retenção de usuários

6. UI VS UX
PARA QUE SERVE
▸ Analisar o uso da aplicação
▸ Testar hipóteses e coletar dados

7. CIÊNCIA
UX É UMA

8. Problema? Hipótese
Experimento
Análise de dados
Conclusão

9. UX É DESIGN ORIENTADO
A UM PROPÓSITO

10. O BOTÃO DE
300 MILHÕES
DE DÓLARES

11. ‣ 45% + Vendas
‣ Aumento de faturamento de
U$300.000.000,00 no primeiro
ano
‣ Amazon: UX gera 2-100 dólares
para cada dólar investido

12. FRICTIONLESS
DESIGN

13. TWITTER E O
ENGAJAMENTO
GRADUAL
+29%
cadastros

14. QUANDO DEVEMOS
INVESTIR EM UX?

15. QUANDO DEVEMOS INVESTIR EM UX?
VANTAGENS DE INVESTIR ANTES DA UI
▸ Evita retrabalho na interface
▸ Teste de hipóteses desde o lançamento
▸ Aplicação de princípios básicos
▸ Entender melhor o público

16. QUANDO INVESTIR EM UX
DESVANTAGENS DE INVESTIR DEPOIS DA UI
▸ Modificar o trabalho que já está pronto
▸ Vícios na usabilidade
▸ Aceitação da base de usuários

17. FERRAMENTAS
PARA UX

18. FERRAMENTAS PARA UX
HEATMAPS
▸ Hotjar
▸ Crazyegg
▸ Clicky
▸ Clicktale
▸ Luckyorange
▸ Mouseflow
▸ Sessioncam
▸ heatmap.me

20. FERRAMENTAS PARA UX
TESTES A/B
▸ Crazyegg
▸ VWO
▸ Google Analytics Experimentos
▸ Adobe Target

21. COMO A NETFLIX
FAZ TESTES A/B

22. COMO A NETFLIX
FAZ TESTES A/B

23. COMO A NETFLIX
FAZ TESTES A/B

24. FERRAMENTAS PARA UX
GRAVAÇÃO
▸ Hotjar
▸ Crazyegg
▸ Mouseflow
▸ Zarget

25. FERRAMENTAS PARA UX
PROTOTIPAÇÃO/DESIGN
▸ Sketch
▸ Adobe XD

27. FERRAMENTAS PARA UX
FUNIS
▸ Hotjar
▸ Google Analytics
▸ Crazyegg

28. FERRAMENTAS PARA UX
FEEDBACK
▸ Hotjar
▸ Crazyegg

29. PADRÕES E
DOCUMENTAÇÕES
(COMPLIANCE)

30. PADRÕES E DOCUMENTAÇÕES (COMPLIANCE)
ALGUNS PADRÕES
▸ Bootstrap
▸ Material Design (Android/web)
▸ iOS e Mac OS
▸ Windows (UWP - Tablets, Windows phone…)

31. PADRÕES E DOCUMENTAÇÕES (COMPLIANCE)
MATERIAL DESIGN

32. PADRÕES E DOCUMENTAÇÕES (COMPLIANCE)
IOS / MAC OS

33. ESTUDOS DE
CASO

35. O QUE FAZER?
▸ Criar uma interface amigável
▸ Desenvolver comportamentos e análises de dados
▸ Plataformas:
▸ Painel Web
▸ Dashboard
▸ 3 aplicativos (2 Android 1 iOS)

36. VERSÃO INICIAL

37. VERSÃO INICIAL

38. HIPÓTESE

39. HIPÓTESE
Calendário em
todas as páginas
Cards por divisão da propriedade e ocorrências
Painel lateral
Com filtros

40. HIPÓTESE

41. HIPÓTESE

42. HIPÓTESE

43. HIPÓTESE

44. HIPÓTESE

45. HIPÓTESE

46. HIPÓTESE

47. HIPÓTESE

49. ASSINATURA DIGITAL
DE CONTRATOS E
DOCUMENTOS

50. ▸ Assinatura eletrônica
▸ Gestão de documentos
▸ Reconhecimento e notificação de
assinaturas
▸ Voltado a empresas e profissionais liberais

51. Desenvolvimento do produto
(MVP?)
Ver as coisas quebrarem
Hipóteses
Versão 2
Testar as hipóteses
Polir