Design Instrucional

Ps-Graduao em Design Instrucional para EaD

Disciplina VII: Design Instrucional de Interfaces e Navegao Web

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


Mdulo I Introduo Navegao Web

Objetivos do Mdulo Apresentar alguns conceitos bsicos sobre a navegao e seu design. Expor algumas perspectivas de design de navegao web e quais as necessidade de navegao.

Contedos abordados Navegao e design de navegao Necessidades de navegao Perspectivas de design de navegao web


Navegao e design de navegao A navegao tem um papel fundamental em moldar as experincias na web. Ela prev acesso informao de uma forma que melhora o entendimento, reflete a marca e colabora para a credibilidade geral de um site. A navegao web e a habilidade de encontrar informao tm um impacto financeiro para as diversas partes interessadas em uma empresa. Design de navegao no esta limitado apenas a escolher uma linha de botes, mais sim uma tarefa muito mais ampla. O design de navegao coordena os objetivos dos usurios com os objetivos de negocio, por exemplo, de uma empresa. Isso requer um entendimento e profundo conhecimento de

organizao de informaes, layout de pginas e apresentao de design.

Voc sabia que ... Para avaliar se uma navegao web boa, basta verificar que pouco notada, a navegao melhor quando nem mesmo notada.

Pode-se definir melhor a navegao web, tendo em mente um link, que so textos ou grficos em uma pgina que conectam-se a outras pginas ou diferentes pontos de uma mesma pgina permitindo uma rpida associao de uma ideia para outra. A navegao web definida de trs maneiras: A teoria e a prtica de como as pessoas movem-se de pgina para pgina web.


O processo de busca direcionada a objetivos e localizao de informao hiper-ligada; navegando na web.

Todos os links, rtulos e outros elementos que fornecem acesso a pginas e auxiliam as pessoas a orientar-se enquanto interagem com um dado site web. O processo de criao e organizao dos links, determinar a importncia e a relevncia das pginas e do contedo, fica a cargo do design de navegao. Esse processo envolve uma analise ao estabelecer relacionamentos que possuam sentido entre as pginas, objetivando que o leito vivencie a informao contida ali. Grande parte das pessoas visitam um site para realizar pesquisas, ler, buscas respostas dentre outros, nesse contexto a navegao web pode ser considerada um meio para um fim. Por isso importante entender as diferentes funes que a navegao web possui e sua potencialidade: 1. A navegao fornece acesso informao A maioria dos indivduos sabe que a navegao fornece acesso a informao, porm meios alternativos de acesso tambm existem, veja abaixo como a informao do seu site pode ser acessada:

O modelo apenas-ligaes-de-contedo: Imagine uma coleo de pginas ligada umas s outras sem nenhuma organizao hierrquica ou padro de ligao em particular. Todos os links so embutidos no texto. Eles no so isolados de maneira a servir como um esquema de navegao, e no existe o conceito de uma pgina principal tradicional. Conceitualmente com a aparncia da figura a seguir:


Figura 1: modelo apenas-ligaes-de-contedo Isso forneceria um forte relacionamento entre os documentos. Um termo ou frase ligada em uma pgina tem uma forte associao com o contedo da pgina de destino, porm a facilidade de encontrar informao baixa nesse modelo. No h noo de incio e fim na sua busca por informao, e a orientao se torna difcil. O tempo de acesso maior. Certamente essa no a maneira mais eficiente de acessar a informao. O modelo "informao lquida": modelo similar ao anterior, com a diferena que no existem links. Ao invs dos links cada uma das palavras so interativas para todos os textos. No h distino entre texto e hiper-texto, ou entre contedo e navegao. Todos os textos so links e todos os links so textos. Veja a figura a seguir:

Figura 2: modelo "informao lquida" A partir de uma nica palavra de uma dada pgina, qualquer nmero de aes de navegaes possvel, levando a novas pginas de contedo. H um projeto de pesquisa hospedado pelo Centro de Interao da University College of5_______________________________________________________________________ 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Todos os direitos reservados.

London ( UCLIC, www.uclic.ucl.ac.uk) que explora a possibilidade de tornar todo texto online interativo.Em vez de hiper-texto, os pesquisadores referem-se a isso como hiper-palavras. A ideia bsica que, quando uma palavra for clicada, um menu de opes aparecer. Como na imagem a seguir:

Figura 3: Opes de navegao com o menu Hiperpalavras

Pode-se conduzir uma busca, ligar a documentos relacionados, definir o termo, traduzi-lo e assim por diante. O objetivo deles por um fim tirania dos links. O modelo de filtro. Imagine acessar todo contedo de um site web atravs de uma nica pgina.

Esta pgina detm o controle de filtrar e ordenar para apresentar diferentes trechos de material de uma vez. Ela seria altamente interativa, certamente. Uma lista de documentos na coleo encolhe ou expande em cada interao. Clicar em um item individual da lista revelaria seu texto e imagens completos. Veja a figura a seguir:


Figura 4: Modelo de filtro Um nico controle em uma dada pgina leva a novo contedo, mas este contedo apresentado dentro da mesma pgina. O movimento ento circular: o usurio nunca deixa a pgina, apenas utiliza continuamente seu contedo. Mas com esse tipo de navegao os visitantes de primeira viagem no obteriam uma boa viso geral do tipo de contedo disponvel no site. Pode tambm ser difcil para os usurios saberem quando uma busca est completa: potencialmente pode-se filtrar e ordenar o dia inteiro e ainda assim chegar a uma nova lista de contedo. A acessibilidade geral e a adio de itens como favoritos tambm ficam complicadas. Tambm possvel encontrar uma interface experimental desenvolvida por pesquisadores da IBM para navegar os trabalhos do compositor americano Philip Glass (www.philipglass.com/html/pages-engine.html). O modelo de busca Nesse modelo de acesso, no existe navegao ou link para documentos internos. Os visitantes do site podem apenas realizar buscas por palavras chave de forma a obter a informao desejada. Os usurios informam uma palavra chave ou duas em uma caixa e clicam no boto buscar. Isso produz uma lista de pginas que eles podem acessar. Nas pginas individuais de contedo, a nica opo retornar para a lista ou conduzir uma nova busca. Analise a figura a seguir:


Figura 5: Modelo de busca Buscar certamente uma maneira eficiente de acessar o contedo. Todos fazem buscas na web o tempo todo. Mas a busca por palavras-chave eficaz somente se o item a ser buscado conhecido de antemo. A busca assume que as pessoas sero capazes de expressar precisamente e completamente suas necessidades em termos de informao como uma consulta. Entretanto, esse pode no ser o caso.

O modelo de navegao estrutural Neste modelo, existe apenas um conjunto de links, talvez ao lado de cada pgina, o qual prov acesso informao em um site web. Essa rea visualmente separada da pgina de contedo no layout. Pode-se clicar atravs de uma hierarquia de opes de navegao, atualizando o contedo da pgina a cada vez, conforme nos mostra a figura a seguir:

Figura 6: Modelo de navegao estrutural


Para obter uma pgina em outra rea do site, o indivduo teria que navegar novamente para cima da rvore e para baixo novamente em outro ramo. No existem links embutidos dentro do texto, nem funes de busca. Discusses a cerca desses modelos demasiadamente puros so intencionalmente parciais. Geralmente, os sites web possuem um misto desses modelos, incluindo navegao estrutural, ligaes de contedo e mecanismos de busca e filtro. Cada um suporta potencialmente diferentes modos de procura. Logo, ferramentas de navegao para informao na web vm em mltiplas formas. De um modo geral, um sistema de navegao web fornece acesso eficiente e balanceado. Na realidade, a navegao web pode parecer mais como algo mostrado na figura abaixo, onde vrios tipos de acesso so mesclados. O design de navegao foca na criao de um sistema de acesso informao. este sistema que melhora a experincia de navegao web. Mas navegar pode ser uma experincia de informao muito transformadora que apenas uma busca por palavras-chave. Ao navegar em site web, as pessoas parecem aprender sobre outros contedos disponveis. Para sites de comrcio eletrnico, isso pode representar mais vendas; para uma organizao sem fins lucrativos, isso poderia resultar em mais apoio; para um site de informaes mdicas, isso poderia fornecer um entendimento mais aprofundado sobre uma doena ou cura. Em outras palavras, como os sistemas de navegao fornecem acesso s informaes importantes.

2. Mostra a localizao de um site A navegao no trata apenas de ir de uma pgina a outra, trata tambm de prover orientao, preciso que tenham informaes de localizao, para


auxiliar as pessoas a navegarem. Existem trs necessidades bsicas de orientao web: Onde estou? O que tem aqui? Para onde eu posso ir a partir de onde estou? A localizao normalmente indicada ao destacar a opo corretamente selecionada em um menu de navegao ou mostrar o caminho com uma trilha. Alguns sites estampam a localizao com uma notao "Voc est aqui".

3. A navegao mostra o assunto de um site A navegao mostra a amplitude e o tipo de contedo de um site web e suas ofertas, ou o assunto do site. Ela cria uma coerncia geral, significativa, dos assuntos e contedos do site e cria expectativas. Dessa forma, o conhecimento dos tpicos principais de um site podem afetar a abordagem que as pessoas usam para encontrar informaes neste site, porm isso no implica que a navegao mostre o escopo do site em termos de quantidade de pginas. Ao invs disso, ela reflete a profundidade do assunto de um site.

4. A navegao reflete a marca Uma marca freqentemente pensada em termos de sua manifestao visual como: logotipo, cores, fontes, etc. estes elementos comumente referidos como a roupa da empresa, ajudam as pessoas a identificarem-se com sua empresa e seus produtos. A posio de uma marca afeta essencialmente cada aspecto de um produto ou servio, incluindo a navegao web. Por ltimo uma marca uma promessa ao10_______________________________________________________________________ 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Todos os direitos reservados.

