Para rolagem infinita ou não para rolagem infinita: para onde chegamos tão longe

Hoje, estamos investigando os fatos mais relevantes sobre como a rolagem infinita se tornou uma técnica tão aclamada em toda a web e por que, apesar de sua popularidade, ainda não é tão amplamente adotada no design da web.

Esse recurso apareceu em um ponto da história da Internet em que a quantidade de informações a serem apresentadas nas páginas da Web aumentou e a velocidade das conexões permitiu ao leitor acessar e transferir informações a taxas maiores. A questão da rolagem infinita nas páginas da web é um dos aspectos envolvidos no design da experiência do usuário e não é tão simples quanto você imagina.

Começos e Popularização

No Google, é chamada rolagem contínua e também pode ser chamada de rolagem sem fim. Resumidamente, a rolagem infinita é uma técnica para fazer com que o navegador carregue automaticamente novo conteúdo quando o usuário chegar à parte inferior da página, para que não seja necessário procurar botões de paginação para ir para a próxima parte; a coisa toda aparecerá apenas rolando a roda do mouse.

Essa técnica é usada principalmente na página do feed de notícias no Facebook; a página de resultados de pesquisa de imagens do Google e a linha do tempo do Twitter. Um exemplo interessante e atualizado publicado para fins de referência pode ser visto na página de demonstração do plugin Isotope jQuery.

hexaedro.eu tira proveito da rolagem infinita horizontal para ilustrar a evolução da humanidade

Uma das primeiras referências a esse tipo de rolagem foi feita em 2005 por Bill Scott (diretor de engenharia de interface do usuário do PayPal) em seu artigo Death to Paging! - Rico LiveGrid Lançado.

Ele foi desenvolvido para apresentar uma tabela muito grande de dados em uma única exibição para o usuário antes que ele precisasse ir para a seção a seguir, e foi referido primeiro como a grade ao vivo de rolagem. O artigo incluiu uma seção de prós e contras, algumas considerações de design e formulou os elementos da pergunta em palavras claras: paginação versus rolagem infinita.

A técnica foi refinada e começou a ser muito popular na web, causando uma súbita explosão de entusiasmo por ela. Um ano após o artigo de Scott, anunciando a grade ao vivo de rolagem, foi possível encontrar textos on-line difamando o fenômeno de quebra de página e elogiando o novo pergaminho com o lema “Não force o usuário a pedir mais conteúdo: apenas dê-o para eles."

Em meados de 2008, o termo rolagem infinita já tinha vida própria e um site com o mesmo nome dedicado a explicar em detalhes como ele funciona. O site ofereceu também um punhado de plugins para permitir a rolagem contínua em temas do WordPress, páginas via bibliotecas jQuery e complementos de "autopagerização" para Safari e Chrome, o que poderia adicionar automaticamente a função de rolagem a sites normais.

"Não force o usuário a pedir mais conteúdo: apenas entregue a ele."

Mesmo em 2012, a técnica ainda é apresentada como uma inovação "para o deleite do seu coração", juntamente com a implementação do design responsivo. De um ponto de vista mais analítico, esse foi um passo adiante na separação entre a existência do conteúdo inicialmente impresso e sua contraparte eletrônica. Afinal, a noção de uma página da web vem precisamente do mundo material de jornais, revistas e livros com páginas de papel reais.

Thomas Baekdal explica a relação entre páginas impressas e textos exibidos em telas digitais em Dissolving that Print Mentality. Baekdal basicamente resolve o problema com um tipo de fórmula: primeiro formato ou conteúdo primeiro. Em sua análise, Baekdal afirma que as limitações da mídia impressa não devem ser transferidas para a tela digital.

A Apple também prestou homenagem à tendência de rolagem. Uma das principais características do novo iBooks 3.0 foi a possibilidade de rolar os livros verticalmente. Agora, o leitor pode esquecer o efeito de virar a página e ler seus best-sellers movendo o dedo. Essa foi precisamente uma implementação do lema "se livrar do urso dançarino" de Baekdal: permitir que o leitor se libertasse do antigo paradigma do livro físico. Felizmente, havia uma opção para decidir entre o tema tradicional de virar a página ou o de rolagem contínua à vontade, para que o leitor antiquado ainda tivesse a oportunidade de imitar livros verdadeiros em seu dispositivo.

Por que evitar essa melhoria de UX?

Uma das poucas exceções à regra de adotar a rolagem infinita foi o caso de Dan McKinley no Etsy, onde uma pesquisa prática usando a metodologia de teste A / B mostrou que a técnica não estava funcionando conforme o esperado.

De fato, a rolagem infinita foi removida do site depois que o número de cliques nos favoritos diminuiu e a função de pesquisa não foi mais usada. Não obstante um possível viés no método usado para avaliar as reações dos usuários, é claro que a rolagem infinita não estava maximizando a atividade por si só, ou pelo menos que o público habitual do site não concordava com a alteração.

O Google é outro exemplo em que a rolagem sem fim não conseguiu ser totalmente implementada. Somente a pesquisa de imagens tem rolagem infinita e, mesmo lá, a rolagem é limitada com o botão "mostrar mais resultados".

um dos usos mais criativos da rolagem infinita é mostrado no site distancetomars.com

Os benefícios

Mais do que apenas um recurso sofisticado, a rolagem infinita tem várias vantagens que valem a pena em muitos casos:

