Tipografia: Principais Elementos

Prévia do material em texto

www.ginead.com.br
CURSO
Arquitetura da Informação
MÓDULO 
03
1
Arquitetura da Informação 
2 
Todos os direitos reservados para Alfamídia Prow. 
AVISO DE RESPONSABILIDADE 
As informações contidas neste material de treinamento são distribuídas “NO ESTADO EM 
QUE SE ENCONTRAM”, sem qualquer garantia, expressa ou implícita. Embora todas as 
precauções tenham sido tomadas na preparação deste material, a Alfamídia Prow não têm 
qualquer responsabilidade sobre qualquer pessoa ou entidade com respeito à 
responsabilidade, perda ou danos causados, ou alegadamente causados, direta ou 
indiretamente, pelas instruções contidas neste material ou pelo software de computador e 
produtos de hardware aqui descritos. 
2
Arquitetura da Informação 
 Arquitetura da Informação 
MÓDULO 3
3.1 
PRINCIPAIS ELEMENTOS 
RÓTULOS 
3.1.1 Títulos do navegador 
3.1.2 URLs 
3.1.3 Títulos das Páginas 
3.2 ORGANIZAÇÃO 
3.2.1 Estruturas de Informação 
3.3 NAVEGAÇÃO 
3.3.1 Estrutural 
3.3.2 Associativa . 
3.3.3 Utilitária 
3
Arquitetura da Informação 
Módulo 3 
Principais Elementos 
Alguns fatores que condicionam o sucesso e formulam um projeto digital dizem 
respeito às nomenclaturas que são dadas aos registros, à forma criada para o 
usuário navegar e como o conteúdo pode ser organizado em uma tela 
3.1 Rótulos 
Os rótulos são uma parte fundamental a ser pensada durante o processo. Através 
dos rótulos (nomenclaturas, palavras-chave ou palavras-gatilho), o usuário irá 
optar por um caminho ou outro no seu website. Por isso, é necessário realizar uma 
crítica sob estes nomes, porque são eles que conduzem à navegação. É preciso 
evitar problemas com vocabulário
5
, ambiguidades, jargões utilizados internamente,
termos técnicos, modismos ou abreviações. Ao invés disso, concentre-se no estudo 
do perfil do usuário geral que acessa seu site e fale claramente para ele, não para 
você mesmo. Lembre-se que no projeto irão existir várias pessoas que serão 
responsáveis por partes diferentes do site, seu trabalho também é discutir com os 
outros profissionais para estimular o padrão do projeto. Alguns pontos 
indispensáveis: 
3.1.1 Títulos do navegador 
No caso dos usuários adicionarem seu site aos Favoritos, trabalhar com várias 
Abas abertas ou em Impressões, é importante que seu rótulo seja curto e transmita 
o nome claramente, facilitando a identificação do usuário.
3.1.2 URLs 
Usuários utilizam URLs para chegarem mais facilmente ao seu destino, evitando 
fazer todo o trajeto desde a entrada pela home do site. Por isso, crie URLs que 
digam claramente qual é a seção e mantenha essa ideia mesmo em links profundos, 
como família de produtos. 
5
 Veja o artigo de George Furnas, The Vocabulary Problem in Human-System Communication 
4
Arquitetura da Informação 
3.1.3 Títulos das Páginas 
É preciso criar o sentido de reorientação com o usuário e para isso os títulos das 
páginas devem corresponder aos links âncora anteriormente clicados. 
3.2 Organização 
É através da organização que o Arquiteto de Informação poderá classificar e 
ordenar as informações que serão apresentadas no projeto. O objetivo é pensar na 
melhor organização para ajudar o usuário a encontrar o que precisa e atingir seu 
objetivo 
3.2.1 Estruturas de Informação 
Plano ou mapa das seções existentes no projeto. Podem ser classificadas de 5 
formas diferentes: 
Estruturas lineares 
Onde as páginas são dispostas sequencialmente, seguindo uma ordem lógica. Por 
exemplo, imagine um formulário para cadastro de currículos, subdividido em 6 
etapas, sendo que cada etapa é uma página que deve ser preenchida totalmente ou 
parcialmente antes da outra. Muitos designers inserem uma navegação horizontal
6
para dar diferencial ao site, este também é um exemplo de estrutura linear. 
Teias 
Nós ligados sem níveis ou sequência, mais parecendo uma metáfora para o 
usuário. São links e conteúdos de apoio, distribuídos de forma a não deixar o início 
ou fim claros. Normalmente este tipo de estrutura é utilizada em campanhas 
promocionais com menus animados
7
 ou ocultos
