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.

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. nesse contexto a navegação web pode ser considerada um meio para um fim.O processo de busca direcionada a objetivos e localização de informação hiper-ligada. determinar a importância e a relevância das páginas e do conteúdo. fica a cargo do design de navegação. e não existe o conceito de uma página principal tradicional. Todos os links são embutidos no texto. Por isso é importante entender as diferentes funções que a navegação web possui e sua potencialidade: 1. Grande parte das pessoas visitam um site para realizar pesquisas. Esse processo envolve uma analise ao estabelecer relacionamentos que possuam sentido entre as páginas. Todos os direitos reservados. navegando na web. . A navegação fornece acesso à informação A maioria dos indivíduos sabe que a navegação fornece acesso a informação. 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. Conceitualmente com a aparência da figura a seguir: 4 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Eles não são isolados de maneira a servir como um esquema de navegação. porém meios alternativos de acesso também existem. O processo de criação e organização dos links. objetivando que o leito vivencie a informação contida ali. Todos os links. ler. buscas respostas dentre outros.

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

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

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

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

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

. cores. Ela cria uma coerência geral. ou o assunto do site. porém isso não implica que a navegação mostre o escopo do site em termos de quantidade de páginas. o conhecimento dos tópicos principais de um site podem afetar a abordagem que as pessoas usam para encontrar informações neste site. A posição de uma marca afeta essencialmente cada aspecto de um produto ou serviço. Todos os direitos reservados. Por último uma marca é uma promessa ao 10 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. 3. dos assuntos e conteúdos do site e cria expectativas. etc. incluindo a navegação web. Dessa forma. A navegação reflete a marca Uma marca é freqüentemente pensada em termos de sua manifestação visual como: logotipo. 4. Ao invés disso. 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. ela reflete a profundidade do assunto de um site. fontes.auxiliar as pessoas a navegarem. ajudam as pessoas a identificarem-se com sua empresa e seus produtos. estes elementos comumente referidos como a roupa da empresa. significativa. Alguns sites estampam a localização com uma notação "Você está aqui". 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.

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

O design de navegação web não pode ser feito isoladamente. é correto firmar que suas implicações financeiras são potencialmente de amplo alcance. muitos fatores influenciam o design de navegação e. por sua vez. Todos os direitos reservados. a navegação afeta muitos aspectos do site. relançamento e assim por diante. O primeiro passo no design de navegação é entender o propósito e a motivação para o site web como num todo. assim como no contexto de negócios de uma maneira mais ampla. Quem usará o site? Esta talvez seja a pergunta mais importante a ser feita. 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. esta questão é frequentemente desprezada. Ao considerar um design de navegação. 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. . As marcas começam a se desvalorizar com uma navegação pobre.O custo do suporte aumenta com a navegação pobre. Tal 12 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Adicionalmente. é preciso que se faça algumas perguntas fundamentais: Por que está construindo o site? Apesar de aparentemente óbvia. Pesquisa de usuários é o processo de investigar sistematicamente os visitantes de um dado site.

uma habilidade rara. É uma das partes mais difíceis do design web. particularmente em grandes sites web. Todos os direitos reservados. seu arranjo na página. . Assim o designer deve entender o conteúdo e como ele deve estar organizado. Fornecer acesso a páginas web em sites ricos em informação é surpreendentemente complexo. um misto de arte e ciência. 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. 13 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Ela tem também um imenso e direto impacto na navegação. forma e função.pesquisa não só fornece uma ideia dos tipos de pessoas que visitam o site. isso é mais do que apenas mudanças cosméticas. Aspectos tais como: a ordem das opções. 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. O design de navegação web é. intuição e fatos. Fique atento!!! A navegação é problemática. o tipo de fonte e tamanho usado e as cores usadas. no final. podem ser elementos críticos. Entretanto. Eles podem construir ou destruir o sistema de navegação.

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

porém a mesma torna-se rapidamente mal sucedidas para sites que tratam de vastas quantidades de informação ou interações complexas. a quantidade e o tipo de conteúdos disponíveis não deveria ser o único fator determinando as prioridades de navegação. podem refletir os departamentos de uma empresa. a abordagem de design centrado no conteúdo é apenas natural e em algum nível constantemente presente. Neste sentido. Design centrado na empresa O site web é projetado em torno da estrutura e necessidades dos stakeholders na empresa ou organização. todos os PDFs em outro. Design centrado no conteúdo Essa perspectiva é similar ao design centrado na empresa. 15 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Porém essa perspectiva geralmente corre o risco de os usuários ficarem confusos. focadas em design que sejam capazes de produzir sites bem sucedidos. As principais categorias de um site.para empresas pequenas. Por exemplo. . por exemplo. Todos os direitos reservados. mas um corpo de informação existente é a base para estruturar a navegação. perdidos ou irem para outro lugar. Entretanto. 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. imagens em outro e assim por diante. 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.

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

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

