"Você tem que prestar muita atenção se não souber para onde está indo,
porque você pode não chegar lá. "
-- Yogi Berra

Se tem uma coisa que você quer, é que seu visitante tenha uma experiência de qualidade em suas páginas. E estas palavrinhas são os conceitos que farão do tempo que seu visitante passa em suas páginas, uma porcaria ou uma curtição:

- Usabilidade – suas páginas são fáceis ou difíceis de usar? O ideal é que sejam fáceis, mesmo quando alguns designers gostam de criar ‘desafios’ para o visitante descobrir como navegar. Podem até ganhar um prêmio qualquer, mas perderão os visitantes. É da natureza humana preferir situações fáceis e conhecidas.

- Navegabilidade – não se trata de nenhum site sobre esportes aquáticos, mas da forma como se navega (vai de uma página para outra) por um site. De uma forma geral, se você pode ir de uma página para qualquer outra de seu site com apenas dois cliques , pode dizer que o site tem boa navegação. Três cliques são admitidos para sites com mais de 500 páginas, mas se passar disso, tem alguma coisa errada com seus menus e botões. Outra dica: se é preciso clicar em um botão ou link para voltar sempre que o visitante quer visitar outra página, está faltando navegabilidade e podemos dizer que o site está ‘travado’.

- Interatividade – é a forma como o visitante se relaciona com as páginas e vice-versa. Se o visitante não consegue ler o texto porque o fundo não tem contraste suficiente com a cor das letras, ele não poderá interagir com o site. Como nos itens anteriores, a palavra chave é simplicidade e deixe-me acrescentar, foco. Projete a forma como o internauta interage com o site de forma a criar uma experiência enriquecedora e na direção de seus objetivos .

Vamos examinar alguns modelos que podem lançar uma luz sobre a questão.

Elementos de design

É desses elementos que sua página é feita.

O diagrama a seguir expressa o modelo da estrutura que está por trás do design de uma página:

O que você vê é uma página nua com os diversos elementos dispostos. Examine este modelo e compare com as suas páginas e as que você visita. Não se prenda as posições dos elementos, por enquanto, nem às cores usadas, vamos falar disso mais adiante.

Estarão eles na ordem e disposição que vai afetar o sistema límbico do leitor? O quê vai acender aquela fagulha no hipotálamo da pessoa que fará com que ela abra os bolsos para seus produtos e serviços?

Quem responde é você, pensando a experiência centrada no cliente.

Agora vejamos os elementos de design que você vai usar.

• Marca – serve para comunicar sua marca ao visitante, para identificar a página e manter a coesão dentro do seu domínio. O canto esquerdo superior funciona no ocidente porque lemos neste sentido, mas você pode usar o topo da página como quiser. Enquanto o visitante ver a marca na mesma posição vai saber que está em seu site.
• Publicidade – elementos como banners, links e etc. que servem para promoção ou propaganda de produtos e serviços de terceiros. Está marcado em vermelho para te lembrar que a publicidade leva seu tráfego embora, e a não ser que esta seja sua intenção, pense bem se vale a pena fazer a publicidade de terceiros.
• Formulário de assinatura – para captação do nome e email do visitante para a sua lista de contato. A assinatura tem que ser voluntária, no jargão: opt-in. Significa que o leitor opta por entrar na lista ou seja, te dá PERMISSÃO de enviar-lhe emails posteriormente. Não dá para exagerar a importância da lista de permissão. Toda página deve conter uma caixa de assinatura, ao menos, como função secundária. A exceção seriam as páginas extras que você libera após o visitante assinar.
• Menu principal – as opções de navegação e interatividade de suas páginas mais básicas. Exemplo: você publica artigos em seu site, pode ter uma seção de artigos que consta no menu principal. 99% dos sites seguem a linha: ‘quem somos, nossos produtos, nossos clientes’ e você não vai querer seguir essa linha.
• Menu secundário ou de seção – a existência deste menu secundário depende do tamanho do site. Somente portais e sites com muitas páginas, necessitam de menus secundários. Usando o exemplo anterior, este menu conteria links para cada um dos artigos publicados no site, ou então, links para as categorias dos artigos (quando a quantidade exigir tal divisão).
• Mensagem (função, ação) – este é o principal elemento de qualquer página. Se uma página não tem uma função definida, não passa uma mensagem definida ou não pede que o visitante execute uma ação definida, esta página não tem razão de ser, não tem valor e não precisa existir. Uma página nem deveria ser criada sem uma função, sem um objetivo.
• Scripts – são componentes que automatizam processos como o script de indicação, para entrar nos favoritos, webcards, etc.
• Complemento (copyright, contato, avisos, etc) – são informações e links que completam a informação / layout da página.

