design de navegação web -...
TRANSCRIPT
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
Funções da navegação web
5
Funções da navegação web
6
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
Funções da navegação web
8
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
Funções da navegação web
• Instrumentos musicais?
10
Funções da navegação web
• Instrumentos musicais?
11
Funções da navegação web
• Instrumentos musicais?
12
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
Funções da navegação
14
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
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
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
Navegação por passos
23
Navegação por passos
24
Navegação por passos
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
Navegação por paginação
27
Navegação por paginação
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 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
Navegação estrutural
• Navegação principal
60
Navegação estrutural
• Navegação principal
61
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
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
Navegação estrutural
• Navegação local
64
Navegação estrutural
• 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 associativa
• Navegação contextual
67
Navegação associativa
• 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á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
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
Páginas de aterrissagem
75
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
Páginas de galeria
77
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
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
Páginas de conteúdo
81
Páginas de conteúdo
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
Diretrizes para bons rótulos
95
Diretrizes para bons rótulos• Puericultura?
96
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
Diretrizes para bons rótulos• Vista o look?
98
Diretrizes para bons rótulos• Bazar?
99
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
Diretrizes para bons rótulos
101
Diretrizes para bons rótulos
102
Diretrizes para bons rótulos
103
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
Diretrizes para bons rótulos
• 2014
105
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
Diretrizes para bons rótulos
• 2014
107
Diretrizes para bons rótulos
• 2018
108
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
Diretrizes para bons rótulos
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
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
Sistemas de rotulagem
113
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
Sistemas de rotulagem
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
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
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
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
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
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
Esquemas organizacionais ambíguos
132
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
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
Esquemas organizacionais ambíguos• https://web.archive.org/web/20130812054151/http://vernonclarke.com/
135
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
Esquemas organizacionais ambíguos
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
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
Estruturas de organização hierárquicas
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
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