. Conteúdos abordados Navegação por passos. abas e menus verticais Mecanismos dinâmicos e visualização web 18 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. trilhas e migalhas de pão Navegação em árvore. paginação. diretórios e nuvens de tags Barras de navegação. mapas. Todos os direitos reservados.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.

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

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

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

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

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.

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

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

para amplificar a cognição. A visualização de informação não visa substituir as representações textuais de informação. Apesar de interessante de ver e manipular. A representação visual e o texto plano são complementares. barras e menus. Árvores estrela Também chamadas de layout de árvore radial. A visualização de informação trata de manipular e navegar pela informação. Mais importante essas representações são interativas. Todos os direitos reservados. Clicar em qualquer um dos termos faz com que toda a visualização passe a ter esse termo como centro. As categorias a partir daquela selecionada são então aumentadas e mais fáceis de serem clicadas. uma árvore estrela representa relacionamentos hierárquicos em uma visualização composta de um centro (hub) e seus eixos. existe uma categoria de mecanismos que utiliza visualização de informações. Uma árvore estrela pode ser uma alternativa para a navegação por árvore e mesmo para um mapa do site. 28 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. não trata apenas de como essa informação é mostrada. 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. .Visualizando a navegação Além das tradicionais abas. Grandes quantidades de dados podem aparecer dentro de um espaço relativamente compacto. suportadas por computador e interativas. 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.

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

Clicar nesse botão é talvez uma das ações mais frequentemente realizadas enquanto navegamos na web. . mas ainda é uma maneira de avançar em um dado caminho. 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. 30 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Botão avançar: O botão avançar não é nem de perto tão usado quanto o botão voltar. Todos os direitos reservados.Botão voltar: O controle de navegação mais óbvio e relevante é o botão voltar.

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

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 navegacionais. associativa e utilitária. Conteúdos abordados Navegação estrutural. . páginas de conteúdo e páginas funcionais. Desenvolvimento de rótulos web. problemática e qualificação. Todos os direitos reservados. 32 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional.

tal como conduzir uma busca ou verificar os emails. As pessoas reconhecem diferentes tipos de página rapidamente. a partir do contexto do tipo da página no qual ela aparece. essas divisões são frequentemente desfocadas. Páginas funcionais: permitem às pessoas realizarem uma tarefa. 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. Todos os direitos reservados. Mas links relacionados em uma página mais profunda no site podem apontar para outros sites ou para outros formatos de conteúdo. Cada página em seu site tem um propósito. 33 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. formulários de submissão e aplicações. . Por exemplo. uma razão de ser. 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. As pessoas entendem a navegação. páginas de aterrissagem e galerias. isso alimenta expectativas para a navegação e afeta como as pessoas interagem com o site. os visitantes podem esperar que a navegação contextual na página principal leve-os a páginas dentro do site. exemplos incluem artigos e páginas de produtos. 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á. exemplos incluem a página principal. Um dado esquema navegacional pode ter dois diferentes propósitos em diferentes tipos de páginas. O propósito da página deve ser imediatamente claro para os visitantes. exemplos incluem páginas de busca. em parte.Páginas navegacionais. 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. Na prática.

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

Dependendo dos termos da busca. A página de galerias contém informações de compra críticas e permitem aos visitantes comparar produtos. páginas de aterrissagem fornecem um sumário do conteúdo de uma dada seção. Eles então vão até a página do produto para obter informações mais detalhadas. Ao contrario disso pode-se apenas levar os visitantes diretamente para as páginas que correspondem às opções do menu. de forma a confirmar a decisão. Páginas de galerias: As galerias são similares a páginas de aterrissagem. De modo similar como uma página principal fornece uma visão de um site inteiro. as páginas de aterrissagem podem oferecer tanto orientação local como global. mas são dinamicamente criadas baseadas em palavras-chave informadas pelo usuário. páginas de visão geral ou páginas de departamentos. 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. 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. 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. 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. . pode-se ser tentado a omitir as páginas de aterrissagem completamente. Com mecanismos tais como menus dinâmicos.Páginas de aterrissagem: também chamadas de páginas iniciais de subseção. Fornecem uma visão geral das principais categorias de um site. Os compradores podem até mesmo decidir comprar apenas a partir de uma página de galeria. Páginas de resultados de busca Páginas de resultados de busca lembram as páginas de galeria. Todos os direitos reservados. páginas de categorias.