consumidor sobre os produtos e servios oferecidos. As marcas tem valores e personalidade e a navegao reflete e suporta os aspectos de uma marca. As opes de navegao mostradas, a ordem dos elementos, o tom de voz dos rtulos e o estilo visual da navegao contribuem para uma experincia em relao marca na web.

5. A navegao afeta a credibilidade do site A credibilidade uma qualidade percebida e julgada pelo visitante. Um objetivo comum no design de sites web tornar um site mais incrvel. Isso ajuda a passar a mensagem adiante. Quanto mais crivel for um site, mais efetivamente pode alcanar audincia e atingir objetivos estabelecidos. Uma boa navegao ajuda a persuadir e encorajar os visitantes a fazerem aquilo que quer que eles faam.

6. A navegao interfere na rentabilidade Informao intil se no puder ser encontrada. As organizaes gastam muito tempo e dinheiro tornando a informao disponvel na web sem realmente saber como, ou mesmo se esta informao est sendo usada. Se um visitante no consegue encontrar a informao que precisa, isso pode ser custosos para seu negcio. Calcular o retorno do investimento apenas para a navegao de um site no fcil, se que isto pode ser feito. Existem muitos outros fatores a serem considerados, tais como mecanismos de busca, desempenho tcnico, necessidades dos usurios e seus comportamentos e tambm a usabilidade geral do site. Mesmo assim, justificativas para uma boa navegao incluem: Os clientes no podem comprar o que eles no podem encontrar. Os empregados perdem produtividade quando a navegao ineficiente.11_______________________________________________________________________ 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Todos os direitos reservados.

O custo do suporte aumenta com a navegao pobre. As marcas comeam a se desvalorizar com uma navegao pobre. Adicionalmente, deve-se levar em considerao os custos de treinamento, relanamento e assim por diante. preciso ter em mente que um site cuja navegao bem projetada no resolver todos os problemas. Mas dado que a navegao to central para a experincia bsica na web, correto firmar que suas implicaes financeiras so potencialmente de amplo alcance.

Design de Navegao web Dados os diversos papis em potencial que a navegao web desempenha,

muitos fatores influenciam o design de navegao e, por sua vez, a navegao afeta muitos aspectos do site. O design de navegao web no pode ser feito isoladamente. Ao considerar um design de navegao, preciso que se faa algumas perguntas fundamentais:

Por que est construindo o site? Apesar de aparentemente bvia, esta questo frequentemente desprezada. O primeiro passo no design de navegao entender o propsito e a motivao para o site web como num todo, assim como no contexto de negcios de uma maneira mais ampla.

Quem usar o site? Esta talvez seja a pergunta mais importante a ser feita. Pesquisa de usurios o processo de investigar sistematicamente os visitantes de um dado site. Tal


pesquisa no s fornece uma ideia dos tipos de pessoas que visitam o site, mas tambm suas necessidades e comportamentos.

A que a navegao fornece acesso? As pessoas acessam um site para encontrar respostas ou para realizar uma tarefa. Como o contedo deste site est organizado? A arquitetura de informao representa as estruturas que do forma e significado ao contedo e funcionalidade de site. Ela tem tambm um imenso e direto impacto na navegao. Assim o designer deve entender o contedo e como ele deve estar organizado. Como os usurios navegaro para o contedo que eles precisam? O layout de pginas e o design grfico do navegao sua forma final. Entretanto, isso mais do que apenas mudanas cosmticas. Aspectos tais como: a ordem das opes, seu arranjo na pgina, o tipo de fonte e tamanho usado e as cores usadas, podem ser elementos crticos. Eles podem construir ou destruir o sistema de navegao.

Fique atento!!! A navegao problemtica, particularmente em grandes sites web. uma das partes mais difceis do design web. Fornecer acesso a pginas web em sites ricos em informao surpreendentemente complexo. O design de navegao web , no final, uma habilidade rara, um misto de arte e cincia, intuio e fatos, forma e funo.


Filosofia de design A maioria dos projetos web tem uma perspectiva de design que prevalece, geralmente ela implcita. Entender as perspectivas de design pode ser importante para criar um entendimento comum da equipe e para guiar decises de design. Abaixo seguem algumas abordagens para design:

Design centrado no usurio Um processo de design centrado no usurio coloca as pessoas no centro da ateno ao desenvolver um produto ou servio. Ele consiste de metodologias que tornam o usurio uma parte integral do processo de desenvolvimento, com atividades como entrevistas, observaes e vrios tipos de testes. Isso substitui o trabalho de adivinhar o comportamento do usurio e fazer suposies sobre isto baseadas em pesquisa. No final, o design geral do site deve espelhar como os usurios entendem o assunto e como eles esperam encontrar as informaes que precisam. O design centrado no usurio aumenta potencialmente as taxas de adoo e diminui a curva de aprendizagem. Neste sentido busca reduzir o risco de uma falha no produto. Entretanto, no fcil, e muitos apontam para o tempo e custos extras que a pesquisa de usurio adiciona ao desenvolvimento. Os benefcios no so a curto prazo, mas podem valer a pena no final.

Design centrado no designer As decises so tomadas a partir da viso do designer em relao ao mundo. O crescimento relativo do designer valorizado, e seus interesses tambm. A abordagem pode parecer-se com as perspectivas encontradas na arte em algum grau; expresso pessoal importante. Esta abordagem pode ser bem sucedida14_______________________________________________________________________ 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Todos os direitos reservados.

para empresas pequenas, focadas em design que sejam capazes de produzir sites bem sucedidos, porm a mesma torna-se rapidamente mal sucedidas para sites que tratam de vastas quantidades de informao ou interaes complexas.

Design centrado na empresa O site web projetado em torno da estrutura e necessidades dos stakeholders na empresa ou organizao. As principais categorias de um site, por exemplo, podem refletir os departamentos de uma empresa. Essa perspectiva pode aumentar a eficincia para a manuteno do site posteriormente: cada departamento responsvel apenas por sua prpria fatia do site. Porm essa perspectiva geralmente corre o risco de os usurios ficarem confusos, perdidos ou irem para outro lugar.

Design centrado no contedo Essa perspectiva similar ao design centrado na empresa, mas um corpo de informao existente a base para estruturar a navegao. Por exemplo, voc pode organizar o contedo pelo formato do documento ao invs de organizar pelo assunto: todas as pginas de texto em um lugar, todos os PDFs em outro, imagens em outro e assim por diante. Neste sentido, a abordagem de design centrado no contedo apenas natural e em algum nvel constantemente presente. Entretanto, a quantidade e o tipo de contedos disponveis no deveria ser o nico fator determinando as prioridades de navegao.


Design centrado na tecnologia A tecnologia a fora condutora aqui. O design pode ser determinado pela maneira mais fcil de implementar uma soluo. e em alcanar o produto final. O foco na implementao


Referncias KALBACH, James. Fundamentos da Navegao Web. In: Design de Navegao Web: otimizando a experincia do usurio. Bookam, 2009. p. 22_43.



Mdulo II Os Mecanismos de Navegaes

Objetivos do Mdulo Apresentar os mecanismos de navegao que so importantes para o design.

Contedos abordados Navegao por passos, paginao, trilhas e migalhas de po Navegao em rvore, mapas, diretrios e nuvens de tags Barras de navegao, abas e menus verticais Mecanismos dinmicos e visualizao web


Navegao por passos, paginao, trilhas e migalhas de po Navegao por passos A navegao por passos permite s pessoas moverem-se sequencialmente pelas pginas. Ela consiste normalmente de um rtulo de texto e uma seta, e acompanhada tambm de um link para mover para trs na srie de passos. Tipicamente, uma seta apontando para a esquerda indica um movimento para a pgina anterior, e uma seta indica a prxima pgina. Para linguagens que so lidas da direita para a esquerda, a direo das setas pode ser invertida. As setas sozinhas podem no ser suficientemente claras ou intuitivas para todos os usurios em todas as situaes. Um rtulo de texto em conjunto com uma seta evita a ambigidade. A navegao por passos valiosa em processos onde a deciso em um dado passo afeta algo no passo seguinte, tal como em um assistente ou em um processo de confirmao de compra (checkout). Navegao por paginao A navegao por paginao similar navegao por passos, mas inclui outras informaes adicionais e opes. frequentemente encontrada em pginas de resultados de busca que mostram detalhes sobre essas pginas no conjunto de resultados. Os conjuntos de resultados normalmente tm limites sobre a quantidade de itens que podem ser mostrados de uma nica vez. Aps esse limite ser alcanado, um segundo conjunto de resultados mostrado em uma nova pgina. Isso repetido at que todos os resultados sejam representados nas diversas pginas. A forma mais simples de navegao por paginao navegao por passos com a adio de um contador de pginas. Isso normalmente aparece entre os links de avanar ou retornar.


Retroceder e avanar rapidamente Algumas vezes os visitantes precisam retroceder para a primeira pgina ou avanar rapidamente para a ltima pgina de um conjunto. Muitas vezes uma seta dupla (>>) ou seta com barra vertical (>) representa esse tipo de navegao. Clicar no boto de retroceder o leva ao incio do conjunto de pginas; clicar em avanar rapidamente o leva ltima pgina. Se voc navegar para a nona pgina de um conjunto de itens, mas quiser retornar para o primeiro, clicar em retroceder permite que v para o primeiro item em um passo simples. Mecanismos de retroceder e avanar rapidamente so bons para conjuntos grandes de itens. Se a lista de itens for alfabtica, por exemplo, pode ser eficiente mover para o final, de forma a procurar pelos "Zs", mas pode no ser. Retroceder e avanar rapidamente podem apenas adicionar mais confuso e causar erros em potencial. Se os resultados esto ordenados por relevncia, por exemplo, as pessoas raramente precisam pular para o ltimo item em conjunto. Em tais casos, pode ser melhor aumentar o nmero de itens em uma dada pgina para reduzir saltos de um lado para outro.

