DiagramadePortas
PARA OTIMIZAÇÃO DA UX DE SITES
RicardoGouveia
EstudantedeCiênciadaComputação
Ufopa2013
facebook.com/ricardogouveia2
twitter.com/ricardogouveia3
github.com/ricardogouveia3
Fazendo do mundo um lugar melhor
OqueéDiagramadeportas?
“Doorsdiagram”
ÉumAferramentaparamapearpossíveis
errosnocaminhodousuário
dentrodeumsite.
Comofunciona?
Simulandoocaminhoentreapáginadeentrada
eoobjetivo
Pontodeinício Objetivo
EDepois,identificandoeclassificandoos
obstáculosnessecaminho
Pontodeinício ObjetivoPágina1 Página2
ERRO404
Anúncioemcimadolink
Porultimo,Sugerindoeaplicandoasmudanças
Simbologia
Pontodeinício
STARTPOINT
Pontodeinício
STARTPOINT
Páginasiniciais
Páginasdeperfil
linksemoutraspáginas
PoRTATRANCADA( )^
DOORISLOCKED
Pareceumlink,masnãoé
Ocarregadorde“Maispostagens”
nãofuncionaPoRTATRANCADA( )^
DOORISLOCKED
INFORMAÇãoenganatória( )*
Misleadinginformation
Botão“enviar”inativodepoisde
todososcampospreenchidos
obotão“X”nãofechaoanúncio
INFORMAÇão
enganatória( )*
Misleadinginformation
Portainvisível(-)
Doorisnotvisible
Olinkestá“Disfarçadodetexto”
Obotãodeplayestáporbaixode
anúnciosPortainvisível(-)
Doorisnotvisible
Semsaída( )#
Deadend
Umapágina404semlinkparao
inicioouparavoltar
apósapertar“confirmar”nada
acontece
Semsaída( )#
Deadend
OBjetivo
Goal
Baixarumarquivo
registrar-se
compraralgoOBjetivo
Goal
corredorcorridor
Passagemaisle
OBSERVAÇões
objetivo
identificar:Sugerir:corrigir:Otimizar
UmapassagempodeserumScroll,Um
carregamento...
Cadatentativadechegaraoobjetivoéum
corredor
referências
http://designmodo.com/ux-doors-diagram/
http://designmodo.com/implementing-doors-diagram/
Diagrama de Portas para otimização de UX de sites

Diagrama de Portas para otimização de UX de sites