Páginas de conteúdo são a moeda fundamental na web. as páginas de conteúdo são no fim das contas aquilo que as pessoas estão procurando: textos. Com isso. currículos pessoais. notícias. Páginas de produto As páginas de produto são obviamente críticas para sites de comércio eletrônico. artigos. 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.Página de conteúdo Em sites web ricos em conteúdo. o foco das páginas e conteúdo deve ser o conteúdo. Todos os direitos reservados. blogs. histórico de companhias e informações de como fazer algo são apenas alguns exemplos. Existem muitos elementos típicos para páginas de produto: Fotos de produto Descrições do produto Detalhes adicionais Produtos relacionados Adicionalmente. uma navegação desnecessária e muitos gráficos sobrecarregam uma página. Muito frequentemente. . histórias.

essa busca oferece mais controle que uma busca simples. Da mesma forma que acontece com as páginas de busca. entretanto.Páginas funcionais As páginas funcionais permitem às pessoas completarem uma tarefa online. 37 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. e consequentemente uma página separada é normalmente necessária. uma busca mais detalhada é necessária. Algumas vezes. . ajuda e outras explicações. 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. Tal como as páginas de conteúdo. os usuários precisam de foco para completar a tarefa que têm em mãos. Isso pode ser feito para criar uma conta ou perfil online. Como o nome implica. tal como conduzir uma busca ou enviar um email. ou ainda que limpem o formulário. Todos os direitos reservados. para submeter o currículo a uma vaga de emprego. Uma interface de busca avançada requer mais espaço. elas são frequentemente a página de destino que satisfaz uma necessidade do usuário. Podem existir links para dicas de busca. Os formulários permitem que ocorram transações na web. a navegação associativa em formulários é desencorajada. tipicamente chamada de busca avançada. ou links que mostrem ou ocultem opções. A navegação em um formulário de busca é normalmente mínima. por exemplo. Em primeiro lugar. Formulários de submissão Os formulários permitem às pessoas submeterem informações. ou para reservar um carro. 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 então as pessoas precisam usar a barra de rolagem. Ler documentos longos offline é menos problemático e preferido pela maioria. existe uma ampla faixa de tamanhos de navegadores e eles variam de acordo com a resolução dos monitores. menos delas existem. gerenciam projetos e assim por diante. mas delas existem. Isso requererá mais cliques e mais carregamentos de páginas. muitos fatores influenciam. Quanto maiores são as páginas. as aplicações online se tornam mais comuns. É aceitável fornecer páginas longas de texto se as pessoas irão imprimi-las de qualquer forma mesmo. O conteúdo pode não ter o mesmo impacto ou significado quando ele é quebrado em múltiplas páginas menores.Aplicações web São chamadas de aplicações web uma faixa de páginas que contém características e funcionalidades interativas. Todos os direitos reservados. enviar mais informações com 38 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Para textos mais longos. editam planilhas. Pode não ser eficiente forçar as pessoas a baixar as páginas por causa de pequenas porções de conteúdo. 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. As pessoas não gostam de ler online. À medida que as tecnologias web tornam-se mais e mais maduras. . é mais seguro assumir que muitas pessoas não irão lê-lo na tela do computador. Na web. 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. Ao invés disso. 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. Não existe uma recomendação única para o tamanho de página.

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

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

o modo de como referir-se aos visitantes também é importante. por isso. É importante entender o tom apropriado que certa audiência alvo espera. O tom de voz também suporta a marca. . por exemplo. Evite abreviações Abreviações poupam espaço. Alguns visitantes podem até mesmo não entender algumas abreviações. Se as gírias ou termos populares são usados. 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. isso pode refletir nos valores da organização.É imprescindível fornecer contexto ou outras evidências daquilo que o rótulo deve expressar. Todos os direitos reservados. 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. Não são todas as pessoas que sabem o que as abreviações FAQ. PDF e RSS significam. Esses e outros rótulos similares frequentemente 41 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. O primeiro é formal e direcionado aos negócios. por exemplo. Se for inevitável utilizar abreviações é importante ter certeza que os visitantes irão entendê-las. Rótulos descritivos As opções de navegação tais como "informação" ou "Detalhes" são geralmente desprovidas de significado. o outro é jovem e moderno. 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.

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

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

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

