Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Diagrama de Portas (Doors Diagram)

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.

2fd6e9e968e8b59bcc70ca9c3adb9c24?s=128

Ricardo Gouveia

April 25, 2015
Tweet

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/

  32. None