Paginao de acesse direto A paginao de aceso direto frequentemente vista acima ou abaixo dos resultados de um mecanismo de buscas. Normalmente um contador linear de pginas mostrado juntamente com os controles de navegao por passos. Isso permite acessar qualquer pgina no conjunto inteiro.

Trilha de migalhas de po A lio da web clara: as pessoas precisam voltar por um caminho que eles j trilharam. O termo amplamente usado em design de navegao web. o20_______________________________________________________________________ 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Todos os direitos reservados.

caminho que uma pessoa percorre atravs de um site. Consiste de elementos ou ns, que so encadeados uns nos outros. Os ns so ligados s pginas previamente visitadas (ou tpicos-pai) e so separados por um smbolo, normalmente um sinal de maior que (>). Trilhas de migalhas de po de localizao O tipo mais comum de trilha de migalhas de po geralmente: Mostra a posio atual dentro de um site. Fornece atalhos para pginas previamente visitadas, ou outras reas do site. Essas so as trilhas de migalhas de po de localizao. Elas so representaes lineares de estrutura de um site, por exemplo, incio > Roupas masculinas > camisas > camisas sociais. Independentemente de como as pessoas chegam a Camisas sociais, a trilha de migalhas de po a mesma. Acessibilidade: incluir a frase "Voc est aqui:" pode ser til para usurios de leitores de telas, para entender o contexto dos links que seguem. Essa frase pode ficar oculta no cdigo de barras se desejado, de forma que os visitantes com viso normal no a vejam.

Trilhas de migalhas de po de caminho As trilhas de migalhas de po so dinmicas. Uma pgina ir mostrar uma trilha de migalhas de po diferente, baseada em como o usurio alcanou esta pgina. Cada trilha resulta exatamente no mesmo contedo, mas diferentes caminhos foram tomados para chegar l. Diferentemente das trilhas de migalhas de po de localizao, as quais so bastante estticas, implementar esse tipo de trilha mais difcil.


Trilha de migalhas de po de atributos Esse modelo de trilha descreve uma pgina de alguma forma, ao invs de mostrar sua localizao dentro de um site ou caminho para chegar l. Elas mostram sua posio dentro de algum esquema de metadados, normalmente uma hierarquia de tpicos. Popularmente acredita-se que as trilhas de migalhas de po aumentam o entendimento dos usurios sobre o contedo e a estrutura de um site ao fornecer um contexto maior. Estudos tem mostrado, que as migalhas de po so usadas com pouca freqncia. Logo elas so normalmente complementares a alguns outros mecanismos e no a nica forma de navegar. Navegao em rvore, mapas, diretrios e nuvens de tags Uma rvore de navegao permite o acesso a uma estrutura hierrquica. Esse tipo de mecanismo comumente visto em sistemas operacionais para navegar em diretrios de arquivos, por exemplo, no Microsoft Windows Explorer. invariavelmente mostrado como um arranjo vertical de diretrios, termos, ou ns em alguma hierarquia. Frequentemente existem pequenos cones de soma e subtrao para abrir e fechar ns da hierarquia, ou ento, podem existir pequenas setas que apontam para a direita e para baixo, para ns fechados e abertos, respectivamente. Abrir e fechar a rvore na web pode ser problemtico se um recarregamento de pgina estiver envolvido.

Mapas do Site Um mapa do site uma representao da estrutura de um site usada para navegao. Isso fornece uma viso geral, descendente, do contedo de um site, de uma vez s. Usando um mapa do site, os visitantes podem pular diretamente para qualquer pgina listada.


Um mapa do site geralmente merece sua prpria pgina, mas ele tambm pode aparecer, parcialmente, em outras pginas. Os mapas do site devem ser ento bastante simples e fceis de varrer. E tambm crtico que os rtulos usados no mapa de um site sejam compatveis com as categorias principais da navegao, assim como com os ttulos de pgina. Os mapas de site tem entrado e sado de moda. Nos primeiros anos do comrcio eletrnico, muitos sites incluam um. Mas criar e manter um mapa do site no fcil e algumas vezes pode ser caro. Frequentemente, o investimento fica aqum do benefcio. Mais recentemente, os mapas do site sido reconhecidos como um mecanismo para otimizar a indexao de mecanismos de busca. Mecanismos de buscas podem obter uma viso geral melhor do contedo total de um site via um mapa deste site. Ento, apesar dos visitantes do site no uslo com muita frequncia, os mapas do site podem ter outros benefcios.

Diretrios Os diretrios normalmente fornecem acesso a pginas via tpicos. O Yahoo!, o primeiro diretrio de tpicos comercial na web, popularizou a noo de portais web, Diferentemente de mapas dos sites, os diretrios podem classificar. O contedo por categorias so diferentes de ndices, os quais listam os termos alfabeticamente. Os diretrios so teis ao lidar com tipos mistos de informao sem um relacionamento hierrquico. Eles tambm so efetivos para organizar e fornecer links para sites externos. Os ttulos das categorias so, normalmente, organizados alfabeticamente, com o tpico principal frequentemente mostrado em uma fonte maior, seguido por alguns poucos links para sub-tpicos. Clicar em um link o leva para uma pgina23_______________________________________________________________________ 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Todos os direitos reservados.

sobre o tpico. Essa pgina mostra todos os links abaixo deste tpico. Dessa forma, se pode percorrer o interior das categorias.

Nuvens e TAGS Esta uma recente adio aos mecanismos de navegao, as quais listam links alfabeticamente, e ao mesmo tempo considerando os pesos de cada palavra pela sua freqncia no site; quanto mais frequentemente ocorrer um tpico, maior ele aparece na nuvem. Isso d uma ideia instantnea da importncia relativa de um tpico: quanto maior o link, mais importante ele . Apesar da maior parte das vezes serem implementados com tags (logo o nome), esses mecanismos algumas vezes tambm empregam outros tipos de links. Nuvem e tags so boas para contedos dinmicos. Como um mecanismo navegacional, as nuvens de tags possuem um valor limitado. Se um visitante tem uma necessidade de informao conhecida, por exemplo, uma nuvem de tags no realmente eficiente. Elas parecem ser mais uma novidade do que um mecanismo de navegao efetivo. Mas o peso visual dos links fornece informao valiosa: ele mostra, de uma vez s. Usando um mapa do site, os visitantes podem pular diretamente para qualquer pgina listada.

Barras de navegao, abas e menus verticais A forma mais simples de uma barra de navegao uma cadeia horizontal de links em texto plano. Esses so, s vezes, separados por uma barra vertical. Acessibilidade: a incluso de uma barra vertical entre textos pode causar problemas relacionados acessibilidade. Leitores de tela lero 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 pgina - apesar de mnimo - e requer um acesso ao servidor para obter a imagem inicial. Barras de navegao frequentemente tem um fundo colorido, ou podem usar imagens grficas para as opes. Isso cria um forte senso de uma barra ao longo de uma pgina. Uma vantagem para as barras de navegao que

elas no ocupam espao da largura horizontal da rea principal de contedo. Ao invs disso, elas so posicionadas acima das reas principais da pgina. O contedo pode ento espalhar-se ao longo de toda a largura do navegador.

Abas A distino entre abas e barras de navegao est em sua apresentao. No existe uma diferena real de funcionalidade. As abas so como telhas sobrepostas, usualmente sobre a rea de contedo principal. Cada aba distinta da prxima, normalmente com cantos arredondados e oblquos. Adicionalmente ao nmero de abas na navegao, o tamanho dos rtulos ir influenciar o uso do espao horizontal. Geralmente, as abas devem ter, necessariamente, rtulos 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 tambm aumenta a visibilidade e torna as abas mais fceis de serem clicadas.

Menus Verticais Os menus verticais so geralmente mais flexveis que barras de navegao ou abas. Dado que o mecanismo pode facilmente ser estendido para baixo, a adio de opes normalmente menos problemtica que adicionar uma aba.


Adicionalmente,

menus

verticais

geralmente

permitem

rtulos

maiores,

particularmente se eles puderem ser acomodados em duas ou mais linhas. Chamado de menu vertical ou menu ao lado esquerdo (ou menu do lado direito se for o caso), esse arranjo vertical tornou-se amplamente utilizado em design de navegao web. O site web Oracle usa um menu vertical, com rtulos longos e descritivos na esquerda de sua pgina principal para fornecer acesso s principais reas do site. ( www.oracle.com) . Em uma navegao horizontal, muitos desses rtulos teriam que ser abreviados.

Mecanismos dinmicos e visualizao web Tambm conhecidos como menus fly-out, pull-down ou pop-up, os menus dinmicos fornecem um rpido acesso s opes de navegao. Eles so considerados dinmicos porque os visitantes tem que interagir com eles antes que eles sejam mostrados. Aps um visitante selecionar uma opo de navegao passando o cursor ou clicando com o mouse, o site apresenta uma janela de menu similar quelas encontradas em aplicaes de software. Uma vantagem desse tipo de mecanismo o pronto acesso a mais opes do que poderiam ser mostradas em uma nica pgina. A desvantagem a potencial reduo da visibilidade dessas opes. Os visitantes precisam explorar mais antes de tomar uma deciso de navegao. Se um menu dinmico mostrado a partir de uma simples passagem do mouse, comum retardar a apario do menu. O menu deve aparecer pela primeira vez cerca de meio segundo aps o cursor do mouse ter passado sobre o ponto de navegao. O menu deve permanecer aberto enquanto o cursor estiver sobre o ponto de navegao ou dentro da rea do menu. Aps o cursor passar para fora da rea do menu, este deve fechar com um retardo de cerca de meio segundo.26_______________________________________________________________________ 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Todos os direitos reservados.

