log - smart software development. great user experience

Parallax Scrolling Design

Parallax segundo a enciclopédia britânica é definido como o deslocamento aparente ou a aparente diferença de direção de um objeto visto de dois pontos diferentes, que não estejam em linha reta com o objeto.

O efeito Parallax ou parallax scrolling no web design é uma técnica que envolve várias camadas (layers) de elementos (imagens de fundo, caixas de texto, etc.) com velocidades e perspetivas diferentes, criando uma ilusão de 3D.

Atualmente com o recurso a um interface bem definido, a bibliotecas de JavaScript (jQuery) e às CSS3, podemos criar sites que pareçam mais reais e criativos, sem ter que recorrer ao Flash ou ao Video.

Usabilidade

Quando surgiram os primeiros sites a recorrer a esta técnica, muitos designers apressaram-se a adotá-la para os seus próprios sites, muitas vezes sem um planeamento adequado.

É sempre bom experimentar novas técnicas, mas quando começamos a planear os projectos à volta de uma técnica, corremos o risco de o projeto não servir os propósitos iniciais.

Utilizar uma técnica apenas porque é novidade, não é uma boa prática e pode levar a que um projeto acarrete inúmeros problemas de usabilidade.

Se acedermos a alguns sites que utilizam esta técnica, ficamos com a sensação que alguns funcionariam melhor se os elementos que a compõem permanecessem imóveis.

Considerações a ter em conta ao usar Parallax

Ao desenharmos um site que recorra ao efeito parallax devemos ter em conta alguns dos seguintes fatores:

  • Carregar previamente todos os elementos gráficos: se o design contêm muitos elementos gráficos devemos, antes de disponibilizar informação ao utilizador, carregar todos os elementos gráficos. Com isto iremos proporcionar uma experiência de utilização mais agradável.
  • Dispositivos móveis: devemos ter uma atenção redobrada com o dispositivos móveis, pois os utilizadores poderão não ter a mesma experiência de utilização como têm nos browsers dos computadores.
  • Tamanhos dos ecrãs: testar o design em diferentes ecrãs, com diferentes resoluções e garantir que em todos temos a mesma experiência de utilização.

Potenciais problemas inerentes à utilização

Os sites que fazem uso desta técnica, como o site da Nike Better World, numa primeira impressão aparentam funcionar perfeitamente, mas algumas questões se levantam.

O primeiro problema é o facto de esta técnica ainda ser bastante recente, e por isso mesmo ser encarada como novidade. Se recuarmos um pouco no tempo, até aos anos 90, proliferou o uso massivo de .gifs animados, que também na altura eram novidade. Era impressionante ver num site não só todo o conteúdo estático mas também por exemplo um gato que dançava!!

rocker kitten animated gifs

Como nos recordamos, a novidade dos .gifs animados, passou rapidamente da experiência de vermos alguma animação nas páginas para algo que criava ruído e distraía os utilizadores.

Outro problema relacionado com esta técnica é a ainda falta de suporte nos browsers dos tablets. Ainda é difícil recriar toda a experiência de utilização nestes dispositivos.

Com o cada vez maior número de dispositivos móveis, e enquanto o suporte não melhora, temos de pensar se vale a pena criar um site que utiliza esta técnica apenas para os browsers que correm nos computadores pessoais.

Usar ou não usar Parallax

Depende sempre do objetivo do projeto.

Para percebermos se devemos ou não adoptar esta técnica num dos nossos projetos precisamos de saber quais os objetivos que pretendemos atingir. Se o conceito que o parallax oferece é o ponto central do projeto e dos seus objetivos então podemos utilizar – se não, o mais provável é estarmos a usar esta técnica apenas por ser novidade, e provavelmente o projecto irá deparar-se com maiores problemas de usabilidade.

Exemplos

Os exemplos que se seguem contêm sites que utilizam o efeito do parallax da melhor forma, a começar pelo exemplo mais popular Nike Better World. Como podemos reparar a maioria dos sites inspira-se neste exemplo.

Nike Better WOrld

Smart USA

Mario Kart Wii

Beetle

Activate Drinks

Tutoriais