it-swarm-pt.tech

Prática recomendada de paginação

Não tenho certeza da melhor maneira de lidar com alguma paginação que preciso executar em uma tabela que pode potencialmente ficar muito grande (5.000 linhas ou mais).

Minha primeira pergunta é se a quantidade de linhas mostradas por página deve ser ditada apenas pelo layout ou se a quantidade de páginas também deve ser levada em consideração. Por exemplo, devo dizer <1000 mostre 20 linhas>> = 1000 mostre 30 linhas?

A próxima pergunta é qual a melhor forma de navegar entre as páginas, supondo que o usuário tenha filtrado a tabela o máximo possível e que tenham 50 páginas de informações, caso haja uma caixa de entrada para ir para a página 45? Ou os botões pular (1) pular (5) devem ser suficientes? No momento, não sei como o usuário final utilizará as tabelas, portanto, não tenho certeza sobre qual opção permitir que eles tentem primeiro.

Finalmente, alguém tem bons exemplos de paginação feitos da maneira que eles poderiam compartilhar? Estou sempre à procura de um bom material de referência!

25
Toby

Isso pode ou não ser feito corretamente, mas aqui está como eu faço a paginação no meu aplicativo da web:

|< First, << Previous, Page [5] of 12, Next >>, Last >|

As quatro opções externas são links, enquanto o Page [5] of 12 é um formulário, com o [5] como um campo de entrada. Para usuários com JavaScript ativado, oculto o botão enviar e envio o formulário no evento de desfocagem ou pressiono a tecla. O usuário tem a opção de quantas linhas deseja exibir, que podem selecionar em um menu suspenso: 10, 20, 50, 100, Tudo. Também forneço a classificação e a filtragem dos resultados, além da paginação, embora isso possa não fazer sentido em todas as situações.

Editar:

Aqui está um trecho de uma maquete do nosso aplicativo Web para dar uma ideia melhor. Nesta versão, as palavras foram omitidas dos botões, mas aparecem como uma dica de ferramenta ao passar o mouse após um pequeno atraso. No entanto, você pode achar que manter as palavras resultará em um nível mais alto de usabilidade.

Virtuosi Media's Pagination Example

Algumas outras coisas a destacar:

  • Os botões "Primeiro" e "Anterior" foram desativados porque é a primeira página.
  • O azul indica botões ativos (terei que executar esse tema específico por meio de um verificador de cores para garantir que os usuários daltônicos possam diferenciar).
  • Os botões sempre permanecem, mesmo se estiverem desativados. Isso fornece consistência na interface.
  • Eu escolhi um campo de entrada em vez de uma caixa de seleção suspensa por causa da escala. Se você tem 3000 páginas, não deseja rolar para baixo para encontrar a página
  • A paginação é agrupada em um componente visual singular para indicar similaridade de finalidade.
27
Virtuosi Media

Desculpe por essa resposta, mas depende . Que tipo de conteúdo você tem e o que o usuário está procurando? Quais são os objetivos do usuário? É um site ou aplicativo?

Em muitos casos, você pode evitar a paginação usando rolagem infinita, por exemplo (consulte os resultados da pesquisa de pesquisa de imagens do Google ).

O problema com a paginação é que as próprias páginas não têm significado. Por que devo ir para a página 45? Por que não 38? Se o conteúdo estiver classificado, você pode tentar atribuir nomes significativos às páginas (como letras de um alfabeto ou intervalo de datas ou qualquer outra coisa que faça sentido). A quantidade de linhas por página deve ser tão grande quanto possível, porque a rolagem geralmente fornece uma experiência muito melhor do que navegar pelas páginas (no entanto, não é uma regra geral e existem algumas exceções).

E para os exemplos e boas práticas, aqui está um ótimo artigo .

12
Kostya

Em geral, o número de itens por página é algo que você determina com base nos seguintes critérios:

  • Que tipo de dados estou exibindo e por quanto tempo um determinado número de itens faria a página?
  • Quais consequências os itens X na página têm para o desempenho do aplicativo?
  • Quero permitir que os usuários personalizem o número de itens exibidos por página?
  • Se eu me preocupo com a navegação entre páginas (por exemplo, um usuário se preocupará em ir para a página específica nº 512?), Como o número de itens por página afetará a navegabilidade da paginação?
  • Quais controles de paginação estão disponíveis para mim?

Se você responder às perguntas acima, elas resultarão em respostas para sua segunda pergunta. Paginação é um produto dos dados que você possui e do número de itens que você está exibindo. Meu conselho é determinar se seus usuários desejam especificar qual página eles desejam exibir. Você pode descobrir isso fazendo testes com o usuário e pensando em que tipo de informação está sendo listada. Por exemplo, os resultados da pesquisa raramente são específicos o suficiente para poder dizer "Quero ir para a página 47", pois geralmente são classificados por um algoritmo enigmático e opaco. Mas se você estiver listando, digamos, nomes em ordem alfabética, a página 47 pode ser muito intuitiva.

Da mesma forma, o tipo de dados que você está exibindo também pode afetar a navegação e você pode considerar o padrão de design de navegação facetada para simplificar as coisas. No exemplo que acabei de fornecer sobre nomes alfabéticos, você pode considerar a paginação usando letras (A | B | C | D etc) e páginas em cada letra se tiver muitos dados.

Concretamente:

  • Eu não recomendo dar aos usuários controle específico demais, a menos que você saiba que é isso que eles querem
  • Em vez disso, ofereça preenchimento pela página atual (1 .. 7 8 [9] 10 11 .. 28)
  • Inclua a primeira e a última página se estiver classificando por algoritmo, a menos que não possa por motivos de desempenho.
  • Se classificar por algoritmo, considere várias opções de classificação (como reverter a ordem de classificação) - depende do tipo de dados

Exemplos de paginação corretamente:

  • Flickr - clara diferenciação entre estado selecionado, inativo e estado do link; cores acessíveis; links acolchoados com bons alvos de cliques; bom preenchimento ao redor da página atual; não excessivamente complexo. Um favorito pessoal.
  • Funda.nl - Site imobiliário holandês, com um design ótimo, simples e de fácil leitura, que também se reflete na paginação
  • Bing - sem BS, design de tipografia minimalista, o que significa que a paginação é muito sutil, mas simultaneamente fácil de usar
  • Google (obviamente) - meio enigmático, mas apesar de ter muitas opções, ainda parece simples e até traz um sorriso ao seu rosto
  • Chris Messina tem algumas boas fotos de paginação em seu álbum de padrões de design no Flickr.
6
Rahul

Padrões de paginação:

Quanto à sua primeira pergunta - sou fã de consistência (e a maioria dos usuários também). Não confunda o usuário e faça-o pensar por que vê mais linhas dessa vez ... Você pode até deixá-lo selecionar "itens por página", o que é uma prática muito comum e útil.

3
Dan Barak

Os usuários preferem rolar e paginar. É muito mais fácil operar a roda de rolagem do que apontar para pequenos links de navegação.

Mais sobre paginação x rolagem

1
Miki