anterior
Tweet about this on TwitterPin on PinterestShare on LinkedInShare on Google+Email this to someoneShare on Facebook
QR CODE

Planejando o design do seu site

O público-alvo

O ponto de partida para o planejamento do design é a descoberta do público-alvo para, em seguida, descobrir quais gatilhos emocionais você poderá utilizar para atraí-los para o seu site. Saber o que o visitante do site que você irá projetar deseja encontrar –  e como esse visitante gostaria de navegar pelas páginas –  é uma das questões fundamentais para o desenvolvimento dos objetivos de seu trabalho. Se os visitantes são veteranos com experiência em tecnologia de Internet, é claro que eles terão um conjunto diferente de prioridades de alguém que só quer usar o site para olhar fotos ou brincar com gadgets. Os leitores familiarizados com tecnologia em geral costumam compartilhar artigos e irão interagir de forma diferente dos leigos em tecnologia. Sexo, idade, instrução(entre outros inúmeros fatores) são itens que irão afetar diretamente a maneira como o design do site será modelado, e você deve levar isso em consideração!

Construindo Confiança

Para que os seus visitantes venham a fazer o que você quer que eles façam, eles têm que confiar em você. A confiança não vem facilmente, especialmente nesta época de fraudes, propagandas enganosas e links maliciosos espalhados em quase todos os lugares na internet.

Como designers, muitas vezes estamos tão acostumados a criação de páginas e desenvolvimentos de recursos que até esquecemos que para a maioria dos nossos clientes, a Internet ainda parece um grande buraco negro e assustador!

Com isto em mente, nosso projeto deve parecer digno de confiança para os visitantes. Criar um ambiente amigável e que os deixem  à vontade faz com que eles fiquem mais propensos a se inscrever em uma conta, comprar um produto, ou fazer negócios pelo site, por exemplo. Isto somente pode ser feito através de uma combinação de um design bem pensado e de uma escolha criteriosa das linguagens que serão utilizadas.

Familiaridade e padrões reconhecíveis

Quando uma pessoa visita um site há certas coisas que ela espera ver de imediato, seja qual for o objetivo desse site. Se ela não reconhecer determinados elementos, provavelmente se sentirá como se estivesse em alguma terra estranha em que nada faz sentido (e, portanto, não seria um lugar confiável).

As duas coisas principais que as pessoas esperam perceber rapidamente dentro de um site são o seu Objetivo (que pode ser qualquer coisa, desde fornecer informações sobre um determinado assunto, passando pela venda de produtos ou de serviços) e a Forma de Navegação.

Digamos, por exemplo, que você está projetando um blog que fale sobre meio ambiente e preservação da natureza. Se o design é escuro e melancólico e tem a foto de uma silhueta de uma cidade cinzenta no cabeçalho, isso não vai mostrar o menor sinal sobre o qual o objetivo do site, por mais bela que essa foto possa ser.

Por outro lado, se temos um design limpo, de aparência moderna, com muitos detalhes em tons de verde e fotos de paisagens naturais, vamos reforçar a imagem de que este é realmente um blog de tema ambiental.

Além dos elementos visuais, há coisas que as pessoas esperam encontrar na maioria dos sites para que possam navegar por ele, como um link no logotipo da empresa que irá redirecioná-lo à home do site, uma barra de pesquisa que realmente funciona, um formulário de contato e um mapa do site. Embora óbvias, a ausência ou a má funcionalidade desses elementos podem trair as expectativas do usuário e trazer consequências desagradáveis na experiência de navegação.

Imagens para reforçar conceitos

As imagens que você usa em seus sites podem ajudar ou confundir os visitantes. Uma imagem bem escolhida pode colocar o visitante à vontade, tornando a sua intenção clara. Uma imagem mal escolhida pode deixá-las coçando a cabeça e fazer com que se sintam caindo em um buraco negro novamente.

Foto para confundir

Esta foto de um hipopótamo de pelúcia na Disney World não tem absolutamente nada a ver com este post e está aqui somente para confundir as coisas.

Imagens abstratas às vezes podem funcionar bem, mas o cuidado para usá-las é vital. Às vezes uma imagem abstrata pode ter significados completamente diferentes de uma pessoa para outra, e a intenção inicial de neutralidade – ou o que quer que a pessoa estivesse desejando transmitir – será perdida completamente!

A Consistência da marca

Logo da Puma com nome Nike

Além dos elementos citados anteriormente, a maioria dos visitantes espera ver elementos visuais padrões que possam criar uma associação à ideia pré-concebida (quando existir) do padrão da empresa em particular.  A imagem acima, de autoria do designer Grahan Smith é um bom exemplo disso. Nela, vemos o design da Marca PUMA aplicado ao nome da sua concorrente, Nike, causando uma sensação de estranheza absurda (você pode ver os outros trabalhos de  Brand Reversion, onde ele brinca com outras marcas famosas.)

É fundamental pesquisar quais as cores dos materiais promocionais off-line desta empresa para que essas cores sejam incorporadas no site de alguma forma, mesmo que apenas na imagem de um cabeçalho ou como cores de destaque. Elas irão reforçar essa ligação com a identidade visual da empresa proprietária do site. O mesmo vale para o logotipo. É imprescindível incluí-lo no site e que ele tenha uma posição de destaque.

