O documento fornece diretrizes sobre como projetar uma boa arquitetura de informação e navegação em websites. Ele discute a importância de adequar a estrutura às necessidades dos usuários, criar uma navegação intuitiva e consistente, evitar design complexo e reduzir poluição visual. Exemplos de websites bem-sucedidos e problemas comuns são apresentados.

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. Objetivo Mostrar obstáculos mais comuns de design entre o usuário e seus objetivos. Fornecer diretrizes de como evitar esses problemas.

3. Adequar a estrutura ao usuário Adequar arquitetura da informação de acordo com as necessidades do público-alvo(exceto intranets). Consultar o público-alvo na estruturação da arquitetura da informação. Criar um design natural Criar um sistema de navegação intuitivo

4. www.blackmountainbicycles.com É possível pesquisar por marca e tipo Para chegar na pesquisa de tipo é necessário saber a marca

5. www.blackmountainbicycles.com

6. www.sandiego.gov 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. Os links categoria e sub-categoria, facilitam a identificação de cada categoria. A utilização do “ more” nesse caso não é autoexplicativa.

7. www.sandiego.gov

8. www.cummins.com Categorização errônea de sub-categoria Informações sobre células de combustíveis deveria estar em products e não em Who We Are As pessoas acreditavam que a informação que estávam buscando não estáva ali.

9. www.cummins.com

10. Navegação: seja consistente Manter a estrutura navegacional consistente(minimiza suposições). Não deve-se modificar o formato de navegação(retira a atenção do usuário no que está fazendo). Websites sem um navegação segura tornam os usuários inseguros e hesitantes. Uma boa navegação é previsível, e não precisa ser análisada ou memorizada.

11. www.pixar.com A área de navegação global permanece visível e consistente por todo site. Essa estrutura torna o site confiável e de fácil uso.

12. www.pixar.com

13. www.ssa.gov As áreas de conteúdo se sobrepõem Opções de navegação inconsistentes(caminhos parecidos porém diferentes).

14. www.ssa.gov

15. www.bathandbodyworks.com A utilização de diferentes tipos de painéis de tópicos e estilos acabam desorientando o usuário. Difícil localização do conteúdo.

16. www.bathandbodyworks.com As ofertas dos produtos moviam-se de acordo com que o usuário movia o mouse. Páginas estáticas substituíram o modelo de interação dinâmica sofisticado.

18. www.nestle.com Navegação difícil e complicado Frustação Barras de menus em várias pontos do site Muito conteúdo

20. Navegação: evite design rebuscado Navegação Exótica e Extravagante. Tópicos estáticos. Campo minado.

21. www.wynnlasvegas.com Menus rotativos. Design pesado.

23. Reduza a poluição visual e evite redundâncias Links. Links duplicados. Poluição Visual.

24. www.usps.com Links duplicados.

25. Links e nomes de rótulos: seja específico Clareza nos rótulos. Links com palavras chaves.

26. www.automobiles.honda.com 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. Design novo: a Honda aprimorou um pouco as categorias, colocando a categoria à frente do modelo. Ainda assim poderia ter sido melhor projetada

27. www.ford.com 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.

28. www.andersonfloors.com 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.

29. Menus em cascata e de vários níveis 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. 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.

30. www. blackmountainbicycles.com Design antigo: possuía um uso excessivo de menus em cascata, chegando à quatro níveis, tornando difícil os usuários controlar os movimentos. 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.

31. Posso clicar? 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. No website san-diego.com os usuários clicavam na lista com marcadores azul, porém não eram links.

32. www.bk.com 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.

33. www.mozilla.com 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. 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.