Segundo. 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. 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. a estrutura de diretórios das URLs pode mostrar a localização de uma página dentro de um site. ou algumas pessoas tentam adivinhar o endereço. Adicionalmente. se os títulos do navegador contiverem informações de tópicos. Algumas vezes elas tem o endereço escrito. normalmente 45 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Impressão: ao imprimir. Orientação: as URLs podem mostrar localização. Ser capaz de olhar rapidamente para uma URL e confirmar onde a localização. Todos os direitos reservados. 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. O rótulo mostrado na aba é normalmente o título do navegador para uma dada página. isso também aparece nos resultados de busca. URLs simples vão indicar a categoria a qual uma página pertence. ajuda na orientação.Navegação em abas: navegadores populares. tornando uma parte importando do documento impresso. . Primeiro e o mais importante. outras vezes elas fazem isso de cabeça. elas geralmente refletem o nome da companhia ou do dono do site. o título do navegador pode aparecer no topo da página impressa. oferecem navegação em abas. Essa pode ser a única informação que a pessoa tem para determinar se a página se encaixa nas suas necessidades de busca. tal como o Firefox.

000 páginas. Isso fornece pistas valiosas sobre a página seguinte e pode ajudar na navegação.de uma maneira que está em sincronia com os mecanismos de navegação principal. Apagar diretórios e parâmetros do final da URL. 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. Títulos de páginas É comum ter um título em cada página dentro da área principal do conteúdo. Eles devem fazer sentido tanto em relação aos rótulos dos links de navegação quanto aos títulos de página. é mais eficiente estabelecer regras e padrões de rotulagem. Ao invés disso. Isso normalmente é feito através do título da página. Todos os direitos reservados. por exemplo. Se alguém clica em um link para histórico da companhia. a página seguinte deve refletir e confirmar que essa é a página do histórico da companhia. 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. Pode ser muito difícil. Uma hierarquia de cabeçalhos deve ser clara. Sistemas de gerenciamento de conteúdo são normalmente configurados para funcionar com tais regras. A coordenação dos rótulos de navegação e dos títulos da página é importante no processo de reorientação. 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. . por exemplo. os títulos de páginas e outros elementos em cada página para um site com 10. Dentro de uma página podem existir cabeçalhos de páginas também. pode trazer as pessoas de volta à página principal ou a uma página de aterrissagem. Por exemplo.

. A persuasão aparece em dois níveis: macro e micro. títulos de navegador URls devessem casar uns com os outros. Traduzindo rótulos Significa que o mesmo layout de página aparece em diferentes línguas. 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 micro nível trata-se de links de navegação. Redundância. é um interesse primário. Entretanto esquemas flexíveis podem produzir resultados que parecem mecânicos. Fornecer pistas sobre os benefícios para o usuário o ajuda. 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. Eles não refletem as sutilezas de uma experiência de informação desejada. Eles podem precisar variar para evitar repetições escritas de rótulos. A chamada para a ação torna-se persuadir para a ação. O objetivo é instigar ou encorajar as pessoas a fazerem algo. Rótulos persuasivos Refere-se a encorajar as pessoas a tomarem certa ação ou acreditarem em algo. Os donos de sites geralmente querem motivar os visitantes a verem algum conteúdo específico ou realizar alguma ação. Embora os links e títulos de páginas. O macro nível é tentar fazer com que as pessoas realizem alguma ação. Todos os direitos reservados. No micro nível os rótulos são críticos no processo. 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. por exemplo.

Quando isso não for possível. Se o seu esquema de navegação depende de uma parte específica da fala. alguns mais do que em outros. Adicionalmente. os rótulos traduzidos podem não se encaixar.O tamanho do rótulo: palavras em uma língua podem requerer um espaço significativamente maior do que em outras. As formas das palavras podem mudar de acordo com preposições ou funções em uma sentença. Elementos de navegação embarcados dentro de uma sentença podem não resultar na mesma ordem de links desejada quando traduzidos. 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. Como regra geral. Se a flexibilidade para vários tamanhos de rótulos não é fornecida na interface. o Algumas construções gramaticais e alguns dispositivos não existem em outras línguas. Todos os mecanismos de navegação têm limites. Os sistemas de rotulagem devem levar isso em conta. algumas linguagens possuem palavras compostas que não se separam e que facilmente ultrapassam o tamanho determinado da tela. Todos os direitos reservados. . tenha certeza que isso faz sentido em outras línguas. 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. 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. o Algumas línguas associam gênero às palavras. 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. A língua alemã por exemplo. o As regras de emprego de maiúsculas e minúsculas são diferentes entre as línguas. 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.

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

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