8
 para um público mais expert, que
possui certa experiência em navegação. 
Estruturas Hierárquicas 
É a famosa estrutura em árvore, mais utilizada pelos projetistas, pois trata níveis 
de nós que são dispostos num relacionamento pai-filho, primeiro e segundo nível 
6
 Pode ser o sucesso ou fracasso de um site, isso minimizado se você deixar disponível uma opção com todos 
os links disponíveis para clique, além da barra de navegação 
7
 Mais utilizados em projetos de comunicação, onde o uso do motion design é efetivo, este recurso serve para 
criar maior impacto e diferencial ao projeto 
8
 Fazem uso diferenciado e eficaz do espaço, pois agiliza a navegação densa. É sempre interessante uma 
animação anterior que mostre todos os itens do menu (Notas retiradas do livro Guidelines for Online Success, 
editora Taschen) 
5
Arquitetura da Informação 
ou estrutural/ principal e secundário. A maioria dos projetos possui algum tipo de 
hierarquia e ela é a forma mais fácil para o usuário entender o sentido e ordem que 
você pensou para as informações. 
Facetas 
É quando disponibilizamos para o usuário mais de um caminho para ele encontrar 
o conteúdo, diferentemente da estrutura hierárquica, que fornece apenas um único
caminho para chegar-se ao destino.
Emergentes 
Tipo de estrutura que é projetada para o crescimento à medida que os usuários vão 
contribuindo para o projeto. Um bom exemplo é o site Wikipedia, mas mesmo ele 
mantém um sistema tradicional de navegação com menu à esquerda, observando 
que o mais importante é localizar o usuário, e não promover uma forma 
diferenciada de estrutura. 
Esquemas Organizacionais 
São facilitadores do acesso ao conteúdo, os mecanismos para navegarmos entre a 
informação e não entre páginas. Existem dois grupos de esquemas 
organizacionais: 
Esquemas exatos 
 Alfabéticos: Quando os usuários sabem as palavras que buscam, podem
encontrar a informação através links de letras (A, B, C...) que quando clicados
mostram os valores daquele determinado link;
 Cronológicos: Muito utilizado em sites de notícias onde existe a importância de
organizar os registros que seguem uma ordem de datas de acontecimentos;
 Geográficos: Internacional ou nacional, Cidade, Estado, Região ou País são as
bases deste esquema.
Esquemas Subjetivos 
 Assunto: São os tópicos relacionando os temas existentes em grandes sites.
Normalmente quando os usuários estão perdidos, preferem passar os olhos
sobre o terreno da tela, pesquisando tópicos que lhe chamam a atenção;
 Grupo de Audiência: São os itens organizados por ordem de grandeza,
indicados para conferir valor ou peso à informação. Podem ser os conteúdos
mais vistos, os últimos posts de blog, Twitter ou, ainda, podem ser separados
por público-alvo, como linha Kids e Adultos, por exemplo;
 Tarefa: Combinado com os Rótulos, o esquema por Tarefas indica um encargo
