Paginação, “Carregar mais” ou scroll infinito: qual escolher?

Compare paginação, Carregar mais e scroll infinito para escolher o padrão adequado à tarefa, ao conteúdo, ao desempenho e à acessibilidade.

Wireframe minimalista que representa a escolha do modo de carregamento por meio de uma lista de itens conectada a controles de continuação.
Nível de impácto
Médio
Status
Atenção
Nível de evidênica
Evidência moderada

Contexto

Paginação, “Carregar mais” e scroll infinito podem dividir uma coleção em partes, mas não produzem a mesma experiência. A escolha deve partir da tarefa: encontrar um item, comparar opções, explorar novidades, voltar a um resultado ou alcançar o fim da coleção.

Paginação cria páginas e pontos de retorno claros. “Carregar mais” mantém os itens no mesmo contexto e depende de uma ação explícita. Scroll infinito adiciona conteúdo automaticamente durante a rolagem. Nenhum desses padrões é universal: a decisão depende do conteúdo, do volume, da estabilidade dos resultados, do desempenho e da necessidade de orientação.

Escolha o padrão pela tarefa principal e valide a decisão com conteúdo real, desempenho e testes de uso.

  1. Use paginação: quando a pessoa precisa localizar, citar, compartilhar ou revisitar uma página específica; quando a posição, o total ou a URL são relevantes; ou quando resultados, tabelas e históricos precisam de pontos de retorno previsíveis.
  2. Prefira “Carregar mais”: quando a pessoa explora e compara itens em uma lista contínua, mas ainda precisa decidir quando adicionar conteúdo. Preserve o que já foi visto, informe o que foi carregado quando possível e ofereça um fim claro.
  3. Considere scroll infinito: em feeds de descoberta ou conteúdo sequencial nos quais continuar explorando é a tarefa principal e não é necessário alcançar um item por página. Use somente se posição, histórico, desempenho, rodapé e acesso por teclado e tecnologia assistiva continuarem compreensíveis.
  4. Use carregamento em blocos com critério: ele pode reduzir cliques e evitar uma lista inicial pesada. Um botão “Carregar mais” costuma oferecer mais controle do que adicionar itens apenas ao chegar ao fim.
  5. Preserve o estado: mantenha filtros, ordenação, busca, posição, itens já carregados e URL quando a tarefa exigir retorno, compartilhamento ou navegação pelo histórico.
  6. Defina o carregamento: informe espera, sucesso, erro e fim da coleção; evite duplicar itens e impeça que solicitações simultâneas alterem a ordem.

Regra prática: se encontrar e voltar importam mais do que explorar, comece avaliando paginação. Se explorar e comparar importam mais, avalie “Carregar mais”. Reserve o scroll infinito para feeds em que a continuidade é parte do objetivo e ofereça uma alternativa manual quando a pessoa precisar de mais controle.

Base da recomendação

USWDS, GOV.BR e W3C documentam padrões e requisitos diferentes para paginação, carregamento de conteúdo e feeds. A Baymard encontrou, em listas de produtos, contextos em que “Carregar mais” facilita a exploração e a comparação. Esse achado é específico de e-commerce: ele orienta uma hipótese de design, não uma regra para toda lista. A escolha final deve ser validada no produto.

Prancha do McKinsey Design System mostrando variações do componente de paginação com página selecionada, reticências e total de páginas.
Exemplo real: a prancha do McKinsey Design System mostra variações de paginação com página selecionada, reticências, navegação e total de páginas. É uma implementação/documentação contextual, não uma regra universal. Fonte: https://cdn.mckinsey.com/assets/sketch/McK_DS_core_Artboards.pdf, página 54.

Porque isso importa?

A forma de carregar itens muda a percepção de tamanho, posição e continuidade. Paginação torna a posição explícita e facilita retornar a uma URL. “Carregar mais” mantém a comparação no mesmo espaço e cria uma pausa voluntária. O scroll infinito reduz a ação necessária para continuar explorando, mas pode esconder o fim, deslocar o contexto e dificultar a recuperação de um item.

O custo não é apenas visual. Carregamento automático pode afetar histórico, foco, leitura por tecnologia assistiva, uso do rodapé, desempenho e recuperação depois de abrir um item. Paginação também pode ser ruim quando interrompe a comparação repetidamente ou apaga filtros a cada página.

Uma decisão correta equilibra descoberta, controle, orientação e custo técnico. Quando os dados não sustentam uma escolha clara, compare alternativas com tarefas reais e meça localização de itens, retorno, conclusão, erros e percepção de controle.

  • Paginação: buscas, tabelas, históricos, arquivos e coleções extensas com posição ou URL importantes.
  • “Carregar mais”: catálogos e listas de exploração em que comparar itens no mesmo contexto é importante.
  • Scroll infinito: feeds de novidades, notícias ou conteúdo sequencial em que continuar descobrindo é a tarefa principal.
  • Carregamento em blocos: coleções grandes em que carregar tudo de uma vez prejudica desempenho.
  • Híbrido: interfaces que precisam de continuidade, mas também de uma ação explícita para recuperar controle.
  • Scroll infinito em buscas ou tabelas que exigem localizar e revisitar itens.
  • Paginação em listas curtas que cabem em poucos ciclos de leitura.
  • “Carregar mais” quando a pessoa precisa acessar diretamente uma página final.
  • Qualquer padrão que perca filtros, ordenação, posição ou itens já vistos.
  • Carregamento automático sem tratamento de erro, fim da coleção e estado de espera.
  • Escolher pelo padrão do concorrente sem testar a tarefa principal.