Páginas navegacionais. páginas de conteúdo e páginas funcionais. Desenvolvimento de rótulos web. problemática e qualificação. Conteúdos abordados Navegação estrutural. . associativa e utilitária.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. 51 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional.

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. Os usuários então não precisam varrer cada link em uma página. É um 52 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. . mais profunda é a estrutura. 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. 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). agrupando itens semelhantes de forma a fornecer níveis de foco. Uma tática comum no design de navegação é aglomerar as opções. A partir disso eles podem focar nos links daquela área. eles podem procurar nos cabeçalhos os componentes. De um modo geral. e quanto mais itens de navegação de uma vez. menos níveis de hierarquia. as estruturas mais amplas funcionam melhor que as mais profundas. Todos os direitos reservados. Existe um claro compromisso: quanto menos itens de navegação.

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

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

botões. Seja trocando a cor. por exemplo. Interagir com os links. 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. Além disso o feedback na navegação pode ser considerado de duas maneiras: Rollover . tais como setas. Para sites maiores. Muito útil para elementos menores. Eficiência Os caminhos para a informação devem ser eficientes. mecanismos de paginação ou nos números de um pequeno calendário. Por exemplo. Ou. Ao ler um artigo. Uma boa navegação minimiza o esforço para chegar ao conteúdo. o tamanho ou algo mais. Todos os direitos reservados. Em grandes sites ricos em informação. você pode aumentar a eficiência de diversas formas: Pontos de acesso duplicados . isso é valioso para a orientação. Mostrar a localização também ajuda se alguém é interrompido e precisa continuar sua sessão mais tarde. Cliques desnecessários acompanhados de recargas de páginas são irritantes.página atual. Busque criar links navegacionais. . 55 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Evite-os.fornece múltiplos links em uma página para o mesmo destino. 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. 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. abas e menus que você criar deve requerer um esforço mínimo.é uma técnica que destaca uma opção quando o usuário passa o mouse sobre ela. abas e ícones que sejam fáceis de ver e de clicar. 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.

Apesar de estruturas mais amplas tenderem a trabalhar melhor de uma forma geral. seja cuidadoso ao fornecer pontos de acesso duplicados e atalhos: muitas opções podem causar mais confusão que eficiência. nomes de marcas. 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.As pessoas frequentemente seguem um padrão de centro com eixos de navegação. Ao invés de ter que navegar para cima em um ramo da estrutura para descer novamente em outro. 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. tais como títulos. abreviações e rótulos muito bonitos ou espertos.Atalhos . 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. Pontos de escape . 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. Tenha em mente que ambigüidade e a amplitude de um rótulo versus sua profundidade são aspectos relacionados. . Evite jargões. Todos os direitos reservados. conforme mencionado anteriormente em nosso curso. Entretanto. O balanço ótimo para a estrutura está na clareza dos rótulos.Links associativos criam atalhos para o conteúdo. 56 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional.

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

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

Todos os direitos reservados. Sites de identidade Algumas vezes o propósito principal de um site é suportar a imagem de uma companhia. 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 parece ser apropriada para uma identidade do site.mecanismos para avançar são críticos. Alinhamento com as necessidades dos usuários O sucesso da navegação é relativo aos grupos-alvo e suas necessidades de informação. Reduza esses grupos para uns poucos tipos de usuários-chave e capture essas personas. mas uma que é ouvida frequentemente. Aqui a navegação pode até afetar o desempenho no teste. Ela permite que os visitantes explorem e interajam com várias marcas da companhia. E as necessidades de informação mudam. Apesar da interação com esse menu ser complicada a princípio. Note que também existem outras formas para obter as informações sobre as marcas. "Todo mundo que usa esse site" não é uma boa resposta. Mas identificar essas necessidades de informação não é fácil. Primeiro defina o seu grupo-alvo. Por exemplo. identifique as necessidades-chave de informação de cada grupo. esse não é o único ponto de acesso. os grupos-alvo podem ser grandes na web aberta. 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. . Segundo.

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

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

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

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

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

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

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. Os dados de uso são também valiosos para os designers web. Apresente as recomendações finais. muitas métricas importantes que são específicas do negócio também são capturadas. coletar métricas do site é um trabalho do webmaster. 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. Analise as descobertas. 4. Entretanto. capturam melhor os caminhos que as pessoas percorrem em um site.2. Conduza o teste. em contrapartida. . Tradicionalmente. Todos os direitos reservados. Organize um laboratório para a coleta e observação de dados. Ferramentas modernas de obtenção de métricas na web. Profissionais de marketing também prestam muita atenção às estatísticas em termos de vendas. Os dados são também confiáveis. o qual usa para monitorar o desempenho. 3. Adicionalmente.

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

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. Todos os direitos reservados. elementos importantes para o estudo.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. .

mas também dá aos usuários um padrão claro a ser seguido ao usar o site. Bryan e Jeffrey Eisemberg. 69 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. . As barras de doces. Ao otimizar um site para vender melhor os itens. Mesmo que não se pretenda criar um site de comércio eletrônico. 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. Promover produtos e otimizar vendas são partes normais de qualquer negócio. detalham um método para planejar sites que eles chamam de arquitetura persuasiva. eles apontam três questões críticas a serem respondidas desde o inicio. especialistas líderes em marketing online. 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. revistas e outros itens pequenos não são colocados no caixa acidentalmente. A arquitetura persuasiva desempenha um papel nesses casos também. Juntos eles representam como os visitantes tomam decisões e refletem sobre o processo de compra online.Arquitetura persuasiva e diagramas de conceito As lojas são organizadas internamente para promover a venda de produtos. 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. Estrutura do site: como as páginas são organizadas em relacionamentos entre si ou como o site é construído. 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. ainda assim há a venda de idéias e comunicação de uma mensagem.

. 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. Um conceito concebido na mesa de uma única pessoa tem poucas chances de sobrevivência. Criando um conceito de navegação O conceito é uma fusão de vários elementos. Em projetos menores isso pode ser aceitável. Mas em sites maiores e mais complexos é melhor tornar o conceito explícito. fornecendo contexto para entender a navegação como um todo. muitos dos quais foram identificados durante a fase de análise. 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. 70 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Diagramas de conceito É uma ferramenta útil para capturar um conceito de navegação.Organização da navegação: esquemas de organização agrupam opções de navegação em uma maneira lógica. ilustra graficamente os elementos idéias-chave envolvidas em um sistema de navegação. O diagrama de conceito é usado para organizar e documentar os vários elementos do site e como eles se relacionam uns com os outros. Abaixo constam as qualidades de um bom conceito: Ser fácil de lembrar. conforme estudados no módulo anterior. Isso significa que criar um conceito deve ser um exercício colaborativo. não explicitamente. 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. claro. . Satisfazer as experiências dos usuários De um modo geral criar um conceito de navegação envolve os seguintes passos: 1. Com o conceito definido de navegação. os usuários. À 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. Desenvolver um diagrama de conceito mostrando os relacionamentos entre as funcionalidades e o conteúdo do site. É o esqueleto do site que estará preenchendo com os layouts de páginas e de designs finais. 2.Ser envolvente. incluindo: Estruturas lineares 71 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Revisar as informações coletadas durante a Análise. é preciso manter os diferentes tipos de estruturas em mente. Estar alinhado com os objetivos dos stakeholders Satisfazer as experiências dos usuários. a marca. os objetivos e. reunir os tomadores de decisão de uma mesma sala e utilizar o gênero e as metáforas para guiar o seu conceito. os concorrentes. Enquanto um conceito reflete um modelo abstrato do site. Todos os direitos reservados. a estrutura captura a disposição específica das páginas e do conteúdo de maneira concreta. pode-se considerar a estrutura da informação no site. Realizar sessões de brainstorming e explorar diferentes modelos possíveis de navegação. 4. Baseadas nas pessoas e nos cenários criados. cobrindo a navegação de nível macro e micro e futuras decisões de design. incluindo a visão. 3.

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

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

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

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

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

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

2006). . E a falta de pistas visuais. 23.1. dificulta a utilização.normalmente os textos aparecem primeiro. Uma interface saturada.a impressão geral é composta de diversos fragmentos que compõem o layout do conjunto. Online. com sinais pouco visíveis. O usuário já tem uma expectativa prévia do que procura em relação à página que seleciona. 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 . o que influencia a sua primeira impressão . (Newsletter 81 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional.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. Além de criar uma empatia imediata. 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). O layout influencia também como o visitante do site se posiciona em relação ao seu conteúdo. demanda mais tempo de aprendizado de uso e maior esforço para a localização das informações. Todos os direitos reservados. com muitas instruções. sinais. o layout influencia o grau de facilidade de encontrar os fragmentos de informações de maneira intuitiva. Um layout agradável inspira confiança e estimula a navegação em diferentes páginas. Alertbox Announcement List. 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. não há página que carregue instantaneamente. logotipos difíceis de localizar ou com funcionalidades difíceis de decifrar. De qualquer forma.