ao link, como "Ler sobre a empresa", "Encontrar e comparar preços", etc..
6
Arquitetura da Informação 
3.3 Navegação 
Verifique as diferentes formas para ir de uma página a outra, a partir de um ponto 
inicial. Todas podem funcionar ao mesmo tempo, caso isso contribua para o 
usuário, e devem estabelecer pontos de referência, assim como uma sinalização 
que o oriente, pois do contrário, ele se perde. A navegação pode se dar de várias 
formas: 
3.3.1 Estrutural 
Linca uma seção à outra através da hierarquia do site. Em qualquer página, o 
usuário deve ser capaz de mover-se para as seções acima e para as seções abaixo. 
Numa navegação estrutural, existe a navegação Principal, que são os links 
essenciais/ estruturais do projeto e a navegação Local, que é normalmente derivada 
da navegação Principal (sublinks), quase sempre no formato de L-invertido, 
Horizontal ou Vertical. 
3.3.2 Associativa 
Conecta páginas com tópicos e conteúdos similares, independente de sualocalização no site. Os links tendem a atravessar fronteiras estruturais. Geralmente 
são contextuais podendo estar embutidos dentro dos textos ou em forma de Links 
Relacionados na lateral. Ainda, pode-se ver no formato Adaptativo, onde o 
conteúdo muda de acordo com as histórias mais visitadas, por exemplo. 
Atualmente, com o sucesso das redes sociais, muitos Arquitetos de Informação 
relacionam o conteúdo principal a itens daquele assunto, dispostos nestas redes. 
Links rápidos e de Rodapé também podem ser consideradas navegações 
associativas, que funcionam como links de apoio navegacional. 
3.3.3 Utilitária 
Conecta páginas e utilidades que ajudam as pessoas a usarem o sistema, e podem 
estar hospedadas fora da hierarquia do site. O seu único relacionamento, umas com 
as outras, é a estrutura global do site. Podem ser itens (como links ou ícones) de 
navegação extra-site, como nos grandes sites de corporações, e suas subdivisões de 
negócio; caixas de ferramentas para fazer coisas no site, como no GMail, onde 
existe Agenda, Docs., Tradutor, etc.; e, ainda existem os seletores de idiomas ou 
países. 
7
Arquitetura da Informação 
Observação: A Busca pode ser considerada item utilitário do site, pois permite que 
grandes quantidades de conteúdo sejam encontradas; reduz a fragmentação; dá 
agilidade ao encontro da informação. Geralmente possui uma interface inicial e 
uma página de resultados, e pode ter funcionalidades que estimulem seu acesso 
como correções ortográficas, sugestões, auto-complete e resultados 
personalizados. Seus resultados podem ser alfanuméricos, cronológicos, por 
audiência e outros valores. Ainda, a Busca possui uma relação com o projeto de 
SEO (Search Engine Optimization), por isso importa muito os rótulos das URLs, 
metatags, nome do site, títulos, links, corpo do texto, ALTs, tempo de indexação, 
posição da palavra, etc.. É um mundo que merece aprendizado exclusivo e aqui é 
feito o registro. 
ALGUNS MECANISMOS DE NAVEGAÇÃO 
Elementos que dão apoio à forma de Navegação, também associados aos Esquemas. 
Sempre inseridos da melhor maneira, de acordo com cada tipo de projeto e 
estratégia, eles ajudam a compor o espaço, tornando o site mais interativo quanto ao 
acesso à informação: 
Paginação: Geralmente aplicada em páginas onde existem grandes quantidades de 
registros, como em resultados de busca ou páginas de notícias, por exemplo. Pode-
se deixar números (1, 2, 3...) tornando a paginação com acesso direto ou no 
esquema Retroceder e Avançar (Próximo/ Anterior); 
Breadcrumbs (Trilha de migalhas de pão): Quase sempre abaixo do menu 
estrutural disposto horizontalmente, funciona para mostrar a posição atual dentro de 
um site ou para fornecer atalhos para as páginas previamente visitadas e/ ou outras 
áreas do site; 
Sitemaps: Pode ser também uma utilidade do site, fornecendo uma visualização e 
link de acesso a todas as páginas do projeto; 
Tags: Disponibilizadas em nuvens ou lista, correspodem a uma ordem alfabética ou 
links mais visitados do site; 
Índices A-Z: São guias alfabéticos para os tópicos, termos ou conceitos dispostos 
numa página; 
Abas: Inseridas dentro de um nicho específico de conteúdo, as abas são dispostas 
como telhas sobrepostas. Neste ponto, o tamanho dos rótulos deve ser simples, nada 
extenso; 
Menus: Podem ser verticais (com opção dinâmica) ou horizontais (com opção drop-
down), que são os mais utilizados, principalmente em sites sérios, ou ainda 
animados ou ocultos, mais frequentes em sites experimentais; 
Acima, foram citados alguns dos principais mecanismos de navegação, mas lembre-
8
Arquitetura da Informação 
se que em um projeto digital existem outros componentes, os widgets
9
, que são
utilizados juntos com a informação. 
9
 http://pt.wikipedia.org/wiki/Widget 
9
Semeando Conhecimento
10