Capitulo 6 Livro Nielsen

989 visualizações

Publicada em

Apresentação produzida pelos alunos da Pós em Sistemas Web da UnoChapecó/SC, 2009. Prof. Luiz Agner

Publicada em: Design
0 comentários
2 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
989
No SlideShare
0
A partir de incorporações
0
Número de incorporações
122
Ações
Compartilhamentos
0
Downloads
0
Comentários
0
Gostaram
2
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Capitulo 6 Livro Nielsen

  1. 1. UNOCHAPECÓ Espec. Desenvolvimento de Sistemas Web Prof. Dr. Luiz Agner Acadêmicos: Dirceu Wolf Fernando W. Simor Maicon R. Golo 6 - Navegação e arquitetura de informação
  2. 2. Objetivo <ul><li>Mostrar obstáculos mais comuns de design entre o usuário e seus objetivos. </li></ul><ul><li>Fornecer diretrizes de como evitar esses problemas. </li></ul>
  3. 3. Adequar a estrutura ao usuário <ul><li>Adequar arquitetura da informação de acordo com as necessidades do público-alvo(exceto intranets). </li></ul><ul><li>Consultar o público-alvo na estruturação da arquitetura da informação. </li></ul><ul><li>Criar um design natural </li></ul><ul><li>Criar um sistema de navegação intuitivo </li></ul>
  4. 4. www.blackmountainbicycles.com <ul><li>É possível pesquisar por marca e tipo </li></ul><ul><li>Para chegar na pesquisa de tipo é necessário saber a marca </li></ul>
  5. 5. www.blackmountainbicycles.com
  6. 6. www.sandiego.gov <ul><li>Apesar de inúmeros links na home page, está organizado com links curtos e significativos(não criar links detalhados) facilitando o público-alvo. </li></ul><ul><li>Os links categoria e sub-categoria, facilitam a identificação de cada categoria. </li></ul><ul><li>A utilização do “ more” nesse caso não é autoexplicativa. </li></ul>
  7. 7. www.sandiego.gov
  8. 8. www.cummins.com <ul><li>Categorização errônea de sub-categoria </li></ul><ul><li>Informações sobre células de combustíveis deveria estar em products e não em Who We Are </li></ul><ul><li>As pessoas acreditavam que a informação que estávam buscando não estáva ali. </li></ul>
  9. 9. www.cummins.com
  10. 10. Navegação: seja consistente <ul><li>Manter a estrutura navegacional consistente(minimiza suposições). </li></ul><ul><li>Não deve-se modificar o formato de navegação(retira a atenção do usuário no que está fazendo). </li></ul><ul><li>Websites sem um navegação segura tornam os usuários inseguros e hesitantes. </li></ul><ul><li>Uma boa navegação é previsível, e não precisa ser análisada ou memorizada. </li></ul>
  11. 11. www.pixar.com <ul><li>A área de navegação global permanece visível e consistente por todo site. </li></ul><ul><li>Essa estrutura torna o site confiável e de fácil uso. </li></ul>
  12. 12. www.pixar.com
  13. 13. www.ssa.gov <ul><li>As áreas de conteúdo se sobrepõem </li></ul><ul><li>Opções de navegação inconsistentes(caminhos parecidos porém diferentes). </li></ul>
  14. 14. www.ssa.gov
  15. 15. www.bathandbodyworks.com <ul><li>A utilização de diferentes tipos de painéis de tópicos e estilos acabam desorientando o usuário. </li></ul><ul><li>Difícil localização do conteúdo. </li></ul>
  16. 16. www.bathandbodyworks.com <ul><li>As ofertas dos produtos moviam-se de acordo com que o usuário movia o mouse. </li></ul><ul><li>Páginas estáticas substituíram o modelo de interação dinâmica sofisticado. </li></ul>
  17. 18. www.nestle.com <ul><li>Navegação difícil e complicado </li></ul><ul><li>Frustação </li></ul><ul><li>Barras de menus em várias pontos do site </li></ul><ul><li>Muito conteúdo </li></ul>
  18. 20. Navegação: evite design rebuscado <ul><li>Navegação Exótica e Extravagante. </li></ul><ul><li>Tópicos estáticos. </li></ul><ul><li>Campo minado. </li></ul>
  19. 21. www.wynnlasvegas.com <ul><li>Menus rotativos. </li></ul><ul><li>Design pesado. </li></ul>
  20. 23. Reduza a poluição visual e evite redundâncias <ul><li>Links. </li></ul><ul><li>Links duplicados. </li></ul><ul><li>Poluição Visual. </li></ul>
  21. 24. www.usps.com <ul><li>Links duplicados. </li></ul>
  22. 25. Links e nomes de rótulos: seja específico <ul><li>Clareza nos rótulos. </li></ul><ul><li>Links com palavras chaves. </li></ul>
  23. 26. www.automobiles.honda.com <ul><li>Design antigo: o site confunde os usuários pois organizam os veículos pelo nome do modelo, interessante para quem conhece os modelos Honda, porém difícil para quem desconhece. </li></ul><ul><li>Design novo: a Honda aprimorou um pouco as categorias, colocando a categoria à frente do modelo. Ainda assim poderia ter sido melhor projetada </li></ul>
  24. 27. www.ford.com <ul><li>O website da Ford possui uma classificação melhor, onde é possível selecionar os modelos por categorias (minivan, sport), ou seja, em termos que as pessoas entendam. </li></ul>
  25. 28. www.andersonfloors.com <ul><li>O website possui uma classificação para seus produtos que somente os funcionários da empresa conhecem. Outro detalhe, é fornecido instruções de como utilizar o website, prova que é de difícil navegação. </li></ul>
  26. 29. Menus em cascata e de vários níveis <ul><li>No website da Stiga , os menus de vários níveis irritam os usuários, uma vez que mover o ponteiro um pouco pro lado, pode fazer aparecer outras opções que não são desejadas. </li></ul><ul><li>O website The American Heart Assoc. incorpora menus em cascata em dois níveis, o menu tem a característica de persistir se o usuário sair acidentalmente fora da área de menu. </li></ul>
  27. 30. www. blackmountainbicycles.com <ul><li>Design antigo: possuía um uso excessivo de menus em cascata, chegando à quatro níveis, tornando difícil os usuários controlar os movimentos. </li></ul><ul><li>Design novo: o novo design reduziu para três níveis, porém ainda possui problemas de sobreposição e maior movimentação do mouse. </li></ul>
  28. 31. Posso clicar? <ul><li>No website da BankOne , as pessoas acreditavam que não poderiam abrir uma conta pelo website sem contatar um representante. O botão laranja teria uma aparência apenas de contemplação ao layout e não uma funcionalidade de link, o que não era verdade. </li></ul><ul><li>No website san-diego.com os usuários clicavam na lista com marcadores azul, porém não eram links. </li></ul>
  29. 32. www.bk.com <ul><li>O website da Burger King utiliza algumas metáforas visuais, o que parece ser um botão, na verdade é apenas uma imagem para instrução dos produtos. </li></ul>
  30. 33. www.mozilla.com <ul><li>A Mozzilla simplificou seu website, destacou melhor a opção de download da nova versão e moveu a opção Other Systems and Languages para fora do grande botão. </li></ul><ul><li>Na interface anterior, o link estava dentro da oção sombreada, indicando apenas a versão em inglês para o Windows, se alguém quisesse versão diferente, teria que procurar em outro local da tela. </li></ul>

×