Arquitetura de Informação - 5

Transcrição

1 Arquitetura de Informação - 5 Ferramentas para Web Design Prof. Ricardo Ferramentas para Web Design 1

2 Objetivo do Sistema de Navegação O sistema de navegação é o componente da Arquitetura de Informação que especifica as maneiras de navegar, de se mover pelo espaço informacional e hipertextual do website. Sua função é indicar ao usuário a sua localização e mostrar o caminho correto para que ele chegue ao seu destino. Ferramentas para Web Design 2

3 Recomendações para o projeto do Sistema de Navegação Segundo NIELSEN (2000), um bom sistema de navegação deve, a todo momento, responder a 3 perguntas básicas: Onde estive? Onde Estou? Aonde posso ir? NIELSEN, J. Projetando Websites. Rio de Janeiro: Campus, Ferramentas para Web Design 3

4 Recomendações para o projeto do Sistema de Navegação Utilize a navegação social Aproveite as funcionalidades do browser Ferramentas para Web Design 4 Ferramentas para Web Design 4

5 Elementos do Sistema de Navegação Os elementos do sistema de navegação são divididos em dois sub-sistemas: Sistema de Navegação Embutido Sistema de Navegação Remoto Formado pelos elementos de navegação que são apresentados junto com o conteúdo. Sua função é contextualizar e oferecer flexibilidade de movimento. Logotipo Barra de Navegação Global Menu Local Bread Crumb Cross Content Formado pelos elementos externos a hierarquia do site. Sua função é prover caminhos complementares para se encontrar o conteúdo e completar as tarefas. Mapa do Site Índice Remissivo Ferramentas para Web Design 5 Ferramentas para Web Design 5

6 Elementos do Sistema de Navegação Logotipo Barra de Navegação Global Menu Local Menu Local - Menus Pop-up e Pull-down Bread Crumb Cross Content Mapa do Site Índice Remissivo Ferramentas para Web Design 6 Ferramentas para Web Design 6

7 Objetivo do Sistema de Rotulação O sistema de rotulação é o componente da Arquitetura de Informação que estabelece as formas de representação, de apresentação da informação, definindo signos para cada elemento informativo. Seu desafio é criar para o website uma linguagem clara, compreensível e sem ambigüidades. Ferramentas para Web Design 7 Ferramentas para Web Design 7

8 O que são rótulos? Rótulo ou termo (em inglês utiliza-se a palavra label) é um símbolo lingüístico utilizado para representar um conceito. Atribuir rótulos a conceitos é uma habilidade natural dos seres humanos. Uma língua nada mais é que um conjunto grande e complexo de rótulos. O objetivo dos rótulos é comunicar o conceito eficientemente, ou seja, comunicar sem ocupar muito espaço na página e sem demandar muito esforço cognitivo do usuário para compreendê-lo. Rótulos podem ser textuais ou não textual. Na web o tipo mais comum de rótulos não textuais são os ícones. Rótulo textual Rótulo não textual Conceito Árvore = = Ferramentas para Web Design 8 Ferramentas para Web Design 8

9 Por que você deve se importar com rótulos? Rótulo é uma forma de representar uma informação ou comunicar um conceito rápida e eficaz. Rótulos são empregados nos títulos das páginas, nas opções do sistema de navegação, nos links contextualizados dentro das páginas e nos meta-dados usados na indexação para o sistema de busca. É através do rótulo que o usuário entende e se adapta ao sistema de organização e navegação do website. Na web, os usuários não gastam muito tempo para decodificar o rótulo. Por isso o rótulo precisa comunicar o conceito rapidamente. Ferramentas para Web Design 9 Ferramentas para Web Design 9

10 PRnet/2012 Ferramentas para Web Design 10 Ferramentas para Web Design 10

11 Onde estão as geladeiras? Refrigerador é sinônimo de geladeira, mas qual desses termos o seu usuário costuma utilizar? PRnet/2012 Ferramentas para Web Design 11 Ferramentas para Web Design 11

