![Page 1: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/1.jpg)
Design de navegação web
Design web e arquitetura da informação
Curso técnico de informática para internet
![Page 2: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/2.jpg)
INTRODUÇÃO À NAVEGAÇÃO WEBParte I
2
![Page 3: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/3.jpg)
Introdução
• A navegação web é fundamental para a experiência do usuário.
• O design de navegação é uma tarefa ampla que requer conhecimentos de organização da informação, layout de páginas e design de apresentação.
• O link é o elemento básico da navegação web. Além de realizar a ligação entre páginas, links também possuem relevância.
• O design de navegação web abrange o processo de criação e organização de links e a definição da relevância do conteúdo de um site.
3
![Page 4: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/4.jpg)
Funções da navegação web
• Fornecer acesso à informação: não há uma forma perfeita de navegação. Esta deve ser pensada em termos de objetivos do usuário e de objetivos de negócio. A navegação web eficiente proporciona uma experiência de usuário mais rica, rentável e produtiva.
– Deve haver um balanço entre design visual, objetivos do usuário e objetivos de negócio.
4
![Page 5: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/5.jpg)
Funções da navegação web
5
![Page 6: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/6.jpg)
Funções da navegação web
6
![Page 7: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/7.jpg)
Funções da navegação web
• Mostrar a localização: a navegação web deve prover orientação. Determinados usuários necessitam saber sua localização no site. Também é importante que o usuário saiba para onde pode seguir a partir da sua localização atual.
7
![Page 8: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/8.jpg)
Funções da navegação web
8
![Page 9: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/9.jpg)
Funções da navegação web
• Mostrar o assunto de um site: a navegação mostra a amplitude e o tipo de conteúdo de um site web. A organização dos tópicos principais cria expectativas nos usuários, afetando a abordagem utilizada para encontrar informações. A navegação revela o que está disponível e o que não está.
9
![Page 10: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/10.jpg)
Funções da navegação web
• Instrumentos musicais?
10
![Page 11: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/11.jpg)
Funções da navegação web
• Instrumentos musicais?
11
![Page 12: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/12.jpg)
Funções da navegação web
• Instrumentos musicais?
12
![Page 13: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/13.jpg)
Funções da navegação web
• Refletir a marca: marcas possuem valores e personalidade que podem ser refletidos pela navegação. Os elementos utilizados, sua ordem, aparência e tom de voz contribuem para uma identificação do site com a marca.
13
![Page 14: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/14.jpg)
Funções da navegação
14
![Page 15: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/15.jpg)
Funções da navegação
• Afetar a credibilidade de um site: a credibilidade é a qualidade do site percebida pelo usuário. Depois da aparência visual, a navegação é o fator que mais influencia a credibilidade de um site web. Sites facilmente navegáveis possuem uma credibilidade maior.
15
![Page 16: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/16.jpg)
Funções da navegação
• Interferir na rentabilidade: informação é inútil se não puder ser encontrada. Se o visitante de site de compras não encontra os produtos desejados, o negócio deixa de realizar vendas. Se os funcionários de uma empresa gastam muito tempo para encontrar informações na intranet, a empresa perde produtividade.
16
![Page 17: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/17.jpg)
Diretrizes do design de navegação web
• Entender o propósito e a motivação para o site web como um todo.
• Identificar o público-alvo.• Fornecer conteúdo de forma que os visitantes
encontrem respostas ou realizem uma tarefa de forma eficiente.
• Entender e estruturar o conteúdo do site de forma significativa.
• Organizar e caracterizar os elementos gráficos de forma a identificar e utilizar os controles de navegação.
17
![Page 18: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/18.jpg)
Resumindo
• Sistemas de navegação são essenciais para prover uma melhor experiência ao usuário. Além disso, identificam a marca e tornam um site mais rentável.
• O design de navegação web é uma atividade multidisciplinar. Devem ser considerados objetivos de negócio, objetivos de usuário, restrições de tecnologia e de conteúdo. Não basta criar uma linha de abas ou links, mas sim levar em consideração diversos fatores que gerem um sistema coeso que suporte os objetivo do site e de seus visitantes.
18
![Page 19: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/19.jpg)
Exercício 1.1
• Suponha que você deseje comprar luvas para prática de musculação. Dados os sites a seguir, tente encontrar o produto desejado. Primeiro utilize o sistema de navegação e depois o mecanismo de busca. Para cada site, avalie se foi mais fácil usar a navegação ou a busca. Também atribua uma classificação para a navegação de cada site.– http://www.centauro.com.br/
– http://www.netshoes.com.br/
– http://www.dafiti.com.br/
– https://www.dafitisports.com.br/
19
![Page 20: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/20.jpg)
MECANISMOS DE NAVEGAÇÃOParte II
20
![Page 21: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/21.jpg)
Introdução
• Um mecanismo de navegação é um link ou grupo de links que se comportam de maneira similar e possuem uma aparência similar.
• Mecanismos de navegação devem sincronizar-se com a estrutura de um site. Mudanças na estrutura do site podem levar a mudanças na navegação e vice-versa.
• Esta seção apresenta os mecanismos de navegação mais comumente utilizados na web.
21
![Page 22: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/22.jpg)
Navegação por passos
• Permite a movimentação sequencial (fluxo) pelas páginas.
• Consiste de um rótulo de texto e um símbolo gráfico para indicar continuidade e/ou retrocessos (geralmente uma seta).
• É útil em processos sequenciais do tipo passo a passo, para separar as partes de um documento extenso e para questionários online.
22
![Page 23: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/23.jpg)
Navegação por passos
23
![Page 24: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/24.jpg)
Navegação por passos
24
![Page 25: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/25.jpg)
Navegação por passos
25
![Page 26: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/26.jpg)
Navegação por paginação
• Similar à navegação por passos, mas inclui outras opções. Estas incluem normalmente a quantidade de itens a serem exibidos, índice de páginas e mecanismos para avançar e retroceder.
• Comum em páginas de resultado de buscas.
26
![Page 27: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/27.jpg)
Navegação por paginação
27
![Page 28: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/28.jpg)
Navegação por paginação
28
![Page 29: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/29.jpg)
Trilha de migalhas de pão
• Mostra, de forma linear, o caminho que uma pessoa percorre através de um site.
• Consiste de elementos, ou nós, encadeados de acordo com a hierarquia de páginas do site. Cada nó é geralmente um link para a respectiva seção ou tópico representado.
29
![Page 30: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/30.jpg)
Trilha de migalhas de pão
30
![Page 31: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/31.jpg)
Árvore de navegação
• Permite a navegação pela estrutura hierárquica de páginas do site de forma semelhante a um programa gerenciador de arquivos de um sistema operacional.
• Tipicamente, ao invés de exibir toda a estrutura hierárquica, os nós possuem mecanismos de expansão e recolhimento do nós filhos.
31
![Page 32: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/32.jpg)
Árvore de navegação
• http://msdn.microsoft.com/library/
32
![Page 33: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/33.jpg)
Mapa do site
• É uma representação da estrutura de navegação hierárquica de um site, oferecendo um visão geral do conteúdo disponível.
• Deve ser simples e fácil de varrer. Os rótulos devem ser compatíveis com as categorias de navegação.
• Não devem necessariamente listar todas as páginas do site. O mapa pode se concentrar apenas nas páginas de acesso dos diversos níveis da hierarquia.
• Geralmente são difíceis de manter, por isso sua adoção deve sem bem avaliada.
33
![Page 34: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/34.jpg)
Mapa do site
• http://portal.ifrn.edu.br/sitemap
34
![Page 35: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/35.jpg)
Diretórios
• Organizam os links por tópicos ou categorias.
• Úteis para conteúdo sem relacionamento hierárquico.
• Normalmente exibem cada tópico acompanhado de poucos subtópicos.
35
![Page 36: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/36.jpg)
Diretórios
36
![Page 37: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/37.jpg)
Diretórios
• curlie.org
37
![Page 38: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/38.jpg)
Índice A-Z
• É uma organização alfabética para os tópicos, termos e conceitos encontrados no site.
• Índices longos são normalmente divididos em uma página para cada letra do alfabeto.
38
![Page 39: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/39.jpg)
Índice A-Z
39
![Page 40: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/40.jpg)
Índice A-Z
40
![Page 41: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/41.jpg)
Nuvem de tags
• Apresenta uma lista de termos organizada alfabeticamente e que leva em conta a relevância de cada termo.
• Normalmente os termos mais relevantes são apresentados em fonte maior.
• Geralmente a relevância de um termo é dada pela sua frequência de aparição no site.
41
![Page 42: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/42.jpg)
Nuvem de tags
42
![Page 43: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/43.jpg)
Barra de navegação
• Sequência horizontal de links geralmente localizada na área superior da página.
43
![Page 44: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/44.jpg)
Abas
• Caso especial da barra de navegação. A diferença está apenas na apresentação visual.
44
![Page 45: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/45.jpg)
Menu vertical
• Pilha de links posicionada na lateral da página.
• Geralmente são mais flexíveis que barras de navegação pois geram menos problemas para a adição de opções.
45
![Page 46: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/46.jpg)
Menu vertical
46
![Page 47: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/47.jpg)
Menu dinâmico
• Também conhecido como menu pull-down, fornece acesso rápido à navegação.
• É chamado de dinâmico pois necessita da interação do usuário.
• Tem como vantagem o pronto acesso a mais opções do que poderia ser mostrado. A desvantagem está por exibir exploração para que estas sejam conhecidas.
• Funcionam melhor com barras de navegação do que com menus verticais.
47
![Page 48: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/48.jpg)
Menu dinâmico
48
![Page 49: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/49.jpg)
Menu drop-down
• É um elemento de seleção HTML (select) contendo as opções de navegação.
• É mais adequado para situações com poucas opções.
49
![Page 50: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/50.jpg)
Menu drop-down
50
![Page 51: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/51.jpg)
Resumindo
• Os mecanismos de navegação são um dos elementos fundamentais dos sistemas de navegação.
• Cada mecanismo tem um diferente papel dentro do esquema de navegação.– Navegação por passos, paginação e trilhas de migalhas de pão
são mecanismos que possibilitam avançar e retroceder.– Navegação em árvore, mapa do site, diretórios e índice A-Z são
bons para fornecer uma visão geral de diversas páginas.
• Os mecanismos mais populares na atualidade são barras de navegação, menus verticais e menus dinâmicos.
• Também devem ser levados em conta os recursos próprios dos navegadores: botões voltar e avançar, URLs e histórico.
51
![Page 52: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/52.jpg)
Exercício 2.1
• Analise os vários mecanismos de navegação presentes em algumas páginas do site submarino.com.br, incluindo uma página de resultados de busca. Identifique todos os diferentes tipos de mecanismos de navegação que você encontrar.a) Para quais tipos de conteúdo cada mecanismo de
navegação é utilizado?
b) Quais mecanismos funcionam bem? Quais não? O que eles poderiam ter utilizado para obter mais benefícios na navegação?
52
![Page 53: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/53.jpg)
Exercício 2.2
• Redesenhe a página principal de um site que você visite frequentemente usando apenas os seguintes mecanismos:
– Navegação por passos.
– Trilhas de migalhas de pão.
– Menus drop-down.
• Que dificuldades você encontrou? O que foi perdido?
53
![Page 54: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/54.jpg)
TIPOS DE NAVEGAÇÃOParte III
54
![Page 55: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/55.jpg)
Introdução
• O sistema de navegação deve ser intuitivo para o usuário. A utilização efetiva dos mecanismos de navegação deve levar em conta o propósito da navegação e o tipo de conteúdo acessado.– A navegação em páginas pessoais é diferente da
navegação de páginas de produtos.
• Para melhorar o entendimento dos conceitos de navegação, esta seção apresenta uma classificação para os tipos de navegação comumente utilizados com eficiência em sites web.
55
![Page 56: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/56.jpg)
Categorias de navegação
• Navegação estrutural: os links são baseados na hierarquia do site. A movimentação sempre é em direção a um nó adjacente.
• Navegação associativa: conecta páginas com tópicos e conteúdos similares, independentemente de sua localização na hierarquia.
• Navegação utilitária: conecta páginas e funcionalidades que ajudam as pessoas a usarem o site. Estas páginas normalmente estão fora da hierarquia de páginas do site.
56
![Page 57: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/57.jpg)
Categorias de navegação
57
Utilitária
Estrutural
Associativa
![Page 58: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/58.jpg)
Navegação estrutural
• É composta pela navegação principal e navegação local.
• Navegação principal:– Também chamada de
navegação global ou navegação primária.
– Geralmente acessa as páginas de nível mais alto na estrutura de um site.
– Sua disposição e formatação geralmente se mantém estável ao longo do site.
58
![Page 59: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/59.jpg)
Navegação estrutural
• Navegação principal:
– Pode ocupar muito espaço de página, portanto sua adoção deve ser racionalizada pelos seguintes fatores:
• Tamanho do site: sites menores podem ser navegáveis usando apenas migalhas de pão ou navegação contextual.
• Necessidade dos usuários: estude o comportamento dos usuários para projetar uma navegação adequada.
• Fluxos que não devem ser interrompidos: páginas de processos sequenciais podem dispensar a navegação global para que os usuários mantenham o foco no processo.
59
![Page 60: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/60.jpg)
Navegação estrutural
• Navegação principal
60
![Page 61: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/61.jpg)
Navegação estrutural
• Navegação principal
61
![Page 62: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/62.jpg)
Navegação estrutural
• Navegação local:– Também chamada de
subnavegação ou navegação secundária.
– Usada para acessar os nós abaixo da navegação principal.
– Geralmente exibe links para as páginas que se encontram no mesmo nível ou na continuidade do ramo.
62
![Page 63: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/63.jpg)
Navegação estrutural
• Navegação local:
– Apresenta um grau de variação maior do que o da navegação principal.
– Frequentemente funciona em conjunto com a navegação principal.
– Disposições mais comuns:
63
Principal
Local
L-invertido
Principal
Local
Horizontal
Principal
Local
Vertical embutido
![Page 64: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/64.jpg)
Navegação estrutural
• Navegação local
64
![Page 65: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/65.jpg)
Navegação estrutural
• Navegação local
65
![Page 66: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/66.jpg)
Navegação associativa
• Não se prende a hierarquia do site, permitindo acesso direto a qualquer nível desta.
• Inclui:– Navegação contextual, que pode ser representada
por links embutidos no texto ou por áreas exclusivas de links relacionados.
– Links rápidos.
– Navegação de rodapé.
66
![Page 67: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/67.jpg)
Navegação associativa
• Navegação contextual
67
![Page 68: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/68.jpg)
Navegação associativa
• Links rápidos
68
![Page 69: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/69.jpg)
Navegação utilitária
• Composta por ferramentas e funcionalidades que ajudam os usuários do site, tais como navegação extra site, logos com links, mecanismos de buscas e seletores de línguas.
• Também podem ser composta por links para páginas que estão fora da hierarquia de páginas como um mapa do site.
• Geralmente é mais discreta do que a navegação principal e ocorre tipicamente no topo ou rodapé da página.
69
![Page 70: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/70.jpg)
Navegação utilitária
70
![Page 71: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/71.jpg)
Tipos de páginas
• O tipo de navegação e o tipo de página estão fortemente relacionados. As pessoas entendem a navegação, em parte, a partir do contexto do tipo de página no qual ela aparece. Por isso, é importante que uma página deixe seu objetivo claro.
• As páginas podem ser agrupadas em três categorias de acordo com seu objetivo principal: navegacionais, de conteúdo e funcionais.
71
![Page 72: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/72.jpg)
Páginas navegacionais
• Direcionam os visitantes para páginas de conteúdo ou para páginas funcionais.
• Esta categoria inclui a página principal, galerias, páginas de aterrissagem e páginas com resultados de buscas.
72
![Page 73: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/73.jpg)
Páginas navegacionais
• Página principal (home page)
– Atua como um espécie de painel de controle para o resto das páginas.
– Pode ter conteúdo ou funcionalidade, mas geralmente de forma abreviada ou simples.
– Muito utilizada para a promoção de produtos ou outras partes do site. No entanto, ela não deve perder seu foco de ser uma página navegacional.
73
![Page 74: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/74.jpg)
Páginas navegacionais
• Páginas de aterrissagem
– São as páginas iniciais de categorias ou seções, fornecendo uma visão geral da seção.
– Geralmente correspondem às opções presentes na navegação principal.
– Fornecem orientação, principalmente aos visitantes que não passaram pela página principal.
74
![Page 75: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/75.jpg)
Páginas de aterrissagem
75
![Page 76: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/76.jpg)
Páginas navegacionais
• Páginas de galeria
– Fornecem uma visão geral dos produtos, serviços ou conteúdo do site através de uma relação de itens.
– Além da relação, contém informações críticas sobre os itens apresentados, as quais são úteis para fins de comparação.
76
![Page 77: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/77.jpg)
Páginas de galeria
77
![Page 78: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/78.jpg)
Páginas navegacionais
• Páginas de resultados de busca
– São semelhantes às páginas de galerias, mas sua construção é feita dinamicamente com base na entrada de dados do usuário.
78
![Page 79: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/79.jpg)
Páginas de resultados de busca
79
![Page 80: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/80.jpg)
Páginas de conteúdo
• São as páginas que contém o que o usuário procura: textos, imagens, artigos, notícias, dados, etc. Por isso, seu foco deve ser o conteúdo.
• Suportam mecanismos de apoio como links para conteúdo adicional e produtos relacionados, botão de impressão, ícones de compartilhamento e recursos de visualização de imagens.
80
![Page 81: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/81.jpg)
Páginas de conteúdo
81
![Page 82: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/82.jpg)
Páginas de conteúdo
82
![Page 83: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/83.jpg)
Páginas funcionais
• Permitem às pessoas completarem uma tarefa, tal como conduzir uma busca ou enviar um email.
• Tipicamente contém formulários ou outros elementos de interface com o usuário para a entrada de dados.
• É comum que contenham pouco conteúdo e poucos elementos de navegação para que o usuário concentre-se na tarefa.
83
![Page 84: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/84.jpg)
Páginas funcionais
84
![Page 85: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/85.jpg)
Páginas funcionais
85
![Page 86: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/86.jpg)
Resumindo
• Vários mecanismos de navegação são utilizados em conjunto para prover um sistema de navegação eficiente.
• As categorias de navegação apresentadas ajudam a projetar o sistema de navegação de um site.
• O propósito de um tipo de navegação deve ser claro para uma navegação efetiva. Criar um design que contrarie as expectativas convencionais pode levar a problemas de orientação e a uma navegação deficiente.
• A navegação também é influenciada pelo tipo de página. Logo, cada página deve ter um objetivo primário bem definido.
86
![Page 87: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/87.jpg)
Exercícios
3.1. Acesse o site do IFRN e identifique exemplos de categorias de navegação e dos tipos de páginas apresentados.
3.2. Acesse um site de comércio eletrônico e procure por um produto que você gostaria de comprar. Primeiro use a navegação e depois utilize a busca. Ao longo do caminho, identifique cada um dos tipos de página apresentados. O propósito de cada página é fácil de identificar? Em caso negativo, o que poderia ter sido feito de melhor?
87
![Page 88: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/88.jpg)
Exercício
3.3. Dada a imagem a seguir, para cada área marcada identifique o tipo e o mecanismo de navegação utilizados. Qual é o tipo da página apresentada na figura?
88
![Page 89: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/89.jpg)
89
2
3
4
5
1
6
![Page 90: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/90.jpg)
ROTULANDO A NAVEGAÇÃOParte IV
90
![Page 91: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/91.jpg)
Introdução
• Os rótulos dos links são fundamentais para uma navegação eficiente.
• Rótulos claros e precisos dão precisão e segurança às decisões do usuário.
• A criação de bons rótulos é dificultada pela natureza da informação e pelo vocabulário.– É comum que diferentes pessoas usem termos
distintos para referir-se à mesma coisa.
• Esta seção apresenta diretrizes para nortear a escolha de bons rótulos.
91
![Page 92: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/92.jpg)
Diretrizes para bons rótulos
• Use a língua do usuário: adote terminologia adequada ao seu público alvo.– Evite jargões da companhia. Quando o termo não é
amplamente conhecido e necessitar ser inserido, adicione um texto explicativo.
– Evite terminologia técnica. Esta pode ser utilizada em site com público alvo específico, mas deve ser evitada em sites de uso mais geral.
– Evite abreviações, elas podem impedir que o visitante varra rapidamente as opções de navegação já que nem todos as entenderão. Seu uso é válido quando o público alvo for específico ou quando as siglas são amplamente conhecidas como UFRN, ICMS ou ENEM.
92
![Page 93: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/93.jpg)
Diretrizes para bons rótulos• 2014
93
![Page 94: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/94.jpg)
Diretrizes para bons rótulos• 2018
94
![Page 95: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/95.jpg)
Diretrizes para bons rótulos
95
![Page 96: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/96.jpg)
Diretrizes para bons rótulos• Puericultura?
96
![Page 97: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/97.jpg)
Diretrizes para bons rótulos
– Evite rótulos espertos, ou seja, rótulos que parecem criativos e transados durante o design, mas que se mostram de difícil entendimento para os usuários. Caso opte por rótulos espertos, forneça explicações, contexto ou evidência do seu significado. Não espere que as pessoas naveguem até a categoria para descobrir este significado.
97
![Page 98: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/98.jpg)
Diretrizes para bons rótulos• Vista o look?
98
![Page 99: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/99.jpg)
Diretrizes para bons rótulos• Bazar?
99
![Page 100: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/100.jpg)
Diretrizes para bons rótulos
– Use o tom de voz apropriado. Rótulos em um site de investimento bancário possuem um tom de voz diferente do encontrado em um site de música voltado para adolescentes. É importante entender o tom apropriado à audiência do site.
100
![Page 101: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/101.jpg)
Diretrizes para bons rótulos
101
![Page 102: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/102.jpg)
Diretrizes para bons rótulos
102
![Page 103: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/103.jpg)
Diretrizes para bons rótulos
103
![Page 104: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/104.jpg)
Diretrizes para bons rótulos
• Use rótulos descritivos.
– Rótulos devem ser tão descritivos quanto possível, dando noção clara do conteúdo que eles representam.
– Evite rótulos vagos ou genéricos, tais como “Informações”, “Detalhes”, ou “Miscelânea”. Se necessitar de um rótulo mais amplo, tente qualificá-lo. Por exemplo, “Informações para compradores” ao invés de “Informações”.
104
![Page 105: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/105.jpg)
Diretrizes para bons rótulos
• 2014
105
![Page 106: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/106.jpg)
Diretrizes para bons rótulos
• Use rótulos mutuamente exclusivos.– Rótulos frequentemente ocorrem como um grupo na
navegação. O significado de um pode afetar a interpretação dos outros. Diferencie os rótulos tanto quanto possível para evitar ambiguidades.
• Use rótulos focados.– Utilize os termos aplicáveis mais específicos. Por
exemplo, não rotule uma categoria para cães, gatos e hamsters como “Animais” quando “Animais de estimação” é uma possibilidade.
– Rótulos bem focados são mais previsíveis e aumentam a confiança do usuário.
106
![Page 107: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/107.jpg)
Diretrizes para bons rótulos
• 2014
107
![Page 108: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/108.jpg)
Diretrizes para bons rótulos
• 2018
108
![Page 109: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/109.jpg)
Diretrizes para bons rótulos
• Use rótulos consistentes.– A consistência ajuda a reduzir a ambiguidade. Para tal,
deve-se levar em conta os seguintes aspectos:• Sintaxe: rótulos do mesmo tipo de navegação devem ter
uma formação gramatical similar. Por exemplo, se um rótulo inicia com um verbo, os outros rótulos do mecanismo também devem iniciar com verbo.
• Apresentação: aparência visual consistente é importante para criar um senso de unidade e ajuda na varredura. Em alguns casos uma quebra na consistência pode ser interessante para adicionar contraste. Ainda assim, a apresentação deve comunicar que as opções permanecem juntas.
• Uso: use o mesmo rótulo nas diversas páginas do site quando se referir a mesma coisa. Não use “Contate-nos” em uma página e “Centro de atendimento ao usuário” em outro lugar. 109
![Page 110: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/110.jpg)
Diretrizes para bons rótulos
110
![Page 111: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/111.jpg)
Sistemas de rotulagem
• Os rótulos de navegação não existem isoladamente. Eles fazem parte de um sistema contextual que envolve cabeçalhos, títulos, textos e endereços. Assim, além das opções de navegação, elementos chave a serem considerados são títulos do navegador, títulos de página e URLs.– Títulos do navegador: são importantes devido a sua
utilização pelo navegador na descrição de páginas em links de favoritos, na navegação por abas e nos resultados de busca.
111
![Page 112: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/112.jpg)
Sistemas de rotulagem
– Títulos de página: a coordenação entre os títulos de página e os rótulos de navegação é importante no processe de reorientação. Se alguém clica em um link para Histórico da Companhia, a página deve refletir e confirmar que essa é a página do Histórico da Companhia. Isso normalmente é feito através do título da página.
– URLs: muitas pessoas manipulam as URLs para realizar navegação direta. Além disso, as URLs também são úteis para prover orientação. Assim, é interessante que as URLs sejam compreensíveis aos humanos.
112
![Page 113: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/113.jpg)
Sistemas de rotulagem
113
![Page 114: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/114.jpg)
Sistemas de rotulagem
• ☺
– http://www.tribunadonorte.com.br/search?tema=Enem
•
– http://www.walmart.com.br/categoria/bebes-e-criancas/fraldas-descartaveis/?fq=C:580/2626/2627/&fq=B:4467&PS=20
114
![Page 115: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/115.jpg)
Sistemas de rotulagem
115
![Page 116: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/116.jpg)
Resumindo
• Bons rótulos propiciam uma experiência do usuário rica e eficiente. Assim, obter rótulos certos é uma atividade crítica para a navegação.
• Bons rótulos falam a língua do usuário, são claros e não conflitantes.
• Rótulos devem apresentar consistência de apresentação, sintaxe e uso. A consistência contribui para o entendimento do sistema de navegação.
116
![Page 117: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/117.jpg)
Exercícios
4.1. Elabore um nome para um blog que divulga eventos e festividades realizados na cidade. Utilize no máximo 13 caracteres. Tente pensar em um nome que seria o mais óbvio possível, ou seja, que outras pessoas também pensariam.
4.2. Escolha um site de comércio eletrônico e um site organizacional ou corporativo. Para cada um, analise os rótulos de navegação em relação às diretrizes apresentadas. Aponte as situações em que, na sua opinião, não tiveram um bom resultado. Se possível, também aponte situações em que os rótulos apresentaram bons resultados, mesmo indo contra as diretrizes.
117
![Page 118: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/118.jpg)
SISTEMAS DE ORGANIZAÇÃOParte V
118
![Page 119: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/119.jpg)
Introdução
• O desempenho dos usuários ao realizar navegação ou busca é influenciado pela maneira como um website organiza o seu conjunto de informações.
• Esta seção apresenta esquemas e estruturas de organização que podem ser aplicados ao sistema de organização do conteúdo de web sites, tornando a navegação mais precisa e clara.
119
![Page 120: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/120.jpg)
Desafios ao organizar a informação
• Ambiguidade
– Sistemas de classificação dependem de vocabulário em linguagem natural, a qual é naturalmente ambígua. Isto traz dificuldades para a escolha de rótulos.
– A categorização nem sempre é simples e direta. Tecnicamente falando, tomates são frutas, mas geralmente são classificados como vegetais.
120
![Page 121: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/121.jpg)
Desafios ao organizar a informação
• Heterogeneidade
– Páginas web são naturalmente compostas por uma grande variedade de conteúdos: links, textos, imagens, documentos em diversos formatos, dados, vídeos, etc. Esta diversidade dificulta a criação de um esquema de organização único para todo o site, já que cada tipo de conteúdo possui características que lhe são únicas.
121
![Page 122: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/122.jpg)
Desafios ao organizar a informação
• Diferentes perspectivas– O modelo mental de organização varia de pessoa
para pessoa. Esta variação tende a ser maior entre audiências distintas.• Gestores tendem a criar uma organização de site
baseada na estrutura interna da empresa, a qual pode não ser clara para os visitantes.
– Naturalmente, a criação de um esquema de organização satisfatório passa a ser mais difícil quando o site é destinado a um público alvo amplo.
122
![Page 123: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/123.jpg)
Organização de sites web
• Sistemas de organização são compostos por esquemas de organização e estruturas de organização.– Um esquema de organização define as
características compartilhadas entre os itens de conteúdo e influencia o agrupamento lógico destes itens.
– Uma estrutura de organização define os relacionamentos entre grupos e itens de conteúdo.
123
![Page 124: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/124.jpg)
Esquemas de organização
• Estão presentes no cotidiano: listas telefônicas, prateleiras de supermercados, guias de TV, etc.
• São agrupados em esquemas organizacionais exatos e esquemas organizacionais ambíguos.
124
![Page 125: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/125.jpg)
Esquemas organizacionais exatos
• Agrupam informações em grupos bem definidos e mutuamente exclusivos.
• São fáceis de projetar, manter e utilizar.• Funcionam bem apenas em situações nas quais o
usuário conhece e possui a informação exata de indexação (e.g., nome, endereço, código, etc).
• Esquema alfabético.– Exemplos: lista telefônica e índices remissivos.
• Esquema cronológico.– Exemplos: postagens de um blog.
• Esquema geográfico.
125
![Page 126: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/126.jpg)
126
![Page 127: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/127.jpg)
127
![Page 128: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/128.jpg)
128
![Page 129: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/129.jpg)
Esquemas organizacionais ambíguos
• Agrupam as informações em grupos que carecem de uma definição exata.
• São mais difíceis de projetar e manter e seu uso também pode se mostrar desafiador.
• São mais adequados em situações naturalmente ambíguas como as que dependem de vocabulário, difíceis de categorizar ou baseadas na subjetividade.
• São ideais quando o usuário não sabe exatamente o que quer, pois agrupa itens relacionados. Este agrupamento lógico faz com que o usuário adquira conhecimento a respeito do seu objetivo.
• Seu sucesso depende do esquema organizacional adotado e dos cuidados utilizados na classificação dos itens.
129
![Page 130: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/130.jpg)
Esquemas organizacionais ambíguos
• Esquema por tópico ou assunto.
– Exemplos: departamentos acadêmicos, capítulos de livros técnicos, disciplinas de um curso.
130
![Page 131: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/131.jpg)
Esquemas organizacionais ambíguos
• Esquema baseado em tarefa.
– Organizam o conteúdo em grupos de processos, funções ou ações. São apropriados quando é possível antever as principais tarefas a serem realizadas pelos usuários.
– Exemplos: menus dos aplicativos de escritório.
– Na web, é comum em intranets e em sites de e-commerce. O mais comum é sua utilização conjunta com outros esquemas de organização.
131
![Page 132: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/132.jpg)
Esquemas organizacionais ambíguos
132
![Page 133: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/133.jpg)
Esquemas organizacionais ambíguos
• Esquema por audiência.
– Útil quando há a necessidade de organizar o conteúdo de acordo com públicos específicos.
133
![Page 134: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/134.jpg)
Esquemas organizacionais ambíguos
• Esquema baseado em metáfora.
– Cria categorias com base em conceitos familiares ao usuário ou assunto em questão.
– A metáfora escolhida deve ser bem avaliada pois pode se mostrar contraintuitiva ou dificultar a classificação de itens.
• Uma metáfora de ampla utilização é o recurso de carrinho de compras utilizado em sites de comércio eletrônico.
134
![Page 135: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/135.jpg)
Esquemas organizacionais ambíguos• https://web.archive.org/web/20130812054151/http://vernonclarke.com/
135
![Page 136: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/136.jpg)
Esquemas organizacionais ambíguos
• Esquemas híbridos.
– Utilizam mais de um esquema de organização.
– Eficiente quando bem projetado.
– O uso de diversos esquemas pode tornar a navegação contraintuitiva e forçar exploração adicional.
136
![Page 137: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/137.jpg)
Esquemas organizacionais ambíguos
137
![Page 138: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/138.jpg)
Estruturas organizacionais
• Definem as principais opções de navegação do site.
• As estruturas mais utilizadas em web sites são a hierárquica, a orientada a banco de dados e a baseada em hipertexto.
138
![Page 139: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/139.jpg)
Estruturas de organização hierárquicas
• Também conhecidas como taxonomias.• São familiares, amplamente utilizadas e de fácil
entendimento.• É comum que o início do projeto de organização do
conteúdo inicie pela definição da hierarquia.• Nem sempre as seções são mutuamente exclusivas.
Esquemas de organização ambíguos dificultam a atribuição de itens em uma única categoria. Definir um item em mais de uma categoria facilita a vida dos usuários. No entanto, distribuir muito conteúdo em múltiplas seções diminui a eficiência e sentido da hierarquia.
139
![Page 140: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/140.jpg)
Estruturas de organização hierárquicas
• Também deve-se balancear a amplitude (quantidade de opções em um nível) e a profundidade (quantidade de níveis). Uma hierarquia estreita e profunda leva a muitos cliques. Uma hierarquia larga e rasa força os usuários a analisarem muitas opções, as quais tendem a ser pobres em conteúdo.– A amplitude é melhor gerenciada ao organizar as
opções em grupos visuais distintos.– A profundidade superior a três níveis deve ser bem
avaliada pois os cliques adicionais podem forçar os usuários a abandonar o site.
140
![Page 141: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/141.jpg)
Estruturas de organização hierárquicas
141
Profundidade
Amplitude
![Page 142: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/142.jpg)
Estruturas de organização orientadas a banco de dados
• Um banco de dados é uma coleção de dados organizados de forma que os dados possam ser acessados de forma rápida e fácil. Os dados são geralmente organizados em registros, os quais são compostos por campos.
• O significado de cada campo é conhecido como metadado, conceito que traz significado ao dado bruto. Metadados podem ser aplicados em um dite web, o que confere estrutura ao ambiente tipicamente caótico da web. Ao aplicar tags e outros metadados, possibilitamos busca e navegação poderosos que geralmente são necessários em sites grandes.
142
![Page 143: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/143.jpg)
Estruturas de organização orientadas a banco de dados
• O uso de metadados e vocabulário controlado habilita:
– Geração automática de índices alfabéticos.
– Geração dinâmica de links para conteúdo relacionado.
– Busca baseada em campos.
– Ordenação e filtragem avançada de resultados de busca.
143
![Page 144: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/144.jpg)
Estruturas de organização baseadas em hipertexto
• Hipertexto é o recurso fundamental da web, possibilitando a livre ligação entre documentos e conteúdo.
• Apresenta grande flexibilidade, o que pode ocasionar uma navegação complexa e confusa. A ligação arbitrária de conteúdo pode levar o usuário a um estado de confusão.
• Geralmente não é uma boa opção para a navegação principal. É mais adequado em para completar a organização hierárquica ou baseada em banco de dados.
144
![Page 145: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/145.jpg)
Resumindo
• Ao projetar a organização de conteúdo, deve se pensar como os esquemas e estruturas escolhidos afetarão a experiência do usuário. A natureza da informação também impacta na escolha dos esquemas de organização.
• Esquemas exatos são melhores quando o item de busca é bem conhecido. Esquemas ambíguos são melhores para navegação exploratória e quando os usuários não possuem conhecimento preciso a respeito do que procuram.
145
![Page 146: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/146.jpg)
Resumindo
• Esquemas ambíguos podem ser desafiadores. Prover múltiplos meios de acessar a mesma informação podem ajudar neste sentido. No entanto, múltiplos esquemas podem se mostrar confusos.
• Sites grandes geralmente necessitam dos três tipos de estruturas de organização apresentados. A hierarquia é utilizada na organização geral e principal. Subsites com informações homogêneas e estruturadas são candidatos ao uso de uma estrutura baseada em banco de dados. Hipertexto é mais adequado em situações mais livres, criativas e informais.
146
![Page 147: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/147.jpg)
Exercícios5.1) Acesse os sites www.abril.com.br e
www.dicionariompb.com.br e identifique os esquemas de organização utilizados.
5.2) Faça uma pesquisa na internet e mostre sites que utilizam os seguintes esquemas de organização: orientado a tarefas, baseado em metáfora e baseado em audiência.
5.3) Suponha que você esteja elaborando a organização de conteúdo de um site sobre seres vivos das mais diversas espécies e filos do reino animal, tais como mamíferos, moluscos, bactérias, etc. O site será voltado tanto para o público em geral, bem como para um público especializado tais como biólogos e estudantes de Biologia. Elabore mecanismos de navegação para o site utilizando esquemas de organização exatos e esquemas de organização ambíguos.
147
![Page 148: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/148.jpg)
BLUEPRINTS E WIREFRAMESParte VI
148
![Page 149: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/149.jpg)
Introdução
• Blueprints e wireframes são artefatos que ajudam no projeto e na documentação do site.
• Blueprints, também chamados de mapas do site, exibem o relacionamento entre as páginas.
• Wireframes são rascunhos dos modelos de páginas do site.
149
![Page 150: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/150.jpg)
Blueprints
• Podem ser utilizados para exibir a hierarquia de páginas de um site, subsite ou seção.
• Podem ser usados para projetar ou documentar a arquitetura da informação de um site.
• Há muita variação na notação gráfica e no forma de uso, por isso é importante a adoção de legendas.
150
![Page 151: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/151.jpg)
Exemplo 1
151
NOTAS:Guias são narrativas que introduzem novos visitantes à empresa e ao web site.
Os elementos de Pesquisa e Navegação
permitem acesso rápido e direto aos conteúdos do web site.
O diretório de registro de subsites serve como um catálogo e provê acesso a tais subsites.
Subsites contém o conteúdo real do web site. Há 3 grandes tipos de subsite. Cada subsite pode ser criado pode ser criado e mantido por um departamento diferente.
Home page
Adquirindo nossos produtos
educacionais
Recursos para educadores
Visão geral de nossa organização
Pesquisa e navegação
Feedback
Notícias
Painel de notícias
Registros de subsites
Programas
Programas
Séries
Interface de pesquisa
Navegar por audiência
Navegar por título
Navegar por formato
Navegar por tópico
Navegação e pesquisa ampla sobre os registros de subsites.
subsites
Diretório de subsites
guias
Os itens deste painel
são links para a
página de notícias
![Page 152: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/152.jpg)
Exemplo 1
• Legenda
152
Componente de página (conteúdo ou aplicação presente na página)
Página
Grupo de páginas similares
Grupo de páginas relacionadas
![Page 153: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/153.jpg)
Exemplo 2
153
![Page 154: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/154.jpg)
Exemplo 3
154
![Page 155: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/155.jpg)
Exemplo 4
155Fonte: med.stanford.edu
![Page 156: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/156.jpg)
Wireframes
• Ajudam no processo de criação dos layouts das páginas do site.
• O nível de fidelidade pode variar, indo do rascunho básico até um produto próximo da aparência final da página.
• Geralmente é necessário apenas um wireframe por grupo de páginas.
156
![Page 157: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/157.jpg)
Exemplo 1
157
![Page 158: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/158.jpg)
Exemplo 2
158Fonte: www.arquiteturadainformacao.com
![Page 159: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/159.jpg)
Exemplo 3
159Fonte: www.acceleratedonline.net
![Page 160: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/160.jpg)
Exemplo 4
160Fonte: speckyboy.com
![Page 161: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/161.jpg)
Exemplo 5
161Fonte: www.wirify.com
![Page 162: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/162.jpg)
Ferramentas de wireframe
• https://moqups.com/
• https://gomockingbird.com/home
• https://www.ninjamock.com/
• http://mockupbuilder.com/App
162
![Page 163: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/163.jpg)
Referências
• KALLBACH, James. Design de navegação web: otimizando a experiência do usuário. Porto Alegre: Bookman, 2009.
• ROSENFELD, Louis e MORVILLE, Peter. Information Architecture for the World WideWeb. Sebastopol: O’Reilly, 2002.
163
![Page 164: Design de navegação web - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/...design_tii:design_de_navegacao_web.pdf · –Deve haver um balanço entre design visual, ... gráfico](https://reader033.vdocuments.pub/reader033/viewer/2022052919/5be3279409d3f2382f8cac57/html5/thumbnails/164.jpg)
Informações bibliográficas
• Autor: Alexandre Gomes de Lima
• Data de atualização: agosto de 2018
• Licença de uso: Creative Commons BY-SA (Atribuição-CompartilhaIgual)
164