Na Parte 1 e Parte 2 destes artigos sobre Web Design analisaram-se aspectos da psicologia humana, principalmente na àrea da leitura, percepção e memória, que são fundamentais para as decisões que se colocam a um gestor de um projecto Web ou a um designer  encarregue de construir um site web de raiz.

Vamos agora a aspectos práticos. A pergunta que se impõe é: na prática, quais as consequencias dos vários aspectos que influenciam a percepção que um utilizador tem de uma página web, na forma como ela deve ser planeada e concebida? Como conseguir uma efectividade no seu design e realização.

Não há uma resposta única para esta questão. Mas sem duvida que se pode inferir uma conjunto de regras, dos vários factos analisados na Parte 1 e 2 desta série de artigos. Vamos então a elas: 

Simplifique, Estruture

O utilizador fixa-se em estruturas que já conhece, ou sites que sabe como funcionam e tem tendência a ignorar o que não entende; procura obter o que pretende, com o minimo de cliques e com o minimo de esforço. 

Portanto: não arrisque, e mantenha perfeitamente clara a estrutura do site e da página. “Less is more”. Quanto mais simples e clara a estrutura mais efectivo é o site. E simples, significa SIMPLES! O utilizador deve porder manter um mapa mental claro da estrutura do site. E lembre-se que há limites muito baixos para a quantidade de informação que um ser humano pode manter na memória de curto prazo. 

Não pense que por simplificar o site, perde qualidade. Muito pelo contrário: ganha usabilidade, um dos principais factores da qualidade. Se quer de facto assegurar qualidade pense em duas palavras: estrutura e simplificação.  

Se isso for necessário, reduza o numero de temas, passe assuntos periféricos para páginas periféricas, concentre informação importante em páginas acessiveis com um clique a partir de qualquer outra página, reduza drásticamente a quantidade e profundidade de menus. Numa palavra: simplifique. 

E use a lógica, relacione o que é relacionável, separe o que é diferente, elimine o que não é coerente, reduza ao minimo o numero de opções, concentre-se no conteúdo e na coerencia de assuntos, elimine os excessos, os assuntos periféricos. Numa palavra: estruture. 

Planeie 

Para estruturar é necessário planear. Que secções vai o site conter? Elas relacionam-se entre si? Pode agrupar as várias áreas, criar um padrão de layout? Agrupar de forma a manter relações obvias? 

Crie um esboço da árvore de navegação. Se quiser ensaiar várias opções, recorte cartões representando as várias páginas e coloque-as sobre uma folha de papel; vá desenhando o seu relacionamento e movimente os cartões livremente na àrvore conforme for detalhando as ideias. 

Feito isto fixe a forma, definitivamente, e sem atalhos. Mas antes analise sob um ponto de vista externo. Pense sempre como quem chega ao site pela primeira vez e não o conhece: as relações são obvias? a forma é conhecida? aida que graficamente mais arrojado, reconhece-se a oroganização? 

Se quer ser realmente criativo, não tente ir além dos limites: a mente humana tem formas de funcionamento, que não mudam ao chegar a um web site criativo. Produza o website para um ser humano. É que afinal a internet ainda não chega a extra-terrestres. 

Seja Coerente 

Repita as soluções, entre as várias partes do site. Organize dentro de uma grelha que seja universal em todo o site. Uma vez entendida a grelha, o utilizador terá facilidade em filtrar e encontrar fácilmente o que procura, de uma forma visual e intuitiva. 

Se colocou uma coluna de widgets à esquerda na landing page, mantenha essa coluna sempre à esquerda. Se o seu menu é um menu superior, não tente pregar rasteiras mudando-o de lugar. Mantenha a ordem dos items dentro do menu, e dê sempre oportunidade de retornar atrás e ao inicio do website. Mantenha esse padrão em todo o site. 

Mantenha o grafismo uniforme ao longo de todo o site. use sempre a mesma linguagem grafica e a mesma iconografia. Ainda que pouco profissional, é comum ver sites em que os icons foram aproveitados de trabalhos anteriores, sem qualquer relação gráfica entre si. 

Crie um conceito 

A identidade de um site não vem de lhe agregar mais e mais informação, mais e mais grafismo. Vem, isso sim, de encontrar uma forma simples de transformar toda a complexidade do que se quer transmitir em algo que ecoerente, uniforme e directo. 

Crie um conceito de organização, grafismo e estrutura. Mantenha-se nesse conceito. Enquadre os conteúdos nesse conceito. Use a linguagem apropriada ao conceito e aos conteúdos e não mude de linguagem. 

O utilizador pensará que saiu do site se entretanto mudar a linguagem gráfica, ou de organização. Mantenha a linguagem e organização. Se há informação que não se enquadra no conceito, pense em criar um microsite para o efeito, e avise o utilizador de que vai aceder a um microsite específico. Dê-lhe possibilidade de entender onde foi parar. Dê-lhe possibilidade de voltar atrás. 

Se usar um microsite, mantenha uma relação gráfica com o original (logotipo, grelha, palete de cores, corpo do texto e fontes graficas, etc.) ou rompa completa e definitivamente. Nunca tente misturar ou fazer parecer igual apenas parcialmente. Isso é um erro que confunde. 

Seja objectivo

Identifique bem o que é essencial e acessório. Concentre-se no que é essencial e forneça-o ao utilizador de forma directa, sem complicações. Crie hierarquias e reflita-as no grafismo, na forma de acesso, e na organização.Proporcione meios de acesso ao que é acessório de uma forma uniforme mas hierarquicamente inferior (fichas técnicas de produto ou artigos tecnicos disponibilizadas em pdf para download, informação acessória disponivel através de clique em link, etc.)

