Arquitetura de Informação - 4

Transcrição

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

2 Esquemas de Organização da Informação Exata Divide a informação em categorias bem definidas e mutuamente exclusivas com regras claras para incluir novos itens. Indicado quando o usuário sabe exatamente o que está procurando. Alfabeto Indicado para grandes conjuntos de Informação e público muito diversificado. Ex: Dicionários, Enciclopédias, Listas Telefônicas Tempo Indicado para mostrar a ordem cronológica de eventos. Ex: Livros de História, Guias de TV, Arquivo de notícias Localização Compara informações vindas de diferentes locais. Ex: Previsão do tempo, pesquisa política, Atlas de anatomia Seqüência Organiza itens por ordem de grandeza. Indicado para conferir valor ou peso a informação. Ex: Lista de preços, Top musics Esquemas de Organização da Informação Ambígua Divide a Informação em categorias subjetivas. Baseia-se na ambigüidade inerente da língua e na subjetividade humana. Não possui regras claras de como incluir novos itens. Indicado quando o usuário não sabe exatamente o que está procurando. Assunto Divide a informação em diferentes tipos, diferentes modelos ou diferentes perguntas a serem respondidas Ex: Páginas Amarelas, Editorias do jornal, Supermercado Tarefa Organiza a informação em conjuntos de ações. Usado muito em software transacionais. Raramente utilizado sozinho na Web. Ex: Menu aplicativos Windows (Editar, Exibir, Formatar) Público Alvo Indicado quando se deseja customizar o conteúdo para cada público-alvo. Ex:Lojas de departamento Metáfora Utilizado para orientar o usuário em algo novo baseado em algo familiar. Normalmente limita muito a organização. Ex:Desktop de um computador Hibrido Reúne 2 ou mais esquemas anteriores. Normalmente causa confusão ao usuário.

3 O que é navegar? Navegar é alcançar um destino que está fora do alcance de campo de visão do ponto de partida. Para alcançar seu destino, o navegador se orienta através de instrumentos e pontos de referência que determinam a sua posição e a direção a seguir. Ferramentas para Web Design 3

4 E navegar na Web? A navegação em hipertextos é análoga a navegação em espaços físico. Para se movimentar o usuário precisa de orientação, caso contrário ele se perde. No mundo físico existe uma infinidade de pontos de referências para o usuário se orientar (árvores, rios, montanhas, estrelas, placas, etc.). Em um website, ao contrário, esses pontos de referência não existem. Assim, ao se projetar um website,é necessário criar um sistema de navegação para estabelecer pontos de referência e uma sinalização que oriente o Ferramentas para Web Design 4

5 Por que as pessoas se perdem ao navegar em um hipertexto? Existem dois fenômenos cognitivos da navegação em ambientes físicos que se aplicam à navegação em hipertextos e explicam as dificuldades de navegar nesses ambientes virtuais: Esquemas ou modelos de ambiente genéricos Mapas espaciais cognitivos McKNIGHT, C; DILLON, A. ; RICHARDSON, J. Hypertext in Context. Cambridge University Press, EDWARDS, D. ; HARDMAN, L. Lost in Hyperspace: cognitive mapping and navigation in a hypertext enviroment in Hypertext: theory into practice, Oxford:Intellect, Ferramentas para Web Design 5

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

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

8 Recomendações para o projeto do Sistema de Navegação FLEMING (1998) cita 10 princípios básicos para sistema de navegação de qualidade: Fácil de aprender O sistema de navegação precisa ser fácil de aprender porque se os usuários perderem muito tempo para entender como utilizá-lo, ele irão abandonar o site. Ser consistente Os usuários, após compreenderem como o sistema de navegação funciona, passam a confiar nele. Um sistema consistente permite que o usuário tenha previsibilidade sobre como será a resposta do sistema antes de executar a ação. Prover feedback O usuário espera que o sistema reaja a cada ação que executar sobre a sua interface porque é através dessas reações que o usuário consegue avaliar se o sistema executou a ação com sucesso. Por isso o sistema de navegação precisa sempre dar feedback mostrando-lhe sua posição espacial. Presente de diferentes formas conforme o contexto Para decidir seus movimentos o usuário precisa ver as possíveis rotas. Ser contextualizado é apresentar para o usuário as rotas que lhe interessam conforme o ponto em que se encontra no sistema. Oferecer alternativas Usuários diferentes possuem diferentes estratégias de navegação. O sistema de navegação precisa ser capaz de atender a esses diferentes comportamentos. FLEMING, J. Web Navigation: Designing the User Experience. O'Reilly, Ferramentas para Web Design 8

9 Recomendações para o projeto do Sistema de Navegação Economizar ações e tempo de utilização Navegações longas causam frustração no usuário. Por isso, o sistema de navegação precisa sempre manter as rotas curtas e oferecer atalhos, especialmente para usuários experientes. Apresentar mensagens visuais claras e no momento adequado O sistema de navegação precisa ter um visual claro e que guie o usuário em detrimento da estética. Possuir rótulos compreensíveis O sistema de navegação precisa usar rótulos claros, sem ambigüidade, na linguagem do usuário e consistentes com as informações apresentadas. Estar em sintonia com o propósito do website A abordagem do sistema de navegação depende muito dos objetivos do website e das experiências do usuário, assim o design do sistema de navegação deve auxiliar o usuário a seguir esses objetivos. Suportar os objetivos e comportamentos do usuário O sistema de navegação precisa auxiliar os usuários a executarem suas tarefas da forma que estão acostumados a fazê-las. FLEMING, J. Web Navigation: Designing the User Experience. O'Reilly, Ferramentas para Web Design 9