Outra variao fechar o menu com um clique em qualquer parte da tela fora deste menu. Acessibilidade: os leitores de tela tm problemas com menus dinmicos que so ativados apenas com a passagem do mouse. A alternativa de um clique para revelar o menu melhor. Tenha certeza de testar com leitores de tela antes de ir adiante com essa opo. Note tambm que visitantes com dificuldades de locomoo podem ter problemas ao operar menus dinmicos. Mesmo no estando necessariamente usando um leitor de telas, um menu pode provar ser inacessvel. Tambm no recomendvel incluir menus dinmicos no meio da tela. Nesse caso, os menus dinmicos podem estender-se para fora da pgina e podem no ser visveis.

Menus DROP-DOWN Os menus drop-down so simples menus de seleo HTML com opes. Selecionar uma opo leva o usurio para uma nova pgina. Esse tipo de navegao frequentemente usada para links rpidos, que pulam para uma nova pgina ao longo da estrutura do site, por exemplo. Acessibilidade: no faa com que a nova pgina carregue apenas selecionando a opo e soltando o mouse. Isso requer javascript (usando um evento chamado "OnChange") e pode causar problemas com leituras de tela. Alguns leitores de tela iro ativar o link quando iniciarem a leitura de um item, proibindo o usurio de obter outras opes no menu. Uma alternativa ativar a seleo do menu com um boto ou link explcito logo ao lado do menu. Uma soluo avanada poderia ser modificar o comportamento do site quando o leitor de telas fosse usado. Um boto Go (Ir) poderia aparecer somente se necessrio.


Visualizando a navegao Alm das tradicionais abas, barras e menus, existe uma categoria de mecanismos que utiliza visualizao de informaes. A definio padro de visualizao de informaes : "O uso de representaes visuais de dados abstratos, suportadas por computador e interativas, para amplificar a cognio. A viso comum nesse campo representar a informao em relacionamentos espaciais ou visuais de forma a tornar conjuntos de dados complexos mais claros e compreensveis. Mais importante essas representaes so interativas. A visualizao de informao trata de manipular e navegar pela informao, no trata apenas de como essa informao mostrada. A visualizao de informao no visa substituir as representaes textuais de informao. A representao visual e o texto plano so complementares. rvores estrela Tambm chamadas de layout de rvore radial, uma rvore estrela representa relacionamentos hierrquicos em uma visualizao composta de um centro (hub) e seus eixos. Grandes quantidades de dados podem aparecer dentro de um espao relativamente compacto. Uma rvore estrela pode ser uma alternativa para a navegao por rvore e mesmo para um mapa do site. Clicar em qualquer um dos termos faz com que toda a visualizao passe a ter esse termo como centro. As categorias a partir daquela selecionada so ento aumentadas e mais fceis de serem clicadas. Apesar de interessante de ver e manipular, o mecanismo geralmente usado como uma navegao suplementar para situaes especiais.


Thesauri visuais Diferentemente de uma rvore estrela, a qual tenta mostrar uma grande quantidade de informao em um espao pequeno, a inteno de um thesaurus visual encorajar a explorao por parte do usurio. Ele geralmente mostra um conjunto limitado de conceitos relacionados para auxiliar na descoberta de novas informaes. A implementao em Art and Culture funciona bem para esse propsito: o site encoraja a explorao e o aprendizado. Agrupamentos visuais Mecanismos de visualizao mais avanados tm sido recentemente aplicados a resultados de buscas. Os resultados dentro de uma categoria similar so agrupados em crculos. As pessoas podem ento aplicar zoom para aproximar ou afastar esses resultados, explorando cada crculo de categoria. As pginas web so mostradas como pequenos cones de pgina. Passar o cursor do mouse sobre um item mostra instantaneamente mais detalhes sobre o item. Controles no canto inferior esquerdo permitem aos usurios permitem aos usurios manipular e filtrar os resultados. Em teoria, isso parece bastante til. Entretanto, leva algum tempo para acostumar-se com esse tipo de visualizao - algo que as pessoas podem no estar interessadas em investir tempo. Mais as categorias que so geradas na hora so frequentemente muito amplas, muito restritas ou sem qualquer significado. Mecanismos do navegador Mantenha em mente que os navegadores web possuem mecanismos prdefinidos prprios. Considere isso quando estiver projetando o sistema de navegao de um site. Os mecanismos mais importantes dos navegadores em termos de navegao incluem:


Boto voltar: O controle de navegao mais bvio e relevante o boto voltar. Clicar nesse boto talvez uma das aes mais frequentemente realizadas enquanto navegamos na web. Boto avanar: O boto avanar no nem de perto to usado quanto o boto voltar, mas ainda uma maneira de avanar em um dado caminho. Histrico da sesso:Essa uma lista cronologicamente reversa das pginas recentemente visitadas. O histrico da sesso uma boa razo para fornecer ttulos significativos para as pginas.


Referncias KALBACH, James. Fundamentos da Navegao Web. Bookam, 2009.



Mdulo III Os Tipos de Navegao e Rotulao Web

Objetivos do Mdulo Apresentar os tipos de navegao e rotulao web que existem.

Contedos abordados Navegao estrutural, associativa e utilitria. Pginas navegacionais, pginas de contedo e pginas funcionais. Desenvolvimento de rtulos web, problemtica e qualificao.


Pginas navegacionais, pginas de contedo e pginas funcionais

Tipos de pginas O tipo de navegao e o tipo de pgina esto fortemente relacionados. Um dado esquema navegacional pode ter dois diferentes propsitos em diferentes tipos de pginas. Por exemplo, os visitantes podem esperar que a navegao contextual na pgina principal leve-os a pginas dentro do site. Mas links relacionados em uma pgina mais profunda no site podem apontar para outros sites ou para outros formatos de contedo. As pessoas entendem a navegao, em parte, a partir do contexto do tipo da pgina no qual ela aparece. Cada pgina em seu site tem um propsito, uma razo de ser. O propsito da pgina deve ser imediatamente claro para os visitantes. As pessoas reconhecem diferentes tipos de pgina rapidamente, isso alimenta expectativas para a navegao e afeta como as pessoas interagem com o site. Existem trs categorias de pginas principais: Pginas navegacionais: tem o propsito de direcionar as pessoas ao contedo que elas esto procurando; exemplos incluem a pgina principal, pginas de aterrissagem e galerias. Pginas de contedo: as pginas de contedo so a substncia de um site e em ltima instncia o porqu de as pessoas estarem l, exemplos incluem artigos e pginas de produtos. Pginas funcionais: permitem s pessoas realizarem uma tarefa, tal como conduzir uma busca ou verificar os emails, exemplos incluem pginas de busca, formulrios de submisso e aplicaes. Na prtica, essas divises so frequentemente desfocadas. Os tipos de pginas referem-se ao foco primrio da pgina ou seu propsito primrio dentro do site como um todo.33_______________________________________________________________________ 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Todos os direitos reservados.

Pginas navegacionais As pginas navegacionais direcionam os visitantes para o seu objetivo final: pginas de contedo ou pginas funcionais. Elas so as pedras fundamentais da busca por informao. Os designers devem buscar reduzir essas pginas de forma a manter os visitantes o mais prximos do contedo do site. No entanto, as pginas navegacionais no so necessariamente ruins. Elas desempenham um papel importante em contar a histria do site e suportam uma faixa de modos de busca, ajudam na orientao, e at mesmo afetam decises de compra. Pginas navegacionais chave incluem a pgina principal, pginas de aterrissagem e galerias. Pgina principal (home Page): Fornece uma viso de um painel de controle para o resto das pginas, as pginas principais direcionam os visitantes para reas-chave de seu site web. Uma estratgia comum mostrar nveis mais baixos de navegao diretamente na pgina principal. Isso ajuda na varredura e fornece um caminho para o contedo que poderia no estar, de outra forma, visvel imediatamente dentro do site. Uma pgina principal pode tambm conter contedo de texto ou funcionalidade, mas normalmente apenas em um formato abreviado. Os sites de notcias, por exemplo, podem apresentar as primeiras linhas de uma histria e ento fornecer um link para a histria completa em algum outro lugar. Sites de comrcio eletrnico podem apresentar um produto em sua pgina principal, mas fornecem um link para os detalhes completos dentro do site. Ou, sites de viagens podem apresentar uma gama de funcionalidades que os visitantes podem acessar logo na pgina principal. A pgina principal vista como uma chance de fazer propaganda de produtos ou de promover uma imagem da marca. Entretanto, os visitantes vm a um site com uma necessidade de informao especfica e gostariam de primeiro chegar direto e rapidamente aos seus destinos.34_______________________________________________________________________ 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Todos os direitos reservados.

Pginas de aterrissagem: tambm chamadas de pginas iniciais de subseo, pginas de categorias, pginas de viso geral ou pginas de departamentos. Fornecem uma viso geral das principais categorias de um site. Elas normalmente correspondem s opes na navegao principal e podem ser departamentos de uma loja online ou as sees principais de um jornal online. De modo similar como uma pgina principal fornece uma viso de um site inteiro, pginas de aterrissagem fornecem um sumrio do contedo de uma dada seo, as pginas de aterrissagem podem oferecer tanto orientao local como global. Com mecanismos tais como menus dinmicos, pode-se ser tentado a omitir as pginas de aterrissagem completamente. Ao contrario disso pode-se apenas levar os visitantes diretamente para as pginas que correspondem s opes do menu. Pginas de galerias: As galerias so similares a pginas de aterrissagem, mas fornecem uma viso geral de um grupo especfico de produtos ou contedo ao invs de links para os departamentos ou sees de um site. A pgina de galerias contm informaes de compra crticas e permitem aos visitantes comparar produtos. Os compradores podem at mesmo decidir comprar apenas a partir de uma pgina de galeria. Eles ento vo at a pgina do produto para obter informaes mais detalhadas, de forma a confirmar a deciso.