Retire tudo o que desvia a atenção do utilizador do assunto central de cada página. Não misture, por exemplo, os contactos da empresa, com a hierarquia da empresa, com publicidade a produtos. 

Construa uma relação 

O utilizador deve reconhecer o site, e emocionalmente aderir a ele. Pense quem será o utilizador, o que o interessa e motiva, o que procura e como o faz. Um engenheiro procura informação de forma diferente de um artista. Uma dona de casa de forma diferente de um adolescente. Certamente que quem busca informação técnica não quer ser incomodado por popups de promoção de produtos. Garantidamente um adolescente achará um site construido como se fossem fichas técnicas de produto algo um pouco “careta”. 

Identifique e entenda o seu utilizador tipo,  e adapte o site à sua psicologia, tanto como à motivação do seu cliente (é um site de prestigio? institucional? um catálogo? um site tecnico?).

Criar uma relação com o utilizador pode também passar por pequenos detalhes de design. Por exemplo, crie elementos graficos simples que se espalham de forma coerente no site, para quebrar a monotonia, mas torne-os elementos pouco relevantes, e que só quem está atento repara; ou espalhe pequenas animações, quando se passa o rato, mas não coloque aí qualquer informação relevante. 

Hierarquize

Se o seu design vai conter muitos detalhes e muita informação, então forneça-a de forma hirarquizada. use a dimensão do corpo da letra, a cor, o grafismo envolvente para criar uma clara separação e relação hierarquica entre áreas diferentes e diferentes niveis de detalhe.

Crie destaques (TAGS, palavras chave, icons tipicos, elementos gráficos) que sejam fácilmente entendidos pelo utilizador.

Não encha a página com uma mancha uniforme e desestruturada de texto e imagem: crie relações e hierarquias usando as ferramentas ao dispor.

O GPS é util

Deixe que o utilizador saiba sempre em que ponto do site se encontra. Faça-o como entender, mas que seja sempre de uma maneira obvia (uma lista, um path dinamico, uma árvore do percurso) e que seja navegável (o utilizador pode vltar atrás clicando no ramo anterior da árvore ou na porção anterior do path dinâmico).

Nas estruturas elaboradas e complexas dê dicas de navegação: mantenha no ecrã a sugestão das proximas páginas para onde o utilizador pode ir: as subordinadas e as complementares e as que lhe permitem voltar atrás.

Sinalize

Dê dicas visuais. Um clique tem que resultar imediatamente numa acção, nem que seja uma animação de carregamento, um movimento pouco usual de um elemento grafico ou algo que permita ao utilizador saber que o site reagiu ao seu clique.

Não deixe o utilizador na duvida: será que está a carregar outra página? vai dar erro? Não estava activo?

Seja assertivo e dê soluções: se um documento está inacessivel, diga-o, e explique; se ficheiro não pode ser exibido explique porquê (falta o pluggin? dê um link para o descarregar); se uma página demora a carregar, mostre-o com uma animação.

Neste aspecto fique em terreno seguro, e use processos convencionais. Isso fará o seu utilizador sentir-se confortável. Para desconforto já basta o seu site não lhe poder fornecer o que ele pretende.

Seja claro

Não faça o utilizador pensar. Se tem uma mensagem a transmitir, transmita-a de forma directa e simples. Se tem um link para apresentar, isole-o e torneo saliente e claro. Use o grafismo adequado, simples e salientando o objectivo principal. Não complique, não adicione, não enfeite, não complique!

O utilizador tem tendencia a abondonar quando necessita de pensar demasiado. Ou a ignorar o que não entende. Além disso a memória de curto prazo é pequena.

Se a mensagem é complexa, é adornada por elementos que nada acrescentam, se não é obvia, vai-se perder. Se para obter o que quer, o processo exige mecanismos complexos, escolhas detalhadas, o utilizador abandona. Se uma emnsagem não é objectiva, não vai ser entendida, nem lembrada.

Principalmente permita que o texto seja pesquisado fácilmente: pequenos blocos de texto, parágrafos pequenos, use titulos e tags, e desenvolva a informação em pirâmide. 

Seja o maestro

Lembre-se que o cérebro humano se organiza em três partes:

  • Na sua secção mais moderna, uma metade é analitica e lógica 
  • A outra é emocional, intuitiva e sensitiva
  • E na sua parte mais primitiva o cérebro humano só se interessa pelas sensações que lhe respondam às perguntas “Pode-se comer?”, “É uma ameaça?”, “Posso ter sexo com?”

Portanto seja maestro: use as três partes do cérebro do seu utilizador. Forneça-lhe os elementos lógicos e estruturados, conhecimento e informação; mexa com as emoções, com as sensações e com a sua intuição, e dê pistas claras, sem armadilhas, sem falsas indicações, que claramente disparam os alertas de perigo, apelando ainda às sensações mais mais básicas – sobrevivencia, segurança, glamour.

Referências
Principios de Web Design – Parte 1
Principios de Web Design – Parte 2

Top 10 Attributes of a Usable and Persuasive Web Site
15 Valuable Usability PDFs You Never Heard Of
10 Principles Of Effective Web Design

Blogs
What Makes Them Click by Susan Weinschenk, Ph.D.
Useful Usability by W Craig Tomlin