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.

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

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

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

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

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

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

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

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

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

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

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

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

e em alcançar o produto final.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. . Todos os direitos reservados. O foco é na implementação 16 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional.

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

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

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

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

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

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

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.

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

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

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

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

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. Botão avançar: O botão avançar não é nem de perto tão usado quanto o botão voltar. 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. Todos os direitos reservados. . Histórico da sessão:Essa é uma lista cronologicamente reversa das páginas recentemente visitadas. 30 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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. elementos importantes para o estudo. 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. .

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

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

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

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

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

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

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

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

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

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.

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

que inclui uma extensa cadeia de processos de conhecimento. 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. arquitetura 82 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. web design é uma das etapas do projeto. Todos os direitos reservados. o designer tende a acumular algumas funções de programação e precisa ter a formação técnica necessária. usabilidade. 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. relação direta com os objetivos do site. Mas na verdade. Para o projeto de um site com poucos recursos. 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. O designer de web sites precisa conhecer não só os assuntos relativos aos processos de elaboração de um projeto e à criação de soluções visuais como também regras de acessibilidade. O layout da interface reflete um conjunto de soluções de diversas naturezas. que não permita a contratação de profissionais especializados. aderência ao conceito editorial e necessidades específicas de edição. A percepção do layout no projeto É comum a percepção de que o projeto de site é constituído em sua maior parte pelo planejamento do layout das telas. .A 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. orientando assim a ação do usuário. Devido a esta diversidade de fatores. que devem estar contempladas no resultado final. deslocamento e sentimento de identificação do usuário.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

navegá-las permite recombinações de categorias. Mas é difícil expor o poder das facetas e navegar nelas em uma interface de uma maneira que não sobrecarregue e confunda o usuário web médio. Todos os direitos reservados. e as pessoas navegam através das categorias. o que suporta diferentes formas de atingir o mesmo objetivo. Se estiverem insatisfeitos com os resultados atuais. . Escolhas não relevantes são ocultadas. 106 _______________________________________________________________________ © 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. O projeto flamenco busca criar uma interface que todos possam usar. 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. desta forma expandindo a lista de resultados.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. os visitantes podem desmarcar qualquer valor ou combinação de valores de uma faceta. Grandes quantidades de informação são decompostas em conjuntos gerenciáveis em apenas alguns cliques.

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

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

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

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

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

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

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

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

Sign up to vote on this title
UsefulNot useful