Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Design Theory
Webdesign

Entendendo O Layout Divido no Web Design

by
Length:MediumLanguages:

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Como Designers Web, seguimos vários dos paradigmas de design e princípios de layout: grades, consistência vertical, o Layout-em-F, Layout-em-Z, regra dos terços, a Proporção Áurea e por aí vai. Estar atento a esses princípios produzirá designs visualmente atrativos e funcionais - vamos, agora, dar uma olhada na simples divisão de uma página em duas metades.

Embora isso pareça um pouco estranho e óbvio no começo, esse modelo fundamental pode ser bastante efetivo. Nossos olhos tendem a seguir um caminho em zig-zag enquanto escaneamos uma página. Nossos olhos seguem um linha horizontal reta - como no layout-em-Z, o usuário está concentrado (ou tentando se concentrar). Uma vez que 90% do tráfego web que chega ao nosso site não presta tanta atenção à página em si, torná-la "amigável ao escaneamento", definitivamente, valerá a pena.

Movimentos dos Olhos e o Zig-Zag

Um estudo em relação ao rastreamento visual, feito pelo Yahoo!, afirma:

  • As pessoas escaneam as principais seções de uma página para determinar sobre o que ela é e se elas pretendem permanecer por mais tempo.
  • Elas tomam suas decisões tão rápido quanto três segundos.
  • Se decidem ficar, elas prestam mais atenção no conteúdo da parte superior da tela.

Usuários web sempre estão aperreados. Eles tem outras coisas a fazer e parar para apreciar a beleza e estética do seu site é a última coisa que você deveria esperar que façam. Embora um bom design seja de grande importância, não é o único motivador de um visitante na tomada de alguma ação - por exemplo, clicar nos botões "Compre agora" ou "Saiba mais".

Não podemos culpá-los. Lembra-se das vezes que você queria saber de alguma coisa? Você correu atrás do primeiro resultado na busca do Google e escaneou, rapidamente, a página para saber se era aquilo mesmo que queria. Na maioria das vezes, você até chega a ir ao final da página, dando certa atenção. Após isso, você decide se a página vale seu tempo e decide se volta ao topo para, realmente, parar e ler com atenção.

Qual o papel desse escaneamento inicial? Obter o máximo de informação sobre a página numa passagem rápida. Se nós, de alguma forma, "codificássemos" esse padrão de escaneamento, seríamos capazes de chamar a atenção de mais visitantes. Observando vários mapas de calor de diversos sites, observei uma tendência em comum.

zig-zag

Você perceberá que é capaz de olhar para os pontos vermelhos sem dificuldade. Estranhamente, por nossa experiência, podemos dizer que nossos olhos deveriam, facilmente, seguir as linhas retas ao invés das anguladas - uma vez que lemos em linha reta. Note que estou falando da fase de escaneamento inicial, não da parte que você para e lê, detalhadamente, o conteúdo do site.

Toda vez que não está prestando muita atenção, essa é uma tendência natural dos seus olhos - o zig-zag. A menos que haja elementos que possuam contraste e tamanho maior que realmente chame sua atenção, como se gritasse com você, você, provavelmente, seguiria esse padrão. Também perceberá que esse padrão parece similar com o layout-em-F e que os pontos vermelhos são os locais onde os usuários tomam uma pausa momentânea.

Esses pontos de pausa momentânea são onde seu cérebro grava uma imagem daquela formação. Em layouts zig-zag, com elementos de grande importância nos "pontos de pausa", o cérebro absorve, naturalmente, mais detalhes, uma vez que ele entende cada final de zig-zag como um entidade única.

Design não se trata somente do visual e do sentimento. Design trata de como funciona. -Steve Jobs

Você poderia (por exemplo) usar essa característica do Layout Dividido para posicionar, efetivamente, as pré-visualizações dos trabalhos presentes no seu portfolio, ou posicionar características importantes do seu produto ou serviço, de modo que seus visitantes descubram rapidamente tais características. Isso, no fim das contas, encoraja-os a passar mais tempo em seu site e, assim, poderá convencê-los em realizar certas ações. O resultado? Melhores taxas de conversão para você e uma melhor experiência do usuário para eles.

Aplicando o Layout Dividido a um Design

zig-zag2

