Este é o terceiro artigo de uma série sobre usabilidade na Web, baseada no livro “Não me faça pensar!“, do autor Steve Krug.
Introdução ao projeto de painéis
Partindo do fato de que seus usuários estão vendo seu site “em alta velocidade” (veja o artigo desta série anterior para entender), existem várias medidas que você pode tomar para que eles vejam e compreendam o máximo possível do seu site.
Primeira medida: crie uma hierarquia visual
Crie suas páginas com todas as dicas visuais possíveis que você possa utilizar para indicar claramente a hierarquia entre as coisas.
Mostre claramente os relacionamento entre cada coisa, com o que elas estão relacionadas e o que está relacionando com elas.
- Quanto mais importante for algo, mais destaque ele deverá receber. Bom, isto é óbvio, mas nem sempre lembramos disso. O destaque pode ser feito com letras maiores, letras em negrito, maior espaço em branco em volta do ítem, cor diferente, proximidade do topo da página, etc. Deixe claro a hierarquia também nos destaques, ou seja, coisas mais importantes recebem maior destaque, e deixe claro visualmente que destaque é mais importante que outros (uma fonte maior indica um destaque maior, por exemplo).
- Coisas que são relacionadas logicamente também devem ficar relacionadas visualmente. Por exemplo, você pode englobar um conjunto de ítens em um mesmo quadro ou cabeçalho, ou você pode dar um destaque visual para um menu (uma cor de fundo diferente, por exemplo), separando-o da página (destaque claramente: isto é o menu, o resto é o site).
- Use “aninhamentos” para indicar a relação de dependência entre as coisas. Se você está mostrando livros sobre usabilidade Web no seu site, tente “aninhar” os livros dentro de um quadro ou cabeçalho sobre usabilidade Web que englobe todos os livros sendo mostrados na página. O que estiver dentro deste quadro é relacionado a usabilidade Web, e não a outra categoria de livros.
Segunda medida: use convenções, não reinvente a roda
Todos nós conhecemos convenções para praticamente tudo que fazemos. Somos treinados deste pequenos a usar as coisas de um determinado modo, e assim sabemos como nos comportar quando encontramos algo familiar, sem que seja necessário pensar muito sobre isso.
A não ser que você seja um designer ou um projetista, cujo trabalho é criar novos meios eficientes de se fazer ou utilizar uma coisa, é muito provável que você não consigará fazer um bom trabalho ao tentar mudar o modo convencional de se usar algo.
Deste modo, a melhor opção é utilizar as convenções bem testadas que todos já conhecem. Isto facilitará bastante a utilização do seu site.
Procure analisar sites de grandes empresas, ou sites muito conhecidos, e que tenham relação com o seu site. Analise as convenções destes sites e faça algo parecido no seu. Não tenha vergonha em “copiar” uma solução boa, não precisamos reinventar a roda toda vez que desejamos fazer algo bom.
Terceira medida: defina bem as áreas do seu site
Segundo Krug, diversos estudos comprovam que os usuários decidem rapidamente onde vão clicar nas páginas fazendo uma análise visual sobre eleas, clicando na parte que lhes chama a atenção, praticamente ignorando as demais.
Deste modo, se seu site definir visualmente de maneira clara todas as suas partes, será muito mais fácil para seus visitantes utilizá-lo.
Será fácil, por exemplo, saber que determinada área da página é sempre um menu de navegação, e que outra parte é sempre o conteúdo principal. Se for necessário navegar, o visitante saberá onde olhar, caso contrário não precisará prestar atenção a esta área da página.
Quarta medida: deixe claro o que pode ser clicado
Já que o que geralmente fazemos em um site é ler seu conteúdo e procurar o que devemos clicar em seguida, nada mais óbvio do que destacarmos o que pode ser clicado para facilitar a vida dos nossos visitantes.
Evite substituir elementos comuns, que os visitantes estão acostumados, por elementos personalizados e “estilosos” demais. Evite substituir um botão por uma imagem com um formato diferente de um botão, por exemplo, caso o botão seja esperado naquela posição.
Quinta medida: diminua a confusão ao mínimo possível
Um dos maiores problemas das páginas com difícil entendimento é a confusão visual.
Existem dois tipos de confusão visual:
- Existe muito para fazer: a pagina tem muita coisa sendo mostrada ao mesmo tempo, todas competindo pela atenção do visitante com seus destaques próprios. Isso gera confusão, e o ideal é promover os ítens mais importantes, mas mantendo alguma forma dos ítens secundários serem encontrados por quem realmente os procura.
- Confusão em segundo plano: algumas páginas são muito “carregadas”, seu design possui elementos demais, gerando um “ruido” que acaba incomodando e cansando os visitantes. Pense nisso como se você estivesse conversando em um ambiente barulhento, como em um aeroporto. Você conseguirá conversar, mas com o tempo o ruído de fundo vai acabar lhe cansando.
Para quem acompanha o site da Zooming, este era o caso da página principal do site antes de uma reformulação. Nesta página havia um destaque (grandes imagens intercaladas) para os nossos principais produtos, e um grande destaque para os artigos do nosso Blog, que não é o motivo principal do nosso site.
Atualmente esta página (ainda em testes quando este artigo foi publicado) é muito mais simples, destacando nossos principais serviços e nossas promoções, e ainda chamando atenção aos artigos mais recentes do blog, porém com menos destaque do que antes.
Até o próximo artigo!