O layout da interface reflete um conjunto de soluções de diversas naturezas. web design é uma das etapas do projeto. Devido a esta diversidade de fatores. orientando assim a ação do usuário. que devem estar contempladas no resultado final. 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. 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 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. a equipe de design para a web costuma ter formação heterogênea e é escalada de acordo com a natureza do projeto. Estas soluções levam em conta fatores como uso experiência. Todos os direitos reservados. que inclui uma extensa cadeia de processos de conhecimento. relação direta com os objetivos do site. Mas na verdade. que não permita a contratação de profissionais especializados. aderência ao conceito editorial e necessidades específicas de edição. Para o projeto de um site com poucos recursos. usabilidade. arquitetura 82 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional.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. . deslocamento e sentimento de identificação do usuário. o designer tende a acumular algumas funções de programação e precisa ter a formação técnica necessária. 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.

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. 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. Quanto mais completa a formação profissional. bem como mapas conceituais e pesquisas sobre os padrões culturais de grupos de usuários e seus códigos visuais (cores. para examinar os elementos necessários à interface.da informação. sinais. composição de páginas em HTML com CSS. vídeo e som. mesmo que não se proponha a ser um especialista em cada uma destas áreas de conhecimento. o argumento do designer deve contribuir para preservar a integridade conceitual e a qualidade técnica da interface. A formação especializada garante ao designer as condições para ter a palavra final em decisões referentes ao design da interface. o que nem sempre acontece. uso de elementos como animação. Examinar a arquitetura da informação. 83 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. diagramas de fluxo e storyboards. 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. tipologias). ícones. aplicação de elementos para a interação entre usuários e a interface. . As análises das entrevistas fornecem informações valiosas para esta avaliação. Todos os direitos reservados. Embora a opinião de cada profissional seja importante e necessária.

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

com linhas discadas. 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. Todos os direitos reservados. A criação de conteúdo. 85 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. estas sim. diretora de design de interface do usuário e arquitetura da informação da AOL. Textos longos. 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. as políticas internas de design e produção de conteúdo se adaptaram a configurações mais genéricas de acesso. . 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. listas.o Velocidades de conexão. na medida em que os browsers de acesso deixaram de ser proprietários e os sites da AOL aderiram à web aberta. artigos. E neste caso o desenho da tela. 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. o Capacidade/ velocidade de processamento. lembra que a rolagem de tela não era permitida nos sites da empresa. de modo a se adaptar ao dispositivo dos usuários. com rolagem vertical. Milissa Tarquini. o design e a programação das páginas eram rigidamente controlados. eram apresentados em caixas. No entanto. na medida em que o site atende a um público amplo e heterogêneo.

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

Usando ou não estes recursos. etc. o designer precisa testar exaustivamente os layouts e as configurações estabelecidas em diversas situações de uso. em diversos dispositivos. Configurar layout líquido. com a largura da página adaptável a diversas resoluções de tela. pelo uso de CSS para diferentes situações de impressoras em braile. como o uso de cores contrastadas para os elementos críticos. que permitem adaptar o layout a diferentes configurações de acesso. .). 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. que seguem recomendações do W3C para o desenvolvimento do sites e de browsers. Usar fontes com tamanho flexível (baseado em percentual ou na largura da letra). Compatibilizar a interface com os principais programas de acesso à web. linguagens e sistemas operacionais. Todos os direitos reservados. especialmente se o site se dirigir a público amplo e não especializado. 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. No entanto. Aderir a normas de acessibilidade. algumas medidas ajudam a adaptar o layout da interface a públicos amplos: Adotar padrões web. para garantir que a interface se mantenha estruturada e funcional para a maioria dos usuários prioritários. e aumentam a compatibilidade das páginas com diferentes plataformas. Alguns desenvolvedores utilizam scripts e "hacks".

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

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

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