Com relação às cores, psicologia da cor é um dos temas mais complexos do design e é algo que ainda escreverei detalhadamente em futuro post. Mas as cores que você usa pode ter um impacto pesado sobre como seus visitantes percebem o seu site. Certifique-se que as cores que você selecionou reforçam sua mensagem e a imagem que você deseja passar.

O site da artista gráfica Maria Claudia Cortes mostra de uma forma lúdica e fácil de entender os significados das principais cores e suas compatibilidades para utiliza-las de forma correta em seu trabalho. É claro que essas combinações de cores que você irá usar terá um impacto que pode variar de acordo com o seu tom exato, matiz ou variações graduais. Você pode assistir a apresentação clicando Aqui (em Inglês) ou Aqui (se preferir em Espanhol). É necessário o Adobe Flash (use um navegador atualizado para poder assistir, ok?).

Imagem do site Colors in Motion

Padrões de Leitura

As pessoas tendem a ler em um “Z” padrão em um site, ou seja, começando na parte superior do lado esquerdo e terminando no canto inferior direito da sua tela. Como designer, você deve se esforçar para colocar o conteúdo mais importante dentro desta área padrão de leitura. É por isso que muitos sites incluem o logotipo no canto superior esquerdo do cabeçalho. A incorporação não essencial de informação dentro desta zona de leitura significa que os visitantes podem deixar o local antes de encontrar o que procura, pois eles podem pensar que não está presente no seu site.

Segundo pesquisa sobre o comportamento dos internautas em sites de busca (Eye Tracking Study, Junho 2011), existe um foco de atenção do olho humano em uma área chamada Golden Triangle (Triângulo de ouro). Esta área está situada nas primeiras posições dos resultados orgânicos em determinados sites. Um bom exemplo disso é a página do buscador Google, como você pode ver a seguir:

Triangulo de ouro do Google

O Triângulo de Ouro recebe mais de 95% de frequência de fixação do olhar, embora isso não signifique que se algum elemento do seu site não estiver nesse triângulo ele não será visto. Mas é algo para pensar quando for determinar a posição dos elementos-chave em uma página.

O Foco da página

Texto em foco

Cada página do seu site deve ter um foco. Deve haver um propósito para cada item. Se esse objetivo é mostrar um produto, ou apresentar a empresa, ou mostrar notícias recentes, isso deverá ser cumprido á risca.

Seu projeto precisa colocar a ênfase no elemento focal de cada página. Os focos de cada página devem ser imediatamente aparentes, para que os visitantes saibam o que estão fazendo lá. Isto pode ser conseguido por meio de pistas na navegação ou através de links para além do conteúdo da página.

Uma das maiores “pistas” para perceber um design amador é  a presença de informação visual em demasia em cada página. Não tenha medo dos espaços em branco em seus designs, ele também contribui para a clareza e direcionamento do olhar do visitante. São as chamadas “áreas de respiro”, sem elas, se um visitante chega a uma página preenchida desordenadamente com todas as coisas possíveis que se possa imaginar, ele irá se sentir sobrecarregado e claustrofóbico. Ao combinar espaço vazio e elementos devidamente decorados, você pode incentivar os visitantes a olhar para uma determinada coisa e induzir à uma ação desejada.

Incorporando o aprendizado

Agora que você está familiarizado com o que a psicologia do projeto significa para o web design, você pode estar se perguntando como, exatamente, você deve incorporá-la em seu próprio processo de design. Aqui estão algumas técnicas que você pode usar:

Entreviste seus usuários
Se você não tiver certeza de que seus usuários ou visitantes desejam encontrar no site, tente entrevistar alguns deles, atuais ou antigos e ver se eles estariam dispostos a responder a algumas perguntas sobre o site. Em seguida, crie perguntas significativas com base em objetivos específicos do seu projeto. Mais importante ainda, use as informações que você irá obter.  Muitas vezes, as empresas fazem entrevistas, mas quase nunca fazem mudanças com base no que foi pesquisado.

Criar um Sitemap para seu site
Você precisa criar um mapa de cada página do seu site para que você possa garantir que cada uma delas tenha preferencialmente apenas um foco. Faça uma lista de tudo o que precisa estar em seu site primeiro, e depois mapeie quais páginas de cada item deve continuar (idealmente, deve ser uma página por artigo a menos que as coisas sejam muito, muito intimamente relacionadas).

Monte sua marca
Faça uma lista ou crie um arquivo dos elementos comuns usados para representar sua marca. Provavelmente, isso incluirá um logotipo, um esquema de cores, e, possivelmente, uma combinação de tipos de letra em particular. Em seguida, descubra onde incorporá-las no design do seu site.

Faça o Teste A / B
Se não tiver certeza de que seus visitantes se sentirão confortáveis em uma determinada página, faça um teste com duas versões do site para ver qual se obtém melhores resultados.

Psicologia de Design é algo que todo designer deve se esforçar para aprender mais sobre e para incorporar em seu fluxo de trabalho. Pode ser o principal fator para tornar seus projetos mais eficazes. Não toma muito tempo e não é particularmente difícil, então não há realmente nenhuma desculpa para não levar pelo menos alguns destes princípios e colocá-los em prática. Pense nisso e mãos à obra!

Próximo

Postado por

Web designer, Ilustrador e produtor visual gráfico, santista de nascimento e de coração, amo o que faço e estou muito feliz em fazer parte da equipe Microcamp.