Pginas de resultados de busca Pginas de resultados de busca lembram as pginas de galeria, mas so dinamicamente criadas baseadas em palavras-chave informadas pelo usurio. A coleo de links resultante pode no necessariamente ter os benefcios de categorias criadas mo, tais como aquelas encontradas em pginas de galeria. Dependendo dos termos da busca, os resultados podem ou no estar em um nico produto ou em um nico tipo de contedo.35_______________________________________________________________________ 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Todos os direitos reservados.

Pgina de contedo Em sites web ricos em contedo, as pginas de contedo so no fim das contas aquilo que as pessoas esto procurando: textos, histrias, artigos, currculos pessoais, blogs, notcias, histrico de companhias e informaes de como fazer algo so apenas alguns exemplos. Pginas de contedo so a moeda fundamental na web. Com isso, o foco das pginas e contedo deve ser o contedo. Muito frequentemente, uma navegao desnecessria e muitos grficos sobrecarregam uma pgina.

Pginas de produto As pginas de produto so obviamente crticas para sites de comrcio eletrnico. Existem muitos elementos tpicos para pginas de produto: Fotos de produto Descries do produto Detalhes adicionais Produtos relacionados Adicionalmente, as pginas de produto frequentemente contm 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 pgina por email Enviar essa pgina por email


Pginas funcionais As pginas funcionais permitem s pessoas completarem uma tarefa online, tal como conduzir uma busca ou enviar um email. Tal como as pginas de contedo, elas so frequentemente a pgina de destino que satisfaz uma necessidade do usurio. A navegao contextual e os links que atravessam a estrutura do site podem ser problemticos ao serem usados a partir de pginas funcionais. Em primeiro lugar, os usurios precisam de foco para completar a tarefa que tm em mos. Formulrios de busca bastante tpico que a funcionalidade de busca no site seja um pequeno campo de entrada na pgina principal ou em todas as pginas. Algumas vezes, entretanto, uma busca mais detalhada necessria, tipicamente chamada de busca avanada. Como o nome implica, essa busca oferece mais controle que uma busca simples. Uma interface de busca avanada requer mais espao; e consequentemente uma pgina separada normalmente necessria. A navegao em um formulrio de busca normalmente mnima. Podem existir links para dicas de busca, ajuda e outras explicaes, ou links que mostrem ou ocultem opes, ou ainda que limpem o formulrio.

Formulrios de submisso Os formulrios permitem s pessoas submeterem informaes. Isso pode ser feito para criar uma conta ou perfil online, para submeter o currculo a uma vaga de emprego, ou para reservar um carro, por exemplo. Os formulrios permitem que ocorram transaes na web. Da mesma forma que acontece com as pginas de busca, a navegao associativa em formulrios desencorajada.37_______________________________________________________________________ 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Todos os direitos reservados.

Aplicaes web So chamadas de aplicaes web uma faixa de pginas que contm caractersticas e funcionalidades interativas. As pessoas realizam tarefas nessas pginas: elas escrevem emails, editam planilhas, gerenciam projetos e assim por diante. medida que as tecnologias web tornam-se mais e mais maduras, as aplicaes online se tornam mais comuns.

Tamanho da pgina Quando uma pgina deve virar duas? Iro os usurios rolar a tela? Quanto menores so as pginas, mas delas existem. Isso requerer mais cliques e mais carregamentos de pginas. Quanto maiores so as pginas, menos delas existem. Mas ento as pessoas precisam usar a barra de rolagem. No existe uma recomendao nica para o tamanho de pgina, muitos fatores influenciam. O tamanho da tela problemtico porque no existe um nico tamanho de tela para o qual devemos projetar. Na web, existe uma ampla faixa de tamanhos de navegadores e eles variam de acordo com a resoluo dos monitores, com o nmero de barras de ferramentas ou barras laterais que uma pessoa tem no navegador e o tamanho da janela do navegador no desktop. O contedo pode no ter o mesmo impacto ou significado quando ele quebrado em mltiplas pginas menores. As pessoas no gostam de ler online. Para textos mais longos, mais seguro assumir que muitas pessoas no iro l-lo na tela do computador. Ler documentos longos offline menos problemtico e preferido pela maioria. aceitvel fornecer pginas longas de texto se as pessoas iro imprimi-las de qualquer forma mesmo. Pode no ser eficiente forar as pessoas a baixar as pginas por causa de pequenas pores de contedo. Ao invs disso, enviar mais informaes com38_______________________________________________________________________ 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Todos os direitos reservados.

cada pgina (isto , pginas mais longas) pode reduzir o nmero de chamadas para o servidor. De certo modo, pode fazer sentido dividir em volumes de informao. Apresentar um livro inteiro como uma nica pgina, por exemplo, causaria problemas de desempenho. O tipo de pgina tambm um fator determinante em relao ao tamanho da pgina. Geralmente, melhor usar pginas menores quando as pessoas precisam navegar e varrer rapidamente, ou quando elas esto completando uma tarefa com uma aplicao online. Pginas mais longas so boas para contedo que mais bem apresentado em conjunto por questes de contexto.

Desenvolvimento de rtulos web, problemtica e qualificao Aspectos de bons rtulos Rtulos ambguos deixam as pessoas tentando adivinhar sua inteno. Se os visitantes do site descem pelo caminho errado em um site por causa de um rtulo que no claro, eles podem se perder ou podem desistir. Bons rtulos inspiram confiana enquanto navegamos e ajudam a evitar frustraes. As sees seguintes detalham alguns dos aspectos mais importantes dos rtulos e de como prever o grau de sucesso que tero na tarefa de guiar os usurios ao contedo que eles buscam.

Fale a lngua do usurio O site deve falar em termos que os visitantes possam entender naturalmente. fcil, entretanto, os designers de um site assumirem que os outros conhecem os mesmos termos e abreviaes que eles. Existem diversos aspectos de criao de rtulos que podem potencialmente causar desencontros no entendimento.


Deve-se evitar jarges da empresa, terminologia tcnica, rtulos espertos e abreviaes, ao mesmo tempo em que usa o tom de voz apropriado.

Evite jarges da companhia Jarges da companhia infiltram-se em sites web muito facilmente e muito frequentemente. Em raras circunstncias, nas quais o nome de uma marca tornou-se uma palavra familiar, por exemplo, o uso de uma linguagem de marketing aceitvel. Mas se h um invento de novos produtos e palavras, existe a chance de que o "mundo exterior" no os entenda. E as pessoas no clicam naquilo que elas no entendem.

Evite terminologia tcnica A maioria dos visitantes de um lado do site no entende tanto da web quanto as pessoas que o criaram. Nem todo mundo sabe o que plug-in, o que um servidor seguro, ou mesmo o que podem fazer com o mapa do site. Se os visitantes tiverem que escolher uma largura de banda para ver um vdeo clipe, eles sabero quantos megabits a conexo de internet que esto usando? Talvez no. melhor usar uma linguagem do dia-a-dia por clareza. importante certificar e considerar o conhecimento o que os visitantes- alvo tm sobre o assunto do site, pois a terminologia tcnica pode ser precisa e especfica para aqueles que a entendem.

Evite rtulos espertos Rtulos espertos, legais ou bonitos normalmente so derrotados por eles mesmos.40_______________________________________________________________________ 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Todos os direitos reservados.

imprescindvel fornecer contexto ou outras evidncias daquilo que o rtulo deve expressar. No se pode ter a pretenso que as pessoas estejam curiosas ou que iro explorar a categoria para descobrir o que o rtulo significa.

Evite abreviaes Abreviaes poupam espao, mas podem impedir as pessoas de varrerem rapidamente pelas palavras-chave certas. Alguns visitantes podem at mesmo no entender algumas abreviaes. No so todas as pessoas que sabem o que as abreviaes FAQ, PDF e RSS significam, por exemplo. Se for inevitvel utilizar abreviaes importante ter certeza que os visitantes iro entend-las.

Use o tom de voz apropriado Rtulos em um site de investimento bancrio normalmente possuem um tom de voz diferente daquele encontrado em um site de msica para jovens. O primeiro formal e direcionado aos negcios, o outro jovem e moderno. importante entender o tom apropriado que certa audincia alvo espera. O tom de voz tambm suporta a marca. Se as grias ou termos populares so usados, por exemplo, isso pode refletir nos valores da organizao. A falta de sintonia entre o tom de voz e a marca podem afetar negativamente a credibilidade de um site, por isso, o modo de como referir-se aos visitantes tambm importante.

Rtulos descritivos As opes de navegao tais como "informao" ou "Detalhes" so geralmente desprovidas de significado. Esses e outros rtulos similares frequentemente41_______________________________________________________________________ 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Todos os direitos reservados.

servem mais convenincia do designer do que a do usurio final. Pode-se tambm nome-los de "Miscelnea", o que tambm no oferece uma descrio.

Rtulos mutuamente exclusivos Os rtulos frequentemente aparecem como um grupo em um menu. O significado de um pode afetar a interpretao de outros em uma srie. Bons rtulos so mutuamente exclusivos: quanto mais clara a distino entre as categorias, melhor. A diferenciao dos rtulos auxilia nas decises de navegao. Em alguns domnios isso pode ser mais bvio do que em outros. Sites de leilo, por exemplo, comumente possuem opes para compra e para venda.

Rtulos focados Em indexao e catalogao tradicionais, a especificidade refere-se a como os termos de um assunto so atribudos a um livro ou trabalho. A regra de especificidade de Cutter, nomeada para homenagear o famoso bibliotecrio americano Charles Ammi Cutter, recomenda utilizar os termos mais especficos aplicveis. Rtulos bem focados so mais previsveis e aumentam a confiana durante a navegao.

