Pós-Graduação em Design Instrucional para EaD

Disciplina VII: Design Instrucional de Interfaces e Navegação Web

1
_______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Todos os direitos reservados.

Disciplina VII: Design Instrucional de Interfaces e Navegação Web

Módulo I Introdução à Navegação Web

Objetivos do Módulo Apresentar alguns conceitos básicos sobre a navegação e seu design. Expor algumas perspectivas de design de navegação web e quais as necessidade de navegação.

Conteúdos abordados Navegação e design de navegação Necessidades de navegação Perspectivas de design de navegação web

2
_______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Todos os direitos reservados.

Navegação e design de navegação A navegação tem um papel fundamental em moldar as experiências na web. Ela prevê acesso à informação de uma forma que melhora o entendimento, reflete a marca e colabora para a credibilidade geral de um site. A navegação web e a habilidade de encontrar informação têm um impacto financeiro para as diversas partes interessadas em uma empresa. Design de navegação não esta limitado apenas a escolher uma linha de botões, mais sim é uma tarefa muito mais ampla. O design de navegação coordena os objetivos dos usuários com os objetivos de negocio, por exemplo, de uma empresa. Isso requer um entendimento e profundo conhecimento de

organização de informações, layout de páginas e apresentação de design.

Você sabia que ... Para avaliar se uma navegação web é boa, basta verificar que é pouco notada, a navegação é melhor quando nem mesmo é notada.

Pode-se definir melhor a navegação web, tendo em mente um link, que são textos ou gráficos em uma página que conectam-se a outras páginas ou diferentes pontos de uma mesma página permitindo uma rápida associação de uma ideia para outra. A navegação web é definida de três maneiras: A teoria e a prática de como as pessoas movem-se de página para página web.

3
_______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Todos os direitos reservados.

A navegação fornece acesso à informação A maioria dos indivíduos sabe que a navegação fornece acesso a informação. Por isso é importante entender as diferentes funções que a navegação web possui e sua potencialidade: 1. objetivando que o leito vivencie a informação contida ali. nesse contexto a navegação web pode ser considerada um meio para um fim. determinar a importância e a relevância das páginas e do conteúdo.O processo de busca direcionada a objetivos e localização de informação hiper-ligada. e não existe o conceito de uma página principal tradicional. Grande parte das pessoas visitam um site para realizar pesquisas. O processo de criação e organização dos links. ler. Eles não são isolados de maneira a servir como um esquema de navegação. Esse processo envolve uma analise ao estabelecer relacionamentos que possuam sentido entre as páginas. Todos os links. navegando na web. buscas respostas dentre outros. veja abaixo como a informação do seu site pode ser acessada: O modelo apenas-ligações-de-conteúdo: Imagine uma coleção de páginas ligada umas às outras sem nenhuma organização hierárquica ou padrão de ligação em particular. Todos os direitos reservados. rótulos e outros elementos que fornecem acesso a páginas e auxiliam as pessoas a orientar-se enquanto interagem com um dado site web. fica a cargo do design de navegação. Conceitualmente com a aparência da figura a seguir: 4 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. . Todos os links são embutidos no texto. porém meios alternativos de acesso também existem.

com a diferença que não existem links. Não há noção de início e fim na sua busca por informação. Não há distinção entre texto e hiper-texto. . Certamente essa não é a maneira mais eficiente de acessar a informação. levando a novas páginas de conteúdo.Figura 1: modelo apenas-ligações-de-conteúdo Isso forneceria um forte relacionamento entre os documentos. Todos os direitos reservados. porém a facilidade de encontrar informação é baixa nesse modelo. Um termo ou frase ligada em uma página tem uma forte associação com o conteúdo da página de destino. O tempo de acesso é maior. Há um projeto de pesquisa hospedado pelo Centro de Interação da University College of 5 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. e a orientação se torna difícil. ou entre conteúdo e navegação. Todos os textos são links e todos os links são textos. Ao invés dos links cada uma das palavras são interativas para todos os textos. Veja a figura a seguir: Figura 2: modelo "informação líquida" A partir de uma única palavra de uma dada página. O modelo "informação líquida": modelo similar ao anterior. qualquer número de ações de navegações é possível.

Veja a figura a seguir: 6 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. traduzi-lo e assim por diante. ligar a documentos relacionados. A ideia básica é que.uclic. www. um menu de opções aparecerá.Em vez de hiper-texto. Imagine acessar todo conteúdo de um site web através de uma única página. Como na imagem a seguir: Figura 3: Opções de navegação com o menu Hiperpalavras Pode-se conduzir uma busca.London ( UCLIC. definir o termo. Ela seria altamente interativa. O objetivo deles é por um fim à tirania dos links.uk) que explora a possibilidade de tornar todo texto online interativo. Clicar em um item individual da lista revelaria seu texto e imagens completos. . Esta página detém o controle de filtrar e ordenar para apresentar diferentes trechos de material de uma vez. Todos os direitos reservados. Uma lista de documentos na coleção encolhe ou expande em cada interação.ucl. certamente. quando uma palavra for clicada.ac. os pesquisadores referem-se a isso como hiper-palavras. O modelo de filtro.

Também é possível encontrar uma interface experimental desenvolvida por pesquisadores da IBM para navegar os trabalhos do compositor americano Philip Glass (www. Os usuários informam uma palavra chave ou duas em uma caixa e clicam no botão buscar. O movimento é então circular: o usuário nunca deixa a página.Figura 4: Modelo de filtro Um único controle em uma dada página leva a novo conteúdo. .html). Nas páginas individuais de conteúdo. mas este conteúdo é apresentado dentro da mesma página. Todos os direitos reservados. a única opção é retornar para a lista ou conduzir uma nova busca. Isso produz uma lista de páginas que eles podem acessar. A acessibilidade geral e a adição de itens como favoritos também ficam complicadas. O modelo de busca Nesse modelo de acesso.com/html/pages-engine. Os visitantes do site podem apenas realizar buscas por palavras chave de forma a obter a informação desejada. Analise a figura a seguir: 7 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. não existe navegação ou link para documentos internos. Pode também ser difícil para os usuários saberem quando uma busca está completa: potencialmente pode-se filtrar e ordenar o dia inteiro e ainda assim chegar a uma nova lista de conteúdo. Mas com esse tipo de navegação os visitantes de primeira viagem não obteriam uma boa visão geral do tipo de conteúdo disponível no site.philipglass. apenas utiliza continuamente seu conteúdo.

atualizando o conteúdo da página a cada vez.Figura 5: Modelo de busca Buscar é certamente uma maneira eficiente de acessar o conteúdo. o qual provê acesso à informação em um site web. Todos os direitos reservados. O modelo de navegação estrutural Neste modelo. Mas a busca por palavras-chave é eficaz somente se o item a ser buscado é conhecido de antemão. Todos fazem buscas na web o tempo todo. A busca assume que as pessoas serão capazes de expressar precisamente e completamente suas necessidades em termos de informação como uma consulta. conforme nos mostra a figura a seguir: Figura 6: Modelo de navegação estrutural 8 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. existe apenas um conjunto de links. Pode-se clicar através de uma hierarquia de opções de navegação. Essa área é visualmente separada da página de conteúdo no layout. talvez ao lado de cada página. Entretanto. . esse pode não ser o caso.

é preciso que tenham informações de localização. Mostra a localização de um site A navegação não trata apenas de ir de uma página a outra. para um site de informações médicas. onde vários tipos de acesso são mesclados. um sistema de navegação web fornece acesso eficiente e balanceado. é como os sistemas de navegação fornecem acesso às informações importantes. Logo. Em outras palavras. Para sites de comércio eletrônico. Cada um suporta potencialmente diferentes modos de procura. Na realidade. Não existem links embutidos dentro do texto. Ao navegar em site web. trata também de prover orientação. O design de navegação foca na criação de um sistema de acesso à informação. 2. os sites web possuem um misto desses modelos. nem funções de busca. o indivíduo teria que navegar novamente para cima da árvore e para baixo novamente em outro ramo. ferramentas de navegação para informação na web vêm em múltiplas formas. Discussões a cerca desses modelos demasiadamente puros são intencionalmente parciais. para uma organização sem fins lucrativos. as pessoas parecem aprender sobre outros conteúdos disponíveis. . isso poderia resultar em mais apoio. isso pode representar mais vendas. Todos os direitos reservados. È este sistema que melhora a experiência de navegação web. De um modo geral. para 9 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. isso poderia fornecer um entendimento mais aprofundado sobre uma doença ou cura. Geralmente. Mas navegar pode ser uma experiência de informação muito transformadora que apenas uma busca por palavras-chave. incluindo navegação estrutural. a navegação web pode parecer mais como algo mostrado na figura abaixo.Para obter uma página em outra área do site. ligações de conteúdo e mecanismos de busca e filtro.

Existem três necessidades básicas de orientação web: Onde estou? O que tem aqui? Para onde eu posso ir a partir de onde estou? A localização é normalmente indicada ao destacar a opção corretamente selecionada em um menu de navegação ou mostrar o caminho com uma trilha. Ao invés disso. Por último uma marca é uma promessa ao 10 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. 3. estes elementos comumente referidos como a roupa da empresa. Ela cria uma coerência geral. etc. Alguns sites estampam a localização com uma notação "Você está aqui". dos assuntos e conteúdos do site e cria expectativas. ela reflete a profundidade do assunto de um site. A navegação mostra o assunto de um site A navegação mostra a amplitude e o tipo de conteúdo de um site web e suas ofertas. significativa. ajudam as pessoas a identificarem-se com sua empresa e seus produtos. A navegação reflete a marca Uma marca é freqüentemente pensada em termos de sua manifestação visual como: logotipo. porém isso não implica que a navegação mostre o escopo do site em termos de quantidade de páginas. ou o assunto do site. Todos os direitos reservados.auxiliar as pessoas a navegarem. o conhecimento dos tópicos principais de um site podem afetar a abordagem que as pessoas usam para encontrar informações neste site. incluindo a navegação web. cores. fontes. Dessa forma. A posição de uma marca afeta essencialmente cada aspecto de um produto ou serviço. . 4.

Quanto mais criável for um site. Todos os direitos reservados. 6. a ordem dos elementos. desempenho técnico. necessidades dos usuários e seus comportamentos e também a usabilidade geral do site. As marcas tem valores e personalidade e a navegação reflete e suporta os aspectos de uma marca. isso pode ser custosos para seu negócio. Mesmo assim. se é que isto pode ser feito. mais efetivamente pode alcançar audiência e atingir objetivos estabelecidos. o tom de voz dos rótulos e o estilo visual da navegação contribuem para uma experiência em relação à marca na web. Uma boa navegação ajuda a persuadir e encorajar os visitantes a fazerem aquilo que quer que eles façam. tais como mecanismos de busca. 5. A navegação afeta a credibilidade do site A credibilidade é uma qualidade percebida e julgada pelo visitante. ou mesmo se esta informação está sendo usada. 11 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. justificativas para uma boa navegação incluem: Os clientes não podem comprar o que eles não podem encontrar. Os empregados perdem produtividade quando a navegação é ineficiente. Se um visitante não consegue encontrar a informação que precisa. Um objetivo comum no design de sites web é tornar um site mais incrível.consumidor sobre os produtos e serviços oferecidos. Calcular o retorno do investimento apenas para a navegação de um site não é fácil. As organizações gastam muito tempo e dinheiro tornando a informação disponível na web sem realmente saber como. . A navegação interfere na rentabilidade Informação é inútil se não puder ser encontrada. Isso ajuda a passar a mensagem adiante. Existem muitos outros fatores a serem considerados. As opções de navegação mostradas.

por sua vez. é correto firmar que suas implicações financeiras são potencialmente de amplo alcance.O custo do suporte aumenta com a navegação pobre. assim como no contexto de negócios de uma maneira mais ampla. muitos fatores influenciam o design de navegação e. Pesquisa de usuários é o processo de investigar sistematicamente os visitantes de um dado site. Tal 12 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Quem usará o site? Esta talvez seja a pergunta mais importante a ser feita. O primeiro passo no design de navegação é entender o propósito e a motivação para o site web como num todo. Mas dado que a navegação é tão central para a experiência básica na web. deve-se levar em consideração os custos de treinamento. é preciso que se faça algumas perguntas fundamentais: Por que está construindo o site? Apesar de aparentemente óbvia. relançamento e assim por diante. O design de navegação web não pode ser feito isoladamente. Adicionalmente. As marcas começam a se desvalorizar com uma navegação pobre. Ao considerar um design de navegação. Todos os direitos reservados. esta questão é frequentemente desprezada. a navegação afeta muitos aspectos do site. . Design de Navegação web Dados os diversos papéis em potencial que a navegação web desempenha. É preciso ter em mente que um site cuja navegação é bem projetada não resolverá todos os problemas.

. Todos os direitos reservados. Como os usuários navegarão para o conteúdo que eles precisam? O layout de páginas e o design gráfico dão à navegação sua forma final. seu arranjo na página. Eles podem construir ou destruir o sistema de navegação. uma habilidade rara. Assim o designer deve entender o conteúdo e como ele deve estar organizado. isso é mais do que apenas mudanças cosméticas. o tipo de fonte e tamanho usado e as cores usadas. Ela tem também um imenso e direto impacto na navegação. forma e função. Fornecer acesso a páginas web em sites ricos em informação é surpreendentemente complexo.pesquisa não só fornece uma ideia dos tipos de pessoas que visitam o site. Como o conteúdo deste site está organizado? A arquitetura de informação representa as estruturas que dão forma e significado ao conteúdo e à funcionalidade de site. A que a navegação fornece acesso? As pessoas acessam um site para encontrar respostas ou para realizar uma tarefa. mas também suas necessidades e comportamentos. Entretanto. no final. O design de navegação web é. particularmente em grandes sites web. podem ser elementos críticos. Fique atento!!! A navegação é problemática. 13 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. um misto de arte e ciência. Aspectos tais como: a ordem das opções. intuição e fatos. É uma das partes mais difíceis do design web.

com atividades como entrevistas. Abaixo seguem algumas abordagens para design: Design centrado no usuário Um processo de design centrado no usuário coloca as pessoas no centro da atenção ao desenvolver um produto ou serviço. O design centrado no usuário aumenta potencialmente as taxas de adoção e diminui a curva de aprendizagem. Os benefícios não são a curto prazo. o design geral do site deve espelhar como os usuários entendem o assunto e como eles esperam encontrar as informações que precisam. Neste sentido busca reduzir o risco de uma falha no produto. No final. Todos os direitos reservados. Entretanto. Isso substitui o trabalho de adivinhar o comportamento do usuário e fazer suposições sobre isto baseadas em pesquisa. O crescimento relativo do designer é valorizado. Ele consiste de metodologias que tornam o usuário uma parte integral do processo de desenvolvimento. geralmente ela é implícita. e seus interesses também. A abordagem pode parecer-se com as perspectivas encontradas na arte em algum grau. mas podem valer a pena no final. Design centrado no designer As decisões são tomadas a partir da visão do designer em relação ao mundo. observações e vários tipos de testes. expressão pessoal é importante. Entender as perspectivas de design pode ser importante para criar um entendimento comum da equipe e para guiar decisões de design. e muitos apontam para o tempo e custos extras que a pesquisa de usuário adiciona ao desenvolvimento. .Filosofia de design A maioria dos projetos web tem uma perspectiva de design que prevalece. não é fácil. Esta abordagem pode ser bem sucedida 14 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional.

porém a mesma torna-se rapidamente mal sucedidas para sites que tratam de vastas quantidades de informação ou interações complexas. perdidos ou irem para outro lugar. podem refletir os departamentos de uma empresa. 15 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Todos os direitos reservados. Por exemplo. mas um corpo de informação existente é a base para estruturar a navegação. Porém essa perspectiva geralmente corre o risco de os usuários ficarem confusos. por exemplo. Design centrado na empresa O site web é projetado em torno da estrutura e necessidades dos stakeholders na empresa ou organização. Design centrado no conteúdo Essa perspectiva é similar ao design centrado na empresa. a quantidade e o tipo de conteúdos disponíveis não deveria ser o único fator determinando as prioridades de navegação. imagens em outro e assim por diante. Essa perspectiva pode aumentar a eficiência para a manutenção do site posteriormente: cada departamento é responsável apenas por sua própria fatia do site. focadas em design que sejam capazes de produzir sites bem sucedidos. Neste sentido. As principais categorias de um site. Entretanto. todos os PDFs em outro.para empresas pequenas. . você pode organizar o conteúdo pelo formato do documento ao invés de organizar pelo assunto: todas as páginas de texto em um lugar. a abordagem de design centrado no conteúdo é apenas natural e em algum nível constantemente presente.

e em alcançar o produto final. . Todos os direitos reservados. O design pode ser determinado pela maneira mais fácil de implementar uma solução.Design centrado na tecnologia A tecnologia é a força condutora aqui. O foco é na implementação 16 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional.

p. 17 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. . James. 2009.Referências KALBACH. 22_43. Fundamentos da Navegação Web. Bookam. Todos os direitos reservados. In: Design de Navegação Web: otimizando a experiência do usuário.