12 Dificuldades no projeto do Sistema de Rotulação Conseguir falar a linguagem do usuário. O usuário normalmente vive em um ambiente diferente do arquiteto de informação, por isso convive com gírias, expressões técnicas e até dialetos diferentes. Toda organização possui uma linguagem interna própria. Muitas vezes, devido a suas políticas internas, se utiliza essa linguagem para criar os rótulos do website. Porém é comum o usuário não compreender essa linguagem. Superar a ausência de feedback. Numa conversa, nós seres humanos dispomos de uma infinidade de recursos de feedback que nos auxiliam, em tempo real, a verificar se nossas mensagens estão sendo compreendidas (gestos, entonação de voz, perguntas, etc.). Num website não existe esse feedback entre o arquiteto de informação e o usuário. As poucas formas que existem (medição de acesso as páginas, s, sugestões e reclamações) raramente são em tempo real. Ferramentas para Web Design 12 Ferramentas para Web Design 12

13 O site da Cartoon Network fala a linguagem dos usuários. Esse site utiliza como rótulo no menu desenhos dos seus personagens ao invés dos seus nomes. Desse modo até crianças em fase inicial de alfabetização conseguem compreender. PRnet/2012 Ferramentas para Web Design 13 Ferramentas para Web Design 13

14 Recomendações para o projeto do Ser consistente Sistema de Rotulação A consistência é talvez a diretriz mais importante da Usabilidade. Ela permite que o usuário preveja o comportamento do sistema e assim facilita a sua aprendizagem. Nos rótulos existem 6 níveis de consistência que precisam ser observados: Estilo: consistência no uso de caixa-alta e caixa-baixa e da pontuação. Apresentação: consistência na aplicação de fontes, cores, tamanhos de letra e espaços em branco. Sintaxe: uniformidade na forma sintática dos rótulos( grau, número, gênero, tempo verbal, etc.). Usar, por exemplo, apenas verbos no infinitivo ou apenas substantivos. Granularidade: equalização na especificação dos rótulos evitando misturar, no mesmo nível, rótulos com significado abrangente (ex: Restaurantes) com rótulos com significado estreito (Ex: Cantinas Italianas). Completude: cobrir completamente o escopo definido pelos rótulos. Por exemplo, se uma interface possui os comandos frente, trás e direita automaticamente o usuário irá procurar pelo comando esquerda. Audiência: não misturar rótulos para públicos diferentes. Por exemplo, não misturar termos científicos com populares. Ferramentas para Web Design 14 Ferramentas para Web Design 14

15 Recomendações para o projeto do Estreite o escopo Sistema de Rotulação Quanto mais focado um website estiver em seu público-alvo, contexto e conteúdo, mais fácil será definir seus rótulos. Problemas como homonímia e ambigüidade reduzem muito quando se estreita a abrangência do assunto. Caso o website tenha de atender vários públicos-alvos ou cobrir assuntos diferentes pode-se optar por criar sub-sites com escopo estreito. Ferramentas para Web Design 15 Ferramentas para Web Design 15

16 O escopo muito abrangente do portal UOL dificulta a criação de um sistema de rótulos consistente e sem ambigüidades. Algumas inconsistências: Carros (plural), Cinema (singular) Blog Fotolog (barra vertical), Diversão e Arte (e), Tempo Trânsito Mapas (sem elemento separador) Algumas ambigüidades: Educação Vestibular, Lição de Casa Últimas Notícias, UOL News Diversão e Arte, Jogos PRnet/2012 Ferramentas para Web Design 16 Ferramentas para Web Design 16

17 Evite siglas Recomendações para o projeto do Sistema de Rotulação Siglas são abreviações para palavras usadas frequentemente. São muito comuns no vocabulário interno das organizações, mas nem sempre os usuários as conhecem. Utilize apenas siglas universalmente aceitas. Ex: AIDS, CD, TV. O que é LCD? Melhor usar Tela PRnet/2012 Ferramentas para Web Design 17 Ferramentas para Web Design 17