Prancha do CivicTheme mostrando um componente de paginação com navegação anterior e próxima e indicação de páginas.
Exemplo real: o CivicTheme Australian Government Design System documenta a anatomia e variações de paginação com navegação anterior/próxima e indicação de páginas. É uma referência contextual de Design System, não uma regra universal. Fonte: https://www.civictheme.io/sites/default/files/documents/2024-07/CivicTheme-Australian-Government-GOLD-Design-System-Compliance-Statements.pdf.

Recomendações

Faça

Práticas recomendadas
  • Parta da tarefa principal.
  • Preserve posição, filtros e estado.
  • Defina um fim claro.
  • Mostre espera e carregamento.
  • Trate erro, repetição e fim.
  • Indique o que foi adicionado.
  • Teste retorno e compartilhamento.
  • Meça controle, descoberta e localização.
Wireframe de uma lista mostrando carregamento manual de novos itens com filtros e contexto preservados.
Exemplo correto: a lista mantém filtros, ordem e contexto enquanto a pessoa decide manualmente quando carregar o próximo bloco. Ilustração didática criada para a CamaraUX.

Evite

Práticas a evitar
  • Usar scroll infinito por moda.
  • Esconder o rodapé.
  • Perder filtros ou ordenação.
  • Duplicar itens ao carregar.
  • Mover o foco sem aviso.
  • Impedir voltar ao ponto anterior.
  • Assumir que “Carregar mais” serve para tudo.
Wireframe de uma lista mostrando carregamento automático com ordem instável, itens repetidos e contexto perdido.
Exemplo incorreto: o carregamento automático adiciona itens sem controle claro, repete elementos e dificulta recuperar a posição anterior. Ilustração didática criada para a CamaraUX.

Acessibilidade

Na paginação, use uma região semântica <nav> com rótulo único, links com nomes claros e aria-current="page" na página atual. Mantenha a URL quando a mudança representa outra página e preserve filtros e ordenação.

Para “Carregar mais”, use um botão real com nome que explique a ação. Informe o início do carregamento, o resultado e o fim da coleção por texto ou mensagem de status sem roubar o foco. Depois da atualização, mantenha uma ordem de foco previsível e permita continuar a partir do botão ou do conteúdo recém-adicionado.

Scroll infinito exige cuidado adicional. Se a experiência for realmente um feed, siga o padrão de feed do WAI-ARIA: artigos identificáveis, posição e tamanho do conjunto quando conhecidos, aria-busy durante atualizações e navegação por teclado compreensível. Não use ARIA para mascarar uma estrutura inadequada; valide o comportamento com leitores de tela.

Em todos os casos, teste teclado, leitor de tela, zoom de 200% e 400%, mobile, conexão lenta, falhas de rede, botão Voltar, abertura de item e retorno à posição anterior.

Checklist

  • A tarefa principal é encontrar, comparar ou explorar?
  • A pessoa precisa de uma página ou URL específica?
  • O total ou o fim da coleção é relevante?
  • A posição e os itens já vistos são preservados?
  • Filtros, ordenação e busca permanecem ativos?
  • O padrão escolhido funciona com teclado?
  • O carregamento e o resultado são anunciados?
  • Erro, repetição e fim da coleção têm tratamento?
  • O botão Voltar recupera o contexto?
  • A decisão foi testada com conteúdo e usuários reais?

Referências

U.S. Web Design System — Pagination. Define paginação como navegação para conteúdo dividido por quantidade e orienta o uso de links, rótulo semântico e identificação da página atual. Consultar Pagination.

Padrão Digital GOV.BR — Pagination. Documenta paginação e apresenta alternativas de carregamento vertical com botão e rolagem automática. A existência dessas variantes reforça que o comportamento deve ser escolhido pelo contexto. Consultar Pagination.

W3C WAI-ARIA APG — Feed Pattern. Explica o padrão estrutural para feeds que carregam artigos durante a rolagem, incluindo posição, tamanho do conjunto, foco e aria-busy. Consultar Feed Pattern.

W3C — Status Messages e Focus Order. Orienta comunicar carregamento, resultados adicionados e fim da lista sem mover o foco de forma inesperada, preservando uma ordem de foco que mantenha significado e operação. Status Messages e Focus Order.

Baymard Institute — Product List UX. A pesquisa aplicada mostra que quantidade de itens, dispositivo, densidade da lista e tarefa influenciam a escolha entre paginação e carregamento adicional. Os achados são específicos de listas de produtos e devem orientar hipóteses e testes, não uma regra universal. Consultar a pesquisa.

Baymard Institute — Product Lists & Filtering UX. Reúne pesquisas sobre como as pessoas escaneiam, avaliam, filtram e ordenam listas de produtos. Consultar a pesquisa.

Esta recomendação foi útil para você?