Boas práticas para Rolagem infinita
Este é um artigo traduzido, originalmente escrito por Nick Babich em UX: Infinite Scrolling vs. Pagination
Rolagem infinita, chamada também de ‘infinite scrolling’ ou ‘endless scrolling’, é uma técnica que permite que os usuários naveguem em uma grande quantidade de conteúdo sem uma linha de chagada visível. Esta técnica consiste em simplesmente atualizar o conteúdo conforme você rola para baixo.
A técnica permite a rolagem sem nenhuma interrupção ou interação adicional — os itens vão aparecendo conforme o usuário rola a página. É notável o seu uso no Feed de noticias do Facebook; Google imagens e na timeline do twitter. Por mais tentadora que pareça, essa técnica não é uma funcionalidade coringa que se encaixa em todo tipo de site ou app.
As cinco regras para uma boa rolagem infinita
Criar uma experiência na rolagem infinita não é uma tarefa impossível. Para completá-la, lembre-se das seguintes Guidelines:
1. A barra de navegação deve estar sempre visível
Quando usar rolagem infinita, mantenha a barra de navegação fixa. Assim, a navegação entre as diferentes áreas da aplicação se torna mais rápida e fácil. Se esta barra ficar fora de alcance, usuários deverão rolar de volta para o topo para conseguir acessá-la.
Somente mobile: As telas de smartphones e tablets costumam apresentar uma área de exibição menor, assim a barra de navegação acaba tomando uma boa porção da tela. Se o conteúdo em questão é um feed, a barra de rolagem pode ficar escondida quando os usuários rolam pra baixo, em busca de novo conteúdo, e revelada quando eles começam e rolar para cima ao tentar voltar para o inicio.
2. Use um botão de ‘carregar mais’ se você tem um rodapé.
Esse é um dos maiores desafios de design na rolagem infinita: Os itens são carregados continuamente conforme os usuários chegam ao fim da lista, o usuário consegue ver o rodapé, talvez, por um ou dois segundos antes que o próximo montante de itens são carregados, jogando o rodapé pra longe de vista. Isso previne o usuário de chegar ao rodapé.
Bing Imagens, por exemplo: O rodapé contém links como ‘Saiba mais’ e ‘Ajuda’, mas não é possível acessá-los até que a rolagem infinita pare, o que demora um pouco.
Se o seu site ou aplicativo tem um rodapé relevante para você (ou melhor, para seus usuários), você deveria usar a abordagem do ‘Carregar mais’. Nenhum conteúdo novo será colocado na lista até que o botão seja clicado. Isto faz com que uma simples interface implemente um carregamento de itens adicionais sob demanda com a menor carga cognitiva possível.
Instagram usa o botão de ‘Carregar mais’ afim de fornecer um fácil acesso ao rodapé, e não força o usuário a clicar repetidamente no botão, escondendo-o nos próximos carregamentos.
3. O botão de voltar, deve dirigir o usuário de volta ao exato ponto anterior
A implementação da rolagem infinita pode apresentar uma das maiores falhas de usabilidade: a posição da rolagem não é gravada como um ‘status’. Se usuários entram em um link da lista e logo após apertam o botão de voltar, é esperado que sejam dirigidos ao mesmo ponto da lista em que a deixaram. Porém, quando a posição não é mantida, a ação de ‘voltar’ recoloca o usuário no topo da página. Não é surpresa que usuários possam ficar frustrados bem rápido com a não existência de uma funcionalidade como ‘voltar para a lista’ .
Não faça que seus usuários percam suas posições na lista ao mudar de página. É crucial que, quando os usuários visitam um item da página e depois retornam a ela, eles sejam redirecionados ao exato ponto de onde pararam, mesmo clicando no botão voltar do navegador.
O botão ‘voltar’ do Flickr tem um comportamento semelhante ao do navegador. A aplicação grava a posição de rolagem, e quando o usuário aperta o botão de volta, é redirecionado a posição original.
4. Dê a possibilidade de marcar (Favoritar) os itens da lista em particular.
Um dos defeitos mais frequentes na rolagem infinita é o fato de ser impossível marcar coisas da maneira como aparecem. Um simples funcionalidade de marcar (‘salvar para depois’ ou ‘adicionar aos favoritos’) os melhores resultados para uma consulta futura, se torna uma poderosa ferramenta para seus usuários. Usuários marcam e favoritam itens se o site ou app oferece essa possibilidade. Pinterest, por exemplo, usa essa funcionalidade para auxiliar os usuários a salvar ideias criativas.
5. Forneça um feedback visual quando novo conteúdo é carregado
Quando novo conteúdo é carregado, usuários precisam de um sinal claro do que está acontecendo. Para mantê-los informados, use um indicador de progresso para mostrar que novos itens logo aparecerão na página.
Sendo o carregamento de novo conteúdo uma ação rápida (não deve tomar mais que 2–10 segundos do tempo do usuário) você pode usar uma animação em loop, mostrado que o sistema está funcionando.
Adicionar um texto (Ex: “Carregando mais comentários”) pode ser util ao adicionar clareza na comunicação com o usuário.
Conclusão
Quando rolagem infinita é bem implementada, pode ser uma experiência incrivelmente suave e sem igual. Espero que essas dicas de como fazer uma boa rolagem infinita ajudem você a estabelecer uma Experiência do usuário perfeita.
Obrigado!
Originalmente publicado em babich.biz.