Rtulos consistentes A consistncia pode ajudar a reduzir a ambiguidade. Existem diversos tipos de consistncia a serem considerados rtulos de navegao:


Granularidade: refere-se ao detalhe ou amplitude relativa a um tpico. Pginas mais abaixo na estrutura de um site so normalmente mais granulares em significado do que pginas mais acima. Opes de navegao em um mesmo nvel da estrutura do site devem refletir mais ou menos a mesma amplitude de contedo. Sintaxe: rtulos de um dado tipo de navegao podem ter uma formao gramatical similar. Apresentao: fonte, tamanhos e estilos consistentes so importantes para criar um senso de unidade. Mostrar os rtulos consistentemente tambm ajuda na varredura. A mudana na apresentao pode intencionalmente chamar a ateno para uma opo de navegao. Quebrar a consistncia pode ento adicionar um contraste necessrio. Mesmo assim, a apresentao de rtulos deve comunicar que as opes permanecem juntas. Uso: inserir os mesmos rtulos em diferentes lugares ou diferentes pginas quando se refere a mesma coisa, muito importante.

Tamanho dos rtulos Pode ser difcil descrever contedos diversos ou conceitos abstratos com apenas uma ou duas palavras. O espao em tela pode limitar o tamanho de um rtulo. Mecanismos horizontais, por exemplo, colocam restries no nmero de palavras que uma ao de navegao pode ter. Muitos designers de

navegao buscam por uma economia no tamanho dos rtulos implicitamente razo clara: rtulos maiores tm uma tendncia maior de conterem palavrasgatilho que as pessoas esto procurando. Dito de outra forma, os rtulos pequenos bloqueiam o aroma da informao. Rtulos maiores tambm ajudam as pessoas a prever melhor o que vir pela frente.


Entretanto existem limites para o tamanho dos rtulos. Existe um limiar para a quantidade de palavras que as pessoas podem compreender de uma s vez. Isso no o mesmo que dizer que um rtulo com uma nica palavra no pode fornecer uma boa informao. Algumas vezes uma nica palavra justamente o rtulo certo.

Sistemas de rotulagem Os rtulos de navegao no existem isoladamente: eles so parte de um sistema de cabealhos, ttulos e textos que direcionam as pessoas s informaes que elas querem. O design de rtulos de navegao deve encaixarse dentro de um sistema geral. Existe a tendncia de focar em um elemento ou em outro. Em muitos casos as pessoas que criam os rtulos de navegao so diferentes daquelas que escrevem os ttulos das pginas. Seu trabalho unir tudo isso para criar um sistema coeso. Os elementos chave a serem considerados so os ttulos do navegador, URLs e ttulos de pginas.

Ttulos de navegador A maioria dos navegadores tem um ttulo em uma barra no topo da aplicao. As pessoas no prestam ateno aos ttulos do navegador quando esto surfando na web. Como resultado, os designers de sites podem negligenci-los. Mas os ttulos do navegador so importantes por muitas razes. Favoritos: quando as pessoas colocam uma pgina nos favoritos, a maioria dos navegadores utiliza o ttulo do navegador como rtulo padro para o nome do item favorito. A maioria dos indivduos no modifica esses nomes manualmente. Se a inteno que os visitantes sejam capazes de gravas as pginas nos favoritos e voltem nelas, de bom tom elaborar rtulos de navegador.44_______________________________________________________________________ 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Todos os direitos reservados.

Navegao em abas: navegadores populares, tal como o Firefox, oferecem navegao em abas. O rtulo mostrado na aba normalmente o ttulo do navegador para uma dada pgina. Isso tambm se aplica quando as pessoas abrem mltiplas janelas em seu computador: o rtulo mostrado para cada instncia um ttulo do navegador. Impresso: ao imprimir, o ttulo do navegador pode aparecer no topo da pgina impressa, tornando uma parte importando do documento impresso. Links para resultados de busca: os ttulos do navegador so frequentemente os elementos exibidos nos resultados de uma busca no site ou de um mecanismo de buscas. Essa pode ser a nica informao que a pessoa tem para determinar se a pgina se encaixa nas suas necessidades de busca. Adicionalmente, se os ttulos do navegador contiverem informaes de tpicos, isso tambm aparece nos resultados de busca.

URLS As pessoas podem usar URLs como um mecanismo de navegao de muitas maneiras: Iniciao: as pessoas informam URLs diretamente nos navegadores para irem a um site web inicialmente. Algumas vezes elas tem o endereo escrito, outras vezes elas fazem isso de cabea, ou algumas pessoas tentam adivinhar o endereo. Orientao: as URLs podem mostrar localizao. Primeiro e o mais importante, elas geralmente refletem o nome da companhia ou do dono do site. Ser capaz de olhar rapidamente para uma URL e confirmar onde a localizao, ajuda na orientao. Segundo, a estrutura de diretrios das URLs pode mostrar a localizao de uma pgina dentro de um site. URLs simples vo indicar a categoria a qual uma pgina pertence, normalmente45_______________________________________________________________________ 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Todos os direitos reservados.

de uma maneira que est em sincronia com os mecanismos de navegao principal. Destino: a maioria dos navegadores web revela o destino de um link no canto inferior esquerdo da tela quando o mouse passa sobre o link. Isso fornece pistas valiosas sobre a pgina seguinte e pode ajudar na navegao. Apagar diretrios e parmetros do final da URL, por exemplo, pode trazer as pessoas de volta pgina principal ou a uma pgina de aterrissagem.

Ttulos de pginas comum ter um ttulo em cada pgina dentro da rea principal do contedo. A coordenao dos rtulos de navegao e dos ttulos da pgina importante no processo de reorientao. Se algum clica em um link para histrico da companhia, a pgina seguinte deve refletir e confirmar que essa a pgina do histrico da companhia. Isso normalmente feito atravs do ttulo da pgina. Dentro de uma pgina podem existir cabealhos de pginas tambm. Eles devem fazer sentido tanto em relao aos rtulos dos links de navegao quanto aos ttulos de pgina. Uma hierarquia de cabealhos deve ser clara.

Criando um esquema flexvel Criar um esquema lgico para rotulagem prtico para gerenciar uma grande quantidade de pginas. Pode ser muito difcil, por exemplo, criar mo a navegao, os ttulos de pginas e outros elementos em cada pgina para um site com 10.000 pginas. Ao invs disso, mais eficiente estabelecer regras e padres de rotulagem. Sistemas de gerenciamento de contedo so normalmente configurados para funcionar com tais regras. Por exemplo, os ns de uma trilha de migalhas de po podem ser obtidos da mesma fonte que os46_______________________________________________________________________ 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Todos os direitos reservados.

ttulos de pgina. Isso facilita a manuteno e as atualizaes: uma mudana em um causa uma mudana no outro. Entretanto esquemas flexveis podem produzir resultados que parecem mecnicos. Eles no refletem as sutilezas de uma experincia de informao desejada. Redundncia, por exemplo, um interesse primrio. Embora os links e ttulos de pginas, ttulos de navegador URls devessem casar uns com os outros, nem todos devem ser necessrios em cada pgina ou em cada instncia. Eles podem precisar variar para evitar repeties escritas de rtulos.

Rtulos persuasivos Refere-se a encorajar as pessoas a tomarem certa ao ou acreditarem em algo. Os donos de sites geralmente querem motivar os visitantes a verem algum contedo especfico ou realizar alguma ao. A persuaso aparece em dois nveis: macro e micro. O macro nvel tentar fazer com que as pessoas realizem alguma ao. O micro nvel trata-se de links de navegao. No micro nvel os rtulos so crticos no processo. A navegao persuasiva oferece benefcios aos visitantes: "Assine agora e tenha acesso a contedo exclusivo" e "Receba descontos se voc comprar agora". A chamada para a ao torna-se persuadir para a ao. O objetivo instigar ou encorajar as pessoas a fazerem algo. Fornecer pistas sobre os benefcios para o usurio o ajuda.

Traduzindo rtulos Significa que o mesmo layout de pgina aparece em diferentes lnguas. Ao traduzir os rtulos de navegao de uma lngua para outra existem diversos aspectos a serem levados em considerao.47_______________________________________________________________________ 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Todos os direitos reservados.

O tamanho do rtulo: palavras em uma lngua podem requerer um espao significativamente maior do que em outras. Todos os mecanismos de navegao tm limites, alguns mais do que em outros. Se a flexibilidade para vrios tamanhos de rtulos no fornecida na interface, os rtulos traduzidos podem no se encaixar. Adicionalmente, algumas linguagens possuem palavras compostas que no se separam e que facilmente ultrapassam o tamanho determinado da tela. Como regra geral, rtulos traduzidos podem necessitar de um espao at 50% maior que os rtulos na lngua original. Quando isso no for possvel, tenha certeza de utilizar um espao equivalente ao maior termo possvel no design da pgina. A gramtica: os rtulos de navegao que dependem de uma sintaxe especfica ou de construes gramaticais podem apresentar problemas de traduo. Os sistemas de rotulagem devem levar isso em conta. Existem diversas diferenas nas gramticas das lnguas que podem potencialmente causar problemas: o A estrutura das sentenas diferente entre as lnguas. Elementos de navegao embarcados dentro de uma sentena podem no resultar na mesma ordem de links desejada quando traduzidos. o Algumas construes gramaticais e alguns dispositivos no existem em outras lnguas. A lngua alem por exemplo, no utiliza gerndios. Se o seu esquema de navegao depende de uma parte especfica da fala, tenha certeza que isso faz sentido em outras lnguas. o Algumas lnguas associam gnero s palavras. As formas das palavras podem mudar de acordo com preposies ou funes em uma sentena. o As regras de emprego de maisculas e minsculas so diferentes entre as lnguas.

As conotaes: Tradues literais de rtulos podem ter significados diferentes daqueles pretendidos. Autoridade porturia traduz-se

