Diagrama de Portas (Doors Diagram)

O diagrama de portas é próprio para analise de UX de sites, identificando problemas através de casos de uso e ajudando a encontrar soluções, além de otimização em geral.

Transcript

1. Diagrama de Portas PARA OTIMIZAÇÃO DA UX DE SITES
2. Ricardo Gouveia Estudante de Ciência da Computação Ufopa 2013 facebook.com/ricardogouveia2 twitter.com/ricardogouveia3 github.com/ricardogouveia3
3. Fazendo do mundo um lugar melhor
4. O que é Diagrama de portas? “Doors diagram”
5. É umA ferramenta para mapear possíveis erros no caminho do usuário dentro de um site.
6. Como funciona?
7. Simulando o caminho entre a página de entrada e o objetivo
8. Ponto de início Objetivo
9. E Depois, identificando e classificando os obstáculos nesse caminho
10. Ponto de início Objetivo Página 1 Página 2 ERRO 404 Anúncio em cima do link
11. Por ultimo, Sugerindo e aplicando as mudanças
12. Simbologia
13. Ponto de início START POINT
14. Ponto de início START POINT Páginas iniciais Páginas de perfil links em outras páginas
15. PoRTA TRANCADA ( ) ^ DOOR IS LOCKED
16. Parece um link, mas não é O carregador de “Mais postagens” não funciona PoRTA TRANCADA ( ) ^ DOOR IS LOCKED
17. INFORMAÇão enganatória ( ) * Misleading information
18. Botão “enviar” inativo depois de todos os campos preenchidos o botão “X” não fecha o anúncio INFORMAÇão enganatória ( ) * Misleading information
19. Porta invisível (-) Door is not visible
20. O link está “Disfarçado de texto” O botão de play está por baixo de anúncios Porta invisível (-) Door is not visible
21. Sem saída ( ) # Dead end
22. Uma página 404 sem link para o inicio ou para voltar após apertar “confirmar” nada acontece Sem saída ( ) # Dead end
23. OBjetivo Goal
24. Baixar um arquivo registrar-se comprar algo OBjetivo Goal
25. corredor corridor Passagem aisle
26. OBSERVAÇões
27. objetivo identificar: Sugerir: corrigir: Otimizar
28. Uma passagem pode ser um Scroll, Um carregamento...
29. Cada tentativa de chegar ao objetivo é um corredor
30. referências
31. http://designmodo.com/ux-doors-diagram/ http://designmodo.com/implementing-doors-diagram/