Tornar seu design e layout compatíveis com o "efeito zig-zag" é bem simples. Na verdade, é tão fácil quanto dividir sua página em duas metades. As metades funcionam bem porque os pontos finais do Zig-Zag estão, mais ou menos, alinhados com seus centros. Usado em superposição, eles combinam muito bem. Posicione os elementos de importância nas posições onde os pontos vermelhos do Zig-Zag da sua página estariam. Esse é o conceito básico por trás da divisão igualitária ou, Layout-1/2.

Recentemente, estava trabalhando em uma página de destino para uma página de "Em breve". Experimentei com vários layouts, mas nada funcionava bem. Tentei de tudo - Grades, Proporção Áurea, Layout-em-F, etc. O momento do pulo do gato foi quando dividi a página bem na metade. A solução era tão simples! Ficou elegante e arrumado, e lembrou-me do importante fato que, simplicidade não é, necessariamente, ruim. Você já viu a nova logo da Microsoft?

Simplicidade é a sofisticação final. -Leonardo Da Vinci

landing

Veja como as metades dão uma Hierarquia Visual bacana. Primeiro, o laço vermelho do “Coming Soon” logo ao topo é bem visível. Depois, a logo é vista. Agora, seguindo o Zig-Zag que falamos, o visitante acaba olhando o carosel de imagens na outra metade e, finalmente, o formulário de submissão de E-mail.

Agora, vejamos o quão bem esse tipo de layout funciona para uma página de portfolio de um Web Designer. O objetivo de uma página de uma Galeria em um portfolio é mostrar, rapidamente, um conjunto de trabalhos a clientes em potencial. Há inúmeras opções para isso, mesmo esse ramo estando bem cheio, agora. Então, por que eles deveria pagar você para fazer o trabalho? Criar uma ótima primeira impressão pode favorecer nesse sentido. Vejamos o que podemos fazer em relação a isso.

gallery1

O layout acima está dividido em duas partes, mas não segue o princípio do ‘zig-zag’ mencionado anteriormente.

Embora pareça ser um bom layout e agradável aos olhos, ele fica bem desinteressante após os dois primeiros elementos. Quebrar o fluxo para aumentar o interesse visual melhorará essa situação. Não só isso, quando tentar escanear esse layout, seus olhos deveriam ver a primeira imagem e então olhar para o testo do segundo item. Já que seus visitantes não tem interesse em ler qualquer coisa nessa fase, eles saltam para outro ponto ou, pior, deixam completamente seu site!

E se você fizesse uma simples mudança como essa?

gallery2

Muito mais interessante, certo? Simplesmente alterando as posições do texto e imagens de cada item, aumenta o interesse visual, de modo que a consistência não faz seu visitante sentir-se desinteressado. Você também pode colocar um botão de ação seguindo o padrão zig-Zag.

gallery3

O botão “Contact me” terá, agora, uma maior chance de ser percebido e clicado por mais visitantes (por que não realizar um teste A/B para ter certeza disso?)

O Design é um plano para posicionar elementos da melhor maneira que realize um objetivo em particular. -Charles Eames

Exemplos de Layout Divido em Ação

O Layout dividido ganhou o palco como um dos layouts da Linha do Tempo do Facebook. Veja como seus olhos "fluem" facilmente de um post para o outro.

facebook

A Apple também segue o padrão do layout dividido. Eis a página do iPad mini. Veja como é fácil associar cada imagem com cada característica do iPad mini: Simplesmente parece certo.

apple

Deu-se bastante crédito à Microsoft por trazer novas possibilidade com seu rebranding recente. Aqui, ela segue o layout dividido na página de informações da Surface.

surface

Stacey é um retrato minimalista do Layout-1/2.

stacey

Amo a página inicial do Quora. O layout dividido pode ser demonstrado de forma mais simples?

quora

Consumerbarometer.com vai além, adicionando animações e variação triangular ao Zig-Zag.

consumerbarometer

Finalizando

O que aprendemos?

  • As pessoas tomam decisões sobre sua página em tão pouco tempo quanto três segundos.
  • Para segurar a atenção dos seus visitantes e reduzir a taxa de saída, devemos tentar tornar o layout, "amigável ao escaneamento".
  • Dividir seus layouts bem no meio e posicionar os elementos importantes alinhados aos pontos finais do padrão "zig-zag" garante que seus visitantes lembre mais detalhes após os escaneamento.

Esse artigo é um simples lembrete de que nunca se deve esquecer de usar os layouts básicos e métodos fundamentais do design. Na verdade, eles podem alavancar suas taxas de conversão, se usados apropriadamente.

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.