Conteúdos abordados Navegação por passos. Todos os direitos reservados. trilhas e migalhas de pão Navegação em árvore.Disciplina VII: Design Instrucional de Interfaces e Navegação Web Módulo II Os Mecanismos de Navegações Objetivos do Módulo Apresentar os mecanismos de navegação que são importantes para o design. abas e menus verticais Mecanismos dinâmicos e visualização web 18 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. diretórios e nuvens de tags Barras de navegação. mapas. . paginação.

Navegação por paginação A navegação por paginação é similar à navegação por passos. A navegação por passos é valiosa em processos onde a decisão em um dado passo afeta algo no passo seguinte. Um rótulo de texto em conjunto com uma seta evita a ambigüidade. paginação. Isso normalmente aparece entre os links de avançar ou retornar. e uma seta indica a próxima página.Navegação por passos. mas inclui outras informações adicionais e opções. Isso é repetido até que todos os resultados sejam representados nas diversas páginas. A forma mais simples de navegação por paginação é navegação por passos com a adição de um contador de páginas. Após esse limite ser alcançado. Ela consiste normalmente de um rótulo de texto e uma seta. Os conjuntos de resultados normalmente têm limites sobre a quantidade de itens que podem ser mostrados de uma única vez. As setas sozinhas podem não ser suficientemente claras ou intuitivas para todos os usuários em todas as situações. 19 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. a direção das setas pode ser invertida. um segundo conjunto de resultados é mostrado em uma nova página. É frequentemente encontrada em páginas de resultados de busca que mostram detalhes sobre essas páginas no conjunto de resultados. uma seta apontando para a esquerda indica um movimento para a página anterior. Para linguagens que são lidas da direita para a esquerda. . Todos os direitos reservados. tal como em um assistente ou em um processo de confirmação de compra (checkout). Tipicamente. trilhas e migalhas de pão Navegação por passos A navegação por passos permite às pessoas moverem-se sequencialmente pelas páginas. e é acompanhada também de um link para mover para trás na série de passos.

Paginação de acesse direto A paginação de aceso direto é frequentemente vista acima ou abaixo dos resultados de um mecanismo de buscas. pode ser melhor aumentar o número de itens em uma dada página para reduzir saltos de um lado para outro. Se a lista de itens for alfabética. clicar em retroceder permite que vá para o primeiro item em um passo simples. Se você navegar para a nona página de um conjunto de itens. Mecanismos de retroceder e avançar rapidamente são bons para conjuntos grandes de itens. clicar em avançar rapidamente o leva à última página. Retroceder e avançar rapidamente podem apenas adicionar mais confusão e causar erros em potencial. É o 20 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. por exemplo. Se os resultados estão ordenados por relevância. Todos os direitos reservados. Trilha de migalhas de pão A lição da web é clara: as pessoas precisam voltar por um caminho que eles já trilharam. Isso permite acessar qualquer página no conjunto inteiro. O termo é amplamente usado em design de navegação web. Normalmente um contador linear de páginas é mostrado juntamente com os controles de navegação por passos. pode ser eficiente mover para o final.Retroceder e avançar rapidamente Algumas vezes os visitantes precisam retroceder para a primeira página ou avançar rapidamente para a última página de um conjunto. mas pode não ser. por exemplo. Clicar no botão de retroceder o leva ao início do conjunto de páginas. Em tais casos. as pessoas raramente precisam pular para o último item em conjunto. de forma a procurar pelos "Zs". . mas quiser retornar para o primeiro. Muitas vezes uma seta dupla (>>) ou seta com barra vertical (І>) representa esse tipo de navegação.

Consiste de elementos ou nós. ou outras áreas do site. Independentemente de como as pessoas chegam a Camisas sociais. . Essas são as trilhas de migalhas de pão de localização. por exemplo. Essa frase pode ficar oculta no código de barras se desejado. Trilhas de migalhas de pão de caminho As trilhas de migalhas de pão são dinâmicas.caminho que uma pessoa percorre através de um site. a trilha de migalhas de pão é a mesma. Os nós são ligados às páginas previamente visitadas (ou tópicos-pai) e são separados por um símbolo. as quais são bastante estáticas. Cada trilha resulta exatamente no mesmo conteúdo. mas diferentes caminhos foram tomados para chegar lá. de forma que os visitantes com visão normal não a vejam. 21 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. implementar esse tipo de trilha é mais difícil. início > Roupas masculinas > camisas > camisas sociais. Acessibilidade: incluir a frase "Você está aqui:" pode ser útil para usuários de leitores de telas. para entender o contexto dos links que seguem. normalmente um sinal de maior que (>). Diferentemente das trilhas de migalhas de pão de localização. Todos os direitos reservados. que são encadeados uns nos outros. Fornece atalhos para páginas previamente visitadas. Elas são representações lineares de estrutura de um site. Uma página irá mostrar uma trilha de migalhas de pão diferente. baseada em como o usuário alcançou esta página. Trilhas de migalhas de pão de localização O tipo mais comum de trilha de migalhas de pão geralmente: Mostra a posição atual dentro de um site.

22 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. . respectivamente. ao invés de mostrar sua localização dentro de um site ou caminho para chegar lá. descendente. do conteúdo de um site. ou nós em alguma hierarquia. diretórios e nuvens de tags Uma árvore de navegação permite o acesso a uma estrutura hierárquica. Todos os direitos reservados. Elas mostram sua posição dentro de algum esquema de metadados. os visitantes podem pular diretamente para qualquer página listada. Usando um mapa do site. Mapas do Site Um mapa do site é uma representação da estrutura de um site usada para navegação. É invariavelmente mostrado como um arranjo vertical de diretórios. mapas. Isso fornece uma visão geral. Abrir e fechar a árvore na web pode ser problemático se um recarregamento de página estiver envolvido. Estudos tem mostrado. termos. Esse tipo de mecanismo é comumente visto em sistemas operacionais para navegar em diretórios de arquivos. no Microsoft Windows Explorer. Logo elas são normalmente complementares a alguns outros mecanismos e não a única forma de navegar. Popularmente acredita-se que as trilhas de migalhas de pão aumentam o entendimento dos usuários sobre o conteúdo e a estrutura de um site ao fornecer um contexto maior. para nós fechados e abertos. podem existir pequenas setas que apontam para a direita e para baixo. que as migalhas de pão são usadas com pouca freqüência. normalmente uma hierarquia de tópicos. Frequentemente existem pequenos ícones de soma e subtração para abrir e fechar nós da hierarquia.Trilha de migalhas de pão de atributos Esse modelo de trilha descreve uma página de alguma forma. Navegação em árvore. de uma vez só. ou então. por exemplo.

Um mapa do site geralmente merece sua própria página, mas ele também pode aparecer, parcialmente, em outras páginas. Os mapas do site devem ser então bastante simples e fáceis de varrer. E também crítico que os rótulos usados no mapa de um site sejam compatíveis com as categorias principais da navegação, assim como com os títulos de página. Os mapas de site tem entrado e saído de moda. Nos primeiros anos do comércio eletrônico, muitos sites incluíam um. Mas criar e manter um mapa do site não é fácil e algumas vezes pode ser caro. Frequentemente, o investimento fica aquém do benefício. Mais recentemente, os mapas do site sido reconhecidos como um mecanismo para otimizar a indexação de mecanismos de busca. Mecanismos de buscas podem obter uma visão geral melhor do conteúdo total de um site via um mapa deste site. Então, apesar dos visitantes do site não usálo com muita frequência, os mapas do site podem ter outros benefícios.

Diretórios Os diretórios normalmente fornecem acesso a páginas via tópicos. O Yahoo!, o primeiro diretório de tópicos comercial na web, popularizou a noção de portais web, Diferentemente de mapas dos sites, os diretórios podem classificar. O conteúdo por categorias são diferentes de índices, os quais listam os termos alfabeticamente. Os diretórios são úteis ao lidar com tipos mistos de informação sem um relacionamento hierárquico. Eles também são efetivos para organizar e fornecer links para sites externos. Os títulos das categorias são, normalmente, organizados alfabeticamente, com o tópico principal frequentemente mostrado em uma fonte maior, seguido por alguns poucos links para sub-tópicos. Clicar em um link o leva para uma página
23
_______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Todos os direitos reservados.

sobre o tópico. Essa página mostra todos os links abaixo deste tópico. Dessa forma, se pode percorrer o interior das categorias.

Nuvens e TAGS Esta é uma recente adição aos mecanismos de navegação, as quais listam links alfabeticamente, e ao mesmo tempo considerando os pesos de cada palavra pela sua freqüência no site; quanto mais frequentemente ocorrer um tópico, maior ele aparece na nuvem. Isso dá uma ideia instantânea da importância relativa de um tópico: quanto maior o link, mais importante ele é. Apesar da maior parte das vezes serem implementados com tags (logo o nome), esses mecanismos algumas vezes também empregam outros tipos de links. Nuvem e tags são boas para conteúdos dinâmicos. Como um mecanismo navegacional, as nuvens de tags possuem um valor limitado. Se um visitante tem uma necessidade de informação conhecida, por exemplo, uma nuvem de tags não é realmente eficiente. Elas parecem ser mais uma novidade do que um mecanismo de navegação efetivo. Mas o peso visual dos links fornece informação valiosa: ele mostra, de uma vez só. Usando um mapa do site, os visitantes podem pular diretamente para qualquer página listada.

Barras de navegação, abas e menus verticais A forma mais simples de uma barra de navegação é uma cadeia horizontal de links em texto plano. Esses são, às vezes, separados por uma barra vertical. Acessibilidade: a inclusão de uma barra vertical entre textos pode causar problemas relacionados à acessibilidade. Leitores de tela lerão o caractere em voz alta entre cada nome de link. Alternativamente, você pode representar a barra vertical como uma imagem como o atributo ALT com o valor vazio " "
24
_______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Todos os direitos reservados.

(aspas vazias). Isso, é claro, adiciona peso à página - apesar de mínimo - e requer um acesso ao servidor para obter a imagem inicial. Barras de navegação frequentemente tem um fundo colorido, ou podem usar imagens gráficas para as opções. Isso cria um forte senso de uma barra ao longo de uma página. Uma vantagem para as barras de navegação é que

elas não ocupam espaço da largura horizontal da área principal de conteúdo. Ao invés disso, elas são posicionadas acima das áreas principais da página. O conteúdo pode então espalhar-se ao longo de toda a largura do navegador.

Abas A distinção entre abas e barras de navegação está em sua apresentação. Não existe uma diferença real de funcionalidade. As abas são como telhas sobrepostas, usualmente sobre a área de conteúdo principal. Cada aba é distinta da próxima, normalmente com cantos arredondados e oblíquos. Adicionalmente ao número de abas na navegação, o tamanho dos rótulos irá influenciar o uso do espaço horizontal. Geralmente, as abas devem ter, necessariamente, rótulos curtos e concisos. Uma forma de aumentar a quantidade de texto que pode caber em uma aba é permitir o uso de duas linhas de texto. Isso torna a aba mais alta, o que também aumenta a visibilidade e torna as abas mais fáceis de serem clicadas.

Menus Verticais Os menus verticais são geralmente mais flexíveis que barras de navegação ou abas. Dado que o mecanismo pode facilmente ser estendido para baixo, a adição de opções é normalmente menos problemática que adicionar uma aba.

25
_______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Todos os direitos reservados.

menus verticais geralmente permitem rótulos maiores.oracle. muitos desses rótulos teriam que ser abreviados. Uma vantagem desse tipo de mecanismo é o pronto acesso a mais opções do que poderiam ser mostradas em uma única página. Após o cursor passar para fora da área do menu. é comum retardar a aparição do menu. esse arranjo vertical tornou-se amplamente utilizado em design de navegação web. este deve fechar com um retardo de cerca de meio segundo. . Chamado de menu vertical ou menu ao lado esquerdo (ou menu do lado direito se for o caso). O menu deve permanecer aberto enquanto o cursor estiver sobre o ponto de navegação ou dentro da área do menu. particularmente se eles puderem ser acomodados em duas ou mais linhas. pull-down ou pop-up. Mecanismos dinâmicos e visualização web Também conhecidos como menus fly-out. Após um visitante selecionar uma opção de navegação passando o cursor ou clicando com o mouse. ( www. o site apresenta uma janela de menu similar àquelas encontradas em aplicações de software.com) . Eles são considerados dinâmicos porque os visitantes tem que interagir com eles antes que eles sejam mostrados. 26 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Os visitantes precisam explorar mais antes de tomar uma decisão de navegação. Em uma navegação horizontal.Adicionalmente. com rótulos longos e descritivos na esquerda de sua página principal para fornecer acesso ás principais áreas do site. Se um menu dinâmico é mostrado a partir de uma simples passagem do mouse. os menus dinâmicos fornecem um rápido acesso às opções de navegação. O site web Oracle usa um menu vertical. A desvantagem é a potencial redução da visibilidade dessas opções. Todos os direitos reservados. O menu deve aparecer pela primeira vez cerca de meio segundo após o cursor do mouse ter passado sobre o ponto de navegação.

os menus dinâmicos podem estender-se para fora da página e podem não ser visíveis. Alguns leitores de tela irão ativar o link quando iniciarem a leitura de um item. Selecionar uma opção leva o usuário para uma nova página. por exemplo. proibindo o usuário de obter outras opções no menu. . Também não é recomendável incluir menus dinâmicos no meio da tela. Todos os direitos reservados. Isso requer javascript (usando um evento chamado "OnChange") e pode causar problemas com leituras de tela. Mesmo não estando necessariamente usando um leitor de telas.Outra variação é fechar o menu com um clique em qualquer parte da tela fora deste menu. um menu pode provar ser inacessível. A alternativa de um clique para revelar o menu é melhor. Nesse caso. Acessibilidade: os leitores de tela têm problemas com menus dinâmicos que são ativados apenas com a passagem do mouse. Menus DROP-DOWN Os menus drop-down são simples menus de seleção HTML com opções. Um botão Go (Ir) poderia aparecer somente se necessário. Acessibilidade: não faça com que a nova página carregue apenas selecionando a opção e soltando o mouse. Tenha certeza de testar com leitores de tela antes de ir adiante com essa opção. Uma alternativa é ativar a seleção do menu com um botão ou link explícito logo ao lado do menu. 27 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Note também que visitantes com dificuldades de locomoção podem ter problemas ao operar menus dinâmicos. Esse tipo de navegação é frequentemente usada para links rápidos. Uma solução avançada poderia ser modificar o comportamento do site quando o leitor de telas fosse usado. que pulam para uma nova página ao longo da estrutura do site.

Apesar de interessante de ver e manipular. Árvores estrela Também chamadas de layout de árvore radial. suportadas por computador e interativas. Uma árvore estrela pode ser uma alternativa para a navegação por árvore e mesmo para um mapa do site. A visão comum nesse campo é representar a informação em relacionamentos espaciais ou visuais de forma a tornar conjuntos de dados complexos mais claros e compreensíveis. As categorias a partir daquela selecionada são então aumentadas e mais fáceis de serem clicadas. A representação visual e o texto plano são complementares. A visualização de informação trata de manipular e navegar pela informação. existe uma categoria de mecanismos que utiliza visualização de informações. uma árvore estrela representa relacionamentos hierárquicos em uma visualização composta de um centro (hub) e seus eixos. Mais importante essas representações são interativas. Clicar em qualquer um dos termos faz com que toda a visualização passe a ter esse termo como centro. 28 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. barras e menus. Todos os direitos reservados. A visualização de informação não visa substituir as representações textuais de informação.Visualizando a navegação Além das tradicionais abas. . o mecanismo é geralmente usado como uma navegação suplementar para situações especiais. A definição padrão de visualização de informações é: "O uso de representações visuais de dados abstratos. Grandes quantidades de dados podem aparecer dentro de um espaço relativamente compacto. para amplificar a cognição. não trata apenas de como essa informação é mostrada.

algo que as pessoas podem não estar interessadas em investir tempo. Todos os direitos reservados. Entretanto. Passar o cursor do mouse sobre um item mostra instantaneamente mais detalhes sobre o item. A implementação em Art and Culture funciona bem para esse propósito: o site encoraja a exploração e o aprendizado. a qual tenta mostrar uma grande quantidade de informação em um espaço pequeno. leva algum tempo para acostumar-se com esse tipo de visualização . . explorando cada círculo de categoria. Controles no canto inferior esquerdo permitem aos usuários permitem aos usuários manipular e filtrar os resultados. Em teoria. Os mecanismos mais importantes dos navegadores em termos de navegação incluem: 29 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. isso parece bastante útil. Agrupamentos visuais Mecanismos de visualização mais avançados têm sido recentemente aplicados a resultados de buscas. Ele geralmente mostra um conjunto limitado de conceitos relacionados para auxiliar na descoberta de novas informações. muito restritas ou sem qualquer significado. Mais as categorias que são geradas na hora são frequentemente muito amplas. Mecanismos do navegador Mantenha em mente que os navegadores web possuem mecanismos prédefinidos próprios. Considere isso quando estiver projetando o sistema de navegação de um site. Os resultados dentro de uma categoria similar são agrupados em círculos. a intenção de um thesaurus visual é encorajar a exploração por parte do usuário. As pessoas podem então aplicar zoom para aproximar ou afastar esses resultados. As páginas web são mostradas como pequenos ícones de página.Thesauri visuais Diferentemente de uma árvore estrela.

