Download - Desing de navegação web parte IV
Design de Navegação WebParte IV
Wellington Marionhttp://wellmarion.wordpress.com/
Design de NavegaçãoDesign de Navegação
A parte II do livro apresenta as fases de design que juntas formam um framework, ou um conjunto de práticas para resolver problemas de design de navegação.
Processo de DesignProcesso de Design
Fase 1 – AnáliseObjetivo desta fase é entender o problema que você esta
tentando solucionar antes de partir para o design
Fase 2 – Arquitetura
Determinar a melhor estrutura, mesmo que o site já exista, e você precisa entender os princípios básicos de organização e categorização
Processo de DesignProcesso de Design
Fase 3 – LayoutNesta fase você define como o sistema de
navegação funcionará o nível de página
Fase 4 – ApresentaçãoEsta fase é quando você cria os designs finais para
sua navegação
AvaliaçãoAvaliação
Qualidades de uma navegação bem-sucedida
Alinhando a navegação para o proposito do site e para a necessidades do usuário
Avaliações heurísticas e revisões por listas de verificações
Testes de estresse de navegação
Qualidades de um navegação bem-sucedida
Nove aspectos que predizem a efetividade de uma navegação.
Qualidades de navegaçãoQualidades de navegação
Balanço
Amplitude versus profundidade referem-se ao balanço entre o número de itens de menu visíveis em uma página (amplitude) e o número de níveis hierárquicos em uma estrutura (profundidade).
Qualidades de navegaçãoQualidades de navegação
Facilidade de aprendizagem
Os usuários não esperam precisar aprender a usar um site web, ou ler manuais extensos.
Não devemos ocultar as opções.
As funções devem ser claras e objetivas
Qualidade de navegaçãoQualidade de navegação
Consistência e inconsistência
Consistência é, no fim das contas, uma qualidade percebida pelo usuário
Inconsistências usada sabiamente pode ser poderosa como mudança de layout da página principal para uma página de aterrissagem podem engajar os visitantes.
Qualidades de navegaçãoQualidades de navegação
Feedback
O feedback pode ser considerado de duas maneiras: rollovers e localização.
Rollover é técnica que destaca a opção que o usuário esta preste a clicar e informações sobre a operação que será efetuada.
Localização também ajuda a orientar os usuários sobre sua localização.
Qualidades de navegaçãoQualidades de navegação
Eficiências
Os caminhos para a informação devem ser eficientes. Crie links, abas e ícones que sejam fáceis de ver e clicar.
Pontos de acessos duplicados
Atalhos
Pontos escape
Qualidades de navegaçãoQualidades de navegação
Rótulos claros
Evite jargões, nomes de marcar, abreviações e rótulos muito bonitos ou esperto.
Fale a linguá do usuário
Evite terminologia técnica
Qualidades de navegaçãoQualidades de navegação
Clareza visual
Lógica visual
Instruir os usuários quais passos dar e o que fazer.
Facilidade de varredura
Bons menus, tópicos úteis.
Facilidade de clicar
Sublinhar links, distinções visuais
Clareza VisualClareza Visual
Qualidades de navegaçãoQualidades de navegação
Adequação ao tipo de site
Sites de informação
Sites de comércio eletrônico
Intranets corporativas
Sites de comunidades
Sites de aprendizagem
Sites de identidade
Sites de identidadesSites de identidades
O propósito principal é suportar imagem companhia e mostrar suas marcas.
Qualidades de navegaçãoQualidades de navegação
Alinhamento com as necessidades dos usuários
Primeiro, defina o seu grupo-alvo.
Todo mundo usa esse site?Não é uma reposta boa.
Reduza esses grupos de usuário.
Capture essas personas.
Qualidades de navegaçãoQualidades de navegação
Alinhamento com as necessidades dos usuários
Segundo, identifique as necessidades chaves de informação.
Onde estou?
O que é isso ?
E onde eu posso ir a seguir?
Qualidades de NavegaçãoQualidades de Navegação
Objetivos e expectativas dos usuários?
Como eu posso encontrar informações especificas ou produtos que eu quero rapidamente?
Como eu sei que a informação esta atualizada?
Como eu contato o dono do site?
Como eu envio informações que encontrar para pessoas que conheço.
Métodos de Avaliação
Avaliação heurísticasAvaliação heurísticas
A avaliação heurística é qualitativa e depende de inferências subjetivas feitas pela pessoa que faz
a avaliação.
Avaliação heurísticaAvaliação heurística
Avaliação heurística
Prós
Barata, rápida de conduzir, frequentemente em um dia ou dois
Contras
Os resultados são objetivos
Requer um revisor experiente
Avaliação heurísticaAvaliação heurística
Avaliação heurística
Prós
Barata, rápida de conduzir, frequentemente em um dia ou dois
Contras
Os resultados são objetivos
Requer um revisor experiente
Avaliação heurísticaAvaliação heurística
Passos em uma avaliação heurísticas são:
Preparar
Entrar em acordo sobre o quem irá realizar
Executar
Percorra o site focado em um principio
Consolidar
Padrões, apresentação equipe,
Heurística SugeridasHeurística Sugeridas
Balanço
O número de opções de navegação apresentadas está balanceado com a profundidade da estrutura do site.
Facilidade de Aprendizado
O uso da navegação é intuitivo e facilmente aprendido.
Heurística SugeridasHeurística Sugeridas
Eficiência
Descobrir e usar as opções de navegação é fácil.
Os caminhos para a informação são curtos
Consistência
A apresentação e a interação das opções de navegação são consistente e previsíveis.
A inconsistência é apropriadamente usada para mostrar contraste e prioridade
Heurística SugeridasHeurística Sugeridas
Rótulos claros
Os rótulos de navegação são previsíveis não ambíguos.
Orientação
É claro onde está dentro do site em cada página
Exploração
A navegação promove a livre exploração e a descoberta de informação.
Heurística SugeridasHeurística Sugeridas
Diferenciação
O site facilita a varredura e a navegação.
Ele também permite que as pessoas diferenciem rapidamente as informação relevantes, irrelevantes
Uso da informação
Após encontrar informações relevantes, as pessoas podem usá-las de maneira apropriada.
Revisão por lista de verificação
Testes de estresse de navegação
Keith instone desenvolveu o que ele se chama de teste de estresse de navegação em torno de três
questões básicas de navegação:Onde eu estou?
O que é isso aqui?Onde eu posso ir?
Método de teste estresseMétodo de teste estresse
Selecione uma página ou páginas aleatoriamente das profundeza
Imprima a página ou as páginas em preto e branco, remova as urls impressas
Assuma que você é um visitante
Questões de navegação Marcação
Sobre o que essa pagina se trata? Desenhe um retângulo em torno do título da página ou escreva no papel você mesmo
Que site é esse? Circule o nome do site, ou escreva no papel você mesmo
Quais são as principais seções desse site? Rotule um X
Em Qual seção principal essa página está? Desenhe um triângulo ao redor do X
O que é um nível acima a partir daqui? Rotule com U
Como eu vou para a página principal? Rotule com H
Como eu vou para o topo dessa seção do site?
Rotule com T
O que cada grupo de links representa? Circule os grupos de links principais e rotule:D: Mais detalhes, subpáginas dessaN: Páginas próximas, dentro da mesma seção dessa paginaS: Páginas no mesmo site, mas não próximasO: Página fora do site
Tabela Questões de teste de estresse navegação
Obrigado!!!
ReferenciaReferencia
Design de Navegação web
Otimizando a experiência do usuárioJames Kalbach