10 Recomendações para o projeto do Sistema de Navegação Flexibilidade Equilibre flexibilidade e confusão Posso ir para qualquer lugar! Permite ao usuário ir rapidamente de um ponto a outro no site. Fornece muitos atalhos. Confusão Para onde vou? Muitas opções de navegação confundem o usuário. Demora para escolher onde clicar. Ferramentas para Web Design 10

11 Processo de Compras da Americanas.com Escolha do Produto Muitos links + Flexibilidade + Confusão Escolha forma de pagamento Poucos links - Flexibilidade - Confusão Diminua a quantidade de opções de navegação nas tarefas mais críticas para que o usuário possa focar melhor sua atenção. Ferramentas para Web Design 11

12 Recomendações para o projeto do Sistema de Navegação Utilize a navegação social Navegação social consiste em apresentar a um usuário o que outros usuários com os mesmos interesses encontraram no website. Ela permite criar correlações entre os conteúdos baseadas nos interesses do usuário e não nas suposições do arquiteto de informação. Clientes que compraram esse livro também compraram Essa famosa lista de links do site da Amazon mostra ao usuário interessado em um produto o que os outros usuários com o mesmo interesse compraram no site. Ferramentas para Web Design 12

13 Recomendações para o projeto do Sistema de Navegação Aproveite as funcionalidades do browser Muita pesquisa, análise e testes já foram investidos na concepção das funcionalidades dos principais browsers. Por isso evite, ao projetar o sistema de navegação, desabilitar ou duplicar essas funcionalidades. Todos os principais browsers possuem um botão Voltar. Não duplique essa funcionalidade sem necessidade. Ferramentas para Web Design 13

14 Os elementos do sistema de navegação são divididos em dois sub-sistemas: Sistema de Navegação Embutido 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 Sistema de Navegação Remoto 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 14

15 Logotipo Tem a função de identificar o website e mostrar ao usuário a sua posição em relação a web como um todo. Como se pode entrar em um website através de qualquer página, é importante que todas contenham o logotipo para que o usuário identifique em que website está. Normalmente possui link para a Home-Page. Logotipo Ferramentas para Web Design 15

16 Barra de Navegação Global Contém os links para as áreas chaves do site, as grandes categorias do modelo de organização. Frequentemente é o único elemento de navegação comum a todo o website, por isso tem grande impacto na usabilidade. Barras em formato horizontal têm quantidade de links limitadas para que a página não tenha scroll horizontal. Uma alternativa é se criar mais de uma barra de navegação global, agrupando os links por funcionalidade. Barra de Navegação Global do Submarino Ajuda e Listas de Compras Acompanhamento dos Pedidos Categorias dos Produtos Ferramentas para Web Design 16

17 Menu Local Apresenta links para páginas que estão próximas, na estrutura do website, à página que está sendo visitada (Páginas irmãs, filhas, pais, etc.) Menu local da seção DVDs do Submarino

18 Menu Local - Menus Pop-up e Pull-down Vantagem: permitem mostrar os itens do menu de navegação de uma forma bem compacta. Desvantagem: escondem as opções do usuário. Menu Pop-up Menu Pull-down Ferramentas para Web Design 18

19 Bread Crumb Informa onde o usuário se encontra na estrutura do site e fornece links para os níveis hierárquicos superiores. São bastante compactos. Úteis em situações onde o usuário está pesquisando, comparando e selecionando.

20 Bread Crumb Segundo Instone (2002), existem 3 tipos de bread crumbs: Location Bread Crumb Informa a posição da página na estrutura do site mostrando links para todas as páginas hierarquicamente superiores até a Home-Page. A página tem sempre o mesmo bread crumb independente do caminho percorrido para alcançá-la. Path Bread Crumb Mostra o caminho percorrido pelo usuário para alcançar a página. Se a mesma página puder ser acessada por diferentes caminhos, ela apresentará diferentes bread crumbs. Attribute Bread Crumb Mostra atributos (meta-dados) do conteúdo da página. INSTONE, K. Location, Path & Attribute Breadcrumbs. User-experience.org, Ferramentas para Web Design 20

21 Location Bread Crumb Cada página tem um bread crumb único. Ferramentas para Web Design 21

22 Path Bread Crumb A mesma página acessada por diferentes caminhos trás diferentes bread crumbs Ferramentas para Web Design 22

23 Attribute Bread Crumb Essa página da Amazon possui 7 attributes bread crumbs para o mesmo brinquedo quem mostram todos os seus atributos. Ferramentas para Web Design 23

24 Orientações para o uso de breadcrumbs Não utilizá-los em sites simples Colocar o breadcrumb na parte superior da tela, abaixo do logotipo da empresa Utilizar algum sinal que demonstre continuidade entre os itens (>,», ) Utilizar tipografia em corpo pequeno Não utilizar o último item como título da página Utilizar duas linhas quando necessário MEMÓRIA, F. Design para a Internet Projetando a experiência perfeita. Campos, Ferramentas para Web Design 24

25 Cross Content Apresenta uma série de links relacionados ao conteúdo da página que está sendo visitada. Para serem úteis devem ser bastante contextualizados. Ferramentas para Web Design 25

26 Cross Content No site ManyWorlds o usuário pode escolher o grau de proximidade entre o conteúdo e seus cross contents. Ferramentas para Web Design 26

27 Mapa do Site Apresenta toda a estrutura do website, normalmente na forma hierárquica. Reforça a hierarquia do website para que o usuário se familiarize com a sua organização. Facilita o acesso rápido e direto para o conteúdo. Evita sobrecarregar o usuário com muita informação. Não é recomendado para websites com pouca organização hierárquica. Ferramentas para Web Design 27

28 Índice Remissivo São listas de palavras chaves organizadas em ordem alfabética. Bastante úteis quando o usuário já sabe o nome do conteúdo que procura. Ferramentas para Web Design 28