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.

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

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

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

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

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

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

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

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

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

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

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

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

Todos os direitos reservados. e em alcançar o produto final. 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. .

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

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

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

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

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

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

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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. Pode-se também nomeá-los de "Miscelânea". comumente possuem opções para compra e para venda. Rótulos consistentes A consistência pode ajudar a reduzir a ambiguidade. Bons rótulos são mutuamente exclusivos: quanto mais clara a distinção entre as categorias. A regra de especificidade de Cutter. Existem diversos tipos de consistência a serem considerados rótulos de navegação: 42 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Sites de leilão. nomeada para homenagear o famoso bibliotecário americano Charles Ammi Cutter. . Rótulos focados Em indexação e catalogação tradicionais. melhor. A diferenciação dos rótulos auxilia nas decisões de navegação. Todos os direitos reservados. por exemplo.servem mais à conveniência do designer do que a do usuário final. 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. O significado de um pode afetar a interpretação de outros em uma série. Rótulos mutuamente exclusivos Os rótulos frequentemente aparecem como um grupo em um menu. o que também não oferece uma descrição.

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

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

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

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

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

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

certificando que as construções gramaticais funcionarão em outras línguas. É importante casar o sistema de rotulagem do site com as expectativas dos usuários. . é preciso planejar para frente. Todos os direitos reservados.Hafenbehörde. 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

. Crie uma legenda para explicar as diferentes formas e símbolos utilizados. Todos os direitos reservados.Notas e anotações: Os mapas dos sites não são sempre capazes de comunicar tudo visualmente. dê um título ao mapa do site. 77 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Exceções ou condições especiais precisam de uma nota acompanhando-as no mapa do site. 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. Isso ajuda a planejar para mudanças posteriores e garante eu a arquitetura seja escalável. Título e legenda: Assim como para toda sua documentação de projeto.

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

A faceta é indicada. caso existirem. a transição da página inicial para a página de resultados em termos de layout é grande. Clicar em um link reduz o escopo do conjunto de resultados e atualiza os valores disponíveis. todos os valores usados para classificar o item são mostrados à direita em uma visualização em forma de árvore que se expande para muitos níveis. A página de item fornece uma imagem maior e informações potencialmente mais detalhadas. De um modo geral. Ao longo do caminho a navegação disponível é recontextualizada para o conjunto local de resultados. seguida do valor selecionado para aquela faceta. Na página de item.  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 direitos reservados. mas aparentemente natural. 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. enquanto mostra ainda o caminho percorrido para chegar ao item. Elas podem criar seus próprios caminhos para a informação.  Página de item: As pessoas podem escolher visualizar um único item na coleção a partir da página de resultados. . 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.

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

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

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

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

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

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

Sign up to vote on this title
UsefulNot useful