Botão avançar: O botão avançar não é nem de perto tão usado quanto o botão voltar. O histórico da sessão é uma boa razão para fornecer títulos significativos para as páginas. . Histórico da sessão:Essa é uma lista cronologicamente reversa das páginas recentemente visitadas. Todos os direitos reservados. Clicar nesse botão é talvez uma das ações mais frequentemente realizadas enquanto navegamos na web. 30 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. mas ainda é uma maneira de avançar em um dado caminho.Botão voltar: O controle de navegação mais óbvio e relevante é o botão voltar.

. 2009. Bookam. 31 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Todos os direitos reservados. Fundamentos da Navegação Web.Referências KALBACH. James.

.Disciplina VII: Design Instrucional de Interfaces e Navegação Web Módulo III Os Tipos de Navegação e Rotulação Web Objetivos do Módulo Apresentar os tipos de navegação e rotulação web que existem. páginas de conteúdo e páginas funcionais. Desenvolvimento de rótulos web. 32 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. associativa e utilitária. Todos os direitos reservados. Páginas navegacionais. Conteúdos abordados Navegação estrutural. problemática e qualificação.

O propósito da página deve ser imediatamente claro para os visitantes. Cada página em seu site tem um propósito. a partir do contexto do tipo da página no qual ela aparece. 33 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. essas divisões são frequentemente desfocadas. . Páginas funcionais: permitem às pessoas realizarem uma tarefa. isso alimenta expectativas para a navegação e afeta como as pessoas interagem com o site. Por exemplo. tal como conduzir uma busca ou verificar os emails. páginas de conteúdo e páginas funcionais Tipos de páginas O tipo de navegação e o tipo de página estão fortemente relacionados. As pessoas reconhecem diferentes tipos de página rapidamente. Na prática. exemplos incluem a página principal. uma razão de ser. exemplos incluem artigos e páginas de produtos. Todos os direitos reservados. formulários de submissão e aplicações. Páginas de conteúdo: as páginas de conteúdo são a substância de um site e em última instância o porquê de as pessoas estarem lá. Um dado esquema navegacional pode ter dois diferentes propósitos em diferentes tipos de páginas. os visitantes podem esperar que a navegação contextual na página principal leve-os a páginas dentro do site. Os tipos de páginas referem-se ao foco primário da página ou seu propósito primário dentro do site como um todo. em parte. Existem três categorias de páginas principais: Páginas navegacionais: tem o propósito de direcionar as pessoas ao conteúdo que elas estão procurando. As pessoas entendem a navegação.Páginas navegacionais. páginas de aterrissagem e galerias. Mas links relacionados em uma página mais profunda no site podem apontar para outros sites ou para outros formatos de conteúdo. exemplos incluem páginas de busca.

por exemplo. podem apresentar as primeiras linhas de uma história e então fornecer um link para a história completa em algum outro lugar. mas fornecem um link para os detalhes completos dentro do site. Entretanto. as páginas principais direcionam os visitantes para áreas-chave de seu site web. visível imediatamente dentro do site. Páginas navegacionais chave incluem a página principal. de outra forma.Páginas navegacionais As páginas navegacionais direcionam os visitantes para o seu objetivo final: páginas de conteúdo ou páginas funcionais. Uma página principal pode também conter conteúdo de texto ou funcionalidade. mas normalmente apenas em um formato abreviado. Ou. Elas desempenham um papel importante em contar a história do site e suportam uma faixa de modos de busca. sites de viagens podem apresentar uma gama de funcionalidades que os visitantes podem acessar logo na página principal. Uma estratégia comum é mostrar níveis mais baixos de navegação diretamente na página principal. No entanto. ajudam na orientação. páginas de aterrissagem e galerias. Elas são as pedras fundamentais da busca por informação. Todos os direitos reservados. os visitantes vêm a um site com uma necessidade de informação específica e gostariam de primeiro chegar direto e rapidamente aos seus destinos. . as páginas navegacionais não são necessariamente ruins. A página principal é vista como uma chance de fazer propaganda de produtos ou de promover uma imagem da marca. Os sites de notícias. Página principal (home Page): Fornece uma visão de um painel de controle para o resto das páginas. 34 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Os designers devem buscar reduzir essas páginas de forma a manter os visitantes o mais próximos do conteúdo do site. Isso ajuda na varredura e fornece um caminho para o conteúdo que poderia não estar. e até mesmo afetam decisões de compra. Sites de comércio eletrônico podem apresentar um produto em sua página principal.

as páginas de aterrissagem podem oferecer tanto orientação local como global. páginas de categorias.Páginas de aterrissagem: também chamadas de páginas iniciais de subseção. Páginas de galerias: As galerias são similares a páginas de aterrissagem. Com mecanismos tais como menus dinâmicos. Eles então vão até a página do produto para obter informações mais detalhadas. de forma a confirmar a decisão. Elas normalmente correspondem às opções na navegação principal e podem ser departamentos de uma loja online ou as seções principais de um jornal online. Páginas de resultados de busca Páginas de resultados de busca lembram as páginas de galeria. páginas de visão geral ou páginas de departamentos. Dependendo dos termos da busca. A coleção de links resultante pode não necessariamente ter os benefícios de categorias criadas à mão. tais como aquelas encontradas em páginas de galeria. Todos os direitos reservados. os resultados podem ou não estar em um único produto ou em um único tipo de conteúdo. 35 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Fornecem uma visão geral das principais categorias de um site. mas são dinamicamente criadas baseadas em palavras-chave informadas pelo usuário. . Ao contrario disso pode-se apenas levar os visitantes diretamente para as páginas que correspondem às opções do menu. páginas de aterrissagem fornecem um sumário do conteúdo de uma dada seção. mas fornecem uma visão geral de um grupo específico de produtos ou conteúdo ao invés de links para os departamentos ou seções de um site. Os compradores podem até mesmo decidir comprar apenas a partir de uma página de galeria. A página de galerias contém informações de compra críticas e permitem aos visitantes comparar produtos. De modo similar como uma página principal fornece uma visão de um site inteiro. pode-se ser tentado a omitir as páginas de aterrissagem completamente.

uma navegação desnecessária e muitos gráficos sobrecarregam uma página. Existem muitos elementos típicos para páginas de produto: Fotos de produto Descrições do produto Detalhes adicionais Produtos relacionados Adicionalmente. Páginas de produto As páginas de produto são obviamente críticas para sites de comércio eletrônico. currículos pessoais. artigos. Todos os direitos reservados. Muito frequentemente. o foco das páginas e conteúdo deve ser o conteúdo. as páginas de produto frequentemente contêm diversos elementos funcionais: Adicionar a um carrinho de compras ou comprar Salvar em uma "lista de pedidos" Ver imagens maiores ou usar mecanismos de zoom Modificar o tamanho ou a cor Enviar essa página por email Enviar essa página por email 36 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. histórias. Páginas de conteúdo são a moeda fundamental na web. histórico de companhias e informações de como fazer algo são apenas alguns exemplos. blogs. Com isso. notícias.Página de conteúdo Em sites web ricos em conteúdo. . as páginas de conteúdo são no fim das contas aquilo que as pessoas estão procurando: textos.

Todos os direitos reservados. Uma interface de busca avançada requer mais espaço.Páginas funcionais As páginas funcionais permitem às pessoas completarem uma tarefa online. uma busca mais detalhada é necessária. tipicamente chamada de busca avançada. tal como conduzir uma busca ou enviar um email. elas são frequentemente a página de destino que satisfaz uma necessidade do usuário. para submeter o currículo a uma vaga de emprego. ou links que mostrem ou ocultem opções. os usuários precisam de foco para completar a tarefa que têm em mãos. ou ainda que limpem o formulário. essa busca oferece mais controle que uma busca simples. Como o nome implica. Algumas vezes. ou para reservar um carro. ajuda e outras explicações. Formulários de submissão Os formulários permitem às pessoas submeterem informações. Tal como as páginas de conteúdo. e consequentemente uma página separada é normalmente necessária. a navegação associativa em formulários é desencorajada. A navegação contextual e os links que atravessam a estrutura do site podem ser problemáticos ao serem usados a partir de páginas funcionais. . por exemplo. 37 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Isso pode ser feito para criar uma conta ou perfil online. Em primeiro lugar. entretanto. A navegação em um formulário de busca é normalmente mínima. Podem existir links para dicas de busca. Da mesma forma que acontece com as páginas de busca. Os formulários permitem que ocorram transações na web. Formulários de busca É bastante típico que a funcionalidade de busca no site seja um pequeno campo de entrada na página principal ou em todas as páginas.

mas delas existem. Para textos mais longos. editam planilhas. O conteúdo pode não ter o mesmo impacto ou significado quando ele é quebrado em múltiplas páginas menores. existe uma ampla faixa de tamanhos de navegadores e eles variam de acordo com a resolução dos monitores. é mais seguro assumir que muitas pessoas não irão lê-lo na tela do computador. Tamanho da página Quando uma página deve virar duas? Irão os usuários rolar a tela? Quanto menores são as páginas. Ao invés disso. Mas então as pessoas precisam usar a barra de rolagem. Isso requererá mais cliques e mais carregamentos de páginas. gerenciam projetos e assim por diante. com o número de barras de ferramentas ou barras laterais que uma pessoa tem no navegador e o tamanho da janela do navegador no desktop.Aplicações web São chamadas de aplicações web uma faixa de páginas que contém características e funcionalidades interativas. Quanto maiores são as páginas. menos delas existem. Todos os direitos reservados. as aplicações online se tornam mais comuns. enviar mais informações com 38 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. As pessoas não gostam de ler online. . É aceitável fornecer páginas longas de texto se as pessoas irão imprimi-las de qualquer forma mesmo. As pessoas realizam tarefas nessas páginas: elas escrevem emails. O tamanho da tela é problemático porque não existe um único tamanho de tela para o qual devemos projetar. Pode não ser eficiente forçar as pessoas a baixar as páginas por causa de pequenas porções de conteúdo. Não existe uma recomendação única para o tamanho de página. Ler documentos longos offline é menos problemático e preferido pela maioria. Na web. À medida que as tecnologias web tornam-se mais e mais maduras. muitos fatores influenciam.

pode fazer sentido dividir em volumes de informação. causaria problemas de desempenho. 39 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Apresentar um livro inteiro como uma única página. Se os visitantes do site descem pelo caminho errado em um site por causa de um rótulo que não é claro. entretanto. Fale a língua do usuário O site deve falar em termos que os visitantes possam entender naturalmente.cada página (isto é. Todos os direitos reservados. Geralmente. Existem diversos aspectos de criação de rótulos que podem potencialmente causar desencontros no entendimento. eles podem se perder ou podem desistir. problemática e qualificação Aspectos de bons rótulos Rótulos ambíguos deixam as pessoas tentando adivinhar sua intenção. ou quando elas estão completando uma tarefa com uma aplicação online. Desenvolvimento de rótulos web. De certo modo. é melhor usar páginas menores quando as pessoas precisam navegar e varrer rapidamente. por exemplo. os designers de um site assumirem que os outros conhecem os mesmos termos e abreviações que eles. É fácil. As seções seguintes detalham alguns dos aspectos mais importantes dos rótulos e de como prever o grau de sucesso que terão na tarefa de guiar os usuários ao conteúdo que eles buscam. Bons rótulos inspiram confiança enquanto navegamos e ajudam a evitar frustrações. O tipo de página também é um fator determinante em relação ao tamanho da página. Páginas mais longas são boas para conteúdo que é mais bem apresentado em conjunto por questões de contexto. . páginas mais longas) pode reduzir o número de chamadas para o servidor.

Todos os direitos reservados. Nem todo mundo sabe o que é plug-in. por exemplo. terminologia técnica. ou mesmo o que podem fazer com o mapa do site. Evite terminologia técnica A maioria dos visitantes de um lado do site não entende tanto da web quanto as pessoas que o criaram. existe a chance de que o "mundo exterior" não os entenda. o uso de uma linguagem de marketing é aceitável. pois a terminologia técnica pode ser precisa e específica para aqueles que a entendem. 40 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional.Deve-se evitar jargões da empresa. eles saberão quantos megabits é a conexão de internet que estão usando? Talvez não. Evite rótulos espertos Rótulos espertos. rótulos espertos e abreviações. Se os visitantes tiverem que escolher uma largura de banda para ver um vídeo clipe. nas quais o nome de uma marca tornou-se uma palavra familiar. E as pessoas não clicam naquilo que elas não entendem. Evite jargões da companhia Jargões da companhia infiltram-se em sites web muito facilmente e muito frequentemente. É melhor usar uma linguagem do dia-a-dia por clareza.alvo têm sobre o assunto do site. Em raras circunstâncias. legais ou bonitos normalmente são derrotados por eles mesmos. . o que é um servidor seguro. Mas se há um invento de novos produtos e palavras. ao mesmo tempo em que usa o tom de voz apropriado. É importante certificar e considerar o conhecimento o que os visitantes.

Rótulos descritivos As opções de navegação tais como "informação" ou "Detalhes" são geralmente desprovidas de significado. O primeiro é formal e direcionado aos negócios. Evite abreviações Abreviações poupam espaço. por isso. Esses e outros rótulos similares frequentemente 41 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. isso pode refletir nos valores da organização. o modo de como referir-se aos visitantes também é importante. por exemplo.É imprescindível fornecer contexto ou outras evidências daquilo que o rótulo deve expressar. o outro é jovem e moderno. Não se pode ter a pretensão que as pessoas estejam curiosas ou que irão explorar a categoria para descobrir o que o rótulo significa. Se as gírias ou termos populares são usados. . Todos os direitos reservados. Não são todas as pessoas que sabem o que as abreviações FAQ. Use o tom de voz apropriado Rótulos em um site de investimento bancário normalmente possuem um tom de voz diferente daquele encontrado em um site de música para jovens. Se for inevitável utilizar abreviações é importante ter certeza que os visitantes irão entendê-las. PDF e RSS significam. por exemplo. A falta de sintonia entre o tom de voz e a marca podem afetar negativamente a credibilidade de um site. mas podem impedir as pessoas de varrerem rapidamente pelas palavras-chave certas. O tom de voz também suporta a marca. É importante entender o tom apropriado que certa audiência alvo espera. Alguns visitantes podem até mesmo não entender algumas abreviações.

por exemplo. Rótulos bem focados são mais previsíveis e aumentam a confiança durante a navegação. Existem diversos tipos de consistência a serem considerados rótulos de navegação: 42 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. melhor. recomenda utilizar os termos mais específicos aplicáveis. Todos os direitos reservados.servem mais à conveniência do designer do que a do usuário final. Rótulos mutuamente exclusivos Os rótulos frequentemente aparecem como um grupo em um menu. Rótulos consistentes A consistência pode ajudar a reduzir a ambiguidade. Em alguns domínios isso pode ser mais óbvio do que em outros. Rótulos focados Em indexação e catalogação tradicionais. Pode-se também nomeá-los de "Miscelânea". comumente possuem opções para compra e para venda. O significado de um pode afetar a interpretação de outros em uma série. A regra de especificidade de Cutter. . o que também não oferece uma descrição. A diferenciação dos rótulos auxilia nas decisões de navegação. Bons rótulos são mutuamente exclusivos: quanto mais clara a distinção entre as categorias. nomeada para homenagear o famoso bibliotecário americano Charles Ammi Cutter. Sites de leilão. a especificidade refere-se a como os termos de um assunto são atribuídos a um livro ou trabalho.

tamanhos e estilos consistentes são importantes para criar um senso de unidade. . Muitos designers de navegação buscam por uma economia no tamanho dos rótulos implicitamente razão é clara: rótulos maiores têm uma tendência maior de conterem palavrasgatilho que as pessoas estão procurando. 43 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Mostrar os rótulos consistentemente também ajuda na varredura. Sintaxe: rótulos de um dado tipo de navegação podem ter uma formação gramatical similar. é muito importante. Apresentação: fonte. Rótulos maiores também ajudam as pessoas a prever melhor o que virá pela frente.Granularidade: refere-se ao detalhe ou amplitude relativa a um tópico. Opções de navegação em um mesmo nível da estrutura do site devem refletir mais ou menos a mesma amplitude de conteúdo. Tamanho dos rótulos Pode ser difícil descrever conteúdos diversos ou conceitos abstratos com apenas uma ou duas palavras. Mesmo assim. a apresentação de rótulos deve comunicar que as opções permanecem juntas. Uso: inserir os mesmos rótulos em diferentes lugares ou diferentes páginas quando se refere a mesma coisa. Todos os direitos reservados. Dito de outra forma. A mudança na apresentação pode intencionalmente chamar a atenção para uma opção de navegação. Páginas mais abaixo na estrutura de um site são normalmente mais granulares em significado do que páginas mais acima. Mecanismos horizontais. colocam restrições no número de palavras que uma ação de navegação pode ter. os rótulos pequenos bloqueiam o aroma da informação. Quebrar a consistência pode então adicionar um contraste necessário. O espaço em tela pode limitar o tamanho de um rótulo. por exemplo.

