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
2
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.
3
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:
4
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 of
5
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:
6
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:
7
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
8
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
9
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 ao
10
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
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
12
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.
13
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 sucedida
14
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.
15
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
16
Referncias KALBACH, James. Fundamentos da Navegao Web. In: Design de Navegao Web: otimizando a experincia do usurio. Bookam, 2009. p. 22_43.
17
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
18
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.
19
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. o
20
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.
21
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.
22
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 pgina
23
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
(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.
25
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
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.
27
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.
28
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:
29
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.
30
Referncias KALBACH, James. Fundamentos da Navegao Web. Bookam, 2009.
31
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.
32
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
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
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
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
36
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
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 com
38
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.
39
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
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 frequentemente
41
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:
42
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.
43
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
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, normalmente
45
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 os
46
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
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 e

48
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.
49
50
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.
51
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. um
52
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.
53
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
54
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
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.
56
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
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
58
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
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 a
60
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
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.
62
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.
63
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 testadas uma varivel-chave para o custo do processo de testes e uma questo amplamente debatida nos crculos de usabilidade. Alguns acham que muitos testes interativos com apenas poucas pessoas melhor que um teste nico com doze ou mais pessoas. Outros acham que, de forma a identificar todos os problemas, necessria uma amostra maior. Voc precisar determinar o propsito do teste e a audincia dos resultados antes de responder a essa questo. Testes remotos tambm so possveis com o site no ar. Com esse mtodo, os participantes usam os seus prprios computadores, como eles normalmente
64
fariam para navegar no site web. Um software ento rastreia onde eles clicaram e como eles navegaram. Os participantes podem at mesmo fornecer feedback em cada pgina via campos de entrada de texto. Testes de usabilidade remotos so uma boa forma de testar grupos de usurios dispersos geograficamente.
Observe os seguintes aspectos: Visibilidade - os usurios vem os elementos de navegao chave na pgina? Rtulos - os rtulos so claros e entendveis? Orientao - os usurios perdem-se ao avanar e retroceder em um site? Facilidade de encontrar informaes - os usurios so bem- sucedidos ao tentarem localizar as informaes de que precisam? Eficincia - os usurios podem completar tarefas de busca rpida e eficientemente?
Dado que entrevistar e guiar pessoas atravs de um cenrio de testes uma arte, conduzir os testes requer alguma prtica. Primeiro, ganhe experincia assistindo outros, ento recrute algum em seu escritrio e faa-o realizar algumas tarefas de exemplo com um teste informal. Para testes mais formais, voc talvez queira contratar um profissional de usabilidade. Testes de usabilidade requerem planejamento. Os assim chamados mtodos de "teste de guerrilha" buscam minimizar a sobrecarga testando rapidamente. Testes mais formais, em contrapartida, podem levar semanas de preparao e assistncia de especialistas de usabilidade externos. Os passos bsicos so similares: 1. Identifique e recrute participantes apropriados para os testes. Crie um plano e um protocolo de testes.
65
2. Organize um laboratrio para a coleta e observao de dados. 3. Conduza o teste. Analise as descobertas. 4. Apresente as recomendaes finais.
Anlise de Mtricas Uma boa maneira de aprender se o seu site est atingindo seus objetivos obter dados de trfego. Tradicionalmente, coletar mtricas do site um trabalho do webmaster, o qual usa para monitorar o desempenho. Profissionais de marketing tambm prestam muita ateno s estatsticas em termos de vendas, taxas de converso e volume de anncios. Entretanto. Os dados de uso so tambm valiosos para os designers web. Ferramentas modernas de obteno de mtricas na web, em contrapartida, capturam melhor os caminhos que as pessoas percorrem em um site. Os dados so tambm confiveis. Adicionalmente, muitas mtricas importantes que so especficas do negcio tambm so capturadas, tais como: Taxas de converso Custos de aquisio de clientes Tamanho dos pedidos Vendas totais Seu objetivo amarrar uma melhoria na navegao e uma melhoria nos negcios
66
67
Mdulo V Arquitetura e Esquemas Organizacionais Web
Objetivos do Mdulo Explicar sobre a arquitetura e esquemas organizacionais, elementos importantes para o estudo.
Contedos abordados Arquitetura persuasiva e diagramas de conceito Estruturas esquemticas e de informao de navegao web Planos e mapas do site
68
Arquitetura persuasiva e diagramas de conceito As lojas so organizadas internamente para promover a venda de produtos. As barras de doces, revistas e outros itens pequenos no so colocados no caixa acidentalmente. Promover produtos e otimizar vendas so partes normais de qualquer negcio. Bryan e Jeffrey Eisemberg, especialistas lderes em marketing online, detalham um mtodo para planejar sites que eles chamam de arquitetura persuasiva. Ao otimizar um site para vender melhor os itens, eles apontam trs questes crticas a serem respondidas desde o inicio. Qual a ao que voc quer as pessoas tomem? Quem voc est tentando persuadir para tomar uma ao? O que a pessoas precisa para sentir-se confiante para tomar essa ao? Pessoas e cenrios esto no centro de seu mtodo de arquitetura persuasiva. Juntos eles representam como os visitantes tomam decises e refletem sobre o processo de compra online. As escolhas que os clientes fazem que so capturadas e os cenrios precisam se encaixar com a forma pela qual vende-se os produtos e ideias de um site. A navegao web desempenha um papel central na arquitetura persuasiva e em alinhas os objetivos dos usurios com os objetivos do negcio. Mesmo que no se pretenda criar um site de comrcio eletrnico, ainda assim h a venda de idias e comunicao de uma mensagem. A arquitetura persuasiva desempenha um papel nesses casos tambm. Tem-se trs aspectos chave nesse processo: Conceito de navegao: modelo abstrato de como a navegao funciona. Ele no apenas guia a equipe ao longo do desenvolvimento, mas
tambm d aos usurios um padro claro a ser seguido ao usar o site. Estrutura do site: como as pginas so organizadas em relacionamentos entre si ou como o site construdo.
69
Organizao da navegao: esquemas de organizao agrupam opes de navegao em uma maneira lgica, fornecendo contexto para entender a navegao como um todo. Entender esses trs aspectos da arquitetura do site e importante tanto quando desenha-se o site quanto quando para aprimorar sites j existentes. Diagramas de conceito uma ferramenta til para capturar um conceito de navegao, ilustra graficamente os elementos idias-chave envolvidas em um sistema de navegao. O diagrama de conceito usado para organizar e documentar os vrios elementos do site e como eles se relacionam uns com os outros. Criando um conceito de navegao O conceito uma fuso de vrios elementos, muitos dos quais foram identificados durante a fase de anlise, conforme estudados no mdulo anterior. Objetivos de negcios Objetivos do site Concorrentes Marca Tipos de usurios Objetivos dos usurios e cenrios Os projetos formam conceitos de navegao tacitamente, no explicitamente. As equipes fazem suposies a respeito da direo conceitual do site. Em projetos menores isso pode ser aceitvel. Mas em sites maiores e mais complexos melhor tornar o conceito explcito. Isso significa que criar um conceito deve ser um exerccio colaborativo. Um conceito concebido na mesa de uma nica pessoa tem poucas chances de sobrevivncia. Abaixo constam as qualidades de um bom conceito: Ser fcil de lembrar.
70
Ser envolvente, cobrindo a navegao de nvel macro e micro e futuras decises de design. Estar alinhado com os objetivos dos stakeholders Satisfazer as experincias dos usurios. Satisfazer as experincias dos usurios De um modo geral criar um conceito de navegao envolve os seguintes passos: 1. Revisar as informaes coletadas durante a Anlise, incluindo a viso, a marca, os concorrentes, os objetivos e, claro, os usurios. 2. Descrever em um cenrio as aes desejadas que as pessoas precisam realizar para satisfazerem seus objetivos de negcios. Baseadas nas pessoas e nos cenrios criados. 3. Realizar sesses de brainstorming e explorar diferentes modelos possveis de navegao, reunir os tomadores de deciso de uma mesma sala e utilizar o gnero e as metforas para guiar o seu conceito. 4. Desenvolver um diagrama de conceito mostrando os relacionamentos entre as funcionalidades e o contedo do site. Com o conceito definido de navegao, pode-se considerar a estrutura da informao no site. Enquanto um conceito reflete um modelo abstrato do site, a estrutura captura a disposio especfica das pginas e do contedo de maneira concreta. Estrutura de informao A estrutura da informao refere-se ao plano ou mapa de pginas no site. o esqueleto do site que estar preenchendo com os layouts de pginas e de designs finais. medida que h a investigao de como construir a navegao, preciso manter os diferentes tipos de estruturas em mente, incluindo: Estruturas lineares
71
Teias Hierarquias Facetas Estruturas emergentes Um sistema de navegao web pode usar qualquer dessas estruturas bsicas simultaneamente ou todas elas.
Estruturas lineares Em uma estrutura linear simples, as pginas so dispostas em sequncia. Estruturas lineares ocorrem quando as pessoas no podem chegar a uma pgina sem antes ter visto uma pgina anterior. Um site de busca um exemplo de uma estrutura linear natural.
Teias Uma estrutura em teia possui muito ns que so ligados sem nveis ou sequencias. A informao ligada atravs de links e referncias cruzadas onde no existe um incio e um fim bem definidos. Cada pgina um centro em potencial em uma estrutura de centro e eixos que as teias se formam. Estruturas em formato de teia ocorrem em sites como MySpace, por exemplo, onde os usurios criam links livremente entre pores de contedo e para outras pessoas.
Estruturas hierrquicas As hierarquias mostram nveis de ns que so dispostos em um relacionamento pai-filho, tambm chamadas de estruturas em rvore. Existe um n de nvel
72
superior, ou o nvel mais alto da hierarquia, normalmente a pgina principal. Os ns da hierarquia podem ter pais (um nvel acima) ou filhos (um nvel abaixo). Todos os nveis abaixo herdam a designao de nvel do pai e estendem essa designao para o prximo nvel. A maioria dos sites possuem algum tipo de hierarquia. A estrutura pgina principal > pginas de aterrissagem> pginas de produtos comum para a maioria de sites de comrcio eletrnico. Mesmo um simples site web pessoal com apenas uns poucos nveis representa uma estrutura hierrquica.
Facetas Oferecem uma alternativa s hierarquias. Nas hierarquias, a localizao de um dado item determinada por sua posio em forma de rvore. A organizao em hierarquia escrita tambm limitante: existe uma nica maneira de localizar uma informao. As pessoas esto amarradas a esse caminho para encontrarem informaes. Com facetas, a localizao de um item dada pelas categorias a que esse site pertence: item 1 pertence s categorias A,B e C, mas no categoria D. Isso oferece mltiplos pontos de acesso. Sistemas facetados destacam o fato que os buscadores de informaes podem buscar um recurso a partir de qualquer nmero de ngulos. Isso oferece uma maior flexibilidade ao localizar informaes.
Estruturas emergentes No so planejadas a priori, mas materializam-se espontaneamente. Elas no so criadas por uma nica pessoa ou evento, mas ao invs disso desenvolvemse incrementalmente. Os elementos individuais unem-se e constroem-se em um sistema auto-organizado. Nesse sentido as estruturas emergentes descrevem
73
como a arquitetura do site criada, ao invs do relacionamento das pginas umas com as outras.
Esquemas Organizacionais A estrutura de um site indica a disposio fsica e a conexo das pginas. Ela no determina como as pginas e os contedos so tematicamente relacionados. Alm de determinar a estrutura do site, o prximo passo do design de navegao considerar os tipos de categorias e tpicos que sero usados para organizar a informao. A recomendao geral para design de navegao criar menus que compartilhem uma organizao geral. Esquemas objetivos e subjetivos Esquemas objetivos organizam a informao em categorias bem definidas: Esquemas alfabticos: apesar de serem muito familiares, no comunicam nada a respeito do relacionamento entre os objetos de uma maneira significativa. Eles so teis apenas quando os visitantes sabem as palavras exatas dos itens desejados. Esquemas cronolgicos: sites de notcias frequentemente usam
organizaes cronolgicas, enquanto que histricos encaixam-se muito bem com representaes de linha do tempo. Esquemas geogrficos: a localizao a base para a organizao com esquemas geogrficos: global ou nacional, cidade ou estado, regio ou pas. Ao criar a navegao de um site estar lidando primariamente com esquemas subjetivos.
74
Por tpico ou assunto: em sites grandes, ricos em informao, muito comum agrupar produtos, servios ou o contedo do site por tpico. Por grupo de audincia: aqui as opes de navegao falam para diferentes grupos de usurios. O site web da NASA (www.nasa.gov) inclui navegao separada para opes baseadas na audincia. Por tarefa: sites que so mais interativos e chamam por uma entrada do usurio podem beneficiar-se de um esquema de organizao de opes de navegao baseados em tarefas. Esquemas Mistos: as pessoas gostam de informaes organizadas consistentemente. Mas as informaes no se deixam categorizar de maneira clara, organizada e regular. O contedo e a funcionalidade de um site podem impedir uma organizao puramente feita de acordo com tpicos ou geograficamente, por exemplo, mesmo que esse seja o esquema que funciona melhor para os visitantes. Pode- se contar com um conjunto misto de contedo para organizar quando estiver tratando com vastas quantidades de informao.
Mapas do site um documento que demonstra os relacionamentos entre o contedo e a funcionalidade na arquitetura de um site. Ele captura o conceito, a estrutura da informao e o esquema de organizao de um site em uma representao visual. Um mapa do site um artefato-chave a ser entregue ao criar o design de um site web, 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 negcios. Designers visuais identificam necessidades de tipos de pgina e de layouts de pgina a partir de mapas do site. Os programadores visualizam o escopo e a extenso do site a partir de mapas do site.
75
Elementos de um mapa do site: Existem muitas variaes de mapas do site: a quantidade de detalhes mostrados, a disposio das caixas, o uso de cores e formas e assim por diante, podem variar de designer para designer. Entretanto, o principal propsito o mesmo: comunicar efetivamente sua arquitetura para os outros. No existem regras definidas sobre como um mapa do site deve aparecer, mas existem elementos comuns de mapas do site, incluindo: Ns: As pginas em seu site so os ns bsicos no mapa do site, tipicamente mostrados como quadrados. Conexes: Os ns so conectados para mostrar relacionamentos. Mapas do site geralmente no mostram todos os links associativos, mas ao invs disso mostram navegao estrutural e utilitria. Esquemas de numerao: Para evitar confuso, um identificador nico pode ser dado a cada pgina. So dadas letras para as sees dos sites. Rtulos: Cada n em um mapa do site precisa de um ttulo, o qual corresponde ao rtulo de navegao para aquela pgina. possvel utilizar essa oportunidade para trabalhar as palavras finais que se deseja usar. Atributos de pginas: Alm do ttulo da pgina, pode-se tambm indicar algumas caractersticas de cada uma das pginas: Formatos de contedo alm de HTML, tal como PDF Pginas que aparecem em uma janela pop-up Contedo dinmico que muda em tempo real Contedo dinmico que muda em tempo real Privilgios de acesso, por exemplo, se um login necessrio para acessar o contedo. O tipo e o template da pgina Funcionalidade e caractersticas especiais.
76
Notas e anotaes: Os mapas dos sites no so sempre capazes de comunicar tudo visualmente. Excees ou condies especiais precisam de uma nota acompanhando-as no mapa do site. Escopo: Mostre as pginas que esto dentro e fora do escopo para o projeto atual. Isso ajuda a planejar para mudanas posteriores e garante eu a arquitetura seja escalvel. Ttulo e legenda: Assim como para toda sua documentao de projeto, d um ttulo ao mapa do site, juntamente com o nmero de verso e /ou data. Crie uma legenda para explicar as diferentes formas e smbolos utilizados.
77
Referncia KALBACH, James. Fundamentos da Navegao Web. Bookam, 2009.
78
Mdulo VI Layout e Apresentao da Interface de Navegao
Objetivos do Mdulo Explanar sobre o desenvolvimento e criao de templates e wireframes de navegao.
Contedos abordados Desenvolvimento de lgica visual Criao de templates e construo de wireframes Design grfico x Hierarquia visual x Comunicao de navegao
79
Desenvolvimento do processo de layout Dentro do processo de desenvolvimento geral do site, desenvolver o layout das pginas prova ser uma fase crtica. nesse ponto que as pessoas reagem ao design - mais do que nos estgios anteriores. Layout da interface O layout da interface no se relaciona apenas sua aparncia, que contribui para a experincia subjetiva e emocional de recepo. Na verdade o layout, com o estilo visual, fontes, cores, imagens, parte integrante do design da informao e da funcionalidade dos aplicativos. O layout da interface influencia a primeira impresso, de carter subjetivo, do usurio que visita um web site especialmente daqueles que o visitam pela primeira vez. Uma primeira impresso positiva facilita a compreenso da estrutura do contedo 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 usurios da internet gostam ou no de um web site no primeiro momento do contato, ou seja, no intervalo de um vigsimo de segundo, menos que a durao de um piscar de olhos em que a pgina aparece diante dos seus olhos. Segundo a pesquisa, a primeira impresso influencia todo o resto da experincia de uso e navegao no site. Esta afirmao no um consenso. Jakob Nielsen argumenta que estes testes no foram realizados com conexo internet e suas condies de realizao foram muito diferentes das condies de uso normal de acesso e visualizao das pginas. Ele argumenta: Online, o tempo de carregao das pginas maior (o que faz com que a primeira impresso seja a de "partes" da pgina e no do conjunto) 80
normalmente os textos aparecem primeiro. Online, no h pgina que carregue instantaneamente. Normalmente o usurio olha primeiro os detalhes que o interessam e estes compem um conjunto de impresses que se acumulam antes que faa uma impresso geral da pgina - a impresso geral composta de diversos fragmentos que compem o layout do conjunto. O usurio j tem uma expectativa prvia do que procura em relao pgina que seleciona, o que influencia a sua primeira impresso - isto no aconteceu no ambiente de testes citado em que os usurios no tinham qualquer expectativa sobre as pginas que lhes seriam mostradas. A primeira impresso se processa de maneira relativamente lenta e muitas vezes se consolida quando o usurio j saiu da pgina (o que pode resultar at num movimento de retorno imediato). Alertbox Announcement List, 23.1.2006). De qualquer forma, os autores de modo geral reconhecem que a identificao inicial dos elementos de layout ajuda a compor a experincia de interlocuo entre usurio e interface. Alm de criar uma empatia imediata, o layout influencia o grau de facilidade de encontrar os fragmentos de informaes de maneira intuitiva. Uma interface saturada, com muitas instrues, sinais, rtulos, demanda mais tempo de aprendizado de uso e maior esforo para a localizao das informaes. E a falta de pistas visuais, com sinais pouco visveis, logotipos difceis de localizar ou com funcionalidades difceis de decifrar, dificulta a utilizao. O layout influencia tambm como o visitante do site se posiciona em relao ao seu contedo. Um layout agradvel inspira confiana e estimula a navegao em diferentes pginas. (Newsletter
81
A organizao visual das informaes est tambm relacionada ao deslocamento entre as pginas e s indicaes do contedo disponvel, orientando assim a ao do usurio. A seleo de um boto ou item de um menu pode ser influenciada pela ordem em que estes elementos esto dispostos em relao a outros.
A percepo do layout no projeto comum a percepo de que o projeto de site constitudo em sua maior parte pelo planejamento do layout das telas. Mas na verdade, web design uma das etapas do projeto, que inclui uma extensa cadeia de processos de conhecimento. O layout da interface reflete um conjunto de solues de diversas naturezas, que devem estar contempladas no resultado final. Estas solues levam em conta fatores como uso experincia, deslocamento e sentimento de identificao do usurio, aderncia ao conceito editorial e necessidades especficas de edio, relao direta com os objetivos do site. Devido a esta diversidade de fatores, a equipe de design para a web costuma ter formao heterognea e escalada de acordo com a natureza do projeto. Para o projeto de um site com poucos recursos, que no permita a contratao de profissionais especializados, o designer tende a acumular algumas funes de programao e precisa ter a formao tcnica necessria. Um projeto com maior segmentao profissional permite a contratao dedicada de designers e outros profissionais com formao especfica em mdias online e tecnologias da informao. O designer de web sites precisa conhecer no s os assuntos relativos aos processos de elaborao de um projeto e criao de solues visuais como tambm regras de acessibilidade, usabilidade, arquitetura
82
da informao, aplicao de elementos para a interao entre usurios e a interface, composio de pginas em HTML com CSS, uso de elementos como animao, vdeo e som, mesmo que no se proponha a ser um especialista em cada uma destas reas de conhecimento. Quanto mais completa a formao profissional, maior o escopo de atuao do designer em todas as etapas do projeto e maior a probabilidade de compreender e absorver o modelo conceitual dos usurios de cada site. A formao especializada garante ao designer as condies para ter a palavra final em decises referentes ao design da interface, o que nem sempre acontece. Muitos gestores no-especializados relacionam o layout apenas forma do produto esquecendo que cada elemento est relacionado a conceitos e funcionalidades especficos e tomam decises baseadas apenas nas suas impresses pessoais. Embora a opinio de cada profissional seja importante e necessria, o argumento do designer deve contribuir para preservar a integridade conceitual e a qualidade tcnica da interface.
Atividades relacionadas (layout de web sites) As atividades abaixo esto numeradas de acordo com o sequenciamento de atividades da elaborao da estrutura: H1. Examinar a arquitetura da informao, diagramas de fluxo e storyboards, para examinar os elementos necessrios interface. As anlises das entrevistas fornecem informaes valiosas para esta avaliao, bem como mapas conceituais e pesquisas sobre os padres culturais de grupos de usurios e seus cdigos visuais (cores, sinais, cones, tipologias).
83
Tambm faz parte destas atividades o conhecimento da configurao do usurio ideal para o qual o site ser desenvolvido. Quanto mais amplo o pblico do site, mais preparada para grande variedade de situaes de acesso precisa ser a interface.
A configurao tcnica do usurio A diversidade de situaes de acesso muitas vezes exige que, no projeto de interfaces web, seja necessrio selecionar os usurios e as circunstncias de uso para quem o site se dirige em carter prioritrio. importante, para isto, manter em foco os objetivos do negcio, do produto e dos usurios. A definio dos segmentos prioritrios do pblico de um web site ou plataforma web feita durante a conceituao do projeto. Neste momento, diversos mtodos, que variam de acordo com o escopo do projeto, ajudam a estabelecer o perfil do pblico-alvo, seus hbitos, seu vocabulrio, e a conhecer as suas principais caractersticas de
acesso. Este conhecimento permite ao designer de interfaces web criar layouts que estabeleam identidade afetiva, cultural, simblica, com os principais segmentos a quem o site se dirige. E facilita a estruturao de interfaces adaptadas s condies tcnicas e contextuais de uso da maioria, ao levar em conta as diferenas em configuraes tcnicas como: o Plataformas e sistemas operacionais (Windows, Mac, Linux), em diversas verses. o Browsers tambm em diferentes verses, com diferentes configuraes da interface - ocupando diferentes reas da tela do monitor, com ou sem ferramenta de busca, cones, letreiros, funcionalidades especiais - como a barra do del.icio.us, por exemplo. o Resolues de tela, tanto em PCs como em dispositivos mveis.
84
o Velocidades de conexo. o Capacidade/ velocidade de processamento. o Fatores como estes interferem diretamente na composio dos elementos das interfaces web e precisam ser considerados antes mesmo que o designer comece a criar o layout.
Por exemplo: A interface de comrcio ou de governo precisa incluir desde as resolues de tela de PC mais baixas (atualmente 800x600) at as conexes de acesso mais lentas, com linhas discadas, na medida em que o site atende a um pblico amplo e heterogneo. J o layout do site de um grupo de estudos de fsica nuclear dentro de uma organizao pode considerar de equipamento de uso mais comum entre estes profissionais e a sua velocidade de conexo. E neste caso o desenho da tela, bem como o uso de imagens e interfaces multimdia pode ser dirigido especialmente para as condies de acesso e necessidade de contedo destes usurios. Milissa Tarquini, diretora de design de interface do usurio e arquitetura da informao da AOL, lembra que a rolagem de tela no era permitida nos sites da empresa. Textos longos, artigos, listas, eram apresentados em caixas, estas sim, com rolagem vertical. A criao de contedo, o design e a programao das pginas eram rigidamente controlados, de modo a se adaptar ao dispositivo dos usurios. No entanto, na medida em que os browsers de acesso deixaram de ser proprietrios e os sites da AOL aderiram web aberta, as polticas internas de design e produo de contedo se adaptaram a configuraes mais genricas de acesso.
85
A configurao tcnica de uma pgina web se subordina, em ltima anlise, aos objetivos do web site. Quanto mais amplo e heterogneo o pblico, maiores as restries tcnicas para a estruturao das pginas. Inversamente, quanto mais segmentado o pblico, melhores as condies de se estabelecer recortes com as configuraes de uso ideais.
Algumas medidas a considerar na adaptao do layout da interface a cada usurio Examinar em detalhe as pesquisas e os estudos sobre o usurio, para traar o perfil dos principais pblicos do site. Estabelecer as configuraes tcnicas prioritrias s quais a interface vai atender e verificar como afetam diretamente o layout. Definir as informaes que precisam aparecer no alto das pginas (ou acima da dobra da marca de rolagem) da maioria dos usurios - a partir da resoluo de tela e dos equipamentos da maioria. importante tambm definir a rea em que a barra de rolagem deve comear a ser necessria, para que os elementos desta rea sinalizem que h mais contedo embaixo - fotos e blocos de textos "partidos" e incompletos, por exemplo, levam os usurios a fazerem a rolagem para continuar a leitura. Desenhar o modelo bsico do layout e test-lo em diferentes situaes de uso (browsers, plataformas, resolues, tamanho do monitor). Depois da homologao pelos stakeholders, aplicar o modelo s diversas situaes editoriais necessrias. Testar o layout com usurios representativos do pblico-alvo, de preferncia no lugar de acesso das pessoas, de modo a emular as situaes de uso mais comuns.
86
Configuraes inclusivas O controle da estrutura do layout feito atravs de folhas de estilo CSS. Alguns desenvolvedores utilizam scripts e "hacks", que permitem adaptar o layout a diferentes configuraes de acesso. No entanto, algumas medidas ajudam a adaptar o layout da interface a pblicos amplos: Adotar padres web, que seguem recomendaes do W3C para o desenvolvimento do sites e de browsers, e aumentam a compatibilidade das pginas com diferentes plataformas, linguagens e sistemas operacionais. Usar fontes com tamanho flexvel (baseado em percentual ou na largura da letra). Configurar layout lquido, com a largura da pgina adaptvel a diversas resolues de tela, especialmente se o site se dirigir a pblico amplo e no especializado. Compatibilizar a interface com os principais programas de acesso web, em diversos dispositivos, pelo uso de CSS para diferentes situaes de impressoras em braile, etc.). Aderir a normas de acessibilidade, como o uso de cores contrastadas para os elementos crticos, de forma facilitar a sua visualizao/ identificao ou de "alt" tags para os usurios que no visualizem ou habilitem a visualizao de imagens. Usando ou no estes recursos, o designer precisa testar exaustivamente os layouts e as configuraes estabelecidas em diversas situaes de uso, para garantir que a interface se mantenha estruturada e funcional para a maioria dos usurios prioritrios.
87
De qualquer forma, mesmo no caso de sites ou portais de pblicos restritos, em que a interface desenhada para atender a um pblico restrito, esta deve se manter estruturada em diferentes situaes de acesso. importante tambm entrar o mais profundamente possvel no universo (informacional, tcnico, comercial editorial) do produto web em questo e, de maneira mais especfica, no problema a resolver. O conhecimento do assunto e do seu ambiente facilita o processo de criao, a escolha dos referenciais, a defesa das solues e conversa. O cliente confia mais no fornecedor que entende (ou procura entender) o resultado a ser obtido e se converte num parceiro. Em vez de cruzar os braos e simplesmente esperar que o produto aparea pronto na sua frente, passa tambm a cooperar na criao e no aperfeioamento do produto. a argumentao na
H2. Avaliar as informaes sobre o conceito editorial Conversar com o editor sobre o tamanho dos ttulos e textos, a necessidade de leads e subttulos, o tamanho das chamadas na pgina Principal e pginas internas, de olhos dentro dos textos, a necessidade de estilos especiais para citaes e fontes bibliogrficas, de agrupamentos de links.
H3. Organizar uma imagem geral como esboo e verificar a sua aderncia s necessidades do projeto Neste momento, importante avaliar a inventividade e da originalidade da soluo e como este fator repercute positiva ou negativamente no pblico. importante tambm estabelecer uma grade (malha) que se adeque s diferentes
88
configuraes de uso e que se mantenha consistente nas diversas solues de layout. H4. Produzir o layout e alternativas em programa apropriado Muitas vezes as solues so esboadas de maneira informal, e vo aos poucos ganhando forma e acabamento at que sejam satisfatrias tanto por seus autores quanto pelos clientes e pelo pblico em geral. Embora seja comum a apresentao ao cliente de layouts em formato de imagem, feitos no Photoshop, o desenvolvimento do layout em HTML com uso de CSS mostra a ideia com maior preciso especialmente os efeitos visuais que mudam sob a ao do usurio, bem como o modo de uso dos botes e recursos dinmicos e os detalhes de acabamento. Muitos clientes aprovam um layout apresentado como imagem e, ao ver o resultado em HTML, pedem para fazer tantas mudanas que preciso praticamente refazer a soluo. Mesmo que os elementos, a composio e a descrio sejam satisfatrias em papel ou na imagem esttica, a demonstrao do uso permite uma percepo completa da soluo, tanto sob o ponto de vista visual como funcional. Neste momento, o designer precisa considerar aspectos relacionados composio do conjunto de elementos (funcionais, de contedo) no contexto do veculo. E considerar tambm aspectos especficos da interface digital. A composio geral dos elementos pode seguir modelos simtricos ou assimtricos, com colunas de larguras variveis, dispostas de diferentes maneiras, de acordo com o(s) eixos(s) que guiam a localizao dos elementos na pgina ou de acordo com malhas (grids) que atendam s caractersticas do contedo. Pode incluir a concepo de uma malha grfica (grid) para a maioria das pginas, de forma que, apesar das diferenas do contedo de cada pgina,
89
todas tenham as mesmas margens, alinhamentos, localizao de elementos em linhas e colunas. A malha facilita o posicionamento dos elementos da interface e do contedo em coordenadas definidas. A malha tambm prov sentido de localizao para o deslocamento dos usurios nos diferentes canais e sees Exemplo - Uma malha consistente facilita a localizao e o deslocamento do usurio nos diferentes canais e sees. O sentido de localizao interno tambm facilitada pela barra de links ("breadcrumb"), que substitui o ttulo da seo, nas pginas mais internas A malha grfica geral pode dispor os elementos do layout da interface web de diversas maneiras: Layout "lquido", que se adapta a diferentes resolues de tela. Neste caso, necessrio verificar o posicionamento dos elementos em diferentes configuraes do monitor, priorizando uma delas. Portais com grande volume de acessos dirios, como Amazom.com, Submarino e Americanas.com preferem usar este modelo de configurao, para incluir o maior nmero possvel de compradores. Posicionamento centralizado do layout em relao s bordas da janela do browser: Esta soluo permite uma fcil varredura do contedo com os olhos, pois estes no precisam se deslocar lateralmente tanto quando nos layouts lquidos. No entanto, se o layout divide o contedo em muitas colunas, pode dificultar a leitura e exigir muito esforo de rolagem. Exemplos: O Estado de So Paulo, Newyorkpost.com Posicionamento do layout esquerda da tela em relao s bordas da janela do browser. Permite que os elementos localizados esquerda da tela se localizem de acordo com o modelo mental da maioria dos usurios (de cultura ocidental). Normalmente os elementos localizados do lado direito tm menos importncia, na medida em que podem ficar invisveis para usurios que utilizam resolues de tela mais baixas.
90
A composio dos elementos dentro da malha grfica inclui tambm a localizao e o balano visual dos elementos em contexto - o usurio deve ser capaz de entender visualmente a estrutura da pgina e a funcionalidade dos elementos, bem como os elementos editorial e/ou comercialmente mais importantes, de acordo com o modo como esto organizados. Exemplo - Fatores composicionais da estrutura A localizao de cada elemento na pgina: a rea localizada no alto esquerda a que mais chama a ateno de usurios de cultura ocidental, acostumados com a leitura da esquerda para a direita, de cima para baixo. Geralmente elementos muito importantes, como o smbolo e o logotipo das empresas/produtos ficam situados neste local. Toda a rea esquerda da pgina bastante valorizada e costuma ser o local de elementos importantes da interface, como as barras de navegao principais. O balanceamento entre as reas mais e menos ocupadas, que ajuda a estabelecer o equilbrio visual entre elas. A proximidade dos elementos pode criar associaes entre uns e outros, ou, pelo contrrio, dissoci-los Deve-se evitar usar fundos de tela muito "ocupados", que possam atrapalhar a leitura dos rtulos de botes e de textos, bem como o reconhecimento dos elementos funcionais. Os espaos em branco ajudam a leitura e a compreenso do contedo no contexto do site. Aspectos especficos da interface web Para que o desenho de um web site com muitas sees e reas de informaes se mantenha consistente e evidencie as suas funcionalidades, cada pgina deve usar apresentar um layout consistente em relao ao conjunto. No entanto o
91
modelo precisa ter flexibilidade para abrigar contedo com diferentes caractersticas e atender a diferentes demandas. importante para isto observar aspectos como: Navegao e layout - a estrutura visual e a estrutura de informaes do site devem estar diretamente relacionadas, para facilitar o deslocamento e a orientao do usurio. Configurao de tipologias - os estilos de fonte e outros atributos de texto, como tamanhos, cores devem ser aplicados consistentemente. Os textos precisam ser configurados de modo que a sua leitura seja adequada a monitores de diversos tamanhos e com diversas
configuraes de cores e resoluo. Palheta de cores - o uso de sistemas de cores harmoniosos e conceitualmente integrados permite a identificao funcional dos
elementos e o estabelecimento de sentido de identidade para a usabilidade dos canais. Malha grfica (grid) - o uso de referncias ortogonais que se mantenham consistentes em todas as pginas permite a criao de ambientes com rigor conceitual e visualmente harmoniosos. A rolagem vertical de cada tela - Quanto mais fundo nas camadas de informaes o usurio estiver, menos se incomoda com a rolagem vertical, pois est mais interessado no contedo. Facilidade de uso de elementos ativos como ttulos de links, botes, barras de navegao, formulrios em diferentes situaes e aplicaes. H5. Testar a soluo com contedo em diferentes formatos Seja contedo editorial (textos, imagens, vdeo, msicas) ou funcional, como formulrios. Testar imagens em diferentes formatos, aplicar barras de navegaes adicionais em reas internas, prever a diagramao de grficos e tabelas.
92
H6.
Apresentar
presencialmente
as
solues
aos
clientes,
patrocinadores e stakeholders De modo a que a soma de opinies possa enriquecer a adequao da soluo aos seus objetivos.
H7. Detalhar as solues por escrito, incluindo todos os elementos da interface Como diferentes tipos de ttulos, subttulos, textos, imagens (fotos, grficos, tabelas, cones) elementos de navegao (barras, botes, menus, links), diferentes tipos de formulrios, grficos e tabelas, vinheta de apresentao de vdeos e arquivos sonoros, moldura para apresentao de vdeos, pginas especiais e elementos especficos a cada orientao comercial e editorial.
H8. Registrar por escrito todas as decises Especificaes gerais editoriais e de layout (conceito geral, tipologias, palheta de cores, imagens, composio, resoluo de tela prioritria considerada, aparncia dos botes, setas, bullets elementos secundrios de sinalizao), que sero detalhadas ao longo da produo. Este documento muito til para a orientao da equipe de programao sobre o layout das pginas elementos e funcionalidades especiais. Outras atividades do projeto de layout Descrever o processo de criao > avaliao > ajustes > aprovao e desenvolvimento antes de come-lo, bem como todos os produtos relativos ao layout que sero apresentados. Desta maneira, o cliente (ou
93
dono do produto, em mtodos geis) pode acompanhar cada etapa e pedir antecipadamente o acrscimo ou a supresso de uma atividade ou produto. Checar a qualidade do layout de acordo com requisitos prestabelecidos ou lista de referncia j existente. Exemplo de lista de indicadores (formato xls, 47kb). Esta lista pode ser conferida pelo arquiteto da informao, gerente do projeto, analista de sistemas e desenvolvedores, para ver se no falta nada a criar e a apresentar ao cliente. Embora a lista de checagem possa se basear em listas genricas de elementos de layouts web sempre necessrio enfatizar a importncia de adapt-la a cada projeto.
Reaproveitamento de arquivos em templates O reaproveitamento dos arquivos produzidos durante o projeto de web site faz parte das prticas de gesto do conhecimento gerado durante o seu planejamento e a sua realizao. Entre os benefcios destas prticas, podemos citar: A recuperao dos fatores que contriburam para a realizao de projetos bem-sucedidos, antecipando problemas, padres, reaes e barreiras. O desenvolvimento e aperfeioamento de prticas de gesto e realizao de projetos web adaptadas ao ambiente organizacional especfico. A valorizao da criatividade e da inventividade interna, gerando maior comprometimento das equipes s metodologias adotadas e aplicadas. Em projetos de web sites, informaes de diferentes tipos podem ser reutilizadas, como: Templates (modelos) do planejamento, que precisam ser adaptadas para cada caso.
94
Templates (modelos) de relatrios e apresentaes, que tambm precisam ser adaptados. Questionrios ao cliente e aos stakeholders. Processos de negcios e procedimentos de rotina. Especificaes de funcionalidade e de desenvolvimento de cdigos- fonte, estilos CSS, javascript. Modelos de testes de usurios. Modelos de checklists para controle de qualidade. Desenho de bancos de dados. Configuraes de programas e da infra-estrutura de armazenagem. Especificaes do produto. Qualidades dos arquivos que facilitam o seu reaproveitamento: Autoria facilmente identificvel (do projeto, dos processos, do documento de registro) - de forma a permitir a sua consulta ou referncia em projetos futuros. Facilidade de leitura: apresentao do texto, legibilidade, cores, possibilidade de acesso uso de diversos dispositivos ou plataformas, aderncia a normas e padres tcnicos. Clareza das explicaes (pouco uso de siglas ou linguagem cifrada, por exemplo, de forma a ficar compreensvel a diversos tipos de leitores). Preciso tcnica e metodolgica (referncias de mtodos aplicados, controle de qualidade, controle de riscos). Relevncia das informaes (cronogramas, oramentos, pessoas) Priorizao do encadeamento das ideias e decises, em detrimento da simples cpia de documentos e arquivos j existentes (grficos, diagramas, etc.). Freqncia com que o documento consultado e reutilizado - se possvel, os usurios dos documentos devem ser identificados, para que possam tambm servir de referncia no assunto.
95
Controle das verses produzidas, de forma que apenas os arquivos com modificaes teis sejam arquivados.
Ningum quer ou deve comear um novo projeto da estaca zero. Componentes reutilizveis de projetos anteriores ajudam a iniciar novos projetos web e tambm a aperfeioar a eficincia e a qualidade j alcanada. A construo, a seleo, o agrupamento de componentes utilizados
anteriormente exigem tempo e experincia, embora possivelmente bem menos tempo do que a construo integral de arquivos e modelos para cada novo projeto.
Design estrutural (wireframes) Wireframes compem verses simplificadas das pginas do site que constam apenas de textos e links, sem qualquer detalhamento grfico, para o exame das suas funcionalidades, da abordagem editorial, da navegao. O conjunto de wireframes inclui a listagem e posicionamento dos elementos de todas as pginas e do contedo de cada uma, com o estabelecimento de vnculos entre elas. Podem tambm incluir informaes detalhadas, necessrias ao desenvolvimento de cada tela, como texto, grficos, udio, vdeo, animaes elementos de navegao, links Wireframes tm como funo: Nas fases iniciais explorar e desenvolver os principais conceitos, com o registro dos primeiros produtos do processo de criao da estrutura conceitual e informacional, de alguma maneira subjetivo, para a interveno crtica e reformulao por outros profissionais, como analistas de sistemas, arquitetos da informao, programadores, designers de
96
interface, redatores e editores, profissionais de marketing e outros profissionais. Permitir a compreenso da estrutura pelos stakeholders do projeto, para a sua avaliao. Facilitar o planejamento das prximas estapas do projeto, a partir da viso mais clara do produto. Permitir a percepo de como as informaes se relacionam e como a interface funciona. Detalhar as especificaes para o desenvolvimento, incluindo os aplicativos dinmicos ("rich media applications"), animaes, as aes e os movimentos do usurio e respostas dos sistemas do incio at o final, passando por etapas intermedirias. A aplicao de legendas nos diagramas sobre as funcionalidades de aplicativos ou os movimentos de animaes ajuda o cliente a compreender melhor
os componentes, nesta etapa do projeto em que as ideias ainda no tm forma definida. Aplicao de legendas nos diagramas Se for necessrio abordar os mesmos assuntos nas legendas das wireframes em todas as pginas, deve-se coloc-los na mesma ordem, de forma que fiquem previsveis. Se, por exemplo, a cada pgina se descreve (1) o contedo na rea central e (2) uma nova animao, a ordem das legendas deve ser sempre (1) e (2), para organizar o ritmo da apresentao. A insero de vrias legendas, sobre diferentes assuntos, na mesma tela, dispersa o leitor, cuja ateno precisa se dividir entre textos e assuntos de diferentes ordens de prioridade. Uma legenda por slide conduz melhor a ordem do encadeamento dos assuntos.
97
As legendas podem ser usadas tambm em seqncia para orientar a ordem de um processo. Por exemplo, a compra de um produto pode ser descrita passo a passo com legendas que apaream sucessivamente na pgina, at que o processo seja inteiramente descrito. Ajudar a prevenir problemas que podem aparecer depois da insero do contedo nas pginas. Ao longo do projeto, wireframes servem como registros que devem ser corrigidos, testados por futuros usurios e aperfeioados (as verses iniciais precisam ser mantidas em arquivo, para consulta). Seus arquivos devem incluir a data de atualizao, o nome e o nmero da tela e, se necessrio, uma descrio das aes que sero realizadas na tela e instrues sobre a funcionalidade da interface para os desenvolvedores. Alguns projetos permitem que, depois de ajustado e aperfeioado o modelo de informaes, se acrescente o contedo grfico interface. Em outros casos, para que wireframes sejam testados por representantes dos usurios finais, podem precisar de um acabamento visual um pouco mais elaborado que os fios e as listas de links, para ficar mais amigveis. Um usurio de teste pode no entender direito porque deve dar palpite sobre o contedo e no sobre o layout, sobre o tamanho das fontes, mas no sobre as suas cores. Neste caso, wireframes com indicaes de cores, tipologias e imagens podem ajudar muito a criar um ambiente mais
compreensvel e produtivo. Textos neutros como "Lorem ipsum" devem ser substitudos por frases indicativas do contedo que ser publicado, como "rea dedicada s associaes de moradores da cidade X". Textos sobre produtos devem ser ainda mais detalhados, pois so especialmente importantes nas compras online. comum, a partir da elaborao de wireframes, a realizao de prottipos interativos que funcionam para testes preliminares de usabilidade e da
98
funcionalidade da interface, que complementam este desenvolvimento conceitual.
99
100
Mdulo VII Navegao e Busca : Contextos Especiais de Navegao
Objetivos do Mdulo Explanar sobre a navegao e busca na web e seus conceitos especiais.
Contedos abordados Integrao de navegao e busca A navegao anterior e posterior a uma busca de informao A interface de navegao
101
Integrao de navegao e busca A busca considerada uma alternativa navegao. Basicamente, uma busca coordena uma busca por palavras-chave em pginas que contm o termo ou os termos. A navegao, por outro lado, permite que as pessoas percorram um site at o contedo desejado, fornecendo uma importante viso geral de um site e ajudando as pessoas a determinarem relevncia.
Navegao antes da busca Existem muitas maneiras de interagir os mecanismos de navegao no processo de busca, iniciando com o formulrio de busca propriamente dito. Voc pode incluir opes, tais como menus de escopos e busca e Word wheels para deixar as pessoas focarem no contedo-alvo e em resultados pr-filtrados, ou voc pode solicitar termos que auxiliem a formulao de uma consulta. Busca pr-determinadas combinam navegao e busca de forma que clicar em um link na verdade roda uma busca em background. A chave fornecer tanto opes de navegao quanto de busca, permitindo aos visitantes trocarem de estratgia quando necessrio.
Escopo de busca Alguns formulrios de busca incluem uma opo de escopo que permite s pessoas determinarem um foco mais restrito para a busca antes que cliquem no boto de buscar. Frequentemente um menu drop-down contm as reas-chave de contedo do site, refletindo a navegao principal. Os visitantes escolhem uma categoria a partir do menu, de forma a limitar a faixa de contedo buscado. Sites com reas de contedo distintas ou com bastante contedo so os que mais se beneficiam da habilidade de ajustar o escopo de uma busca.
102
Word wheels Uma Word weels mostra uma pequena parte de uma lista de termos j embutida no sistema de busca. Ela dinamicamente casa com os caracteres informados pelo usurio e rapidamente mostra a parte apropriada dessa lista. Por exemplo, digite N, e uma Word Wheel mostraria as primeira cinco ou dez palavras comeando com NA, e assim por diante. A qualquer hora, voc pode selecionar um termo de busca do menu de Word Wheel. Apagar um caractere normalmente volta na lista para o ponto de comparao apropriado. Os mecanismos de busca frequentemente no perdoam erros de digitao, formas alternativas de uma palavra e sinnimos. Apesar da busca por variaes de palavras poder ajudar, mesmo os melhores algoritmos de busca no podem acomodar todas as variaes da linguagem natural.
Buscas pr-determinadas As buscas pr-determinadas so links, tais como "encontre mais recursos", que so programados para conter uma busca. Clicar no link automaticamente conduz esta busca e retorna os resultados. Voc usualmente pode reconhecer que o link uma busca determinada pela URL, a qual conter os termos de busca como parmetros em uma styring. Por exemplo, um link para uma busca prdeterminada para o termo "web navigation" no mecanismo de busca Lycos seria parecido com isso: HTTP://search.lycos.com/?query=web+navigationy=0 Frequentemente efetuando ligaes entre sites, as buscas pr- determinadas so particularmente teis ao apontar para contedo que no pertence ao site.
103
Navegao aps a busca Frequentemente as pessoas tem uma palavra ou frase em mente e apenas querem buscar o mais rpido possvel sem formular uma consulta. Ao serem confrontadas com os resultados, entretanto, elas subitamente descobrem que precisam de maneiras para refinar a busca. Tcnicas de navegao, tais como tpicos de links, clustering, agrupamento e sugestes de busca, podem ajudar. Voc provavelmente j viu muitas dessas tcnicas sem perceber. Navegar nos resultados de busca pode ajudar bastante na reduo e no foco da busca.
Links e tpicos Geralmente resultados de busca contm detalhes sobre cada pgina encontrada, bem como o tpico de cada pgina. Se os tpicos de cada pgina so ligados por links, clicar em um deles leva a outras pginas para essa categoria, permitindo s pessoas navegarem para mais ocorrncias sobre um dado assunto que combina com os seus interesses. Clusterizao e agrupamento. Os mecanismos de busca mais sofisticados agrupam automaticamente resultados similares por tpicos em subconjuntos, algumas vezes mostrando uma lista de subconjuntos ao lado ou acima da pgina como um tipo de navegao. Clicar em um subconjunto ento filtra os resultados, mostrando uma lista de itens mais gerencivel. Dois mtodos comuns para produzir esses subconjuntos so a clusterizao e o agrupamento. Tecnicamente, existe uma diferena entre essas abordagens, apesar de os termos serem frequentemente usados como sinnimos. Com a Clusterizao, as categorias so automaticamente derivadas de um conjunto de resultados. Um algoritmo no apenas encontra subconjuntos (clusters) de itens similares, mas tambm determina os rtulos das categorias.
104
Dados que esses rtulos so dinmicos, eles podem mudar de uma busca para outra, mesmo para a mesma consulta submetida posteriormente. Em outras palavras, a clusterizao gera, em tempo real,uma lista de termos navegveis. Com o agrupamento, os termos j existem em algum tipo de ndice ou taxonomia de termos. A lista de resultados mostrada variar de uma busca para outra, mas os termos propriamente ditos sempre aparecero na mesma forma padronizada. Os sistemas ou determina o tpico da pgina e aplica um rtulo existente, ou a pgina j contem informaes de categoria associadas a ela. O sistema ento extrai esses metadados como categorias navegveis.
Navegao facetada As tcnicas mencionadas at agora representam abordagens individuais para integrar navegao e busca que voc pode adicionar a um site web existente. A interface de navegao facetada, por outro lado, um sistema desenvolvido por pesquisadores da Universidade da Califrnia, Berkeley, para navegar grandes quantidades de informao, oferece uma integrao mais holstica entre busca e navegao. Essa interface baseia-se em facetas e classificao facetada como um mecanismo de estruturar informao.
Facetas Nada mais que uma categoria. Mas a disposio das categorias que importante na classificao facetada. As facetas so dimenses ou propriedades mutuamente exclusivas do objeto que elas descrevem. As categorias facetadas podem ser vistas como repositrios independentes de valores. Isso permite qualquer nmero de maneiras de abordar os objetos em uma coleo.
105
O projeto flamenco As facetas so potencialmente muito poderosas. Grandes quantidades de informao so decompostas em conjuntos gerenciveis em apenas alguns cliques. Mas difcil expor o poder das facetas e navegar nelas em uma interface de uma maneira que no sobrecarregue e confunda o usurio web mdio. O projeto flamenco busca criar uma interface que todos possam usar.
Algumas vantagens da interface de navegao facetada incluem: Ordem de seleo As pessoas podem selecionar os valores em qualquer ordem, o que suporta diferentes formas de atingir o mesmo objetivo.
Navegar nas categorias sempre produz resultados Isso atingido ao utilizar as subcategorias para qualquer categoria selecionada. Escolhas no relevantes so ocultadas, e as pessoas navegam atravs das categorias.
Desmarcar ou excluir valores Dado que as facetas so mutuamente exclusivas, naveg-las permite recombinaes de categorias. Se estiverem insatisfeitos com os resultados atuais, os visitantes podem desmarcar qualquer valor ou combinao de valores de uma faceta, desta forma expandindo a lista de resultados.
106
Experincia baseada na web O estilo de interao bsico da interface facetada espelha fortemente a navegao web: clicar em um link gera uma transio para uma nova pgina.
Indicao de magnitude Cada um dos valores de categoria seguido do nmero de itens (entre parnteses) na coleo para aquele valor. Fornecer tais informaes sobre o tamanho e o escopo do conjunto resultante ajuda as pessoas a tomarem decises de navegao. Existem trs estgios principais no processo de navegao: a pgina inicial, a pgina de resultados e a pgina de item: Pgina inicial: Oferece uma viso geral codificada por cores de todas as facetas. Os valores de nvel mais alto dentro de cada uma delas so representados como links. O nmero de itens classificados por esse valor aparece entre parnteses aps o rtulo. Essa forma de visualizao encoraja a explorao a partir de qualquer ponto de partida. Ela tambm familiariza as pessoas com o escopo da coleo de imagens. Um campo para busca por palavras-chave tambm est disponvel no canto superior esquerdo, o qual fornece a liberdade de escolher entre buscar e navegar. De qualquer forma, a pgina de resultado que segue apresenta uma disposio similar a uma galeria de links para imagens da coleo. Resultados: A pgina de resultados contem trs componentes principais: Resultados, Valores e Caminho da consulta. Os resultados ocupam a maior parte da pgina direita. Para essa coleo em particular, so mostradas miniaturas de imagens.
107
Valores: Os valores das facetas que se aplicam apenas lista de resultados atual so mostrados esquerda. Clicar em um link reduz o escopo do conjunto de resultados e atualiza os valores disponveis. Caminho da consulta: O caminho percorrido para produzir um dado conjunto de resultados aparece no topo. A faceta indicada, seguida do valor selecionado para aquela faceta. De um modo geral, a transio da pgina inicial para a pgina de resultados em termos de layout grande, mas aparentemente natural. A pgina de resultados permite s pessoas navegarem e explorarem ainda mais. Elas podem criar seus prprios caminhos para a informao. Ao longo do caminho a navegao disponvel recontextualizada para o conjunto local de resultados. Pgina de item: As pessoas podem escolher visualizar um nico item na coleo a partir da pgina de resultados. A pgina de item fornece uma imagem maior e informaes potencialmente mais detalhadas, enquanto mostra ainda o caminho percorrido para chegar ao item. Na pgina de item, todos os valores usados para classificar o item so mostrados direita em uma visualizao em forma de rvore que se expande para muitos nveis, caso existirem. Os usurios podem selecionar um ou mais desses termos e us-los como base para uma nova busca com o boto Find Similar Items.
108
109
Mdulo VIII Navegao e Sistemas Sociais de Etiquetagem
Objetivos do Mdulo Explicar os sistemas sociais de etiquetagem que existem.
Contedos abordados Etiquetagem Classificao social