• A atenção ininterrupta que um usuário mantém quando mais conteúdo é fornecido automaticamente está no centro da atratividade da rolagem infinita. O leitor não precisará parar para pensar onde encontrar o próximo botão ou qual número de páginas deve aparecer, após uma atenção aprimorada.
• Em termos psicológicos, a rolagem infinita parece desencadear respostas automáticas com base na curiosidade e no alívio da expectativa produzida enquanto se espera por novas informações, o que provoca uma espécie de excitação e vontade de continuar rolando para ver o que aparece. Esse mecanismo psicológico merece compreensão suficiente, pois a vantagem inicial pode se transformar em um problema. Por exemplo, as descobertas de McKinley sugerem que rolar infinitamente a página de resultados da pesquisa chocou ou confundiu os usuários, sobrecarregando-os com mais e mais informações a ponto de evitar o uso da pesquisa.
• Os designs de modelos podem se beneficiar com mais limpeza, mais espaço para conteúdo e elementos menos perturbadores, como a lista de números para paginação.

As desvantagens

Obviamente, também existem vários problemas com rolagem infinita que devem ser considerados:

• Tempo de carregamento da página aumentado: é óbvio que o conteúdo extra a ser anexado na parte inferior da página precisa de mais tempo para ser baixado. Usuários com conexões dial-up ou planos de dados móveis ruins terão uma capacidade reduzida de navegar efetivamente nessa página.
• Uso de memória: os navegadores, tanto em computadores de mesa quanto em dispositivos móveis e tablets, podem ficar sem memória e travar, principalmente quando a página carrega toneladas de imagens.
• O aumento do tempo de carregamento, juntamente com mais memória do sistema necessária e o uso do processador, podem resultar inevitavelmente em uma navegação desagradável e instável.
• Compatibilidade do navegador: como a rolagem infinita pertence ao domínio do design responsivo da Web, depende de bibliotecas e plugins que podem não ser totalmente compatíveis em dispositivos ou versões de navegadores mais antigos.
• Ver o rodapé desaparecer e não conseguir alcançá-lo pode ser uma experiência "traumatizante" para o usuário. Além disso, todo o conteúdo do rodapé e, portanto, a função do rodapé desaparecerá.
• Falta de orientação e referência espacial: em um esquema paginado, os usuários podem definir uma referência visual simples para se orientar pelo conteúdo da página e marcar os locais onde algo de interesse é encontrado, para que seja possível retornar rapidamente mais tarde. Pode haver usuários que se sintam perdidos ou confusos sem saber onde estão ou perdendo o que estavam procurando.
• Perda da última posição do usuário no fluxo de dados, quando o botão Atualizar ou Voltar é pressionado. Como a rolagem infinita visa mostrar grandes quantidades de entradas, deve ser implementada também uma maneira de recuperar a posição real na lista, para evitar situações frustrantes. A maioria das reclamações contra páginas intermináveis ​​refere-se a esses dois últimos pontos, pois os usuários estavam perdendo o controle sobre a página visitada.
• Os marcadores tendem a ser inúteis, pois um ponto de interesse não será marcado em uma página discreta, mas flutuará em algum lugar no fluxo de entradas.
• Embora não seja necessariamente uma coisa ruim, as classificações podem variar muito nas páginas de pesquisa, pois esses resultados confinados após o número da página 2 aparecerão na página número um apenas rolando a tela para baixo o tempo suficiente.

É por isso que, apesar de sua alta popularidade, páginas infinitas nem sempre são a melhor opção para todos os sites ou mesmo para o mesmo site visualizado em dispositivos diferentes.

Algumas soluções alternativas

Os desenvolvedores encontram constantemente soluções alternativas para esses inconvenientes, tornando a rolagem infinita mais eficaz. O caso bem documentado do novo aplicativo do LinkedIn para iPad fornece um bom estudo de caso sobre problemas e soluções ao implementar a rolagem infinita.

O aplicativo precisava ter rolagem infinita em uma lista central para mostrar notícias e imagens grandes; isso criou a necessidade de uma maneira conveniente de lidar com todos os elementos sem afetar o desempenho do pergaminho. Os truques HTML5 e CSS foram combinados para obter o resultado final de um aplicativo que mostra o conteúdo sem problemas, sem travar.

Sem dúvida, esse aprimoramento da experiência do usuário ainda tem uma maneira justa de evoluir, mas os usuários já desfrutam de uma melhor experiência de navegação - principalmente quando se trata de navegar em páginas com muita informação, gráficos e texto.

Zona de Repositório

A rolagem infinita chegou para ficar, portanto, é aconselhável conhecer métodos diferentes para fazê-lo funcionar:

Enhantsy: poucas pessoas que realmente gostaram da implementação da rolagem infinita no Etsy.com podem reativá-lo em sua página instalando este plug-in a partir da página Enhantsy. O plugin oferece várias outras funções, além de restaurar a rolagem contínua em todas as páginas do Etsy.

Soluções WordPress: os blogs são talvez os candidatos favoritos para rolagem infinita. Talvez uma pequena proporção de usuários ainda não consiga lidar com o rodapé flutuante semitransparente que o WordPress coloca quando a rolagem infinita está ativada, mas para a grande maioria que gosta da técnica, o Infinite-Scroll é um plug-in que ativará o modo de rolagem sem fim na maioria dos temas do WP e requer pouca experiência ou habilidades de codificação. O plugin Jetpack também oferece rolagem infinita como mais uma entre dezenas de funcionalidades. O Tuts + publicou um tutorial sobre como obter rolagem infinita usando o jQuery; este tutorial é direcionado para os corajosos tinkerers dispostos a implementar a rolagem infinita inserindo o código eles mesmos.

Discussão e recomendações: O StackOverflow oferece muitos tutoriais sobre qualquer aspecto concebível relacionado à rolagem infinita.

Alternativas para celular: a rolagem infinita funciona bem com dispositivos móveis devido à natureza de suas telas de toque. É possível obter o efeito no Android usando o Android-Binding. Os métodos de rolagem de imagens usados ​​em aplicativos também estão disponíveis, por exemplo, para funcionar em iPhones.