Em muitos casos as pessoas que criam os rótulos de navegação são diferentes daquelas que escrevem os títulos das páginas. Todos os direitos reservados. Títulos de navegador A maioria dos navegadores tem um título em uma barra no topo da aplicação. os designers de sites podem negligenciá-los. URLs e títulos de páginas. 44 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Isso não é o mesmo que dizer que um rótulo com uma única palavra não pode fornecer uma boa informação. Seu trabalho é unir tudo isso para criar um sistema coeso. As pessoas não prestam atenção aos títulos do navegador quando estão surfando na web. A maioria dos indivíduos não modifica esses nomes manualmente. Algumas vezes uma única palavra é justamente o rótulo certo. é de bom tom elaborar rótulos de navegador. Existe a tendência de focar em um elemento ou em outro. O design de rótulos de navegação deve encaixarse dentro de um sistema geral. Os elementos chave a serem considerados são os títulos do navegador. Favoritos: quando as pessoas colocam uma página nos favoritos. . a maioria dos navegadores utiliza o título do navegador como rótulo padrão para o nome do item favorito. Mas os títulos do navegador são importantes por muitas razões.Entretanto existem limites para o tamanho dos rótulos. Como resultado. Existe um limiar para a quantidade de palavras que as pessoas podem compreender de uma só vez. Sistemas de rotulagem Os rótulos de navegação não existem isoladamente: eles são parte de um sistema de cabeçalhos. títulos e textos que direcionam as pessoas às informações que elas querem. Se a intenção é que os visitantes sejam capazes de gravas as páginas nos favoritos e voltem nelas.

Primeiro e o mais importante. oferecem navegação em abas.Navegação em abas: navegadores populares. o título do navegador pode aparecer no topo da página impressa. . se os títulos do navegador contiverem informações de tópicos. Isso também se aplica quando as pessoas abrem múltiplas janelas em seu computador: o rótulo mostrado para cada instância é um título do navegador. Algumas vezes elas tem o endereço escrito. Essa pode ser a única informação que a pessoa tem para determinar se a página se encaixa nas suas necessidades de busca. ajuda na orientação. ou algumas pessoas tentam adivinhar o endereço. a estrutura de diretórios das URLs pode mostrar a localização de uma página dentro de um site. Segundo. normalmente 45 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. O rótulo mostrado na aba é normalmente o título do navegador para uma dada página. tal como o Firefox. URLs simples vão indicar a categoria a qual uma página pertence. URLS As pessoas podem usar URLs como um mecanismo de navegação de muitas maneiras: Iniciação: as pessoas informam URLs diretamente nos navegadores para irem a um site web inicialmente. Ser capaz de olhar rapidamente para uma URL e confirmar onde a localização. Impressão: ao imprimir. Todos os direitos reservados. Adicionalmente. Links para resultados de busca: os títulos do navegador são frequentemente os elementos exibidos nos resultados de uma busca no site ou de um mecanismo de buscas. elas geralmente refletem o nome da companhia ou do dono do site. isso também aparece nos resultados de busca. outras vezes elas fazem isso de cabeça. tornando uma parte importando do documento impresso. Orientação: as URLs podem mostrar localização.

Destino: a maioria dos navegadores web revela o destino de um link no canto inferior esquerdo da tela quando o mouse passa sobre o link. Isso fornece pistas valiosas sobre a página seguinte e pode ajudar na navegação. A coordenação dos rótulos de navegação e dos títulos da página é importante no processo de reorientação. Dentro de uma página podem existir cabeçalhos de páginas também. os nós de uma trilha de migalhas de pão podem ser obtidos da mesma fonte que os 46 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. a página seguinte deve refletir e confirmar que essa é a página do histórico da companhia. Eles devem fazer sentido tanto em relação aos rótulos dos links de navegação quanto aos títulos de página. Por exemplo.000 páginas. Se alguém clica em um link para histórico da companhia. Apagar diretórios e parâmetros do final da URL. Todos os direitos reservados. os títulos de páginas e outros elementos em cada página para um site com 10. Uma hierarquia de cabeçalhos deve ser clara. por exemplo. Títulos de páginas É comum ter um título em cada página dentro da área principal do conteúdo. Pode ser muito difícil. é mais eficiente estabelecer regras e padrões de rotulagem. . pode trazer as pessoas de volta à página principal ou a uma página de aterrissagem. por exemplo. Criando um esquema flexível Criar um esquema lógico para rotulagem é prático para gerenciar uma grande quantidade de páginas. criar à mão a navegação. Sistemas de gerenciamento de conteúdo são normalmente configurados para funcionar com tais regras. Isso normalmente é feito através do título da página.de uma maneira que está em sincronia com os mecanismos de navegação principal. Ao invés disso.

A chamada para a ação torna-se persuadir para a ação. O macro nível é tentar fazer com que as pessoas realizem alguma ação. Todos os direitos reservados. Rótulos persuasivos Refere-se a encorajar as pessoas a tomarem certa ação ou acreditarem em algo. Traduzindo rótulos Significa que o mesmo layout de página aparece em diferentes línguas. Os donos de sites geralmente querem motivar os visitantes a verem algum conteúdo específico ou realizar alguma ação. No micro nível os rótulos são críticos no processo. O micro nível trata-se de links de navegação. Eles podem precisar variar para evitar repetições escritas de rótulos. é um interesse primário. A navegação persuasiva oferece benefícios aos visitantes: "Assine agora e tenha acesso a conteúdo exclusivo" e "Receba descontos se você comprar agora". O objetivo é instigar ou encorajar as pessoas a fazerem algo. Eles não refletem as sutilezas de uma experiência de informação desejada. Ao traduzir os rótulos de navegação de uma língua para outra existem diversos aspectos a serem levados em consideração. Isso facilita a manutenção e as atualizações: uma mudança em um causa uma mudança no outro. títulos de navegador URls devessem casar uns com os outros. por exemplo. Entretanto esquemas flexíveis podem produzir resultados que parecem mecânicos. Fornecer pistas sobre os benefícios para o usuário o ajuda. . Embora os links e títulos de páginas. Redundância. A persuasão aparece em dois níveis: macro e micro. nem todos devem ser necessários em cada página ou em cada instância. 47 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional.títulos de página.

As conotações: Traduções literais de rótulos podem ter significados diferentes daqueles pretendidos. tenha certeza de utilizar um espaço equivalente ao maior termo possível no design da página. Se o seu esquema de navegação depende de uma parte específica da fala. o Algumas construções gramaticais e alguns dispositivos não existem em outras línguas. não utiliza gerúndios. rótulos traduzidos podem necessitar de um espaço até 50% maior que os rótulos na língua original. alguns mais do que em outros. Se a flexibilidade para vários tamanhos de rótulos não é fornecida na interface. Os sistemas de rotulagem devem levar isso em conta. os rótulos traduzidos podem não se encaixar. o As regras de emprego de maiúsculas e minúsculas são diferentes entre as línguas. o Algumas línguas associam gênero às palavras. A gramática: os rótulos de navegação que dependem de uma sintaxe específica ou de construções gramaticais podem apresentar problemas de tradução. A língua alemã por exemplo. Existem diversas diferenças nas gramáticas das línguas que podem potencialmente causar problemas: o A estrutura das sentenças é diferente entre as línguas. algumas linguagens possuem palavras compostas que não se separam e que facilmente ultrapassam o tamanho determinado da tela. Todos os direitos reservados. Adicionalmente. tenha certeza que isso faz sentido em outras línguas. As formas das palavras podem mudar de acordo com preposições ou funções em uma sentença. . Como regra geral. Quando isso não for possível. Autoridade portuária traduz-se facilmente para o francês e o alemão como autorité portuaire e 48 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Todos os mecanismos de navegação têm limites.O tamanho do rótulo: palavras em uma língua podem requerer um espaço significativamente maior do que em outras. Elementos de navegação embarcados dentro de uma sentença podem não resultar na mesma ordem de links desejada quando traduzidos.

Ao projetar uma navegação web que será traduzida.Hafenbehörde. certificando que as construções gramaticais funcionarão em outras línguas. . com o objetivo de otimizar o máximo possível. Mas os significados são diferentes. 49 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. é preciso planejar para frente. É importante casar o sistema de rotulagem do site com as expectativas dos usuários. Todos os direitos reservados.

. James. Bookam. Fundamentos da Navegação Web. Todos os direitos reservados. 2009.Referências KALBACH. 50 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional.

51 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Páginas navegacionais. problemática e qualificação. Conteúdos abordados Navegação estrutural. .Disciplina VII: Design Instrucional de Interfaces e Navegação Web Módulo IV Avaliação no Design de Navegação Web Objetivos do Módulo Apresentar a avaliação no Design de Navegação Web. Todos os direitos reservados. Desenvolvimento de rótulos web. páginas de conteúdo e páginas funcionais. associativa e utilitária.

O esforço necessário para escolher continuamente categorias entre muitos níveis de uma estrutura profunda são superiores que o esforço de varrer mais itens em uma navegação mais ampla. . De um modo geral. mais profunda é a estrutura. É um 52 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Existe um claro compromisso: quanto menos itens de navegação. Balanço Amplitude versus profundidade referem-se ao balanço entre o número de itens de menu visíveis em uma página (amplitude) e o número de níveis hierárquicos em uma estrutura (profundidade). e quanto mais itens de navegação de uma vez. Os usuários então não precisam varrer cada link em uma página. menos níveis de hierarquia. as estruturas mais amplas funcionam melhor que as mais profundas. Uma tática comum no design de navegação é aglomerar as opções. agrupando itens semelhantes de forma a fornecer níveis de foco. eles podem procurar nos cabeçalhos os componentes.Qualidades de uma navegação bem sucedida Abaixo constam algumas das qualidades mais importantes: Balanço Facilidade de aprendizagem Consistência (e inconsistência) Feedback Eficiência Rótulos claros Clareza visual Adequação ao tipo de site Alinhamento com as necessidades dos usuários Vamos fazer uma breve análise de cada tópico. A partir disso eles podem focar nos links daquela área. Todos os direitos reservados.

particularmente para sites ricos em informação com objetivos de negócios. . essa é uma boa abordagem e algo que você deve buscar. Todos os direitos reservados. Não existe um período de treinamento ou a expectativa de ter que estudar um manual ou um conjunto de instruções primeiro. a duração de tempo gasta em uma única página é tipicamente medida em segundos. A intenção e a função da navegação devem ser imediatamente claras. Apesar de a navegação oculta ser aceitável para quem está procurando diversão. portais corporativos e outros sites ricos em informação. Geralmente. estão se afastando dessa abordagem. diminui a facilidade de aprendizagem de um site. 53 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Na web aberta. mas também para qualquer tipo de navegação. Em termos de navegação. Aumentar o tempo que se leva para aprender a navegar em um site irá geralmente diminuir o seu sucesso. Facilidade de aprendizagem As pessoas não esperam aprender a usar um site web. "Mystery Meat Navigation". Consistência e inconsistência "Seja consistente" é uma recomendação primária de design de interface. comportam-se de maneira previsível. tem rótulos padronizados e tem a mesma aparência ao longo do site. a maioria dos designers web. Por sorte.processo de varredura composto por dois estágios: primeiro encontre o grupo certo. tais aparatos podem ser uma catástrofe em termos de usabilidade para sites de comércio eletrônico. ou frivolamente ocultar as opções de navegação através de passagens do mouse e outros truques. então procure nos links individuais. isso normalmente refere-se aos mecanismos e links que aparecem em uma localização fixa na tela.

as cores. É onde o seu julgamento entra em jogo.Mas tenha em mente que a consistência não é igual a uniformidade. Algumas inconsistências são críticas para a navegação. os rótulos ou o layout geral de um mecanismo cria um sentido de progresso através de um site. Coisas que funcionam de maneiras diferentes também devem diferir na aparência. a inconsistência pode ser poderosa. Se existe uma boa razão para uma inconsistência e os usuários não a percebem como tal. Os usuários podem não ter um problema com uma mudança nas opções de navegação se eles ainda assim puderem cumprir suas metas. As pessoas podem perceber uma inconsistência técnica de navegação como sendo consistente se for intuitiva de usar. no fim das contas. testes com usuários reais ajudam de qualquer forma. A regra geral quando as pessoas dizem "seja consistente" é: forneça um balanço entre a consistência e a inconsistência. é claro. E. A consistência é. quando usada sabiamente. O sistema de navegação que você projeta dá a eles evidências sobre como navegar pelo site. os visitantes devem ser informados sobre o que está acontecendo. Todos os direitos reservados. No entanto. naturalmente. A única consistência que conta é a consistência com as expectativas do usuário. Textos e rótulos são a principal maneira pela qual as pessoas saberão qual opção é qual ou qual é o título da 54 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. . Feedback Quando estão navegando em seu site. a inconsistência é tão importante quanto a consistência no design de navegação. Variar a posição. uma qualidade percebida. Inconsistências aleatórias refletem um design feito sem cuidado e tendem a causar problemas. Qual o balanço correto entre consistência e inconsistência? Depende.

Muito útil para elementos menores. Uma boa navegação minimiza o esforço para chegar ao conteúdo. Eficiência Os caminhos para a informação devem ser eficientes. Seja trocando a cor. Mostrar a posição de uma página dentro de um site destacando sua categoria na navegação ajuda a orientar os visitantes sobre sua localização. Além disso o feedback na navegação pode ser considerado de duas maneiras: Rollover . você pode aumentar a eficiência de diversas formas: Pontos de acesso duplicados . . Para sites maiores. um anúncio em uma página principal pode simplesmente levar para a página de aterrissagem para uma das opções da navegação principal. Evite-os. Ou. o tamanho ou algo mais. Por exemplo. mecanismos de paginação ou nos números de um pequeno calendário. abas e menus que você criar deve requerer um esforço mínimo. menus dinâmicos que necessitam de coordenação da mão para os olhos apenas alcançar as opções retardarão os usuários. pode ser mais fácil para o visitante clicar em um link no final da página do que ter que rolar novamente até o início da navegação principal. por exemplo. Interagir com os links. 55 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Todos os direitos reservados. Em grandes sites ricos em informação. isso é valioso para a orientação. abas e ícones que sejam fáceis de ver e de clicar.é uma técnica que destaca uma opção quando o usuário passa o mouse sobre ela. Ao ler um artigo. tais como setas. Cliques desnecessários acompanhados de recargas de páginas são irritantes.página atual. botões. Mostrar a localização também ajuda se alguém é interrompido e precisa continuar sua sessão mais tarde.fornece múltiplos links em uma página para o mesmo destino. Busque criar links navegacionais.

Tenha em mente que ambigüidade e a amplitude de um rótulo versus sua profundidade são aspectos relacionados.Links associativos criam atalhos para o conteúdo. tais como títulos. Pesquisas mostram que a qualidade dos rótulos dos links afetam o quão bem as pessoas podem navegar em estruturas de diferentes profundidades e amplitudes. abreviações e rótulos muito bonitos ou espertos. um link cruzado pode levar os usuários diretamente de uma página para a próxima. estruturas mais profundas podem ser tão eficientes quanto as mais amplas se os rótulos dos links não são ambíguos. Evite jargões. 56 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Pontos de escape . Busque por: Categorias significativas que sejam mutuamente exclusivas Formas consistente de rótulos Uma coordenação dos rótulos de navegação com outros elementos de texto. conforme mencionado anteriormente em nosso curso. seja cuidadoso ao fornecer pontos de acesso duplicados e atalhos: muitas opções podem causar mais confusão que eficiência. .As pessoas frequentemente seguem um padrão de centro com eixos de navegação. Todos os direitos reservados. O balanço ótimo para a estrutura está na clareza dos rótulos.Atalhos . nomes de marcas. Rótulos Os rótulos dos links são absolutamente críticos para criar um forte aroma de informação. Elas retornam à página principal ou à página de aterrissagem para reiniciar sua estratégia de busca "reiniciar" uma busca e voltar para um ponto de início comum. Ao invés de ter que navegar para cima em um ramo da estrutura para descer novamente em outro. Apesar de estruturas mais amplas tenderem a trabalhar melhor de uma forma geral. Entretanto.

considere o tipo do site: 57 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional.botões e links devem parecer clicáveis. Distinções visuais. A navegação é melhor quando as pessoas não são deixadas tentando adivinhar "esse texto é clicável"?. Bons menus de navegação fomentam a varredura e fazem com que pular opções seja tão fácil quanto possível. tal como sublinhar links.Clareza visual A cor.lembre que as pessoas tendem a ler as páginas rapidamente á medida que buscam por palavras gatilho. . Elas tratam todos os sites da mesma forma. Alguns aspectos visuais importantes da navegação que contribuem para o seu sucesso são: Lógica visual . a fonte e o layout contribuem para uma experiência de informação mais rica. Facilidade de varredura . Adequação ao tipo de site O sucesso da navegação é relativo ao tipo de site em que ela aparece. depois aqui". Facilidade de clicar . O design visual não trata apenas de tornar as coisas mais bonitas: ele cria um senso melhor de orientação e melhora a usabilidade da navegação. Uma clara hierarquia visual de opções irá comunicar " clique aqui primeiro. como se as intenções dos sites fossem uniformes.quando bem projetado. Ao avaliar a navegação. Todos os direitos reservados. Regras genéricas e recomendações para design web frequentemente perdem esse aspecto crítico e tentam usar sentenças vazias que se apliquem a todas as situações. proeminência e visibilidade podem fazer a diferença entre encontrar a informação e perder-se no hiperespaço. o layout e o tratamento visual da navegação podem guiar as pessoas através do site. podem ser importantes para facilitar a navegação. Clareza. virtualmente instruindo os usuários quais passos dar e o que fazer em seguida.

Sites de entretenimento . Enquanto estiver respondendo a um teste online. Mas as intranets possuem tráfego repetido. Com diversos grupos-alvo. . Intranets corporativas .educação à distância e programas de treinamento online são cada vez mais comuns. Visitantes de sites de jogos online podem ser mais tolerantes para navegação divertida do que visitantes de um site de notícias. A navegação para sites de comunidades devem suportar essas atividades. as instruções e os 58 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Podem existir muitos rótulos para "membros da comunidade" e terminologia usada na navegação. Sites de comunidades .intranets são ferramentas para comunicar e compartilhar informações dentro de uma organização. Não seguir a prática comum em design de navegação pode custar caro. Geralmente a navegação deve ser simples e claras para esse tipo de sites.sites de notícias tais como wikipédia. A visibilidade das opções é crítica.Sites de informação . A exibição ampla de navegação dá uma visão geral melhor para esse tipo de site. Todos os direitos reservados.as pessoas não podem comprar o que elas não podem encontrar. A eficiência é importante. então funcionalidades com uma curva de aprendizado longa podem ser mais aceitáveis. A navegação é crucial para o sucesso. incluindo abreviações.comunidades online são locais para as pessoas trocarem ideias e discutirem tópicos. Site de comércio eletrônico . por exemplo. Sites de aprendizagem . seguir práticas comuns de design reduz a curva de aprendizado e atende melhor as expectativas dos usuários.a experimentação com a navegação pode ser completamente aceitável para esse tipo de site. estão no ramo de fornecer informação. bem como o bom uso de links associativos: sugira produtos relacionados quando for apropriado. O tempo que os empregados gastam procurando por informação em uma intranet é perdido em tempo de trabalho.

Apesar da interação com esse menu ser complicada a princípio.mecanismos para avançar são críticos. tais como: Como eu posso encontrar informações específicas ou produtos que eu quero rapidamente? 59 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Ela permite que os visitantes explorem e interajam com várias marcas da companhia. mas uma que é ouvida frequentemente. Note que também existem outras formas para obter as informações sobre as marcas. Alinhamento com as necessidades dos usuários O sucesso da navegação é relativo aos grupos-alvo e suas necessidades de informação. mesmo para uma única pessoa no meio de uma única busca. Busque além das questões básicas como Onde eu estou? O que é isso? E Onde eu posso ir a seguir? A navegação efetiva é alinhada com os objetivos e expectativas mais profundas dos usuários. os grupos-alvo podem ser grandes na web aberta. "Todo mundo que usa esse site" não é uma boa resposta. E as necessidades de informação mudam. identifique as necessidades-chave de informação de cada grupo. . esse não é o único ponto de acesso. Mas identificar essas necessidades de informação não é fácil. Todos os direitos reservados. Sites de identidade Algumas vezes o propósito principal de um site é suportar a imagem de uma companhia. Por exemplo. ela parece ser apropriada para uma identidade do site. Aqui a navegação pode até afetar o desempenho no teste. Primeiro defina o seu grupo-alvo. Reduza esses grupos para uns poucos tipos de usuários-chave e capture essas personas. Segundo.

Aqueles que não envolvem os usuários são chamados métodos de inspeção.Como eu sei que a informação está atualizada? O conteúdo deste site é confiável? Como eu contato o dono do site? Como eu envio informações que encontrar para pessoas que conheço? Essa lista deve focar em um conjunto limitado das necessidades dos usuários. . Todos os direitos reservados. Apesar do resultado dessas inspeções ser subjetivo. Ao relançar ou melhorar um site web. é indispensável determinar primeiro os problemas do site antigo. tente identificar questões potenciais de uma forma sistemática e resolve-las antes que seja muito tarde. e no final. Métodos de Avaliação A navegação pode ser avaliada ao longo do ciclo de vida de um site web. Durante as fases de pesquisa e design de novos sites. Finalmente. No início de um projeto. o site pode acabar não atendendo às necessidades de ninguém. Isso também o familiarizará com o site de uma maneira geral. Este feedback pode resultar em melhorias durante as fases de manutenção de um site web. A seguir alguns métodos comuns para avaliar a navegação. as avaliações de um site após ele ser lançado podem apontar para questões reais que os visitantes possuem. sua abordagem mais estruturada para a 60 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Tentar satisfazer todas as pessoas o tempo todo é problemático. revise a navegação do site atual. Foque nos objetivos primários de seus grupos-alvo primários. Revisões de navegação por seus pares podem detectar problemas em potencial cedo no processo. Avaliar a navegação dos competidores também pode relevar boas práticas e mostrar como posicionar efetivamente seu site no mercado.

inspeção de um site traz um feedback valioso.Nenhum problema 1 .Problemas menores presentes para alguns usuários 3 . O avaliador faz julgamentos de acordo com princípios reconhecidos. Eles podem apontar para problemas reais que os usuários tem enquanto usam o seu site. Descobertas e conclusões são mais fortes quando validadas por uma combinação de técnicas. Veja a seguir o exemplo: 0 . a avaliação heurística é qualitativa e depende de interferências subjetivas feitas pela pessoa que faz a avaliação. Eles devem então comparar notas e discutir as descobertas após a revisão estar completa. de modo que dois ou mais avaliadores da equipe de design devem inspecionar sistematicamente a navegação do site.Problemas maiores estão presentes 4 . Os passos em uma avaliação heurística são: 61 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Todos os direitos reservados.Catastrófico de não-usável para quase todos os usuários O conhecimento e a experiência dos revisores influenciam fortemente os resultados. chamados de heurísticas. Geralmente são aplicadas em diferentes situações e são usadas para prever potenciais problemas com a navegação. em contrapartida. popular. focam em dados sobre o comportamento real dos usuários. Nenhuma avaliação isolada lhe dará uma figura completa do sucesso da navegação. Os problemas potenciais são identificados e avaliados através de uma nota para sua severidade. . de baixo orçamento.Questões cosméticas apenas 2 . Teste de usabilidade e análise de métricas web. Você pode usar os métodos listados a seguir para avaliação: Avaliação Heurística: Um método de avaliação de usabilidade analítico.

Percorra o site. forneça uma faixa de notas (em relação ao quão severamente a página é afetada) variando de 0 a 4. focando em um princípio por vez.1.Entre em acordo sobre as áreas-chave de conteúdo e as funcionalidades a serem revisadas. d. Alinhe as páginas a serem revisadas com as necessidades e tarefas-chave dos usuários. b. . Resuma-os. Preparar a. 62 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. b. Entre em acordo sobre as principais áreas de problemas e sobre a interpretação das questões que surgiram em cada área. c. 2. Selecione um conjunto diverso de páginas que cubram uma ampla faixa de tipos de navegação. Consolidar a. Tornar-se familiar com as páginas-chave do site. Discuta suas descobertas com outros revisores. É geralmente impossível revisar todas as páginas de um grande site.posteriormente você precisará oferecer suporte às suas conclusões quando apresentá-las a outros. você também pode revisar cada página uma vez para todas as heurísticas antes de mover para a próxima. Todos os direitos reservados. Tome notas e capture cópias das telas à medida que você avança . 3. Procure por padrões ao longo de suas notas e entre os revisores. Para cada heurística. Alternativamente. Entrar em um acordo sobre quem irá realizar a revisão b. Determinar os princípios para a avaliação. Executar a.

O uso da navegação é intuitivo facilmente aprendido. Todos os direitos reservados. Desenvolva um plano para resolver as questões identificadas. A inconsistência é apropriadamente usada para mostrar contrastes e prioridade. d. Consistência. Heurísticas sugeridas: As seguintes heurísticas são baseadas em princípios de busca por informação e navegação web. Rótulos claros. Descobrir e usar as opções de navegação é fácil. O número de opções de navegação apresentadas está balanceado com a profundidade da estrutura do site. . Elas focam na navegação e em padrões gerais de busca por informações. Exploração. Facilidade de aprendizado. Desenvolva um plano para resolver as questões identificadas. Crie uma apresentação para a equipe de projeto e os stakeholders. Os caminhos para a informação são curtos. Orientação. Eficiência. Balanço. A apresentação e a interação das opções de navegação são consistentes e previsíveis.c.ambíguos. 63 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. É claro onde você está dentro do site em cada página. A navegação promove a livre exploração e a descoberta de informação. e. Os rótulos de navegação são previsíveis e não. As categorias são providas de significado e são mutuamente exclusivas. Determine recomendações apropriadas para resolver as questões identificadas. e.

como eles normalmente 64 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. O site facilita a varredura e a navegação. Enquanto completam essas tarefas. Outros acham que. A navegação suporta múltiplos modos de busca (itens conhecidos. os participantes usam os seus próprios computadores. Ele também permite que as pessoas diferenciem rapidamente as informações relevantes das irrelevantes. Após encontrar informações relevantes. . Seu trabalho é assistir. fazem e sentem. é necessária uma amostra maior. de forma a identificar todos os problemas. O número de pessoas testadas é uma variável-chave para o custo do processo de testes e é uma questão amplamente debatida nos círculos de usabilidade. nos quais os usuários de teste realizam tarefas que representam a forma que eles devem interagir com um site web. é solicitado que eles "pensem em voz alta" e descrevam o que vêem. você não sabe o que precisa saber. Uso da informação. Testando a usabilidade Os testes de usabilidade são frequentemente estruturados como testes em laboratório. Testes remotos também são possíveis com o site no ar. redescoberta) que são apropriadas do seu site. Então identifique as áreas onde os usuários tiveram dificuldades como o site e faça recomendações para melhorias. Elas podem capturar o conteúdo para integrar com suas fontes de informações pessoais. Com esse método.Diferenciação. escutar e tomar notas enquanto eles navegam. Alguns acham que muitos testes interativos com apenas poucas pessoas é melhor que um teste único com doze ou mais pessoas. Modos de busca. Todos os direitos reservados. exploração. Você precisará determinar o propósito do teste e a audiência dos resultados antes de responder a essa questão. as pessoas podem usá-las de maneira apropriada.

Testes de usabilidade remotos são uma boa forma de testar grupos de usuários dispersos geograficamente. então recrute alguém em seu escritório e faça-o realizar algumas tarefas de exemplo com um teste informal. Observe os seguintes aspectos: Visibilidade . Testes de usabilidade requerem planejamento.os rótulos são claros e entendíveis? Orientação . podem levar semanas de preparação e assistência de especialistas de usabilidade externos. você talvez queira contratar um profissional de usabilidade.fariam para navegar no site web.os usuários vêem os elementos de navegação chave na página? Rótulos .sucedidos ao tentarem localizar as informações de que precisam? Eficiência . ganhe experiência assistindo outros. Os participantes podem até mesmo fornecer feedback em cada página via campos de entrada de texto. Todos os direitos reservados. em contrapartida. conduzir os testes requer alguma prática. Primeiro. Os passos básicos são similares: 1.os usuários são bem.os usuários perdem-se ao avançar e retroceder em um site? Facilidade de encontrar informações .os usuários podem completar tarefas de busca rápida e eficientemente? Dado que entrevistar e guiar pessoas através de um cenário de testes é uma arte. Testes mais formais. Crie um plano e um protocolo de testes. . 65 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Os assim chamados métodos de "teste de guerrilha" buscam minimizar a sobrecarga testando rapidamente. Para testes mais formais. Um software então rastreia onde eles clicaram e como eles navegaram. Identifique e recrute participantes apropriados para os testes.

em contrapartida.2. o qual usa para monitorar o desempenho. Analise as descobertas. muitas métricas importantes que são específicas do negócio também são capturadas. Os dados são também confiáveis. Apresente as recomendações finais. Organize um laboratório para a coleta e observação de dados. Adicionalmente. Conduza o teste. Todos os direitos reservados. . tais como: Taxas de conversão Custos de aquisição de clientes Tamanho dos pedidos Vendas totais Seu objetivo é amarrar uma melhoria na navegação e uma melhoria nos negócios 66 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. capturam melhor os caminhos que as pessoas percorrem em um site. Entretanto. 4. Os dados de uso são também valiosos para os designers web. Análise de Métricas Uma boa maneira de aprender se o seu site está atingindo seus objetivos é obter dados de tráfego. taxas de conversão e volume de anúncios. Ferramentas modernas de obtenção de métricas na web. 3. Profissionais de marketing também prestam muita atenção às estatísticas em termos de vendas. Tradicionalmente. coletar métricas do site é um trabalho do webmaster.

Bookam. Todos os direitos reservados. Fundamentos da Navegação Web. James. . 2009. 67 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional.Referências KALBACH.

.Disciplina VII: Design Instrucional de Interfaces e Navegação Web Módulo V Arquitetura e Esquemas Organizacionais Web Objetivos do Módulo Explicar sobre a arquitetura e esquemas organizacionais. Todos os direitos reservados. Conteúdos abordados Arquitetura persuasiva e diagramas de conceito Estruturas esquemáticas e de informação de navegação web Planos e mapas do site 68 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. elementos importantes para o estudo.

As escolhas que os clientes fazem que são capturadas e os cenários precisam se encaixar com a forma pela qual vende-se os produtos e ideias de um site. 69 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. As barras de doces. Mesmo que não se pretenda criar um site de comércio eletrônico. Juntos eles representam como os visitantes tomam decisões e refletem sobre o processo de compra online. revistas e outros itens pequenos não são colocados no caixa acidentalmente. Ao otimizar um site para vender melhor os itens. .Arquitetura persuasiva e diagramas de conceito As lojas são organizadas internamente para promover a venda de produtos. Todos os direitos reservados. eles apontam três questões críticas a serem respondidas desde o inicio. Promover produtos e otimizar vendas são partes normais de qualquer negócio. Bryan e Jeffrey Eisemberg. Qual é a ação que você quer as pessoas tomem? Quem você está tentando persuadir para tomar uma ação? O que a pessoas precisa para sentir-se confiante para tomar essa ação? Pessoas e cenários estão no centro de seu método de arquitetura persuasiva. ainda assim há a venda de idéias e comunicação de uma mensagem. A navegação web desempenha um papel central na arquitetura persuasiva e em alinhas os objetivos dos usuários com os objetivos do negócio. especialistas líderes em marketing online. Estrutura do site: como as páginas são organizadas em relacionamentos entre si ou como o site é construído. detalham um método para planejar sites que eles chamam de arquitetura persuasiva. A arquitetura persuasiva desempenha um papel nesses casos também. mas também dá aos usuários um padrão claro a ser seguido ao usar o site. Ele não apenas guia a equipe ao longo do desenvolvimento. Tem-se três aspectos chave nesse processo: Conceito de navegação: modelo abstrato de como a navegação funciona.

Todos os direitos reservados. 70 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Um conceito concebido na mesa de uma única pessoa tem poucas chances de sobrevivência. O diagrama de conceito é usado para organizar e documentar os vários elementos do site e como eles se relacionam uns com os outros. Entender esses três aspectos da arquitetura do site e importante tanto quando desenha-se o site quanto quando para aprimorar sites já existentes. As equipes fazem suposições a respeito da direção conceitual do site. Em projetos menores isso pode ser aceitável. conforme estudados no módulo anterior. Diagramas de conceito É uma ferramenta útil para capturar um conceito de navegação. Objetivos de negócios Objetivos do site Concorrentes Marca Tipos de usuários Objetivos dos usuários e cenários Os projetos formam conceitos de navegação tacitamente. não explicitamente. ilustra graficamente os elementos idéias-chave envolvidas em um sistema de navegação. Mas em sites maiores e mais complexos é melhor tornar o conceito explícito. . Criando um conceito de navegação O conceito é uma fusão de vários elementos. muitos dos quais foram identificados durante a fase de análise. Isso significa que criar um conceito deve ser um exercício colaborativo.Organização da navegação: esquemas de organização agrupam opções de navegação em uma maneira lógica. fornecendo contexto para entender a navegação como um todo. Abaixo constam as qualidades de um bom conceito: Ser fácil de lembrar.

Realizar sessões de brainstorming e explorar diferentes modelos possíveis de navegação. reunir os tomadores de decisão de uma mesma sala e utilizar o gênero e as metáforas para guiar o seu conceito. Estar alinhado com os objetivos dos stakeholders Satisfazer as experiências dos usuários. Com o conceito definido de navegação. incluindo a visão. . claro. Desenvolver um diagrama de conceito mostrando os relacionamentos entre as funcionalidades e o conteúdo do site. Todos os direitos reservados. Descrever em um cenário as ações desejadas que as pessoas precisam realizar para satisfazerem seus objetivos de negócios. incluindo: Estruturas lineares 71 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. os usuários. Satisfazer as experiências dos usuários De um modo geral criar um conceito de navegação envolve os seguintes passos: 1. a marca.Ser envolvente. cobrindo a navegação de nível macro e micro e futuras decisões de design. a estrutura captura a disposição específica das páginas e do conteúdo de maneira concreta. À medida que há a investigação de como construir a navegação. Estrutura de informação A estrutura da informação refere-se ao plano ou mapa de páginas no site. 2. Baseadas nas pessoas e nos cenários criados. 4. É o esqueleto do site que estará preenchendo com os layouts de páginas e de designs finais. Enquanto um conceito reflete um modelo abstrato do site. pode-se considerar a estrutura da informação no site. Revisar as informações coletadas durante a Análise. 3. os concorrentes. é preciso manter os diferentes tipos de estruturas em mente. os objetivos e.

Teias Hierarquias Facetas Estruturas emergentes Um sistema de navegação web pode usar qualquer dessas estruturas básicas simultaneamente ou todas elas. também chamadas de estruturas em árvore. as páginas são dispostas em sequência. . onde os usuários criam links livremente entre porções de conteúdo e para outras pessoas. Todos os direitos reservados. Existe um nó de nível 72 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Um site de busca é um exemplo de uma estrutura linear natural. Estruturas em formato de teia ocorrem em sites como MySpace. Teias Uma estrutura em teia possui muito nós que são ligados sem níveis ou sequencias. Cada página é um centro em potencial em uma estrutura de centro e eixos que as teias se formam. Estruturas lineares ocorrem quando as pessoas não podem chegar a uma página sem antes ter visto uma página anterior. por exemplo. A informação é ligada através de links e referências cruzadas onde não existe um início e um fim bem definidos. Estruturas hierárquicas As hierarquias mostram níveis de nós que são dispostos em um relacionamento pai-filho. Estruturas lineares Em uma estrutura linear simples.

mas materializam-se espontaneamente. mas não á categoria D. ou o nível mais alto da hierarquia.superior. Com facetas. Mesmo um simples site web pessoal com apenas uns poucos níveis representa uma estrutura hierárquica. Todos os níveis abaixo herdam a designação de nível do pai e estendem essa designação para o próximo nível. Isso oferece uma maior flexibilidade ao localizar informações. a localização de um dado item é determinada por sua posição em forma de árvore. . a localização de um item é dada pelas categorias a que esse site pertence: item 1 pertence às categorias A. Estruturas emergentes Não são planejadas a priori. Nas hierarquias. Nesse sentido as estruturas emergentes descrevem 73 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. mas ao invés disso desenvolvemse incrementalmente. Os nós da hierarquia podem ter pais (um nível acima) ou filhos (um nível abaixo). Facetas Oferecem uma alternativa às hierarquias.B e C. A organização em hierarquia escrita é também limitante: existe uma única maneira de localizar uma informação. Os elementos individuais unem-se e constroem-se em um sistema auto-organizado. As pessoas estão amarradas a esse caminho para encontrarem informações. Elas não são criadas por uma única pessoa ou evento. Todos os direitos reservados. Sistemas facetados destacam o fato que os buscadores de informações podem buscar um recurso a partir de qualquer número de ângulos. A estrutura página principal > páginas de aterrissagem> páginas de produtos é comum para a maioria de sites de comércio eletrônico. Isso oferece múltiplos pontos de acesso. normalmente a página principal. A maioria dos sites possuem algum tipo de hierarquia.

Esquemas geográficos: a localização é a base para a organização com esquemas geográficos: global ou nacional. Esquemas Organizacionais A estrutura de um site indica a disposição física e a conexão das páginas. enquanto que históricos encaixam-se muito bem com representações de linha do tempo. Ao criar a navegação de um site estará lidando primariamente com esquemas subjetivos. A recomendação geral para design de navegação é criar menus que compartilhem uma organização geral. Eles são úteis apenas quando os visitantes sabem as palavras exatas dos itens desejados. . ao invés do relacionamento das páginas umas com as outras. cidade ou estado. Além de determinar a estrutura do site. o próximo passo do design de navegação é considerar os tipos de categorias e tópicos que serão usados para organizar a informação. Esquemas cronológicos: sites de notícias frequentemente usam organizações cronológicas. região ou país.como a arquitetura do site é criada. Ela não determina como as páginas e os conteúdos são tematicamente relacionados. 74 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Esquemas objetivos e subjetivos Esquemas objetivos organizam a informação em categorias bem definidas: Esquemas alfabéticos: apesar de serem muito familiares. Todos os direitos reservados. não comunicam nada a respeito do relacionamento entre os objetos de uma maneira significativa.

.Por tópico ou assunto: em sites grandes. serviços ou o conteúdo do site por tópico. 75 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. a estrutura da informação e o esquema de organização de um site em uma representação visual.se contar com um conjunto misto de conteúdo para organizar quando estiver tratando com vastas quantidades de informação. Esquemas Mistos: as pessoas gostam de informações organizadas consistentemente. Pode. Por tarefa: sites que são mais interativos e chamam por uma entrada do usuário podem beneficiar-se de um esquema de organização de opções de navegação baseados em tarefas. Um mapa do site é um artefato-chave a ser entregue ao criar o design de um site web. Mas as informações não se deixam categorizar de maneira clara. O site web da NASA (www. mesmo que esse seja o esquema que funciona melhor para os visitantes. por exemplo. Os programadores visualizam o escopo e a extensão do site a partir de mapas do site. Ele captura o conceito.nasa. Por grupo de audiência: aqui as opções de navegação falam para diferentes grupos de usuários. e é útil para muitos membros da equipe de um projeto: Stakeholders usam os mapas do site para verem que impacto o site terá em seus negócios. Todos os direitos reservados.gov) inclui navegação separada para opções baseadas na audiência. Mapas do site É um documento que demonstra os relacionamentos entre o conteúdo e a funcionalidade na arquitetura de um site. O conteúdo e a funcionalidade de um site podem impedir uma organização puramente feita de acordo com tópicos ou geograficamente. Designers visuais identificam necessidades de tipos de página e de layouts de página a partir de mapas do site. organizada e regular. ricos em informação. é muito comum agrupar produtos.

76 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Entretanto. mas ao invés disso mostram navegação estrutural e utilitária. o principal propósito é o mesmo: comunicar efetivamente sua arquitetura para os outros. por exemplo. o uso de cores e formas e assim por diante. São dadas letras para as seções dos sites.Elementos de um mapa do site: Existem muitas variações de mapas do site: a quantidade de detalhes mostrados. o qual corresponde ao rótulo de navegação para aquela página. . Conexões: Os nós são conectados para mostrar relacionamentos. pode-se também indicar algumas características de cada uma das páginas: Formatos de conteúdo além de HTML. Mapas do site geralmente não mostram todos os links associativos. É possível utilizar essa oportunidade para trabalhar as palavras finais que se deseja usar. mas existem elementos comuns de mapas do site. incluindo: Nós: As páginas em seu site são os nós básicos no mapa do site. Não existem regras definidas sobre como um mapa do site deve aparecer. O tipo e o template da página Funcionalidade e características especiais. Todos os direitos reservados. Esquemas de numeração: Para evitar confusão. tipicamente mostrados como quadrados. se um login é necessário para acessar o conteúdo. um identificador único pode ser dado a cada página. tal como PDF Páginas que aparecem em uma janela pop-up Conteúdo dinâmico que muda em tempo real Conteúdo dinâmico que muda em tempo real Privilégios de acesso. Rótulos: Cada nó em um mapa do site precisa de um título. a disposição das caixas. Atributos de páginas: Além do título da página. podem variar de designer para designer.

Isso ajuda a planejar para mudanças posteriores e garante eu a arquitetura seja escalável.Notas e anotações: Os mapas dos sites não são sempre capazes de comunicar tudo visualmente. . Todos os direitos reservados. Título e legenda: Assim como para toda sua documentação de projeto. dê um título ao mapa do site. Exceções ou condições especiais precisam de uma nota acompanhando-as no mapa do site. Crie uma legenda para explicar as diferentes formas e símbolos utilizados. juntamente com o número de versão e /ou data. Escopo: Mostre as páginas que estão dentro e fora do escopo para o projeto atual. 77 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional.

Referência KALBACH, James. Fundamentos da Navegação Web. Bookam, 2009.

78
_______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Todos os direitos reservados.

Disciplina VII: Design Instrucional de Interfaces e Navegação Web

Módulo VI Layout e Apresentação da Interface de Navegação

Objetivos do Módulo Explanar sobre o desenvolvimento e criação de templates e wireframes de navegação.

Conteúdos abordados Desenvolvimento de lógica visual Criação de templates e construção de wireframes Design gráfico x Hierarquia visual x Comunicação de navegação

79
_______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Todos os direitos reservados.

Desenvolvimento do processo de layout Dentro do processo de desenvolvimento geral do site, desenvolver o layout das páginas prova ser uma fase crítica. É nesse ponto que as pessoas reagem ao design - mais do que nos estágios anteriores. Layout da interface O layout da interface não se relaciona apenas à sua aparência, que contribui para a experiência subjetiva e emocional de recepção. Na verdade o layout, com o estilo visual, fontes, cores, imagens, é parte integrante do design da informação e da funcionalidade dos aplicativos. O layout da interface influencia a primeira impressão, de caráter subjetivo, do usuário que visita um web site especialmente daqueles que o visitam pela primeira vez. Uma primeira impressão positiva facilita a compreensão da estrutura do conteúdo e do conceito editorial, bem como da funcionalidade da interface. Estudo realizado por pesquisadores canadenses, publicado em janeiro 2006 no jornal Behavior and Information Technology, afirma que os usuários da internet gostam ou não de um web site no primeiro momento do contato, ou seja, no intervalo de um vigésimo de segundo, menos que a duração de um piscar de olhos em que a página aparece diante dos seus olhos. Segundo a pesquisa, a primeira impressão influencia todo o resto da experiência de uso e navegação no site. Esta afirmação não é um consenso. Jakob Nielsen argumenta que estes testes não foram realizados com conexão à internet e suas condições de realização foram muito diferentes das condições de uso normal de acesso e visualização das páginas. Ele argumenta: Online, o tempo de carregação das páginas é maior (o que faz com que a primeira impressão seja a de "partes" da página e não do conjunto) 80
_______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Todos os direitos reservados.

com muitas instruções. (Newsletter 81 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Uma interface saturada. Além de criar uma empatia imediata. Um layout agradável inspira confiança e estimula a navegação em diferentes páginas. E a falta de pistas visuais. o que influencia a sua primeira impressão . dificulta a utilização. O usuário já tem uma expectativa prévia do que procura em relação à página que seleciona. não há página que carregue instantaneamente.normalmente os textos aparecem primeiro.1. Normalmente o usuário olha primeiro os detalhes que o interessam e estes compõem um conjunto de impressões que se acumulam antes que faça uma impressão geral da página . Todos os direitos reservados. com sinais pouco visíveis. De qualquer forma. logotipos difíceis de localizar ou com funcionalidades difíceis de decifrar.a impressão geral é composta de diversos fragmentos que compõem o layout do conjunto. Online. Alertbox Announcement List. . demanda mais tempo de aprendizado de uso e maior esforço para a localização das informações. O layout influencia também como o visitante do site se posiciona em relação ao seu conteúdo. A primeira impressão se processa de maneira relativamente lenta e muitas vezes se consolida quando o usuário já saiu da página (o que pode resultar até num movimento de retorno imediato). 23. o layout influencia o grau de facilidade de encontrar os fragmentos de informações de maneira intuitiva. os autores de modo geral reconhecem que a identificação inicial dos elementos de layout ajuda a compor a experiência de interlocução entre usuário e interface. rótulos. sinais.2006).isto não aconteceu no ambiente de testes citado em que os usuários não tinham qualquer expectativa sobre as páginas que lhes seriam mostradas.

Mas na verdade. aderência ao conceito editorial e necessidades específicas de edição. orientando assim a ação do usuário. que devem estar contempladas no resultado final. Estas soluções levam em conta fatores como uso experiência. Um projeto com maior segmentação profissional permite a contratação dedicada de designers e outros profissionais com formação específica em mídias online e tecnologias da informação.A organização visual das informações está também relacionada ao deslocamento entre as páginas e às indicações do conteúdo disponível. Devido a esta diversidade de fatores. que inclui uma extensa cadeia de processos de conhecimento. Para o projeto de um site com poucos recursos. que não permita a contratação de profissionais especializados. arquitetura 82 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. deslocamento e sentimento de identificação do usuário. usabilidade. web design é uma das etapas do projeto. a equipe de design para a web costuma ter formação heterogênea e é escalada de acordo com a natureza do projeto. relação direta com os objetivos do site. A percepção do layout no projeto É comum a percepção de que o projeto de site é constituído em sua maior parte pelo planejamento do layout das telas. O layout da interface reflete um conjunto de soluções de diversas naturezas. O designer de web sites precisa conhecer não só os assuntos relativos aos processos de elaboração de um projeto e à criação de soluções visuais como também regras de acessibilidade. . o designer tende a acumular algumas funções de programação e precisa ter a formação técnica necessária. A seleção de um botão ou item de um menu pode ser influenciada pela ordem em que estes elementos estão dispostos em relação a outros. Todos os direitos reservados.

Examinar a arquitetura da informação. As análises das entrevistas fornecem informações valiosas para esta avaliação. ícones. Todos os direitos reservados. Muitos gestores não-especializados relacionam o layout apenas à forma do produto esquecendo que cada elemento está relacionado a conceitos e funcionalidades específicos e tomam decisões baseadas apenas nas suas impressões pessoais. 83 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. diagramas de fluxo e storyboards. bem como mapas conceituais e pesquisas sobre os padrões culturais de grupos de usuários e seus códigos visuais (cores. sinais. uso de elementos como animação.da informação. mesmo que não se proponha a ser um especialista em cada uma destas áreas de conhecimento. A formação especializada garante ao designer as condições para ter a palavra final em decisões referentes ao design da interface. o argumento do designer deve contribuir para preservar a integridade conceitual e a qualidade técnica da interface. . para examinar os elementos necessários à interface. composição de páginas em HTML com CSS. tipologias). maior o escopo de atuação do designer em todas as etapas do projeto e maior é a probabilidade de compreender e absorver o modelo conceitual dos usuários de cada site. vídeo e som. aplicação de elementos para a interação entre usuários e a interface. o que nem sempre acontece. Embora a opinião de cada profissional seja importante e necessária. Atividades relacionadas (layout de web sites) As atividades abaixo estão numeradas de acordo com o sequenciamento de atividades da elaboração da estrutura: H1. Quanto mais completa a formação profissional.

com os principais segmentos a quem o site se dirige. Mac. ícones.icio. Linux). letreiros. que variam de acordo com o escopo do projeto.Também faz parte destas atividades o conhecimento da configuração do usuário ideal para o qual o site será desenvolvido. tanto em PCs como em dispositivos móveis. funcionalidades especiais . Quanto mais amplo é o público do site. Este conhecimento permite ao designer de interfaces web criar layouts que estabeleçam identidade afetiva. seus hábitos. e a conhecer as suas principais características de acesso. Todos os direitos reservados. A definição dos segmentos prioritários do público de um web site ou plataforma web é feita durante a conceituação do projeto.us. manter em foco os objetivos do negócio. diversos métodos. simbólica. Neste momento. do produto e dos usuários. ajudam a estabelecer o perfil do público-alvo. no projeto de interfaces web. . seu vocabulário. seja necessário selecionar os usuários e as circunstâncias de uso para quem o site se dirige em caráter prioritário. É importante. em diversas versões.como a barra do del. com ou sem ferramenta de busca. cultural. ao levar em conta as diferenças em configurações técnicas como: o Plataformas e sistemas operacionais (Windows. para isto. com diferentes configurações da interface . o Resoluções de tela. E facilita a estruturação de interfaces adaptadas às condições técnicas e contextuais de uso da maioria. o Browsers também em diferentes versões. A configuração técnica do usuário A diversidade de situações de acesso muitas vezes exige que.ocupando diferentes áreas da tela do monitor. mais preparada para grande variedade de situações de acesso precisa ser a interface. 84 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. por exemplo.

No entanto. A criação de conteúdo. lembra que a rolagem de tela não era permitida nos sites da empresa. Textos longos. Todos os direitos reservados. na medida em que o site atende a um público amplo e heterogêneo. o Capacidade/ velocidade de processamento. 85 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Já o layout do site de um grupo de estudos de física nuclear dentro de uma organização pode considerar de equipamento de uso mais comum entre estes profissionais e a sua velocidade de conexão. na medida em que os browsers de acesso deixaram de ser proprietários e os sites da AOL aderiram à web aberta. com rolagem vertical. listas. com linhas discadas. de modo a se adaptar ao dispositivo dos usuários. estas sim. Milissa Tarquini. artigos. eram apresentados em caixas. diretora de design de interface do usuário e arquitetura da informação da AOL. E neste caso o desenho da tela. o design e a programação das páginas eram rigidamente controlados. o Fatores como estes interferem diretamente na composição dos elementos das interfaces web e precisam ser considerados antes mesmo que o designer comece a criar o layout. .o Velocidades de conexão. Por exemplo: A interface de comércio ou de governo precisa incluir desde as resoluções de tela de PC mais baixas (atualmente 800x600) até as conexões de acesso mais lentas. bem como o uso de imagens e interfaces multimídia pode ser dirigido especialmente para as condições de acesso e necessidade de conteúdo destes usuários. as políticas internas de design e produção de conteúdo se adaptaram a configurações mais genéricas de acesso.

aos objetivos do web site. resoluções. plataformas. Desenhar o modelo básico do layout e testá-lo em diferentes situações de uso (browsers. de modo a emular as situações de uso mais comuns. para que os elementos desta área sinalizem que há mais conteúdo embaixo . Depois da homologação pelos stakeholders. Quanto mais amplo e heterogêneo o público. Testar o layout com usuários representativos do público-alvo. para traçar o perfil dos principais públicos do site. levam os usuários a fazerem a rolagem para continuar a leitura.A configuração técnica de uma página web se subordina. 86 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. em última análise. aplicar o modelo às diversas situações editoriais necessárias. . Algumas medidas a considerar na adaptação do layout da interface a cada usuário Examinar em detalhe as pesquisas e os estudos sobre o usuário. Estabelecer as configurações técnicas prioritárias às quais a interface vai atender e verificar como afetam diretamente o layout. melhores as condições de se estabelecer recortes com as configurações de uso ideais. maiores as restrições técnicas para a estruturação das páginas.fotos e blocos de textos "partidos" e incompletos. tamanho do monitor). Todos os direitos reservados. de preferência no lugar de acesso das pessoas. Inversamente. quanto mais segmentado o público. por exemplo.a partir da resolução de tela e dos equipamentos da maioria. É importante também definir a área em que a barra de rolagem deve começar a ser necessária. Definir as informações que precisam aparecer no alto das páginas (ou acima da dobra da marca de rolagem) da maioria dos usuários .

Alguns desenvolvedores utilizam scripts e "hacks". e aumentam a compatibilidade das páginas com diferentes plataformas. em diversos dispositivos. para garantir que a interface se mantenha estruturada e funcional para a maioria dos usuários prioritários. de forma facilitar a sua visualização/ identificação ou de "alt" tags para os usuários que não visualizem ou habilitem a visualização de imagens. Usando ou não estes recursos. que seguem recomendações do W3C para o desenvolvimento do sites e de browsers. Todos os direitos reservados. . como o uso de cores contrastadas para os elementos críticos. Aderir a normas de acessibilidade. o designer precisa testar exaustivamente os layouts e as configurações estabelecidas em diversas situações de uso. Configurar layout líquido. etc. algumas medidas ajudam a adaptar o layout da interface a públicos amplos: Adotar padrões web. No entanto. que permitem adaptar o layout a diferentes configurações de acesso. linguagens e sistemas operacionais. Usar fontes com tamanho flexível (baseado em percentual ou na largura da letra).). pelo uso de CSS para diferentes situações de impressoras em braile. 87 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional.Configurações inclusivas O controle da estrutura do layout é feito através de folhas de estilo CSS. com a largura da página adaptável a diversas resoluções de tela. Compatibilizar a interface com os principais programas de acesso à web. especialmente se o site se dirigir a público amplo e não especializado.

de agrupamentos de links. é importante avaliar a inventividade e da originalidade da solução e como este fator repercute positiva ou negativamente no público. esta deve se manter estruturada em diferentes situações de acesso. a defesa das soluções e conversa. Todos os direitos reservados. em que a interface é desenhada para atender a um público restrito. no problema a resolver. Organizar uma imagem geral como esboço e verificar a sua aderência às necessidades do projeto Neste momento. . a argumentação na H2. de olhos dentro dos textos. técnico. mesmo no caso de sites ou portais de públicos restritos. Em vez de cruzar os braços e simplesmente esperar que o produto apareça pronto na sua frente. Avaliar as informações sobre o conceito editorial Conversar com o editor sobre o tamanho dos títulos e textos. a escolha dos referenciais. comercial editorial) do produto web em questão e. H3. a necessidade de leads e subtítulos. O conhecimento do assunto e do seu ambiente facilita o processo de criação. passa também a cooperar na criação e no aperfeiçoamento do produto. o tamanho das chamadas na página Principal e páginas internas. O cliente confia mais no fornecedor que entende (ou procura entender) o resultado a ser obtido e se converte num parceiro. a necessidade de estilos especiais para citações e fontes bibliográficas. É importante também estabelecer uma grade (malha) que se adeque às diferentes 88 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. de maneira mais específica.De qualquer forma. É importante também entrar o mais profundamente possível no universo (informacional.

dispostas de diferentes maneiras. Todos os direitos reservados. bem como o modo de uso dos botões e recursos dinâmicos e os detalhes de acabamento. ao ver o resultado em HTML. de acordo com o(s) eixos(s) que guiam a localização dos elementos na página ou de acordo com malhas (grids) que atendam às características do conteúdo. Produzir o layout e alternativas em programa apropriado Muitas vezes as soluções são esboçadas de maneira informal. o designer precisa considerar aspectos relacionados à composição do conjunto de elementos (funcionais. de forma que. H4. Embora seja comum a apresentação ao cliente de layouts em formato de imagem. a demonstração do uso permite uma percepção completa da solução. tanto sob o ponto de vista visual como funcional.configurações de uso e que se mantenha consistente nas diversas soluções de layout. Neste momento. Mesmo que os elementos. e vão aos poucos ganhando forma e acabamento até que sejam satisfatórias tanto por seus autores quanto pelos clientes e pelo público em geral. apesar das diferenças do conteúdo de cada página. feitos no Photoshop. a composição e a descrição sejam satisfatórias em papel ou na imagem estática. . 89 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. E considerar também aspectos específicos da interface digital. com colunas de larguras variáveis. A composição geral dos elementos pode seguir modelos simétricos ou assimétricos. de conteúdo) no contexto do veículo. pedem para fazer tantas mudanças que é preciso praticamente refazer a solução. Muitos clientes aprovam um layout apresentado como imagem e. o desenvolvimento do layout em HTML com uso de CSS mostra a ideia com maior precisão especialmente os efeitos visuais que mudam sob a ação do usuário. Pode incluir a concepção de uma malha gráfica (grid) para a maioria das páginas.

localização de elementos em linhas e colunas. Permite que os elementos localizados à esquerda da tela se localizem de acordo com o modelo mental da maioria dos usuários (de cultura ocidental). Todos os direitos reservados. como Amazom. Portais com grande volume de acessos diários. é necessário verificar o posicionamento dos elementos em diferentes configurações do monitor. Posicionamento centralizado do layout em relação às bordas da janela do browser: Esta solução permite uma fácil varredura do conteúdo com os olhos. Normalmente os elementos localizados do lado direito têm menos importância. alinhamentos. No entanto.todas tenham as mesmas margens. que substitui o título da seção. priorizando uma delas. A malha também provê sentido de localização para o deslocamento dos usuários nos diferentes canais e seções Exemplo . Exemplos: O Estado de São Paulo. pois estes não precisam se deslocar lateralmente tanto quando nos layouts líquidos.com Posicionamento do layout à esquerda da tela em relação às bordas da janela do browser. .Uma malha consistente facilita a localização e o deslocamento do usuário nos diferentes canais e seções. que se adapta a diferentes resoluções de tela. O sentido de localização interno também é facilitada pela barra de links ("breadcrumb"). para incluir o maior número possível de compradores. nas páginas mais internas A malha gráfica geral pode dispor os elementos do layout da interface web de diversas maneiras: Layout "líquido". 90 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. pode dificultar a leitura e exigir muito esforço de rolagem. A malha facilita o posicionamento dos elementos da interface e do conteúdo em coordenadas definidas. Submarino e Americanas. Newyorkpost.com preferem usar este modelo de configuração. na medida em que podem ficar invisíveis para usuários que utilizam resoluções de tela mais baixas. se o layout divide o conteúdo em muitas colunas.com. Neste caso.

bem como os elementos editorial e/ou comercialmente mais importantes. como o símbolo e o logotipo das empresas/produtos ficam situados neste local.Fatores composicionais da estrutura A localização de cada elemento na página: a área localizada no alto à esquerda é a que mais chama a atenção de usuários de cultura ocidental.o usuário deve ser capaz de entender visualmente a estrutura da página e a funcionalidade dos elementos. dissociá-los Deve-se evitar usar fundos de tela muito "ocupados". acostumados com a leitura da esquerda para a direita. No entanto o 91 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. como as barras de navegação principais. cada página deve usar apresentar um layout consistente em relação ao conjunto. Os espaços em branco ajudam a leitura e a compreensão do conteúdo no contexto do site. Todos os direitos reservados. Exemplo . O balanceamento entre as áreas mais e menos ocupadas. bem como o reconhecimento dos elementos funcionais. de acordo com o modo como estão organizados. Toda a área à esquerda da página é bastante valorizada e costuma ser o local de elementos importantes da interface. de cima para baixo. Aspectos específicos da interface web Para que o desenho de um web site com muitas seções e áreas de informações se mantenha consistente e evidencie as suas funcionalidades. A proximidade dos elementos pode criar associações entre uns e outros. ou.A composição dos elementos dentro da malha gráfica inclui também a localização e o balanço visual dos elementos em contexto . Geralmente elementos muito importantes. que ajuda a estabelecer o equilíbrio visual entre elas. . pelo contrário. que possam atrapalhar a leitura dos rótulos de botões e de textos.

pois está mais interessado no conteúdo.o uso de referências ortogonais que se mantenham consistentes em todas as páginas permite a criação de ambientes com rigor conceitual e visualmente harmoniosos. para facilitar o deslocamento e a orientação do usuário. Palheta de cores . Facilidade de uso de elementos ativos como títulos de links.o uso de sistemas de cores harmoniosos e conceitualmente integrados permite a identificação funcional dos elementos e o estabelecimento de sentido de identidade para a usabilidade dos canais. Malha gráfica (grid) . aplicar barras de navegações adicionais em áreas internas. Testar imagens em diferentes formatos. imagens. É importante para isto observar aspectos como: Navegação e layout . Configuração de tipologias . como formulários. formulários em diferentes situações e aplicações.a estrutura visual e a estrutura de informações do site devem estar diretamente relacionadas. A rolagem vertical de cada tela . vídeo. prever a diagramação de gráficos e tabelas. H5.modelo precisa ter flexibilidade para abrigar conteúdo com diferentes características e atender a diferentes demandas.os estilos de fonte e outros atributos de texto. Testar a solução com conteúdo em diferentes formatos Seja conteúdo editorial (textos. menos se incomoda com a rolagem vertical. 92 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Os textos precisam ser configurados de modo que a sua leitura seja adequada a monitores de diversos tamanhos e com diversas configurações de cores e resolução. músicas) ou funcional.Quanto mais fundo nas camadas de informações o usuário estiver. . Todos os direitos reservados. cores devem ser aplicados consistentemente. como tamanhos. barras de navegação. botões.

páginas especiais e elementos específicos a cada orientação comercial e editorial. moldura para apresentação de vídeos. H7. Outras atividades do projeto de layout Descrever o processo de criação > avaliação > ajustes > aprovação e desenvolvimento antes de começá-lo. tabelas. H8. Detalhar as soluções por escrito. palheta de cores. setas. composição. imagens. tipologias. botões. Desta maneira. Apresentar presencialmente as soluções aos clientes. textos. vinheta de apresentação de vídeos e arquivos sonoros. menus. Este documento é muito útil para a orientação da equipe de programação sobre o layout das páginas elementos e funcionalidades especiais. Registrar por escrito todas as decisões Especificações gerais editoriais e de layout (conceito geral. resolução de tela prioritária considerada. ícones) elementos de navegação (barras. subtítulos. bullets elementos secundários de sinalização). gráficos e tabelas. bem como todos os produtos relativos ao layout que serão apresentados. links). Todos os direitos reservados. aparência dos botões. . que serão detalhadas ao longo da produção. o cliente (ou 93 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. incluindo todos os elementos da interface Como diferentes tipos de títulos. diferentes tipos de formulários.H6. patrocinadores e stakeholders De modo a que a soma de opiniões possa enriquecer a adequação da solução aos seus objetivos. gráficos. imagens (fotos.

A valorização da criatividade e da inventividade interna. padrões. em métodos ágeis) pode acompanhar cada etapa e pedir antecipadamente o acréscimo ou a supressão de uma atividade ou produto. 94 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. ► Exemplo de lista de indicadores (formato xls. que precisam ser adaptadas para cada caso. antecipando problemas. como: Templates (modelos) do planejamento.dono do produto. para ver se não falta nada a criar e a apresentar ao cliente. Esta lista pode ser conferida pelo arquiteto da informação. Todos os direitos reservados. gerando maior comprometimento das equipes às metodologias adotadas e aplicadas. gerente do projeto. . reações e barreiras. Reaproveitamento de arquivos em templates O reaproveitamento dos arquivos produzidos durante o projeto de web site faz parte das práticas de gestão do conhecimento gerado durante o seu planejamento e a sua realização. 47kb). Checar a qualidade do layout de acordo com requisitos préestabelecidos ou lista de referência já existente. Entre os benefícios destas práticas. O desenvolvimento e aperfeiçoamento de práticas de gestão e realização de projetos web adaptadas ao ambiente organizacional específico. Embora a lista de checagem possa se basear em listas genéricas de elementos de layouts web é sempre necessário enfatizar a importância de adaptá-la a cada projeto. analista de sistemas e desenvolvedores. Em projetos de web sites. informações de diferentes tipos podem ser reutilizadas. podemos citar: A recuperação dos fatores que contribuíram para a realização de projetos bem-sucedidos.

controle de riscos). aderência a normas e padrões técnicos. javascript.Templates (modelos) de relatórios e apresentações. Modelos de testes de usuários. do documento de registro) . em detrimento da simples cópia de documentos e arquivos já existentes (gráficos. Processos de negócios e procedimentos de rotina. Especificações do produto. Questionários ao cliente e aos stakeholders.de forma a permitir a sua consulta ou referência em projetos futuros.se possível. Modelos de checklists para controle de qualidade. . legibilidade. Especificações de funcionalidade e de desenvolvimento de códigos. Todos os direitos reservados. Qualidades dos arquivos que facilitam o seu reaproveitamento: Autoria facilmente identificável (do projeto. cores. pessoas) Priorização do encadeamento das ideias e decisões. estilos CSS. para que possam também servir de referência no assunto. 95 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. que também precisam ser adaptados. os usuários dos documentos devem ser identificados. possibilidade de acesso uso de diversos dispositivos ou plataformas. etc. Desenho de bancos de dados. de forma a ficar compreensível a diversos tipos de leitores). Facilidade de leitura: apresentação do texto. orçamentos. diagramas.).fonte. Clareza das explicações (pouco uso de siglas ou linguagem cifrada. Configurações de programas e da infra-estrutura de armazenagem. controle de qualidade. dos processos. Precisão técnica e metodológica (referências de métodos aplicados. Relevância das informações (cronogramas. Freqüência com que o documento é consultado e reutilizado . por exemplo.

Podem também incluir informações detalhadas. A construção. animações elementos de navegação.Controle das versões produzidas. Ninguém quer ou deve começar um novo projeto da estaca zero. gráficos. da navegação. links Wireframes têm como função: Nas fases iniciais explorar e desenvolver os principais conceitos. para a intervenção crítica e reformulação por outros profissionais. sem qualquer detalhamento gráfico. como texto. com o registro dos primeiros produtos do processo de criação da estrutura conceitual e informacional. o agrupamento de componentes utilizados anteriormente exigem tempo e experiência. a seleção. designers de 96 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. vídeo. arquitetos da informação. necessárias ao desenvolvimento de cada tela. Design estrutural (wireframes) Wireframes compõem versões simplificadas das páginas do site que constam apenas de textos e links. Componentes reutilizáveis de projetos anteriores ajudam a iniciar novos projetos web e também a aperfeiçoar a eficiência e a qualidade já alcançada. . áudio. Todos os direitos reservados. programadores. de forma que apenas os arquivos com modificações úteis sejam arquivados. para o exame das suas funcionalidades. com o estabelecimento de vínculos entre elas. O conjunto de wireframes inclui a listagem e posicionamento dos elementos de todas as páginas e do conteúdo de cada uma. embora possivelmente bem menos tempo do que a construção integral de arquivos e modelos para cada novo projeto. como analistas de sistemas. de alguma maneira subjetivo. da abordagem editorial.

sobre diferentes assuntos. A inserção de várias legendas. profissionais de marketing e outros profissionais. passando por etapas intermediárias. 97 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Todos os direitos reservados. Facilitar o planejamento das próximas estapas do projeto. para organizar o ritmo da apresentação. cuja atenção precisa se dividir entre textos e assuntos de diferentes ordens de prioridade. para a sua avaliação. Aplicação de legendas nos diagramas Se for necessário abordar os mesmos assuntos nas legendas das wireframes em todas as páginas. animações. . Permitir a compreensão da estrutura pelos stakeholders do projeto. Detalhar as especificações para o desenvolvimento. dispersa o leitor. incluindo os aplicativos dinâmicos ("rich media applications"). a cada página se descreve (1) o conteúdo na área central e (2) uma nova animação. A aplicação de legendas nos diagramas sobre as funcionalidades de aplicativos ou os movimentos de animações ajuda o cliente a compreender melhor os componentes. a partir da visão mais clara do produto. Uma legenda por slide conduz melhor a ordem do encadeamento dos assuntos. na mesma tela. de forma que fiquem previsíveis.interface. Permitir a percepção de como as informações se relacionam e como a interface funciona. Se. redatores e editores. as ações e os movimentos do usuário e respostas dos sistemas do início até o final. nesta etapa do projeto em que as ideias ainda não têm forma definida. a ordem das legendas deve ser sempre (1) e (2). deve-se colocá-los na mesma ordem. por exemplo.

Em outros casos. podem precisar de um acabamento visual um pouco mais elaborado que os fios e as listas de links. . para que wireframes sejam testados por representantes dos usuários finais. uma descrição das ações que serão realizadas na tela e instruções sobre a funcionalidade da interface para os desenvolvedores. para ficar mais amigáveis. Todos os direitos reservados.As legendas podem ser usadas também em seqüência para orientar a ordem de um processo. o nome e o número da tela e. Ajudar a prevenir problemas que podem aparecer depois da inserção do conteúdo nas páginas. para consulta). wireframes servem como registros que devem ser corrigidos. Seus arquivos devem incluir a data de atualização. É comum. Alguns projetos permitem que. a realização de protótipos interativos que funcionam para testes preliminares de usabilidade e da 98 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Um usuário de teste pode não entender direito porque deve dar palpite sobre o conteúdo e não sobre o layout. se acrescente o conteúdo gráfico à interface. depois de ajustado e aperfeiçoado o modelo de informações. Por exemplo. Textos neutros como "Lorem ipsum" devem ser substituídos por frases indicativas do conteúdo que será publicado. a compra de um produto pode ser descrita passo a passo com legendas que apareçam sucessivamente na página. mas não sobre as suas cores. wireframes com indicações de cores. sobre o tamanho das fontes. como "Área dedicada às associações de moradores da cidade X". Ao longo do projeto. a partir da elaboração de wireframes. Textos sobre produtos devem ser ainda mais detalhados. até que o processo seja inteiramente descrito. se necessário. tipologias e imagens podem ajudar muito a criar um ambiente mais compreensível e produtivo. Neste caso. pois são especialmente importantes nas compras online. testados por futuros usuários e aperfeiçoados (as versões iniciais precisam ser mantidas em arquivo.

Todos os direitos reservados. 99 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. . que complementam este desenvolvimento conceitual.funcionalidade da interface.

James. Todos os direitos reservados. . 2009. 100 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Bookam. Fundamentos da Navegação Web.Referência KALBACH.

Todos os direitos reservados. .Disciplina VII: Design Instrucional de Interfaces e Navegação Web Módulo VII Navegação e Busca : Contextos Especiais de Navegação Objetivos do Módulo Explanar sobre a navegação e busca na web e seus conceitos especiais. Conteúdos abordados Integração de navegação e busca A navegação anterior e posterior a uma busca de informação A interface de navegação 101 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional.

por outro lado. Você pode incluir opções. uma busca coordena uma busca por palavras-chave em páginas que contêm o termo ou os termos. permite que as pessoas percorram um site até o conteúdo desejado. ou você pode solicitar termos que auxiliem a formulação de uma consulta. Escopo de busca Alguns formulários de busca incluem uma opção de escopo que permite às pessoas determinarem um foco mais restrito para a busca antes que cliquem no botão de buscar. refletindo a navegação principal. de forma a limitar a faixa de conteúdo buscado. . Os visitantes escolhem uma categoria a partir do menu. Frequentemente um menu drop-down contém as áreas-chave de conteúdo do site. permitindo aos visitantes trocarem de estratégia quando necessário. Busca pré-determinadas combinam navegação e busca de forma que clicar em um link na verdade roda uma busca em background. Sites com áreas de conteúdo distintas ou com bastante conteúdo são os que mais se beneficiam da habilidade de ajustar o escopo de uma busca. fornecendo uma importante visão geral de um site e ajudando as pessoas a determinarem relevância. Todos os direitos reservados. iniciando com o formulário de busca propriamente dito. tais como menus de escopos e busca e Word wheels para deixar as pessoas focarem no conteúdo-alvo e em resultados pré-filtrados. A navegação. A chave é fornecer tanto opções de navegação quanto de busca. Navegação antes da busca Existem muitas maneiras de interagir os mecanismos de navegação no processo de busca. 102 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional.Integração de navegação e busca A busca é considerada uma alternativa à navegação. Basicamente.

Todos os direitos reservados. as buscas pré. e assim por diante. Apagar um caractere normalmente volta na lista para o ponto de comparação apropriado.determinadas são particularmente úteis ao apontar para conteúdo que não pertence ao site.lycos. 103 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. digite N. você pode selecionar um termo de busca do menu de Word Wheel. Ela dinamicamente casa com os caracteres informados pelo usuário e rapidamente mostra a parte apropriada dessa lista. . Por exemplo. Os mecanismos de busca frequentemente não perdoam erros de digitação. e uma Word Wheel mostraria as primeira cinco ou dez palavras começando com NA. formas alternativas de uma palavra e sinônimos. Você usualmente pode reconhecer que o link é uma busca determinada pela URL. um link para uma busca prédeterminada para o termo "web navigation" no mecanismo de busca Lycos seria parecido com isso: HTTP://search. Apesar da busca por variações de palavras poder ajudar. Clicar no link automaticamente conduz esta busca e retorna os resultados. a qual conterá os termos de busca como parâmetros em uma styring. A qualquer hora. mesmo os melhores algoritmos de busca não podem acomodar todas as variações da linguagem natural. Por exemplo. tais como "encontre mais recursos". Buscas pré-determinadas As buscas pré-determinadas são links.com/?query=web+navigation£y=0 Frequentemente efetuando ligações entre sites.Word wheels Uma Word weels mostra uma pequena parte de uma lista de termos já embutida no sistema de busca. que são programados para conter uma busca.

Técnicas de navegação. mostrando uma lista de itens mais gerenciável. . mas também determina os rótulos das categorias. agrupamento e sugestões de busca. Tecnicamente. permitindo às pessoas navegarem para mais ocorrências sobre um dado assunto que combina com os seus interesses. bem como o tópico de cada página.Navegação após a busca Frequentemente as pessoas tem uma palavra ou frase em mente e apenas querem buscar o mais rápido possível sem formular uma consulta. apesar de os termos serem frequentemente usados como sinônimos. Todos os direitos reservados. Clicar em um subconjunto então filtra os resultados. entretanto. as categorias são automaticamente derivadas de um conjunto de resultados. Clusterização e agrupamento. Com a Clusterização. podem ajudar. elas subitamente descobrem que precisam de maneiras para refinar a busca. algumas vezes mostrando uma lista de subconjuntos ao lado ou acima da página como um tipo de navegação. Dois métodos comuns para produzir esses subconjuntos são a clusterização e o agrupamento. Links e tópicos Geralmente resultados de busca contém detalhes sobre cada página encontrada. Navegar nos resultados de busca pode ajudar bastante na redução e no foco da busca. 104 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. clicar em um deles leva a outras páginas para essa categoria. tais como tópicos de links. clustering. Os mecanismos de busca mais sofisticados agrupam automaticamente resultados similares por tópicos em subconjuntos. Um algoritmo não apenas encontra subconjuntos (clusters) de itens similares. Se os tópicos de cada página são ligados por links. Você provavelmente já viu muitas dessas técnicas sem perceber. Ao serem confrontadas com os resultados. existe uma diferença entre essas abordagens.

As facetas são dimensões ou propriedades mutuamente exclusivas do objeto que elas descrevem. A interface de navegação facetada. Navegação facetada As técnicas mencionadas até agora representam abordagens individuais para integrar navegação e busca que você pode adicionar a um site web existente. .Dados que esses rótulos são dinâmicos. os termos já existem em algum tipo de índice ou taxonomia de termos. um sistema desenvolvido por pesquisadores da Universidade da Califórnia. em tempo real. a clusterização gera. Com o agrupamento. Os sistemas ou determina o tópico da página e aplica um rótulo existente. Em outras palavras. Essa interface baseia-se em facetas e classificação facetada como um mecanismo de estruturar informação. para navegar grandes quantidades de informação. eles podem mudar de uma busca para outra. mas os termos propriamente ditos sempre aparecerão na mesma forma padronizada. por outro lado. 105 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Isso permite qualquer número de maneiras de abordar os objetos em uma coleção. Todos os direitos reservados. As categorias facetadas podem ser vistas como repositórios independentes de valores. Facetas Nada mais é que uma categoria. Berkeley. Mas é a disposição das categorias que é importante na classificação facetada. oferece uma integração mais holística entre busca e navegação. O sistema então extrai esses metadados como categorias navegáveis.uma lista de termos navegáveis. ou a página já contem informações de categoria associadas a ela. mesmo para a mesma consulta submetida posteriormente. A lista de resultados mostrada variará de uma busca para outra.

. o que suporta diferentes formas de atingir o mesmo objetivo. os visitantes podem desmarcar qualquer valor ou combinação de valores de uma faceta. O projeto flamenco busca criar uma interface que todos possam usar. Algumas vantagens da interface de navegação facetada incluem: Ordem de seleção As pessoas podem selecionar os valores em qualquer ordem. Todos os direitos reservados. 106 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Desmarcar ou excluir valores Dado que as facetas são mutuamente exclusivas. Mas é difícil expor o poder das facetas e navegar nelas em uma interface de uma maneira que não sobrecarregue e confunda o usuário web médio. navegá-las permite recombinações de categorias. e as pessoas navegam através das categorias. Grandes quantidades de informação são decompostas em conjuntos gerenciáveis em apenas alguns cliques. Navegar nas categorias sempre produz resultados Isso é atingido ao utilizar as subcategorias para qualquer categoria selecionada. Se estiverem insatisfeitos com os resultados atuais. Escolhas não relevantes são ocultadas. desta forma expandindo a lista de resultados.O projeto flamenco As facetas são potencialmente muito poderosas.

Existem três estágios principais no processo de navegação: a página inicial. a página de resultados e a página de item:  Página inicial: Oferece uma visão geral codificada por cores de todas as facetas. Os resultados ocupam a maior parte da página à direita. Essa forma de visualização encoraja a exploração a partir de qualquer ponto de partida. Um campo para busca por palavras-chave também está disponível no canto superior esquerdo. O número de itens classificados por esse valor aparece entre parênteses após o rótulo. Ela também familiariza as pessoas com o escopo da coleção de imagens. a página de resultado que segue apresenta uma disposição similar a uma galeria de links para imagens da coleção. Todos os direitos reservados. são mostradas miniaturas de imagens. 107 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. . Fornecer tais informações sobre o tamanho e o escopo do conjunto resultante ajuda as pessoas a tomarem decisões de navegação. Indicação de magnitude Cada um dos valores de categoria é seguido do número de itens (entre parênteses) na coleção para aquele valor. Para essa coleção em particular. Os valores de nível mais alto dentro de cada uma delas são representados como links. o qual fornece a liberdade de escolher entre buscar e navegar. De qualquer forma.Experiência baseada na web O estilo de interação básico da interface facetada espelha fortemente a navegação web: clicar em um link gera uma transição para uma nova página. Valores e Caminho da consulta.  Resultados: A página de resultados contem três componentes principais: Resultados.

Ao longo do caminho a navegação disponível é recontextualizada para o conjunto local de resultados. A página de item fornece uma imagem maior e informações potencialmente mais detalhadas. Os usuários podem selecionar um ou mais desses termos e usá-los como base para uma nova busca com o botão Find Similar Items. . seguida do valor selecionado para aquela faceta. enquanto mostra ainda o caminho percorrido para chegar ao item. A página de resultados permite às pessoas navegarem e explorarem ainda mais. Valores: Os valores das facetas que se aplicam apenas à lista de resultados atual são mostrados à esquerda. todos os valores usados para classificar o item são mostrados à direita em uma visualização em forma de árvore que se expande para muitos níveis. a transição da página inicial para a página de resultados em termos de layout é grande. Na página de item.  Caminho da consulta: O caminho percorrido para produzir um dado conjunto de resultados aparece no topo. mas aparentemente natural. Clicar em um link reduz o escopo do conjunto de resultados e atualiza os valores disponíveis. 108 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional.  Página de item: As pessoas podem escolher visualizar um único item na coleção a partir da página de resultados. caso existirem. Todos os direitos reservados. De um modo geral. Elas podem criar seus próprios caminhos para a informação. A faceta é indicada.

Todos os direitos reservados.Referência KALBACH. James. Fundamentos da Navegação Web. Bookam. 109 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. 2009. .

Todos os direitos reservados. . Conteúdos abordados Etiquetagem Classificação social 110 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional.Disciplina VII: Design Instrucional de Interfaces e Navegação Web Módulo VIII Navegação e Sistemas Sociais de Etiquetagem Objetivos do Módulo Explicar os sistemas sociais de etiquetagem que existem.

Em outras palavras se você precisa decidir como chamar um computador portátil e pequeno. O uso de linguagem natural para descrever recursos é uma das virtudes dos sistemas de etiquetagem. lap-top ou mesmo note-book. mesmo se o seu vizinho usar os termos laptop e computadores portáteis. ibook ou lap-top para uma página web. Todos os direitos reservados. como acontece com os vocabulários controlados. permitindo 111 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. com etiquetagem. Se você criar uma tag chamada notebook. Isso significa que o dado recurso pode ter qualquer número de tags. você é livre para fazê-lo. De um modo geral. uma foto ou um vídeo . tais como laptop. e quando um novo item precisa ser adicionado. Os termos usados para etiquetar um recurso com uma tag podem ser bastante informais e pessoais. Adicionalmente. isso representa uma bordagem descendente (topdown): o esquema de classificação já está posto em prática. Em sistemas de etiquetagem. você aplica uma palavra-chave para um recurso. um vocabulário controlado pode direcioná-lo para usar a palavra "notebook" e não outros termos.tal como uma página. normalmente por um profissional treinado. ao invés de colocar o recurso em uma categoria. .Navegando em classificações sociais Etiquetagem A classificação tradicional de livros depende de esquemas de classificação padronizados chamados de vocabulários controlados. e os sistemas de etiquetagem não possuem uma estrutura pré-definida. é atribuído a ele um tópico. Busca dar clareza à linguagem ao mapear variantes e termos relacionados para um termo preferido. qualquer usuário pode atribuir livremente termos escolhidos a um recurso ou objeto na web . A etiquetagem oferece uma alternativa ao uso de esquemas de vocabulários controlados com uma abordagem ascendente ( bottom-up) de classificação.de forma a ser capaz de encontrá-lo novamente.

. minhas coisas. e cada um é valioso por diferentes razões. mas eles não substituem amplamente os tipos tradicionais de classificação e organização. sistemas de etiquetagem são apropriados. o que pode resultar em tags de um único usos que aparecem apenas uma vez. Sistemas de etiquetagem representam uma maneira de descrever recursos e permitir que as pessoas naveguem até seus recursos. Não existe uma autoridade para criar categorias padronizadas. encontrar alguns poucos recursos ao navegar via tags pode ser bom o suficiente na maioria dos casos. Quando descobertas acidentais são aceitáveis. Tais tags não contribuem para o uso mais amplo de um sistema de etiquetagem. E mais.múltiplos caminhos navegáveis através dos recursos etiquetados. 112 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. tais como uma página web ou uma foto. Isso potencialmente resolve o problema do vocabulário. As pessoas também usam tags que não possuem significado para uma comunidade mais ampla. e ninguém mantém um esquema de classificação central. por exemplo: meu cachorro. Mas sistemas de etiquetagem frequentemente geram o que é chamado de metaruído em um esquema de classificação. mas todos eles possuem elementos em comum: Recursos Os objetos sendo etiquetados com tags. Todos os direitos reservados. Cada um tem o seu propósito e uso. mas efetivamente rastreiam recursos para um dado usuário ou grupo. Isso inclui coisas como tags com erros de digitação e tags únicas compostas. Sistemas de Etiquetagem Existem muitos tipos de sistemas de etiquetagem.

Isso é tratado a partir da fonte do objeto a ser etiquetado. não existem metadados descritivos pré-existentes e o sistema não pode identificar o recurso até você explicá-lo em palavras. No caso da página web.Usuários Os membros de um sistema social de etiquetagem que aplica tags a recursos. por exemplo. A origem do recurso que será etiquetado afetará quem o marcará e como ele será etiquetado com tags. tais como páginas de favoritos. tais como as descrições de um artista ou álbum no site. o sistema pode reconhecer o recurso por sua URL e apontar para outras tags que as pessoas podem já ter usado. Praticamente todo recurso na web pode ser etiquetado com tags. Recursos abertos existentes na web. O texto e o título da página podem também ser usados para sugerir tags. Os recursos a serem etiquetados podem ser: Fornecidos pelos participantes. é diferente de aplicar tags em uma foto ou vídeo que você envia ao servidor. Todos os direitos reservados. Uma importante distinção é como as tags são criadas. Tags Os termos usados para descrever um recurso. Aplicar tags a uma página web pública. Fornecidos pelo site web ou pelo sistema de tagging. Note também que o processo de etiquetagem é necessariamente diferente segundo o recurso em questão. mantidas e usadas. tais como fotos enviadas ao Flickr ou vídeos no youtube. . 113 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. No caso de uma foto ou vídeo.

As tags também podem ser privadas. por exemplo. mas elas nunca são vistas por outras pessoas. ou públicas. 2009. de forma que apenas o usuário pode vêlas e usá-las. . 114 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Fundamentos da Navegação Web. de forma que o grupo inteiro pode usá-las. Referência KALBACH. Todos os direitos reservados. O gmail. Bookam. permite que você adicione tags a seus emails. James. Alguns serviços permitem ao usuários decidirem se as tags devem privadas ou públicas.

Sign up to vote on this title
UsefulNot useful