Identidade do site

Repare que alguns destes elementos deverão estar presentes em todas as páginas do site. São os elementos que dão identidade ao site. Graças a estes elementos, o visitante ‘experimenta’ suas páginas.

Se o seu site está ‘travado’, examine a marca, o menu principal (e o secundário quando existir) e o complemento. Veja suas posições e o acabamento das imagens e dos textos. Estes elementos são também chave para a navegabilidade e grande parte da usabilidade do site.

Há outros elementos que também estarão em todas as páginas que tem funções desligadas da identidade do site e que acabam tendo também este papel: formulário de assinatura, scripts, etc (marcados em cinza).

A identificação está intimamente ligada à credibilidade

Você já visitou um daqueles sites em que cada página tem uma cor de fundo diferente, ou que, para ver outra página tem que clicar no botão voltar? Duvido que tenha se inclinado a fazer negócios com uma empresa que tem páginas tão fracamente ligadas visualmente. Sem uma identificação clara, o site não passa credibilidade, pelo contrário, passa uma imagem amadora e antiprofissional.

Disposição dos elementos de design

A ordem em que você dispõe os elementos do design em suas páginas tem uma relação direta com o sucesso que a página vai obter. Não existe uma fórmula única. De tempos em tempos, vale a pena fazer uma pequena mudança nas posições para estudar os resultados. Mas podemos dizer que alguns elementos funcionam melhor em determinadas posições.

Por exemplo:

O menu principal não precisa ficar na vertical como indicado na disposição padrão. Tudo depende dos objetivos que você tem para seu site.

A marca pode ocupar todo o espaço do topo da página. Mas se colocada muito abaixo, pode ficar escondida e o site perde a identidade.

Desde que fique antes da primeira dobra, o formulário de assinatura poderia ficar em qualquer lugar.

E por aí, vai.

O mais importante é que os elementos estejam dispostos de uma forma a aumentar as suas chances de sucesso, seja qual for a função da página. Use os elementos de design a favor de sua oferta e não contra ela.

A criatividade é o limite, insistindo em que você deve manter a coesão e sentido na distribuição dos elementos.

Planejando o site

Conceitualmente, podemos dividir uma página, em duas partes principais:

- Forma : composta pelos elementos que dão identidade, navegabilidade e usabilidade ao site. São a marca, o menu principal, o fundo (background) das páginas. A forma é mantida igual em todas as páginas.

- Função : o elemento que chamamos de mensagem é que dá a função à página. Cada página deve ter uma função definida e distinta das outras páginas.

Antes de sair construindo as páginas de seu site, use estes conceitos para planejar o que e como vai fazer. O primeiro passo é definir seus objetivos e em seguida, usar os elementos de design para alcançar suas metas.

Como estamos falando da estrutura do site, vamos deixar a função de lado por um instante e nos concentrar na forma. Prepare a ‘cara’ do seu site e crie UM modelo apenas, para TODAS as páginas. Lembre-se apenas de deixar espaço para a mensagem.

Quando tiver preparado o modelo para a estrutura de seu site, você poderá usar os programas mais modernos de criação de páginas web, que têm um recurso chamado ‘template’ (modelo).

Você passará a criar páginas baseadas neste template, acelerando o desenvolvimento e permitindo que você foque sua atenção na função de cada página, facilitando planejar a mensagem que será passada adiante, sem se preocupar mais com o layout que será mantido pelo modelo.