facilmente para o francs e o alemo como autorit portuaire e48_______________________________________________________________________ 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Todos os direitos reservados.

Hafenbehrde. Mas os significados so diferentes. Ao projetar uma navegao web que ser traduzida, preciso planejar para frente, certificando que as construes gramaticais funcionaro em outras lnguas. importante casar o sistema de rotulagem do site com as expectativas dos usurios, com o objetivo de otimizar o mximo possvel.


Referncias KALBACH, James. Fundamentos da Navegao Web. Bookam, 2009.



Mdulo IV Avaliao no Design de Navegao Web

Objetivos do Mdulo Apresentar a avaliao no Design de Navegao Web.

Contedos abordados Navegao estrutural, associativa e utilitria. Pginas navegacionais, pginas de contedo e pginas funcionais. Desenvolvimento de rtulos web, problemtica e qualificao.


Qualidades de uma navegao bem sucedida Abaixo constam algumas das qualidades mais importantes: Balano Facilidade de aprendizagem Consistncia (e inconsistncia) Feedback Eficincia Rtulos claros Clareza visual Adequao ao tipo de site Alinhamento com as necessidades dos usurios Vamos fazer uma breve anlise de cada tpico. Balano

Amplitude versus profundidade referem-se ao balano entre o nmero de itens de menu visveis em uma pgina (amplitude) e o nmero de nveis hierrquicos em uma estrutura (profundidade). Existe um claro compromisso: quanto menos itens de navegao, mais profunda a estrutura; e quanto mais itens de navegao de uma vez, menos nveis de hierarquia. De um modo geral, as estruturas mais amplas funcionam melhor que as mais profundas. O esforo necessrio para escolher continuamente categorias entre muitos nveis de uma estrutura profunda so superiores que o esforo de varrer mais itens em uma navegao mais ampla. Uma ttica comum no design de navegao aglomerar as opes, agrupando itens semelhantes de forma a fornecer nveis de foco. Os usurios ento no precisam varrer cada link em uma pgina, eles podem procurar nos cabealhos os componentes. A partir disso eles podem focar nos links daquela rea. um52_______________________________________________________________________ 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Todos os direitos reservados.

processo de varredura composto por dois estgios: primeiro encontre o grupo certo, ento procure nos links individuais.

Facilidade de aprendizagem As pessoas no esperam aprender a usar um site web. No existe um perodo de treinamento ou a expectativa de ter que estudar um manual ou um conjunto de instrues primeiro. Na web aberta, a durao de tempo gasta em uma nica pgina tipicamente medida em segundos. A inteno e a funo da navegao devem ser imediatamente claras, particularmente para sites ricos em informao com objetivos de negcios, mas tambm para qualquer tipo de navegao. "Mystery Meat Navigation", ou frivolamente ocultar as opes de navegao atravs de passagens do mouse e outros truques, diminui a facilidade de aprendizagem de um site. Apesar de a navegao oculta ser aceitvel para quem est procurando diverso, tais aparatos podem ser uma catstrofe em termos de usabilidade para sites de comrcio eletrnico, portais corporativos e outros sites ricos em informao. Aumentar o tempo que se leva para aprender a navegar em um site ir geralmente diminuir o seu sucesso. Por sorte, a maioria dos designers web, esto se afastando dessa abordagem.

Consistncia e inconsistncia "Seja consistente" uma recomendao primria de design de interface. Em termos de navegao, isso normalmente refere-se aos mecanismos e links que aparecem em uma localizao fixa na tela, comportam-se de maneira previsvel, tem rtulos padronizados e tem a mesma aparncia ao longo do site. Geralmente, essa uma boa abordagem e algo que voc deve buscar.


Mas tenha em mente que a consistncia no igual a uniformidade; a inconsistncia to importante quanto a consistncia no design de navegao. Coisas que funcionam de maneiras diferentes tambm devem diferir na aparncia. A regra geral quando as pessoas dizem "seja consistente" : fornea um balano entre a consistncia e a inconsistncia. Algumas inconsistncias so crticas para a navegao. Variar a posio, as cores, os rtulos ou o layout geral de um mecanismo cria um sentido de progresso atravs de um site. Inconsistncias aleatrias refletem um design feito sem cuidado e tendem a causar problemas. No entanto, quando usada sabiamente, a inconsistncia pode ser poderosa. Qual o balano correto entre consistncia e inconsistncia? Depende, naturalmente. onde o seu julgamento entra em jogo. E, claro, testes com usurios reais ajudam de qualquer forma. A consistncia , no fim das contas, uma qualidade percebida. Os usurios podem no ter um problema com uma mudana nas opes de navegao se eles ainda assim puderem cumprir suas metas. As pessoas podem perceber uma inconsistncia tcnica de navegao como sendo consistente se for intuitiva de usar. Se existe uma boa razo para uma inconsistncia e os usurios no a percebem como tal. A nica consistncia que conta a consistncia com as expectativas do usurio.

Feedback Quando esto navegando em seu site, os visitantes devem ser informados sobre o que est acontecendo. O sistema de navegao que voc projeta d a eles evidncias sobre como navegar pelo site. Textos e rtulos so a principal maneira pela qual as pessoas sabero qual opo qual ou qual o ttulo da


pgina atual. Alm disso o feedback na navegao pode ser considerado de duas maneiras: Rollover - uma tcnica que destaca uma opo quando o usurio passa o mouse sobre ela. Seja trocando a cor, o tamanho ou algo mais. Muito til para elementos menores, tais como setas, mecanismos de paginao ou nos nmeros de um pequeno calendrio. Mostrar a posio de uma pgina dentro de um site destacando sua categoria na navegao ajuda a orientar os visitantes sobre sua localizao. Em grandes sites ricos em informao, isso valioso para a orientao. Mostrar a localizao tambm ajuda se algum interrompido e precisa continuar sua sesso mais tarde.

Eficincia Os caminhos para a informao devem ser eficientes. Busque criar links navegacionais, abas e cones que sejam fceis de ver e de clicar. Por exemplo, menus dinmicos que necessitam de coordenao da mo para os olhos apenas alcanar as opes retardaro os usurios. Interagir com os links, botes, abas e menus que voc criar deve requerer um esforo mnimo. Cliques desnecessrios acompanhados de recargas de pginas so irritantes. Evite-os. Uma boa navegao minimiza o esforo para chegar ao contedo. Para sites maiores, voc pode aumentar a eficincia de diversas formas: Pontos de acesso duplicados - fornece mltiplos links em uma pgina para o mesmo destino. Ao ler um artigo, por exemplo, pode ser mais fcil para o visitante clicar em um link no final da pgina do que ter que rolar novamente at o incio da navegao principal. Ou, um anncio em uma pgina principal pode simplesmente levar para a pgina de aterrissagem para uma das opes da navegao principal.55_______________________________________________________________________ 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Todos os direitos reservados.

Atalhos - Links associativos criam atalhos para o contedo. Ao invs de ter que navegar para cima em um ramo da estrutura para descer novamente em outro, um link cruzado pode levar os usurios diretamente de uma pgina para a prxima. Pontos de escape - As pessoas frequentemente seguem um padro de centro com eixos de navegao. Elas retornam pgina principal ou pgina de aterrissagem para reiniciar sua estratgia de busca "reiniciar" uma busca e voltar para um ponto de incio comum. Entretanto, seja cuidadoso ao fornecer pontos de acesso duplicados e atalhos: muitas opes podem causar mais confuso que eficincia.

Rtulos Os rtulos dos links so absolutamente crticos para criar um forte aroma de informao, conforme mencionado anteriormente em nosso curso. Evite jarges, nomes de marcas, abreviaes e rtulos muito bonitos ou espertos. Busque por: Categorias significativas que sejam mutuamente exclusivas Formas consistente de rtulos Uma coordenao dos rtulos de navegao com outros elementos de texto, tais como ttulos. Tenha em mente que ambigidade e a amplitude de um rtulo versus sua profundidade so aspectos relacionados. O balano timo para a estrutura est na clareza dos rtulos. Pesquisas mostram que a qualidade dos rtulos dos links afetam o quo bem as pessoas podem navegar em estruturas de diferentes profundidades e amplitudes. Apesar de estruturas mais amplas tenderem a trabalhar melhor de uma forma geral, estruturas mais profundas podem ser to eficientes quanto as mais amplas se os rtulos dos links no so ambguos.


Clareza visual A cor, a fonte e o layout contribuem para uma experincia de informao mais rica. O design visual no trata apenas de tornar as coisas mais bonitas: ele cria um senso melhor de orientao e melhora a usabilidade da navegao. Clareza, proeminncia e visibilidade podem fazer a diferena entre encontrar a informao e perder-se no hiperespao. Alguns aspectos visuais importantes da navegao que contribuem para o seu sucesso so: Lgica visual - quando bem projetado, o layout e o tratamento visual da navegao podem guiar as pessoas atravs do site. Uma clara hierarquia visual de opes ir comunicar " clique aqui primeiro, depois aqui", virtualmente instruindo os usurios quais passos dar e o que fazer em seguida. Facilidade de varredura - lembre que as pessoas tendem a ler as pginas rapidamente medida que buscam por palavras gatilho. Bons menus de navegao fomentam a varredura e fazem com que pular opes seja to fcil quanto possvel. Facilidade de clicar - botes e links devem parecer clicveis. A navegao melhor quando as pessoas no so deixadas tentando adivinhar "esse texto clicvel"?. Distines visuais, tal como sublinhar links, podem ser importantes para facilitar a navegao.

Adequao ao tipo de site O sucesso da navegao relativo ao tipo de site em que ela aparece. Regras genricas e recomendaes para design web frequentemente perdem esse aspecto crtico e tentam usar sentenas vazias que se apliquem a todas as situaes. Elas tratam todos os sites da mesma forma, como se as intenes dos sites fossem uniformes. Ao avaliar a navegao, considere o tipo do site:57_______________________________________________________________________ 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Todos os direitos reservados.

Sites de informao - sites de notcias tais como wikipdia, esto no ramo de fornecer informao. A navegao crucial para o sucesso. A exibio ampla de navegao d uma viso geral melhor para esse tipo de site. Com diversos grupos-alvo, seguir prticas comuns de design reduz a curva de aprendizado e atende melhor as expectativas dos usurios. Site de comrcio eletrnico - as pessoas no podem comprar o que elas no podem encontrar. No seguir a prtica comum em design de navegao pode custar caro. A visibilidade das opes crtica, bem como o bom uso de links associativos: sugira produtos relacionados quando for apropriado. Intranets corporativas - intranets so ferramentas para comunicar e compartilhar informaes dentro de uma organizao. O tempo que os empregados gastam procurando por informao em uma intranet perdido em tempo de trabalho. A eficincia importante. Mas as intranets possuem trfego repetido, ento funcionalidades com uma curva de aprendizado longa podem ser mais aceitveis. Sites de comunidades - comunidades online so locais para as pessoas trocarem ideias e discutirem tpicos. A navegao para sites de comunidades devem suportar essas atividades. Podem existir muitos rtulos para "membros da comunidade" e terminologia usada na navegao, incluindo abreviaes. Sites de entretenimento - a experimentao com a navegao pode ser completamente aceitvel para esse tipo de site. Visitantes de sites de jogos online podem ser mais tolerantes para navegao divertida do que visitantes de um site de notcias. Sites de aprendizagem - educao distncia e programas de treinamento online so cada vez mais comuns. Geralmente a navegao deve ser simples e claras para esse tipo de sites. Enquanto estiver respondendo a um teste online, por exemplo, as instrues e os


mecanismos para avanar so crticos. Aqui a navegao pode at afetar o desempenho no teste.

Sites de identidade Algumas vezes o propsito principal de um site suportar a imagem de uma companhia. Apesar da interao com esse menu ser complicada a princpio, ela parece ser apropriada para uma identidade do site. Ela permite que os visitantes explorem e interajam com vrias marcas da companhia. Note que tambm existem outras formas para obter as informaes sobre as marcas; esse no o nico ponto de acesso.

Alinhamento com as necessidades dos usurios O sucesso da navegao relativo aos grupos-alvo e suas necessidades de informao. Mas identificar essas necessidades de informao no fcil. Por exemplo, os grupos-alvo podem ser grandes na web aberta. E as necessidades de informao mudam, mesmo para uma nica pessoa no meio de uma nica busca. Primeiro defina o seu grupo-alvo. "Todo mundo que usa esse site" no uma boa resposta, mas uma que ouvida frequentemente. Reduza esses grupos para uns poucos tipos de usurios-chave e capture essas personas. Segundo, identifique as necessidades-chave de informao de cada grupo. Busque alm das questes bsicas como Onde eu estou? O que isso? E Onde eu posso ir a seguir? A navegao efetiva alinhada com os objetivos e expectativas mais profundas dos usurios, tais como: Como eu posso encontrar informaes especficas ou produtos que eu quero rapidamente?59_______________________________________________________________________ 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Todos os direitos reservados.

Como eu sei que a informao est atualizada? O contedo deste site confivel? Como eu contato o dono do site? Como eu envio informaes que encontrar para pessoas que conheo? Essa lista deve focar em um conjunto limitado das necessidades dos usurios. Tentar satisfazer todas as pessoas o tempo todo problemtico, e no final, o site pode acabar no atendendo s necessidades de ningum. Foque nos objetivos primrios de seus grupos-alvo primrios.

Mtodos de Avaliao A navegao pode ser avaliada ao longo do ciclo de vida de um site web. Ao relanar ou melhorar um site web, indispensvel determinar primeiro os problemas do site antigo. No incio de um projeto, revise a navegao do site atual. Isso tambm o familiarizar com o site de uma maneira geral. Avaliar a navegao dos competidores tambm pode relevar boas prticas e mostrar como posicionar efetivamente seu site no mercado. Durante as fases de pesquisa e design de novos sites, tente identificar questes potenciais de uma forma sistemtica e resolve-las antes que seja muito tarde. Revises de navegao por seus pares podem detectar problemas em potencial cedo no processo. Finalmente, as avaliaes de um site aps ele ser lanado podem apontar para questes reais que os visitantes possuem. Este feedback pode resultar em melhorias durante as fases de manuteno de um site web. A seguir alguns mtodos comuns para avaliar a navegao. Aqueles que no envolvem os usurios so chamados mtodos de inspeo. Apesar do resultado dessas inspees ser subjetivo, sua abordagem mais estruturada para a60_______________________________________________________________________ 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Todos os direitos reservados.

inspeo de um site traz um feedback valioso. Teste de usabilidade e anlise de mtricas web, em contrapartida, focam em dados sobre o comportamento real dos usurios. Eles podem apontar para problemas reais que os usurios tem enquanto usam o seu site. Nenhuma avaliao isolada lhe dar uma figura completa do sucesso da navegao. Descobertas e concluses so mais fortes quando validadas por uma combinao de tcnicas. Voc pode usar os mtodos listados a seguir para avaliao: Avaliao Heurstica: Um mtodo de avaliao de usabilidade analtico, popular, de baixo oramento, a avaliao heurstica qualitativa e depende de interferncias subjetivas feitas pela pessoa que faz a avaliao. O avaliador faz julgamentos de acordo com princpios reconhecidos, chamados de heursticas. Geralmente so aplicadas em diferentes situaes e so usadas para prever potenciais problemas com a navegao. Os problemas potenciais so identificados e avaliados atravs de uma nota para sua severidade. Veja a seguir o exemplo: 0 - Nenhum problema 1 - Questes cosmticas apenas 2 - Problemas menores presentes para alguns usurios 3 - Problemas maiores esto presentes 4 - Catastrfico de no-usvel para quase todos os usurios O conhecimento e a experincia dos revisores influenciam fortemente os resultados, de modo que dois ou mais avaliadores da equipe de design devem inspecionar sistematicamente a navegao do site. Eles devem ento comparar notas e discutir as descobertas aps a reviso estar completa. Os passos em uma avaliao heurstica so:61_______________________________________________________________________ 2011 IBDIN Instituto Brasileiro de Desenho Instrucional. Todos os direitos reservados.

1. Preparar a. Entrar em um acordo sobre quem ir realizar a reviso b. Tornar-se familiar com as pginas-chave do site. c. Determinar os princpios para a avaliao. d.Entre em acordo sobre as reas-chave de contedo e as funcionalidades a serem revisadas. geralmente impossvel revisar todas as pginas de um grande site. Selecione um conjunto diverso de pginas que cubram uma ampla faixa de tipos de navegao. Alinhe as pginas a serem revisadas com as necessidades e tarefas-chave dos usurios.

2. Executar a. Percorra o site, focando em um princpio por vez. Alternativamente, voc tambm pode revisar cada pgina uma vez para todas as heursticas antes de mover para a prxima. Tome notas e capture cpias das telas medida que voc avana - posteriormente voc precisar oferecer suporte s suas concluses quando apresent-las a outros. b. Para cada heurstica, fornea uma faixa de notas (em relao ao quo severamente a pgina afetada) variando de 0 a 4.

3. Consolidar a. Discuta suas descobertas com outros revisores. Entre em acordo sobre as principais reas de problemas e sobre a interpretao das questes que surgiram em cada rea. b. Procure por padres ao longo de suas notas e entre os revisores. Resuma-os.


c.

Determine

recomendaes

apropriadas

para

resolver

as

questes

identificadas. d. Crie uma apresentao para a equipe de projeto e os stakeholders. e. Desenvolva um plano para resolver as questes identificadas. e. Desenvolva um plano para resolver as questes identificadas.

Heursticas sugeridas: As seguintes heursticas so baseadas em princpios de busca por informao e navegao web. Elas focam na navegao e em padres gerais de busca por informaes. Balano. O nmero de opes de navegao apresentadas est balanceado com a profundidade da estrutura do site. Facilidade de aprendizado. O uso da navegao intuitivo facilmente aprendido. Eficincia. Descobrir e usar as opes de navegao fcil. Os caminhos para a informao so curtos. Consistncia. A apresentao e a interao das opes de navegao so consistentes e previsveis. A inconsistncia apropriadamente usada para mostrar contrastes e prioridade. Rtulos claros. Os rtulos de navegao so previsveis e no- ambguos. As categorias so providas de significado e so mutuamente exclusivas. Orientao. claro onde voc est dentro do site em cada pgina. Explorao. A navegao promove a livre explorao e a descoberta de informao.


Diferenciao. O site facilita a varredura e a navegao. Ele tambm permite que as pessoas diferenciem rapidamente as informaes relevantes das irrelevantes. Uso da informao. Aps encontrar informaes relevantes, as pessoas podem us-las de maneira apropriada. Elas podem capturar o contedo para integrar com suas fontes de informaes pessoais. Modos de busca. A navegao suporta mltiplos modos de busca (itens conhecidos, explorao, voc no sabe o que precisa saber,

redescoberta) que so apropriadas do seu site.

Testando a usabilidade Os testes de usabilidade so frequentemente estruturados como testes em laboratrio, nos quais os usurios de teste realizam tarefas que representam a forma que eles devem interagir com um site web. Enquanto completam essas tarefas, solicitado que eles "pensem em voz alta" e descrevam o que vem, fazem e sentem. Seu trabalho assistir, escutar e tomar notas enquanto eles navegam. Ento identifique as reas onde os usurios tiveram dificuldades como o site e faa recomendaes para melhorias. O nmero de pessoas te

Design Instrucional

Documents

Transcript of Design Instrucional