Leve ao limite - uma visão geral de sites de rolagem longa

Publicados: 2022-03-11

Rolagem longa, ou rolagem infinita, os sites são exatamente isso: as páginas são muito mais longas que a página “média” do site e, portanto, rolam “infinitamente”. Esses tipos de sites se tornaram populares em sites de mídia social e sites como o Pinterest, que incluem muito conteúdo gerado pelo usuário, bem como alguns sites de notícias e blogs - sites pessoais e portfólios também estão começando a empregar técnicas de rolagem longa para aumentar engajamento do usuário e o tempo que as pessoas passam em um site.

A rolagem infinita tornou-se um padrão de design popular e comum, no entanto, existem algumas armadilhas em potencial que os designers de interface do usuário devem estar cientes ao projetar um site que usa rolagem longa. Existem também alguns tipos de sites em que não é apropriado empregar um padrão de design de rolagem longa.

O Propósito e os Benefícios do Long Scroll

Um dos maiores benefícios dos sites de rolagem longa é que eles mantêm os visitantes em um site por mais tempo. Quando as pessoas não precisam tomar uma decisão consciente de consumir mais conteúdo, é menos provável que cliquem.

Pense nisso como sendo semelhante à maneira como o Facebook, YouTube, Netflix e sites semelhantes reproduzem automaticamente os vídeos quando o que um usuário está visualizando termina. Eles sabem que, se um visitante tiver que fazer um esforço para clicar em um novo vídeo, é provável que clique em um site totalmente diferente. Mas se os vídeos continuarem sendo reproduzidos, é mais provável que eles continuem assistindo.

Quando os sites de rolagem longa são codificados corretamente, eles carregam um novo URL com cada novo conteúdo. Isso equivale a mais visualizações de página do site, o que pode aumentar a receita de publicidade e o valor geral do site.

A rolagem longa é popular em sites de notícias, que carregam mais conteúdo à medida que o usuário rola — A página inicial do Mashable carrega automaticamente mais conteúdo à medida que o usuário rola, mantendo-o na página por mais tempo.

Como em qualquer decisão de UX, é importante pesar as vantagens e desvantagens para as pessoas que realmente usarão o site antes de decidir sobre um formato. A rolagem longa pode ser uma ótima opção para certos tipos de sites, enquanto em outras situações tudo o que ela faz é frustrar os usuários. É importante aprender a diferença entre os dois.

Quando usar a rolagem longa (e quando não usar)

A principal coisa a ser lembrada ao considerar a rolagem longa é que o conteúdo deve ditar o formato, independentemente do tipo de site que está sendo projetado. Sites de rolagem longa são ótimos para certos tipos de conteúdo, mas podem apresentar uma enorme falha de UX com outros tipos.

Em geral, sites orientados a tarefas e objetivos não se beneficiam de designs de rolagem infinita (por exemplo, sites de comércio eletrônico e tutoriais ou outros sites educacionais onde os usuários desejam ver o progresso definitivo). Esses tipos de sites precisam dar aos usuários uma sensação de conclusão e realização, o que é mais difícil de alcançar com sites de rolagem longa.

A Etsy, por exemplo, tentou um design de rolagem infinita em 2012 e acabou voltando para a paginação. Eles descobriram que, embora os clientes ainda comprassem aproximadamente na mesma taxa, o engajamento do usuário caiu muito. Até coisas como o número de pesquisas realizadas caíram.

Etsy se afastou de um site de rolagem longa e voltou à paginação — O Etsy acabou abandonando a rolagem longa em favor de retornar aos resultados de pesquisa paginados após a execução de testes.

Uma opção que alguns sites de comércio eletrônico oferecem aos visitantes é a opção “Visualizar tudo” ao visualizar as páginas do produto. Isso dá ao usuário a opção de visualizar o site em um formato de rolagem infinita, se optar por fazê-lo, preservando as páginas de resultados mais curtas para usuários que preferem esse formato.

