Diagrama de PortasPARA OTIMIZAÇÃO DA UX DE SITES

Ricardo Gouveia

Estudante de Ciência da ComputaçãoUfopa 2013

facebook.com/ricardogouveia2

twitter.com/ricardogouveia3

github.com/ricardogouveia3

Fazendo do mundo um lugar melhor

O que é Diagrama de portas?“Doors diagram”

É umA ferramenta para mapear possíveis erros no caminho do usuário

dentro de um site.

Como funciona?

Simulando o caminho entre a página de entrada e o objetivo

Ponto de início Objetivo

E Depois, identificando e classificando os obstáculos nesse caminho

Ponto de início ObjetivoPágina 1 Página 2

ERRO 404

Anúncio em cima do link

Por ultimo, Sugerindo e aplicando as mudanças

Simbologia

Ponto de inícioSTART POINT

Ponto de inícioSTART POINT

Páginas iniciaisPáginas de perfillinks em outras páginas

PoRTA TRANCADA ( )^DOOR IS LOCKED

Parece um link, mas não éO carregador de “Mais postagens” não funcionaPoRTA TRANCADA ( )^

DOOR IS LOCKED

INFORMAÇão enganatória ( )*Misleading information

Botão “enviar” inativo depois de todos os campos preenchidoso botão “X” não fecha o anúncio

INFORMAÇão enganatória ( )*

Misleading information

Porta invisível (-)Door is not visible

O link está “Disfarçado de texto”O botão de play está por baixo de anúnciosPorta invisível (-)

Door is not visible

Sem saída ( )#Dead end

Uma página 404 sem link para o inicio ou para voltarapós apertar “confirmar” nada acontece

Sem saída ( )#Dead end

OBjetivoGoal

Baixar um arquivoregistrar-secomprar algoOBjetivo

Goal

corredorcorridor

Passagemaisle

OBSERVAÇões

objetivo identificar: Sugerir: corrigir: Otimizar

Uma passagem pode ser um Scroll, Um carregamento...

Cada tentativa de chegar ao objetivo é um corredor

referências

http://designmodo.com/ux-doors-diagram/http://designmodo.com/implementing-doors-diagram/