18 Recomendações para o projeto do Elimine as dúvidas Sistema de Rotulação É comum que o usuário tenha dúvidas com os rótulos do website porque o produto que procura pode estar em mais de uma categoria. Deve-se evitar esse tipo de dúvida criando categorias mutuamente exclusivas ou colocar links para o mesmo conteúdo em todas as categorias que geram dúvidas. Sinônimos e quase-sinônimos são tipos de rótulos que podem gerar dúvida e devem ser evitados. Ferramentas para Web Design 18 Ferramentas para Web Design 18

19 Categorias que podem gerar dúvidas são duplicadas na estrutura de diretórios do Yahoo! e são indicadas com no final do nome. PRnet/2012 Ferramentas para Web Design 19 Ferramentas para Web Design 19

20 Recomendações para o projeto do Sistema de Rotulação Explicite os itens hierarquicamente inferiores (itens filhos) Um rótulo pode denominar uma categoria que seja pouco conhecida pelo usuário. Também pode ocorrer da categoria ter um significado muito abrangente. Nesses casos, é importante contextualizar o usuário, explicando-lhe o que a categoria significa. Uma boa maneira de criar esse contexto ao usuário é mostrar os itens filhos da categoria. Esse recurso explica ao usuário o que a categoria contém e criar atalhos no sistema de navegação. Ferramentas para Web Design 20 Ferramentas para Web Design 20

21 O Cadê e o Submarino explicitam os principais filhos das suas categorias. Todos possuem links para agilizar a navegação PRnet/2012 Ferramentas para Web Design 21 Ferramentas para Web Design 21

22 Recomendações para o projeto do Sistema de Rotulação Consulte outros sistemas de rotulação. É muito raro, para não dizer impossível, que um sistema de rotulação seja inédito. Normalmente existe algum outro sistema de rotulação semelhante já desenvolvido. Ao se projetar um sistema de rotulação, busque sistemas semelhantes para observar os rótulos mais freqüentes e o vocabulário utilizado com o público-alvo. Algumas fontes de sistemas de rotulação semelhantes são websites de concorrentes. Ferramentas para Web Design 22 Ferramentas para Web Design 22

23 Websites concorrentes possuem sistema de rotulação semelhantes. PRnet/2012 Ferramentas para Web Design 23 Ferramentas para Web Design 23

24 Websites concorrentes possuem sistema de rotulação semelhantes. PRnet/2012 Ferramentas para Web Design 24 Ferramentas para Web Design 24

25 Recomendações para o projeto do Utilize termos padrões Sistema de Rotulação A web começa a criar alguns padrões para os rótulos nos websites. Procure seguir esses padrões porque são familiares para a maioria dos usuários. Main, Main Page, Home, Home-Page, Página Inicial. Search, Find, Busca, Buscar. SiteMap, Contents, Table of Contents, Index, Mapa do Site. Contact, Contact Us, Contact Webmaster, FeedBack, Contate-nos, Fale Conosco, Entre em contato. Help, FAQ, Frequently Asked Questions, Ajuda, Dúvidas, Tire suas Dúvidas. News, What s New, Notícias, Últimas Notícias. About, About us, About < company name >, Who We Are, Quem Somos, Sobre a <empresa>. Ferramentas para Web Design 25 Ferramentas para Web Design 25

26 Recomendações para o projeto do Sistema de Rotulação Elimine sinônimos e quase sinônimos Toda língua é repleta de sinônimos ( farol e semáforo ) e quase sinônimos ( início e começo ). Um website precisa manter a consistência também no nível dos sinônimos tratando os mesmos conteúdos pelos mesmos nomes. Para facilitar o controle dos termos sinônimos e quase sinônimos crie um arquivo de autoridade (authority file): Liste todos os rótulos do website Elimine as duplicidades Agrupe os sinônimos e quase-sinônimos. Em cada grupo escolha qual é o termo preferencial. Ex: { farol, semáforo } termo preferencial farol Ferramentas para Web Design 26 Ferramentas para Web Design 26