A paginação também é útil quando é importante que as pessoas visualizem as informações em ordem cronológica. Onde um site de rolagem de uma página pode encorajar as pessoas a pular e pular, a paginação diminui a velocidade do visitante e aumenta a probabilidade de eles consumirem informações na ordem correta.

Onde um site de rolagem de página única pode realmente brilhar é em sites onde a leitura de conteúdo ou artigos adicionais é o fluxo natural. Isso se aplica a coisas como sites de notícias ou blogs de tópicos. Os usuários desses sites geralmente desejam receber grandes quantidades de informações de uma só vez, e a rolagem infinita torna isso muito mais fácil.

Outra área óbvia onde a rolagem infinita é uma escolha popular de UX são os sites de mídia social ou sites com muito conteúdo gerado pelo usuário. Facebook, Pinterest e Twitter usam rolagem infinita. Esses sites querem manter os usuários no site pelo maior tempo possível, e a rolagem infinita faz isso bem.

Custos Psicológicos do Pergaminho Longo

Os efeitos psicológicos de qualquer decisão de projeto devem sempre ser considerados com cuidado. Quando se trata de sites de rolagem de página única, existem efeitos psicológicos a favor e contra.

A primeira coisa a considerar é que os usuários não se importam em clicar propositalmente. O clique faz parte da computação, das interfaces gráficas do usuário e da internet praticamente desde o seu início. As pessoas estão acostumadas a esse tipo específico de interação e não serão desligadas se tiverem que clicar em alguns links para acessar mais conteúdo.

Muitos usuários não gostam de rolagem infinita por padrão. Enfrentar uma página extremamente longa para rolar pode parecer um pouco como se afogar em um mar interminável de informações. Quando os usuários estão procurando informações específicas, a rolagem raramente é a maneira mais eficiente de encontrá-las.

Como não exibirá com precisão o comprimento da página, a rolagem infinita quebra a barra de rolagem na lateral da página. Embora nem todo usuário faça uso da barra de rolagem, a esse respeito, aqueles que o fazem podem achar a rolagem infinita frustrante.

A rolagem infinita também remove a sensação de conclusão que os usuários obtêm ao terminar uma tarefa ou atingir uma meta em uma página e depois clicar para a próxima página. Perder esse senso de conclusão pode desencorajar os usuários e levá-los a buscar outras fontes para a mesma informação ou tarefa.

Outro impacto psicológico negativo que os sites de rolagem longa podem ter é que os usuários tendem a ver o conteúdo mais abaixo na página como menos importante do que o conteúdo no topo. O uso de cabeçalhos pode ajudar com isso, pois meio que “reinicia” o cérebro do visitante sobre onde está o “topo”.

Práticas recomendadas para sites de rolagem longa

Se for determinado que um projeto de site é adequado para um design de rolagem longa, há algumas práticas recomendadas a serem lembradas para garantir que ele ofereça uma experiência ideal ao usuário.

Primeiro, abandone o rodapé! Quando o conteúdo é carregado continuamente, o rodapé será continuamente empurrado para fora da parte inferior da página. Isso significa que qualquer conteúdo ou informação contida no rodapé permanecerá fora de vista. Pior ainda é quando os usuários vislumbram o rodapé, mas o perdem de vista antes de terem a chance de clicar em qualquer coisa. Usar um rodapé fixo é uma maneira de contornar isso, embora se livrar totalmente do rodapé geralmente seja uma opção melhor.

Uma ótima maneira de quebrar o UX de rolagem longa: coloque informações importantes no rodapé — O Barbican nunca permite que você veja todas as informações valiosas em seu rodapé porque assim que você acessa, mais conteúdo é carregado, empurrando-o para fora da tela.

Usar dicas visuais é importante, especialmente se não for imediatamente óbvio quando a tela principal for carregada que há mais conteúdo na página. Sites que têm uma imagem de cabeçalho grande ou conteúdo visual que preenche a tela quando a página é carregada, geralmente incluem uma seta (às vezes animada) ou imagens semelhantes para indicar que há mais conteúdo abaixo.

Dicas visuais são importantes para sites de rolagem de uma página — O Dynamit inclui uma pequena seta na parte inferior da tela inicial para indicar aos visitantes que eles devem rolar.

