Design

Fique de olho no Paralax

pegeot

As vantagens de usar o design que passa a sensação de profundidade e torna a navegação mais interativa em páginas eletrônicas

O Parallax é uma uma opção bacana para dar um toque mais descolado à navegação de sites. O auge de seu uso, inclusive, deve ocorrer em 2016. O efeito é usado, na maioria das vezes, por quem quer concentrar todo o conteúdo em uma única página eletrônica.

O design consiste em apresentar imagens em camadas para dar a impressão de profundidade. De quebra, as transições entre diferentes tópicos ou assuntos são feitas com tipos de animações, que servem como um atrativo divertido para quem está navegando. “Essa técnica, apesar de nova em interfaces web, é um efeito bem conhecido no teatro, nos primeiros desenhos animados de Walt Disney e nos games 2D das décadas de 1980 e 1990”, conta Edson Kan Ishigami, diretor de desenvolvimento da Agência Digital Citrus7.

O Parallax é um conceito que, se bem aplicado, ajuda a popularizar páginas da web. Por isso, a Revista W conversou com especialistas e selecionou alguns projetos interessantes que podem servir de inspiração para quem pensa em adotar a técnica.

O que é
Para entender como o Parallax funciona, o ideal é adotar uma analogia. Imagine que você está sentado na cabine de um trem em movimento. Ao olhar pela janela, os postes mais próximos dos trilhos ficam para trás rapidamente. Entretanto, os prédios localizados no horizonte permanecem em seu campo de visão por mais tempo. Você pode até não saber, mas o que você acabou de ver nesse passeio de trem, nada mais é do que o conceito de Parallax.

“Quando o observador está em movimento, objetos mais próximos dele se movem mais rapidamente e são mais difíceis de serem vistos e, objetos que estão mais distantes do observador, vão se movendo mais lentamente, proporcionalmente ao afastamento”, explica Carolina Stephan de Araújo, designer e professora do Centro Universitário Senac.

Na verdade o Parallax é um fenômeno que acontece quando técnicas de movimento e animação são aplicadas para sobrepor várias imagens ou elementos e movimentá-los em velocidades diferentes. “No webdesign, ele acabou tornando-se sinônimo de ‘website em uma única página’”, conta Carolina.

Ishigami explica que, na web, a técnica começou a se popularizar após a vinda de browsers modernos. “Eles traziam consigo um melhor suporte para o JavaScript e a introdução do HTML5 e CSS3”, afirma.

Várias opções
Uma boa opção de uso do Parallax é fazer com que ele atue com o efeito de uma narrativa roteirizada. A cada vez que o usuário desce a barra de rolagem, parte dessa história é apresentada. Além de dar um toque diferenciado à página, as chances de alguém querer chegar até o final da narrativa são bem grandes.

Alguns sites fazem tipos de provocações para instigar a curiosidade dos internautas. Outros colocam a pessoa no meio de uma verdadeira jornada, por exemplo, a Peugeot, que divulga as características da tecnologia HYbrid4 por meio de uma graphic novel em formato Parallax.

Outra opção bacana de usar a técnica é contando a história de um produto ou empresa. A In Tacto, por exemplo, leva o usuário a uma viajem no tempo. Um foguete viaja de 2001 a 2012 mostrando toda a evolução e as conquistas da empresa durante seus anos de vida.

Mais uma maneira que pode ser usada, e vai deixar a página com uma cara única, é a inspiração em games. O esquema do famoso Super Mario nada mais é do que Parallax. Enquanto o pequeno encanador italiano se locomove pelo cenário, as nuvens e arbustos do fundo se mexem com uma velocidade reduzida. Esse tipo de efeito dá
um perfil de movimentação maior aos personagens, que pode servir com uma espécie de guia nas páginas da web.