110
Navegando em classificaes sociais Etiquetagem A classificao tradicional de livros depende de esquemas de classificao padronizados chamados de vocabulrios controlados. Busca dar clareza linguagem ao mapear variantes e termos relacionados para um termo preferido. Em outras palavras se voc precisa decidir como chamar um computador porttil e pequeno, um vocabulrio controlado pode direcion-lo para usar a palavra "notebook" e no outros termos, tais como laptop, lap-top ou mesmo note-book. De um modo geral, isso representa uma bordagem descendente (topdown): o esquema de classificao j est posto em prtica, e quando um novo item precisa ser adicionado, atribudo a ele um tpico, normalmente por um profissional treinado. A etiquetagem oferece uma alternativa ao uso de esquemas de vocabulrios controlados com uma abordagem ascendente ( bottom-up) de classificao. Em sistemas de etiquetagem, qualquer usurio pode atribuir livremente termos escolhidos a um recurso ou objeto na web - tal como uma pgina, uma foto ou um vdeo - de forma a ser capaz de encontr-lo novamente. Os termos usados para etiquetar um recurso com uma tag podem ser bastante informais e pessoais, e os sistemas de etiquetagem no possuem uma estrutura pr-definida, como acontece com os vocabulrios controlados. Se voc criar uma tag chamada notebook, ibook ou lap-top para uma pgina web, voc livre para faz-lo, mesmo se o seu vizinho usar os termos laptop e computadores portteis. O uso de linguagem natural para descrever recursos uma das virtudes dos sistemas de etiquetagem. Adicionalmente, com etiquetagem, voc aplica uma palavra-chave para um recurso, ao invs de colocar o recurso em uma categoria. Isso significa que o dado recurso pode ter qualquer nmero de tags, permitindo
111
mltiplos caminhos navegveis atravs dos recursos etiquetados. Isso potencialmente resolve o problema do vocabulrio. Mas sistemas de etiquetagem frequentemente geram o que chamado de metarudo em um esquema de classificao. Isso inclui coisas como tags com erros de digitao e tags nicas compostas. As pessoas tambm usam tags que no possuem significado para uma comunidade mais ampla, por exemplo: meu cachorro, minhas coisas, o que pode resultar em tags de um nico usos que aparecem apenas uma vez. Tais tags no contribuem para o uso mais amplo de um sistema de etiquetagem, mas efetivamente rastreiam recursos para um dado usurio ou grupo. No existe uma autoridade para criar categorias padronizadas, e ningum mantm um esquema de classificao central. E mais, encontrar alguns poucos recursos ao navegar via tags pode ser bom o suficiente na maioria dos casos. Quando descobertas acidentais so aceitveis, sistemas de etiquetagem so apropriados. Sistemas de etiquetagem representam uma maneira de descrever recursos e permitir que as pessoas naveguem at seus recursos, mas eles no substituem amplamente os tipos tradicionais de classificao e organizao. Cada um tem o seu propsito e uso, e cada um valioso por diferentes razes.
Sistemas de Etiquetagem Existem muitos tipos de sistemas de etiquetagem, mas todos eles possuem elementos em comum:
Recursos Os objetos sendo etiquetados com tags, tais como uma pgina web ou uma foto.
112
Usurios Os membros de um sistema social de etiquetagem que aplica tags a recursos.
Tags Os termos usados para descrever um recurso. Praticamente todo recurso na web pode ser etiquetado com tags. Uma importante distino como as tags so criadas, mantidas e usadas. Isso tratado a partir da fonte do objeto a ser etiquetado. A origem do recurso que ser etiquetado afetar quem o marcar e como ele ser etiquetado com tags. Os recursos a serem etiquetados podem ser: Fornecidos pelos participantes, tais como fotos enviadas ao Flickr ou vdeos no youtube. Fornecidos pelo site web ou pelo sistema de tagging, tais como as descries de um artista ou lbum no site. Recursos abertos existentes na web, tais como pginas de favoritos. Note tambm que o processo de etiquetagem necessariamente diferente segundo o recurso em questo. Aplicar tags a uma pgina web pblica, por exemplo, diferente de aplicar tags em uma foto ou vdeo que voc envia ao servidor. No caso da pgina web, o sistema pode reconhecer o recurso por sua URL e apontar para outras tags que as pessoas podem j ter usado. O texto e o ttulo da pgina podem tambm ser usados para sugerir tags. No caso de uma foto ou vdeo, no existem metadados descritivos pr-existentes e o sistema no pode identificar o recurso at voc explic-lo em palavras.
113
As tags tambm podem ser privadas, de forma que apenas o usurio pode vlas e us-las, ou pblicas, de forma que o grupo inteiro pode us-las. O gmail, por exemplo, permite que voc adicione tags a seus emails, mas elas nunca so vistas por outras pessoas. Alguns servios permitem ao usurios decidirem se as tags devem privadas ou pblicas.
114

