Sistema de rotulação na arquitetura de informação
Gustavo Loureiro *

“Brother, na boa, essa parada de rótulo é muito punk, tá ligado? Vou te falar que é uma parada muito sinistra, mermão...” Este vocabulário é ótimo para quem está na praia pegando onda, mas não é recomendável para quem está no escritório apresentando idéias a um CEO – por mais que este CEO seja surfista nas horas vagas..

O sistema de rotulação tem por objetivo justamente fazer com que seu site seja claro e compreensível a todos os usuários que navegam por ele. Vemos um exemplo clássico de problemas no sistema de rotulação quando entramos em um site como o da Brastemp, Consul ou Dako. Lá você encontra Refrigeradores, mas na minha opinião o usuário conhece um refrigerador como geladeira.

O ideal é saber qual termo o usuário está mais acostumado a usar. Quando você está conversando com um colega num bar ou na rua, normalmente existem várias formas de mostrar que você está entendendo ou não a mensagem. Na internet, não existe essa possibilidade.

Cuidado ao desenvolver sites com um escopo muito abrangente, pois você pode encontrar problemas para elaborar o sistema de rotulação. Em portais como UOL ou Terra, encontra-se inconsistência em alguns itens como Carros (plural) e Cinema (singular), Blog | Fotolog (barra vertical) e Diversão e Arte (conjunção e). Além disso, existem ambigüidades como “Últimas notícias” e “UOL News” ou “Diversão e Arte” e “Jogos”. O ideal seria criar sub-sites com um escopo menor e reduzir este problema.

Algo interessante que pode ser feito é informar quais “itens-filhos” se tem em determinada categoria. Exemplo: Em um site de e-commerce (B2C), pode-se criar a categoria Eletrodoméstico e especificar alguns itens-filhos contidos nesta categoria como Ar Condicionado, Fogões e Refrigeradores (ou Geladeiras).

Nada melhor do que um bom benchmarking para criar sistemas de rotulação. Afinal, já existem muitos sistemas de rotulação criados no universo da Internet. Inovação demais no sistema de rotulação é algo que, no meu ponto de vista, se torna arriscado.

Utilização de ícones como rótulos

Acho que o melhor projeto de iconografia que já vi até hoje, na internet, foi o utilizado no projeto de re-design do site da AOL no Brasil, antes de decidirem finalizar suas operações. Na época, o Luli Radfahrer apresentou o projeto no Encontro de Webdesign no Rio de Janeiro e depois disponibilizou um artigo no site Banana Design, embora não exista mais o link. O projeto ficou realmente muito bom. Eles usaram o running man (o bonequinho amarelo da AOL) como símbolo-base; desse símbolo surgiram jogadores de futebol, raquete de tênis, relógio, nuvem e outros símbolos gráficos (ícones).

O ideal, no uso de ícones, é utilizar símbolos com textos. Você pode usar o desenho de uma nuvem e, ao lado ou embaixo, colocar o texto “Previsão do Tempo”, ou somente “Tempo”. Colocando somente um bonequinho com uma bola no pé, o usuário pode achar que vai para a seção de futebol, mas se você colocar ao lado um texto escrito “Esportes”, deixa claro ao usuário que ele vai para a seção mais ampla e não para uma seção específica.

Lembro que no antigo site do portal Terra existiam uns ícones muito pequenos na parte superior do site. Se não me engano, alguns deles eram Futebol, Horóscopo, Tempo e Chat. Você só sabia o que os ícones realmente significavam quando passava o mouse sobre a imagem e aparecia o texto alternativo (o famoso atributo “alt” que a gente põe em uma imagem no HTML). Hoje o Terra corrigiu o problema. Eles trabalham com um ícone e logo abaixo vem o texto para auxiliar no entendimento do símbolo. Além disso, eles aumentaram o tamanho das imagens. Ficou muito melhor.

Para obter um bom sistema de rotulação, não é obrigatório o uso de ícones. Você até pode usá-los, mas precisa saber até que ponto eles irão realmente auxiliar no projeto. Um exemplo de sistema de rotulação perfeito sem uso de ícones? O portal Globo.com. ;-)