Design de Interfaces: Importância da Comunicação Visual

Design de Interfaces: Importância da Comunicação Visual

A comunicação visual é um dos principais elementos de um bom website. Independente do conteúdo do website, todos necessitarão de alguma forma de uma boa comunicação com o visitante para lhe transmitir alguma mensagem, e a qualidade dessa comunicação irá definir a experiência do visitante no website, fazendo com que ele aprecie ou não a navegação no mesmo.

Na comunicação visual de um website são utilizados diversos elementos, tais como textos, símbolos, cores, imagens, animações e muitos outros, que são necessários para a transmissão de fatos, conceitos e emoções. Porém, não basta apenas utilizar esses elementos. Uma boa comunicação visual exige que esses elementos visuais estejam organizados da melhor forma, e para atingir esse objetivo é necessário seguir alguns princípios básicos.

Os três princípios fundamentais para o desenvolvimento de um website são: Organização, Economia e Comunicação.

Organização:

A organização do website consiste em fornecer ao visitante uma estrutura limpa e consistente, onde as relações entre os elementos e a navegabilidade são importantes conceitos de organização.

A consistência e as relações entre os elementos estão diretamente relacionadas. Elas se baseiam em agrupar elementos relacionados seguindo um mesmo padrão, e isolar itens que não estejam relacionados.

Nas Figuras 1 e 2 abaixo podemos ver duas interfaces consistentes, onde todos os elementos mantêm uma interface limpa e objetiva ao serem agrupados cada tipo em um mesmo local.

Figuras 1 e 2 - Exemplos de interfaces consistentes

A navegabilidade do website é definida pela facilidade com que o visitante consegue localizar determinado conteúdo. Existem três importantes passos para melhorar a navegação:

1. Fornecer um foco inicial para a atenção do visitante;

2. Direcionar então sua atenção para os itens importantes e secundários;

3. Auxiliar na navegação por todo o conteúdo.

No exemplo abaixo podemos ver dois layouts, onde a Figura 3 representa uma organização pobre, sem consistência e pouca navegabilidade. Já a Figura 4 mostra um visual otimizado, onde a organização do layout e as cores ajudam a direcionar o foco do visitante para as áreas importantes nas barras de títulos, e os itens em lista auxiliam na navegação pelo conteúdo.

Figura 3 - Exemplo de interface pobre Figura 4 - Exemplo de interface organizada

Economia:

A economia consiste basicamente em fazer o máximo com o mínimo possível. Há três pontos principais a serem considerados para uma boa economia: simplicidade, clareza e ênfase.

A simplicidade de um website é a inclusão de apenas elementos importantes para a comunicação da forma mais equilibrada possível.

No exemplo abaixo temos duas interfaces na Figura 5, onde a da esquerda possui uma organização complicada e a da direita possui uma organização simples e consistente.

Figura 5 – Formas de organização de interfaces

A clareza do website é mantida ao se desenvolvê-lo de forma que o significado de seu conteúdo não seja ambíguo. No exemplo abaixo temos a Figura 6 com dois botões (zoom e ajuda), onde na esquerda seus ícones são ambíguos e não representam a função dos botões. Já na direita os ícones dos botões representam de forma clara suas funções.

Figura 6 – Ambiguidade