. cada página deve usar apresentar um layout consistente em relação ao conjunto. bem como os elementos editorial e/ou comercialmente mais importantes. que possam atrapalhar a leitura dos rótulos de botões e de textos.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 . dissociá-los Deve-se evitar usar fundos de tela muito "ocupados". Geralmente elementos muito importantes.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. que ajuda a estabelecer o equilíbrio visual entre elas. pelo contrário. 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. ou.o usuário deve ser capaz de entender visualmente a estrutura da página e a funcionalidade dos elementos. como as barras de navegação principais. bem como o reconhecimento dos elementos funcionais. O balanceamento entre as áreas mais e menos ocupadas. Os espaços em branco ajudam a leitura e a compreensão do conteúdo no contexto do site. Exemplo . No entanto o 91 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. A proximidade dos elementos pode criar associações entre uns e outros. Toda a área à esquerda da página é bastante valorizada e costuma ser o local de elementos importantes da interface. como o símbolo e o logotipo das empresas/produtos ficam situados neste local. de acordo com o modo como estão organizados. acostumados com a leitura da esquerda para a direita. Todos os direitos reservados.

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. Testar imagens em diferentes formatos. imagens. prever a diagramação de gráficos e tabelas. Todos os direitos reservados. 92 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. barras de navegação. Testar a solução com conteúdo em diferentes formatos Seja conteúdo editorial (textos.os estilos de fonte e outros atributos de texto.modelo precisa ter flexibilidade para abrigar conteúdo com diferentes características e atender a diferentes demandas. formulários em diferentes situações e aplicações. como formulários. . pois está mais interessado no conteúdo. menos se incomoda com a rolagem vertical. como tamanhos. Facilidade de uso de elementos ativos como títulos de links. É importante para isto observar aspectos como: Navegação e layout . cores devem ser aplicados consistentemente.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. botões. Palheta de cores . aplicar barras de navegações adicionais em áreas internas. H5. Configuração de tipologias . Malha gráfica (grid) .Quanto mais fundo nas camadas de informações o usuário estiver.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. vídeo. para facilitar o deslocamento e a orientação do usuário. A rolagem vertical de cada tela . músicas) ou funcional.a estrutura visual e a estrutura de informações do site devem estar diretamente relacionadas.

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

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

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

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

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

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

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

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

Todos os direitos reservados. . 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.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.

permitindo aos visitantes trocarem de estratégia quando necessário.Integração de navegação e busca A busca é considerada uma alternativa à navegação. A navegação. de forma a limitar a faixa de conteúdo buscado. refletindo a navegação principal. por outro lado. uma busca coordena uma busca por palavras-chave em páginas que contêm o termo ou os termos. Os visitantes escolhem uma categoria a partir do menu. ou você pode solicitar termos que auxiliem a formulação de uma consulta. permite que as pessoas percorram um site até o conteúdo desejado. fornecendo uma importante visão geral de um site e ajudando as pessoas a determinarem relevância. 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. Todos os direitos reservados. 102 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Frequentemente um menu drop-down contém as áreas-chave de conteúdo do site. Busca pré-determinadas combinam navegação e busca de forma que clicar em um link na verdade roda uma busca em background. tais como menus de escopos e busca e Word wheels para deixar as pessoas focarem no conteúdo-alvo e em resultados pré-filtrados. iniciando com o formulário de busca propriamente dito. 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. Você pode incluir opções. 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. . Basicamente.

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

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

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

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

a página de resultado que segue apresenta uma disposição similar a uma galeria de links para imagens da coleção. Os valores de nível mais alto dentro de cada uma delas são representados como links. Os resultados ocupam a maior parte da página à direita.  Resultados: A página de resultados contem três componentes principais: Resultados. Valores e Caminho da consulta. Fornecer tais informações sobre o tamanho e o escopo do conjunto resultante ajuda as pessoas a tomarem decisões de navegação. Um campo para busca por palavras-chave também está disponível no canto superior esquerdo. Para essa coleção em particular. . De qualquer forma. 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. Ela também familiariza as pessoas com o escopo da coleção de imagens. O número de itens classificados por esse valor aparece entre parênteses após o rótulo. Todos os direitos reservados. o qual fornece a liberdade de escolher entre buscar e navegar. são mostradas miniaturas de imagens.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. Essa forma de visualização encoraja a exploração a partir de qualquer ponto de partida. 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. 107 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional.

a transição da página inicial para a página de resultados em termos de layout é grande. 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 página de item fornece uma imagem maior e informações potencialmente mais detalhadas. Valores: Os valores das facetas que se aplicam apenas à lista de resultados atual são mostrados à esquerda. Na página de item. A faceta é indicada. . Todos os direitos reservados.  Caminho da consulta: O caminho percorrido para produzir um dado conjunto de resultados aparece no topo. caso existirem. 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.  Página de item: As pessoas podem escolher visualizar um único item na coleção a partir da página de resultados. A página de resultados permite às pessoas navegarem e explorarem ainda mais. Elas podem criar seus próprios caminhos para a informação. Clicar em um link reduz o escopo do conjunto de resultados e atualiza os valores disponíveis. seguida do valor selecionado para aquela faceta. enquanto mostra ainda o caminho percorrido para chegar ao item. Ao longo do caminho a navegação disponível é recontextualizada para o conjunto local de resultados. mas aparentemente natural. 108 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. De um modo geral.

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

Todos os direitos reservados. .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. Conteúdos abordados Etiquetagem Classificação social 110 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional.

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

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

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

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

Sign up to vote on this title
UsefulNot useful