O scroll infinito é um recurso que vem sendo bastante utilizado nos sites para tentar melhorar a usabilidade na paginação de elementos.

Como funciona

Basicamente funciona da seguinte forma: a medida que você usa o scroll do browser em uma coleção de elementos ele carrega sob demanda novos itens, dispensando o clique para realizar a paginação e todo o controle passa a ser feito no scroll do navegador. Com isto ele otimiza a visualização de uma grande coleção de elementos.

Apesar de parecer uma solução ótima para a maioria dos casos, ele também tem suas restrições e deve ser usado no contexto correto.

Ilustração de como funciona o padrão de scroll infinito na interface


Quando usá-lo?

Abaixo alguns casos de uso em contextos em que ele deve ser usado:

  • Onde a paginação é importante e clicar em novas páginas se torna uma barreira na usabilidade.
  • O conteúdo completo é muito grande para ser todo carregado inicialmente.
  • O conteúdo está disponível em pedaços como resultados de busca, posts de blog e listagem de produtos

Vantagens

  • É melhor carregar o conteúdo sob demanda ao invés de realizar cliques repentinos para avançar para as próximas páginas. Com o Scroll Infinito ele consegue ver o conteúdo subsequente mais rápido.
  • Não requer ajuste na habitual forma de leitura do usuário.
  • Não precisa de instrução para o usuário sobre como paginar, é mais intuitivo.
  • Pode funcionar de forma gradativa se o usuário não possuir Javascript e nem deve afetar o SEO.

Desvantagens:

  • O rodapé da página fica praticamente impossível de alcançar.
  • É um comportamento irreversível, você não pode voltar ao estado anterior.
  • Não há links para um estado definido da página.
  • Adicionar conteúdo dinamicamente aumenta a mémoria do Browser, dependendo do Browser, pode levar até 50MB de consumo de memória RAM.
  • O Analytics não captura o evento, então é necessário que haja uma configuração especial.
Para todos os casos, é muito importante que a opção de voltar esteja disponível caso o dispositivo não suporte Javascript.

 

Algumas recomendações:
  • O usuário precisa saber quando não há mais conteúdo disponível.
  • Ele deve ser implementando com progressive enhancement. A navegação padrão deve estar presente sempre que o browser não suportar Javascript, mas a experiência será mais rica na funcionalidade de leitura.

Algumas referências:

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *