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

Design de navegação web

Design web e arquitetura da informação

Curso técnico de informática para internet

INTRODUÇÃO À NAVEGAÇÃO WEBParte I

2

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

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


5


6


• 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


8


• 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


• Instrumentos musicais?

10



11



12


• 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

Funções da navegação

14


• 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


• 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

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

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

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

MECANISMOS DE NAVEGAÇÃOParte II

20

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

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


23


24


25

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


27


28

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

Trilha de migalhas de pão

30

Á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

Árvore de navegação

• http://msdn.microsoft.com/library/

32

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

Mapa do site

• http://portal.ifrn.edu.br/sitemap

34

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

Diretórios

36

Diretórios

• curlie.org

37

Í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

Índice A-Z

39

Índice A-Z

40

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

Nuvem de tags

42

Barra de navegação

• Sequência horizontal de links geralmente localizada na área superior da página.

43

Abas

• Caso especial da barra de navegação. A diferença está apenas na apresentação visual.

44

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

Menu vertical

46

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

Menu dinâmico

48

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

Menu drop-down

50

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

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

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

TIPOS DE NAVEGAÇÃOParte III

54

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

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

Categorias de navegação

57

Utilitária

Estrutural

Associativa

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


• 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


• Navegação principal

60


• Navegação principal

61


• 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


• 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


• Navegação local

64


• Navegação local

65

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


• Navegação contextual

67


• Links rápidos

68

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

Navegação utilitária

70

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

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


• 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


• 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

Páginas de aterrissagem

75


• 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

Páginas de galeria

77


• 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

Páginas de resultados de busca

79

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


81


82

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

Páginas funcionais

84

Páginas funcionais

85

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

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

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

89

2

3

4

5

1

6

ROTULANDO A NAVEGAÇÃOParte IV

90

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

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

Diretrizes para bons rótulos• 2014

93

Diretrizes para bons rótulos• 2018

94


95

Diretrizes para bons rótulos• Puericultura?

96


– 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

Diretrizes para bons rótulos• Vista o look?

98

Diretrizes para bons rótulos• Bazar?

99


– 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


101


102


103


• 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


• 2014

105


• 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


• 2014

107


• 2018

108


• 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


110

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


– 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


113


• ☺

– 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


115

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

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

SISTEMAS DE ORGANIZAÇÃOParte V

118

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

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


• 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


• 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

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

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

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

126

127

128

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


• Esquema por tópico ou assunto.

– Exemplos: departamentos acadêmicos, capítulos de livros técnicos, disciplinas de um curso.

130


• 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


132


• Esquema por audiência.

– Útil quando há a necessidade de organizar o conteúdo de acordo com públicos específicos.

133


• 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

Esquemas organizacionais ambíguos• https://web.archive.org/web/20130812054151/http://vernonclarke.com/

135


• 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


137

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

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


• 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


141

Profundidade

Amplitude

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

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

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

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

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

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

BLUEPRINTS E WIREFRAMESParte VI

148

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

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

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

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

Exemplo 2

153

Exemplo 3

154

Exemplo 4

155Fonte: med.stanford.edu

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

Exemplo 1

157

Exemplo 2

158Fonte: www.arquiteturadainformacao.com

Exemplo 3

159Fonte: www.acceleratedonline.net

Exemplo 4

160Fonte: speckyboy.com

Exemplo 5

161Fonte: www.wirify.com

Ferramentas de wireframe

• https://moqups.com/

• https://gomockingbird.com/home

• https://www.ninjamock.com/

• http://mockupbuilder.com/App

162

https://moqups.com/

https://gomockingbird.com/home

https://www.ninjamock.com/

http://mockupbuilder.com/App

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

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

Documents

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