Recuar | Página Principal |

Elementos de navegação e orientação do utilizador.

Os elementos de navegação e orientação têm como função básica informar constantemente ao utilizador sobre a sua localização, a relação que o nodo web que esta a visualizar tem em relação ao resto da arquitectura do website, onde é que tem estado e aonde é que pode ir. O objectivo: não perder ao utilizador.

Não perder ao utilizador
As duas formas básicas para não perder ao utilizador são: que não fique "aborrecido" e que não se perca navegando. Se os conteúdos ou os serviços da nossa web não são do interesse do utilizador e, por esta razão abandona o nosso site, não devemos responsabilizar ao arquitecto da web, e de facto, pouco ou nada poderá fazer para resolvé-lo. No entanto, se o utilizador se "aborrece" a navegar porque não acha a informação que procura (e aquilo que procura encontra-se na web), então é consequência de uma incorrecta arquitectura da informação.

Que o utilizador não se perca, isto é, que chegue o momento em que não saiba em que zona do nosso site encontra-se, ou pior ainda, que nem sequer saiba se ainda continua na nossa web, é responsabilidade do arquitecto web e portanto uma consequência do mal design das estruturas por parte dele. Seguidamente serão fornecidas uma série de dicas para fazer com que os nossos visitantes nem se "percam" nem fiquem "aborrecidos".

Coerência no design
A primeira regra para indicar ao nosso utilizador que ainda continua na nossa web é manter uma coerência no design, ou seja, uma uniformidade na estrutura das páginas que formam o nosso site e também das cores empregadas.

Isto não quer dizer que se tenha que manter uma cabeçeira igual à mostrada na home page no resto das páginas do site, mas ela não pode desaparecer completamente. Por exemplo, podemos diminuir o seu tamanho para não desperdiçar demasiado espaço visual.

Muitos designers utilizam marcos para que a cabeçeira não desapareça, mas isto não é demasiado recomendável, pois o uso de marcos leva a problemas de usabilidade.

Com a utilizaçõ das cores também devemos manter uma certa uniformidade: se de uma página a outra mudam as cores completamente, o utilizador (não necessáriamente despistado) pode pensar que tem sido reenviado a uma outra web, isto é, pode sentir-se perdido.

Hierarquia Visual
Já temos conseguido, de certo modo, que o utilizador saiba que esta na nossa web, mas em que zona exacta da nossa web encontra-se?

Um dos métodos para solucionar este problema é manter uma Hierarquia Visual. Os utilizadores (no ocidente) lêm de esquerda à direita e de acima para baixo. Isto quer dizer que se mantemos a hierarquia visual (ver no esquema seguinte) podemos indicar ao utilizador constantemente onde se encontra. Quanto mais perto do canto superior esquerdo do nosso lay-out coloquemos os elementos, maior nível hierarquico terão e, quanto mais sejam colocados na parte inferior direita, menor nível hierarquico, constituindo "partes de" um elemento superior.

O elemento que normalmente coloca-se no canto superior esquerdo é o logo da nossa web, será o elemento de maior nível hierarquico, indicando que o resto de elementos são subelementos de este. Ou seja, que todos serão parte do logo da nossa web. Se colocarmos, por exemplo, uma barra de navegação por pestanas por baixo do logo, o utilizador saberá em que secção da nossa web encontra-se (simplesmente observando a pestana que encontra-se seleccionada) e que todos os links e menus de navegação que se encontrem hierarquicamente por baixo da barra de pestanas serão partes da pestana seleccionada.

Um erro bastante comum é colocar dois menus de navegação em zonas de hierarquia visual equivalentes, como a zona 2 superior e lateral esquerda. O utilizador não sabe qual o menu que é submenu de qual e não quererá ler todos os titulos dos elementos dos dois menus para saber a relação hierarquica que existe entre os dois.

No esquema seguinte o quadro cinzento é claramente subelemento de um dos dois menus mas, qual o menu que é submenu de qual?

Também não devemos esqueçer que para definir uma correcta hierarquia visual não só podemos fazer uso do posicionamento de elementos, também podemos usar o tamanho, a cor, ou elementos de ligação e separação

Breadcrumbs
Os breadcrumbs ou "migalhos de pão" são elementos muito utilizados para que o utilizador não se perca, indicando-lhe onde esta e a relação hierarquica de esse nodo com o resto da estrutura da web. Trata-se de uma espécie de Path que costuma ter a seguinte forma:

