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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Escopo: Mostre as páginas que estão dentro e fora do escopo para o projeto atual. juntamente com o número de versão e /ou data. 77 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional.Notas e anotações: Os mapas dos sites não são sempre capazes de comunicar tudo visualmente. . Exceções ou condições especiais precisam de uma nota acompanhando-as no mapa do site. dê um título ao mapa do site. Título e legenda: Assim como para toda sua documentação de projeto. Todos os direitos reservados. 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.

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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