Desenvolvimento

Ξ Deixe um comentário

Parallax Scrolling – Aprecie com moderação

publicado por Renan Moratto

Parallax Scrolling - Aprecie com moderaçãoE esse tal de Parallax ae?

Um tipo de navegação que já há algum tempo vem sendo bastante utilizada, o Parallax Scrolling tem caído no gosto dos usuários e clientes por proporcionar uma experiência de navegação visualmente agradável e em alguns casos com um ótimo nível de interatividade, porém como todas as tecnologias web que alcançam uma certa popularidade existem muitos exemplos de boa utilização assim como exemplos de como desperdiçar uma boa tecnologia para fazer algo não tão bom assim.

Vou direto ao assunto e nesse texto apresento meu ponto de vista justificando a boa utilização do Parallax, não entrarei em questões técnicas de desenvolvimento (linhas de código, como fazer isso e aquilo) esse texto é mais um conjunto de dicas no pré-desenvolvimento para quem está pensando em usar essa tecnologia em algum projeto.

Objetivo do site

Não pense no Parallax como ítem de uma vitrine na construção de um site onde você olha algum exemplo e diz: “gostei, vou usar!”. Óbvio que tendo um budget você vai achar quem faça qualquer tipo de site em qualquer tecnologia sem questionamentos, porém o resultado pode ser um verdadeiro desastre.

Antes de pensar em usar o Parallax temos alguns pontos que devem ser considerados para saber se a tecnologia cai bem ou não para seu projeto, não se preocupe tanto com a quantidade de informação mas sim em como o usuário vai interagir com esse conteúdo, as brincadeiras que podem ser feitas nessa navegação e principalmente a finalidade do site. Imagine por exemplo um e-commerce em Parallax, conseguiu visualizar? Talvez não atinja o objetivo de um e-commerce causando impacto direto no objetivo deste tipo de site que é vender.

Exemplifiquei apenas um item para que antes de vislumbrar um incrível site em Parallax talvez seja legal parar um pouco e analisar o objetivo do projeto, rascunhar uma arquitetura pode ser um bom começo para decidir a melhor navegação para seu site.

Design

Ah essa é fácil, basta inputar as sessões do site em um scroll imenso e pronto! o front-end cuida do “efeitinho” certo? Não, não é bem assim.

Esse com certeza é o ponto que mais deve ser pensado na hora de usar o Scrolling, pois se você quer realmente aproveitar a tecnologia e ter uma bela navegação deve-se pensar em todos os elementos e como utilizá-los nas transições, desde imagens e texto brincando com a transição dos frames quanto brincar com o tema do site para impulsionar o usuário a entrar na brincadeira.

A tecnologia em si do Parallax Scrolling é voltada à navegação, é sempre bom revisar questões de UX aqui também, cuidados para quantidade de conteúdo nos frames e para não tornar a experiência do usuário cansativa já nas primeiras rolagens.

Desenvolvimento – Timings e rolagem

Hora dos retoques finais e muito importantes para um bom resultado: A definição do tempo nas transições e consquentemente a quantidade de rolagem na navegação.

Aqui é onde o designer e o front-end do projeto devem estar muito bem alinhados para um bom resultado final, se é a mesma pessoa que cuida das duas partes melhor ainda.

A definição em do timing em si entre um frame e outro é algo simples de primeiro momento, basta alguns testes e ajustes e você tem uma transição mais suave ou mais rápida, o ponto preocupante aqui está mais para a adaptação desse scroll em diversas resoluções e a atenção com a navegação em desktop já que em dispositivos mobile o usuário nevega pelo toque enquanto em desktop/notebooks usa-se o touchpad ou a “rodinha” do mouse.

Aqui a dica é não poupar tempo na bateria de testes em diversos dispositivos e resoluções para não “cansar o dedo” dos usuários seja no tablet ou no mouse, também no carregamento do site, é sempre bom não esquecer de deixá-lo o mais leve possível.

Alguns exemplos da boa utilização do Parallax Scrolling

Listei abaixo alguns sites que encontrei com algumas particularidades que me agradam e podem servir de inspiração para seu projeto.

[Crédito da Imagem: Website – ShutterStock]

  •  
  •  
  •  
  •  
  •  
  •  
  •  

Compare preços de Uber, 99 e Taxi

Minimum Way

Autor

Publicitário, Gerente de Projetos e Programador. Há alguns anos envolvido no mundo do Marketing e Publicidade, especializado em Processos, BPM e sempre me atualizando sobre SEO, UX e novas tecnologias, divido meu tempo absorvendo e compartilhando conhecimento.

Renan Moratto

Comentários

You must be logged in to post a comment.

Busca

Patrocínio

Publicidade




Siga-nos!

Newsletter: Inscreva-se

Para se inscrever em nossa newsletter preencha o formulário.

Artigos Recentes