Se pode (e deve) utilizar junto de uma correcta hierarquia visual, e deveria ter sempre uma forma parecida à fornecida no anterior exemplo, pois é a mais comum e àquela à que o utilizador esta mais acostumado. Um texto tipo "Você esta aqui", e as diferentes secções (sempre como links) separadas pelo simbolo ">". No entanto também se poderia utilizar um outro simbolo para separar as diferentes secções, tipo seta. Mas a utilização de simbolos de separação tipo "-" ou "|" seria um erro, pois estes simbolos fornecem "relação de igualdade hierarquica", pelo que se podem utilizar em menus de navegação mas nunca em breadcrumbs.

"Aquilo ao que o utilizar esteja acostumado" é um factor muito importante dentro do design de websites usáveis. Como diz Jakob Nielsen, os teus utilizadores passam a maior parte do seu tempo visitando outras webs, o que quer dizer que lhes será mais facil navegar pelo teu site se este é parecido ao resto.
Os breadcrumbs não indicam necessáriamente o caminho que os utilizadores têm seguido para chegar a esse nodo web, por duas razões: os utilizadores podem vir redirigidos de outras webs e, além disso, que o website use breadcrumbs não quer dizer que tenha uma estrutura hipertextual puramente hierarquica. Indicam o caminho possível desde a home até a página actual, e a relação hierarquica entre todos os elementos do breadcrumb.

Onde tem estado o utilizador?
A forma mais simples de indicar ao utilizador onde tem estado é oferecer uma tonalidade de cor diferente para os links já visitados. O utilizador lembra-se das páginas que tem visitado, mas não tem porquê relembrar o nome dos links que levam até elas. De facto, se calhar nem sequer tem utilizado esses links para chegar até essas páginas.

À frente, Recuar e Início
Estes tipicos links (quase sempre em forma de ícons) podem ter maior ou menor utilizado segundo o uso que se faça deles. Não é a mesma coisa utilizar uma barra de navegação (com os ícons "Recuar" e "À frente") para andar por um subelemento do site que tenha uma estrutura sequencial (como um artigo dividido em páginas ou uma presentação sequencial de slides), que utilizar uma barra de navegação de este tipo para andar pelo website.
A razão para isto é bem simples, os sistemas hipertexto, tipo website, não têm nem devem ter uma estrutura sequencial.

O que é a redundância no webdesign?
A redundância não é mais do que oferecer várias possibilidades diferentes desde uma mesma interface para fazer a mesma coisa. Neste caso repetimos funcionalidades que já posui o navegador (recuar, à frente). Um exemplo é o caso dos "Favoritos". Muitas webs oferecem a possibilidade de serem inseridas na lista de Favoritos de um utilizador através de um link. Isto não tem sentido nenhum, pois o utilizador sabe o que são os favoritos, portanto também sabe inserir um novo site na lista, e quando queira fazé-lo faze-lo-á desde o menu do navegador e não desde o link do site.

O ícon tipico de "início" (sempre com forma de casinha), é util para o utilizador. Neste caso não existe redundância, pois o botão de início do nosso navegador não cumpre a mesma função. Resulta uma boa ajuda para o utilizador que se encontra perdido. Com ele poderá desfazer a sua navegação e voltar para o princípio. No caso de utilizadores que não tenham entrado pela porta principal da web (home page) este ícon/link oferece uma via rapida para saber se no website há mais informação que lhe interessa além da página que esteja a visualizar nesse momento.

Aliás, aconselha-se que o logo também cumpra com a função de "link à home page" quando se faça click sobre ele.

Mapa do website
Cumpre várias funções:
Ajuda ao utilizador a encontrar informação que a navegar de link em link demoraria mais tempo em ser localizada.
Pode ajudar o utilizador que se tem perdido. Por isso, constitui uma ferramenta verdadeiramente util e recomendável no nosso projecto web. O site map pode ser um simples índice em texto/html, ou uma complexa represemtação gráfica/multimédia. O acesso a este mapa deveria ser colocado numa zona visual de nível hierarquico alto e, sempre que possível, ser mantido em todas as páginas do site.

Fonte: www.nosolousabilidad.com
http://www.nosolousabilidad.com/articulos/orientacion_usuario.htm

Recuar | Página Principal |