|
Como construir menus verticais.
Jorge Marmion
[ Convide um amigo ] ou colega a ler este artigo.
Como fazer para que o usuário encontre fácil e rapidamente,
entre dezenas ou talvez centenas de opções, uma transação, um produto
ou uma informação? Este é, talvez, um dos maiores desafios que o
projetista de um site de alta complexidade encontra.
Uma alternativa largamente utilizada é a
construção de menus, que pela sua conotação hierárquica são
naturalmente compreensíveis para a maioria dos usuários. Podemos definir
um menu como a apresentação organizada de
transações disponíveis, valores aceitáveis ou
opções possíveis.
Menus verticais
Neste artigo trataremos de um tipo bastante comum de menu: a
apresentação de seções de um site através de menus verticais fixos,
que geralmente ocupam o lado esquerdo da tela.
|
|
O portal Universo On Line
(UOL) apresenta o menu com as opções em ordem alfabética
crescente. Esta é uma opção correta, especialmente quando a
platéia é heterogênea tanto em habilidades quanto em conhecimento
das seções do portal.
O contraste entre a cor da fonte e a
cor do fundo é adequado. A leitura é fácil: apesar do tamanho da
letra é possível encontrar a seção procurada em poucos segundos.
As opções são bastante claras, apesar da maioria ser referenciada
por uma palavra (uma façanha) e a probabilidade de erro (que o
internauta clique em uma opção e seja conduzido a uma página que
não é o que esperava) é muito baixa. A única ressalva é a
opção "Tempo Trânsito Mapas", que provavelmente devido
a um erro de script apareceram em uma linha só, quando
provavelmente deveriam ser
três opções diferentes.
Este tipo de menu serve tanto para
usuários experientes do portal, como para iniciantes, incentivando
a exploração das facilidades e opções disponíveis.
Em resumo, um menu com alto grau de
usabilidade. |
|
|
O site E-Pipoca
apresenta as opções em blocos, cujo título identifica as
características comuns das opções que contém. Esta
característica acelera a leitura para aqueles usuários que
procuram um item específico, já que permite evitar a leitura de
trechos inteiros do menu.
O contraste é adequado,
e a utilização de um tom mais forte para fundo dos títulos das
seções é muito adequada.
Entretanto, o site peca
pela utilização de letras maiúsculas, que reduzem em 20% a
velocidade de leitura.
|
 |
O menu à esquerda é do
site de uma respeitável e
tradicional instituição privada de ensino que possui três
unidades na Zona Sul da cidade de São Paulo.
O projetista também optou por um
menu vertical, à esquerda da tela. Mas a combinação de cores é
inadequada: há pouco contraste entre a a cor da fonte e a cor de
fundo, o que dificulta a leitura..
As opções são apresentadas sem
qualquer classificação aparente. Mesmo usuários que visitam freqüentemente
o site provavelmente devam percorrer o menu além do necessário
para localizar a opção procurada.
 A utilização exclusiva de maiúsculos,
além de reduzir a velocidade de leitura, faz com que o espaço
reservado para o menu seja insuficiente para algumas opções, que
são apresentadas em duas linhas. Neste caso a segunda linha
apresenta um deslocamento que quebra a linearidade da leitura,
reduzindo ainda mais a velocidade.
O nível de usabilidade deste menu
seria consideravelmente maior se se optasse por agrupar as opções segundo
algum tipo de critério ("Institucional",
"Alunos", "Professores", "Pais",
etc.). Uma combinação adequada de cores também é recomendável.
Veja, à direita, um exemplo com as mesma opções apresentadas
segundo os critérios aconselhados.
|
Conclusão
Se sua audiência é heterogênea (como a
de um portal, por exemplo), um menu vertical com apresentação das
opções em ordem ascendente é uma opção adequada.
Se sua audiência é homogênea, pelo menos
quanto aos seus interesses (cinema, educação, esportes, etc), é
possível optar por um agrupamento de opções segundo critérios
específicos.
Em qualquer caso, a escola do tipo de fonte
e cores adequadas são fundamentais para garantir uma boa velocidade
de leitura..
|