27 Sistema de Rotulação com Ícones Usando ícones como rótulos Ícones podem representar as informações da mesma maneira que os rótulos textuais. Uma vez compreendido seu significado, os ícones são reconhecidos pelo usuário mais rapidamente que rótulos textuais, por isso são indicados para usuários experientes e freqüentes. O problema dos rótulos em ícone é que eles constituem uma língua limitada quando comparada aos rótulos com texto. O uso de ícones pode dificultar o entendimento do usuário quando se quer representar um conceito complexo. Ferramentas para Web Design 27 Ferramentas para Web Design 27

28 O que esses ícones significam? Chat Notícias Esportes Tempo Terra Mail Compras Horóscopo PRnet/2012 Ferramentas para Web Design 28 Ferramentas para Web Design 28

29 Tipos de Ícones As formas de representação de ícones podem ser classificadas pela relação que elas guardam com o conceito subjacente que representam. A seguir, são apresentadas estas classificações, da melhor para a pior: 1- Ícones de resemblance: representam o conceito através de uma imagem análoga. A placa de transito Área com Desmoronamento representa o conceito como desenho de um desmoronamento 2- Ícones exemplares: representam o conceito através de um exemplo, uma parte, relacionada ao conceito. Sua interpretação é dependente de contexto. O garfo e a colher são partes do conceito restaurante 3- Ícones simbólicos: utilizam uma imagem para representar um conceito com significado maior que a imagem em si mesma. A taça com a rachadura indica o conceito de frágil 4- Ícones arbitrários: guardam relação arbitrária com o conceito subjacente, portanto, a associação deve ser aprendida. Material radioativo é identificado por este símbolo devido a normas internacionais. PRnet/2012 Ferramentas para Web Design 29 Ferramentas para Web Design 29

30 Tipos de Ícones Ícones podem ter uma de três formas: Objetos concretos, do tipo resemblance Símbolos abstratos Mistos, uma combinação dos dois O ícone misto geralmente consegue ficar mais próximo do ícone de resemblance, quando utiliza as formas abstratas com significado. Ícones mistos são úteis para revelar dinamismo, sensação de movimento, idéia de ação ou processo. Ferramentas para Web Design 30 Ferramentas para Web Design 30

31 Linguagem baseada em ícones Quando for necessário produzir uma quantidade grande de ícones, crie uma linguagem de ícones. Reduz o esforço necessário para projetar, desenhar, testar e revisar os ícones. Assegura e reforça a consistência entre os ícones. Torna os ícones auto-explicativos e dedutíveis. Ajuda os usuários a iniciar mais rapidamente e a dominar a interface mais cedo HORTON, W. O Livro do Ícone. Berkeley, Ferramentas para Web Design 31 Ferramentas para Web Design 31

32 Linguagem baseada em ícones Ex: Imagine que você precise projetar um software de desenho. Nesse software tem apenas duas ações: Desenhar Apagar E tem apenas três objetos podem ser desenhados: Círculo Quadrado Triângulo Como seriam os ícones desse software? Ferramentas para Web Design 32 PRnet/2012 Ferramentas para Web Design 32

33 Caixa Eletrônico Alienígena PRnet/2012 DEITRICH, D. ; PATTERSON, W. ; WARNER, B. ATM Interface Redesign, cc. gatech. edu/ computing/ classes/ cs6751_ 94_ summer/ deitrich/ project. html Ferramentas para Web Design 33 Ferramentas para Web Design 33

34 Caixa Eletrônico Alienígena PRnet/2012 DEITRICH, D. ; PATTERSON, W. ; WARNER, B. ATM Interface Redesign, cc. gatech. edu/ computing/ classes/ cs6751_ 94_ summer/ deitrich/ project. html Ferramentas para Web Design 34 Ferramentas para Web Design 34