Não exagere
Apesar de se tornar algo diferenciado, e que provavelmente irá se destacar, a criação de um site com Parallax deve ser cuidadosamente planejada. Afinal, todo encanto do efeito pode acabar se ele não for dosado corretamente. “É preciso controlar não somente os conceitos de Parallax, como qualquer um utilizado indiscriminadamente. No design, fazem-se decisões projetuais a partir da necessidade de cada caso, da experiência que se quer projetar, do feedback do usuário e não o oposto”, explica Carolina.

Para a especialista, o exagero de elementos da página causa problemas que podem fazer o feitiço virar contra o feiticeiro e espantar o público. Isso porque não adianta ter uma interface bela e interativa se a navegação for confusa para o internauta. “É importante compreender que tanto o Parallax quanto qualquer outra abordagem de interface fazem parte de uma linguagem de uma interface, seja de um site ou de um aplicativo. Portanto, a utilização dessas técnicas devem estar de acordo com o projeto e com a experiência que se está projetando para o usuário”, conta a especialista.

Um estudo realizado pelo The Journal of Usability Studies reuniu 86 participantes e os dividiu em dois grupos para analisar a usabilidade de um site com Parallax. Para dar início ao teste, os participantes precisaram fazer reservas on-line no site de um hotel. Metade deles realizou a experiência em uma página comum, enquanto isso, a outra parte reservou o quarto por meio de uma plataforma com o design.

Os resultados mostraram que a navegação com Parallax não se mostrou mais prática ou funcional. Entretanto, os usuários relataram que a experiência foi mais divertida, e portanto, mais interessante. Por outro lado, duas pessoas alegaram sofrer de náuseas e mal estar após acessarem a página. Por isso, a conclusão do estudo foi de que não é recomendado utilizar o Parallax em páginas de tarefas rápidas, por exemplo, em e-commerces. Para vender mais, uma loja não pode exigir que o cliente desça por várias sessões para achar o produto desejado.

Parallax e SEO
Por apresentar todo o conteúdo em uma única página, o Parallax pode atrapalhar algumas técnicas de SEO. Fica difícil encaixar muitas palavras-chave, já que as informações estão “todas juntas” em uma única página. Essas palavras são responsáveis por engajar buscas no Google. Nisso, o conteúdo espalhado por mais páginas leva vantagem. Ele aumenta consequentemente o número de resultados, e torna o site mais visível.

Uma boa opção é manter a navegação tradicional e aplicar o efeito Parallax apenas em alguns pontos mais importantes do site. Assim, cada página terá algumas palavras-chave, e as chances do site aparecer com mais frequência nas buscas do Google serão maiores.

Entretanto, o recurso de ilusão dimensional também tem suas vantagens quando o assunto é SEO. “Se o seu site Parallax for muito bem montado, com certeza, você conseguirá bons backlinks de visitantes que gostaram da página e resolveram divulgar o bom trabalho que você fez. Isso será levado em consideração nos mecanismos de busca, como algo a se ‘relevar’”, conta Ishigami.

Outro fator que deve ser feito com muita atenção é a página mobile. O Parallax não é muito bem aceito quando o assunto é navegação via smartphones ou tablets. “Os efeitos não funcionam adequadamente nesses dispositivos. Assim, é necessário ter uma segunda versão do site”, afirma Ishigami

A velocidade de carregamento das páginas também deve ser um ponto importante na hora em que se planeja um site nesse estilo. “Muitos utilizam a técnica de Parallax com a proposta de colocar tudo em uma única página, mas se ele não for bem projetado e bem executado, pode até interferir negativamente no tempo em que o conteúdo demora para carregar, tornando-o bastante lento”, explica Carolina.

“A velocidade de um site em Parallax vai depender de sua construção e de elementos como: imagens, a extensão da página, quantidade e complexidade das interações com o usuário”, afirma Ishigami. Para o especialista, esses fatores irão, com certeza, influenciar tanto na velocidade quanto no consumo de recursos (processamento e memória RAM) dos devices.

Comente