Design de navegação web. Design web e arquitetura da informação Curso técnico de informática para internet

Transcrição

1 Design de navegação web Design web e arquitetura da informação Curso técnico de informática para internet

2 Parte I INTRODUÇÃO À NAVEGAÇÃO WEB 2

3 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

4 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 Funções da navegação web 5

7 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

9 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

10 Funções da navegação web Instrumentos musicais? 10

13 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

14 Funções da navegação 14

15 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

16 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

17 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

18 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

19 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

20 Parte II MECANISMOS DE NAVEGAÇÃO 20

21 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

22 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 Navegação por passos 23

26 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 Navegação por paginação 27

28 Navegação por paginação 28

29 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

30 Trilha de migalhas de pão 30

31 Á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

32 Árvore de navegação 32

33 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

34 Mapa do site 34

35 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

36 Diretórios 36

37 Diretórios curlie.org 37

38 Í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

39 Índice A-Z 39

40 Índice A-Z 40

41 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

42 Nuvem de tags 42

43 Barra de navegação Sequência horizontal de links geralmente localizada na área superior da página. 43

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

45 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

46 Menu vertical 46

47 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

48 Menu dinâmico 48

49 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

50 Menu drop-down 50

51 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

52 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

53 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

54 Parte III TIPOS DE NAVEGAÇÃO 54

55 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

56 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

57 Categorias de navegação Estrutural Associativa Utilitária 57

58 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

59 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

60 Navegação estrutural Navegação principal 60

61 Navegação estrutural Navegação principal 61

62 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

63 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: Principal Principal Principal Local Local Local L-invertido Horizontal Vertical embutido 63

64 Navegação estrutural Navegação local 64

65 Navegação estrutural Navegação local 65

66 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

67 Navegação associativa Navegação contextual 67

68 Navegação associativa Links rápidos 68

69 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

70 Navegação utilitária 70

71 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

72 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

73 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

74 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

75 Páginas de aterrissagem 75

76 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

77 Páginas de galeria 77

78 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

79 Páginas de resultados de busca 79

80 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 Páginas de conteúdo 81

82 Páginas de conteúdo 82

83 Páginas funcionais Permitem às pessoas completarem uma tarefa, tal como conduzir uma busca ou enviar um . 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

84 Páginas funcionais 84

85 Páginas funcionais 85

86 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

87 Exercícios 3.1. Acesse o site do IFRN e identifique exemplos de categorias de navegação e dos tipos de páginas apresentados 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

88 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

90 Parte IV ROTULANDO A NAVEGAÇÃO 90

91 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

92 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

93 Diretrizes para bons rótulos

95 Diretrizes para bons rótulos 95

96 Diretrizes para bons rótulos Puericultura? 96

97 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

98 Diretrizes para bons rótulos Vista o look? 98

99 Bazar? Diretrizes para bons rótulos 99

100 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

104 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

106 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

109 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

111 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

112 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

113 Sistemas de rotulagem 113

114 Sistemas de rotulagem Enem PS=20 114

115 Sistemas de rotulagem 115

116 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

117 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 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

118 Parte V SISTEMAS DE ORGANIZAÇÃO 118

119 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

120 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

121 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

122 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

123 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

124 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

125 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 126

127 127

128 128

129 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

130 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

131 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

132 Esquemas organizacionais ambíguos 132

133 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

134 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

136 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

138 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

139 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

140 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

141 Estruturas de organização hierárquicas Profundidade Amplitude 141

142 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

143 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

144 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

145 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

146 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

147 Exercícios 5.1) Acesse os sites e 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

148 Parte VI BLUEPRINTS E WIREFRAMES 148

149 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

150 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

151 Exemplo 1 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. Visão geral de nossa organização Programas Adquirindo nossos produtos educacionais Registros de subsites Programas Home page Recursos para educadores Diretório de subsites Séries guias subsites Os itens deste painel são links para a página de notícias Painel de notícias Pesquisa e navegação Feedback Notícias 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. 151

152 Exemplo 1 Legenda 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 152

153 Exemplo 2 153

154 Exemplo 3 154

155 Exemplo 4 Fonte: med.stanford.edu 155

156 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

157 Exemplo 1 157

158 Exemplo 2 Fonte: 158

160 Exemplo 4 Fonte: speckyboy.com 160

162 Ferramentas de wireframe

163 Referências KALLBACH, James. Design de navegação web: otimizando a experiência do usuário. Porto Alegre: Bookman, ROSENFELD, Louis e MORVILLE, Peter. Information Architecture for the World Wide Web. Sebastopol: O Reilly,

164 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