A navegação deve ser consistentemente visível, usando um cabeçalho fixo ou uma barra lateral fixa com links de navegação. A exceção a isso é em dispositivos móveis, onde cabeçalhos fixos podem ocupar um espaço valioso na tela. O Facebook lida bem com isso fazendo com que o cabeçalho desapareça quando os usuários rolam para baixo, mas reaparece quando eles começam a rolar de volta.

O navegador Chrome faz algo semelhante com seus controles na parte inferior da tela; eles desaparecem quando o usuário está rolando para baixo e reaparecem quando começam a rolar de volta. É uma maneira muito intuitiva de criar uma interface que maximiza o espaço disponível na tela.

Um recurso vital de UX que felizmente se tornou mais comum em sites de rolagem infinita é alterar a URL à medida que cada seção é rolada. Alguns fazem isso com marcadores internos dentro da página. Outros sites, principalmente sites de notícias e blogs, atualizam a URL inteira quando o usuário faz a rolagem. Isso é importante, pois permite que os usuários vinculem exatamente o conteúdo ao qual desejam vincular, independentemente das alterações na própria página.

Alguns web designers optam por criar o que poderia ser considerado um site de rolagem longa “híbrido”, com um botão “carregar mais” que carrega o conteúdo diretamente na mesma página. Alguns designers de interface do usuário usam isso repetidamente na página, enquanto outros optam por incluí-lo apenas uma vez e, depois disso, transformam o site em um formato de rolagem longa mais tradicional.

Além dessas considerações de design específicas de sites de rolagem longa, outras práticas recomendadas de UI e UX para criar bons designs ainda se aplicam a sites que empregam rolagem infinita.

Exemplos de rolagem longa feita corretamente

Uma animação de rolagem do site melhora a experiência do usuário — O site Story of Zohra usa dicas visuais quando você começa a rolar.

Os portfólios são uma boa oportunidade para um site de rolagem de uma página — O site Merbis Photography & Filmmaking é um ótimo exemplo de site de portfólio que usa rolagem infinita.

Um site de rolagem de página única — O site Windows of New York carrega todo o conteúdo diretamente na página inicial.

As técnicas de site de rolagem parallax são frequentemente combinadas com rolagem longa — O site Like There Is No Tomorrow combina rolagem longa com técnicas de rolagem paralaxe.

Uma sutil animação de rolagem do site aumenta o prazer do usuário — O site Faces of New York Fashion Week – um longo feed de fotos do evento – é um candidato perfeito para o formato de rolagem longa.

Um exemplo de um site exclusivo de rolagem infinita — O site de John Ball adota uma abordagem um pouco diferente: as imagens de fundo rolam infinitamente enquanto o conteúdo do texto permanece parado.

Links para cada letra à direita aprimoram o UX neste site de rolagem de uma página — O site Fake It Digital usa rolagem longa para exibir suas definições alternativas bem-humoradas de termos comuns de negócios, design e marketing.

Depois, há este site, de Andrew McCarthy. Embora o design seja único, ele rola infinitamente com as mesmas informações repetidamente. Como McCarthy é designer, é provável que seja uma escolha deliberada para se destacar da multidão.

Os designers geralmente se divertem com formatos de rolagem longa

E outro exemplo de Sam Rosen, que também continua repetindo o mesmo conteúdo várias vezes, embora este site volte ao topo em vez de recarregar todo o conteúdo.

As técnicas de rolagem infinita podem variar muito entre os sites

Conclusão

Embora os sites de rolagem longa não sejam novidade, eles estão atingindo um novo nível de maturidade. Os designers não os estão mais empregando apenas como a próxima “grande coisa” e, em vez disso, estão prestando atenção em como o padrão afeta a experiência do usuário.

Seguir as melhores práticas ao criar sites de rolagem infinita permite que os designers criem um UX que encante os usuários em vez de frustrá-los. Ao mesmo tempo, sites de rolagem longa implementados corretamente também podem ajudar as marcas a atingir suas metas de site.

• • •