Design Instrucional

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Design Instrucional

Încărcat de

Drepturi de autor:

Formate disponibile

Ps-Graduao em Design Instrucional para EaD

Disciplina VII: Design Instrucional de Interfaces e Navegao Web

Disciplina VII: Design Instrucional de Interfaces e Navegao Web

Mdulo I Introduo Navegao Web

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

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

Figura 3: Opes de navegao com o menu Hiperpalavras

Figura 6: Modelo de navegao estrutural

Disciplina VII: Design Instrucional de Interfaces e Navegao Web

Mdulo II Os Mecanismos de Navegaes

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

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

Disciplina VII: Design Instrucional de Interfaces e Navegao Web

Mdulo III Os Tipos de Navegao e Rotulao Web

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

Pginas navegacionais, pginas de contedo e pginas funcionais

facilmente para o francs e o alemo como autorit portuaire e

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

Disciplina VII: Design Instrucional de Interfaces e Navegao Web

Mdulo IV Avaliao no Design de Navegao Web

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

redescoberta) que so apropriadas do seu site.

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

Disciplina VII: Design Instrucional de Interfaces e Navegao Web

Mdulo V Arquitetura e Esquemas Organizacionais Web

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

Disciplina VII: Design Instrucional de Interfaces e Navegao Web

Mdulo VI Layout e Apresentao da Interface de Navegao

Objetivos do Mdulo Explanar sobre o desenvolvimento e criao de templates e wireframes de navegao.

funcionalidade da interface, que complementam este desenvolvimento conceitual.

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

Disciplina VII: Design Instrucional de Interfaces e Navegao Web

Mdulo VII Navegao e Busca : Contextos Especiais de Navegao

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

Disciplina VII: Design Instrucional de Interfaces e Navegao Web

Mdulo VIII Navegao e Sistemas Sociais de Etiquetagem

Objetivos do Mdulo Explicar os sistemas sociais de etiquetagem que existem.

Contedos abordados Etiquetagem Classificao social

Usurios Os membros de um sistema social de etiquetagem que aplica tags a recursos.

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

S-ar putea să vă placă și