Pare de construir websites com pergaminho infinito!

TL;DR: While infinite scroll does provide a solution in some cases, it can be less than ideal for users.

o pergaminho infinito pode ser desorientador, incontrolável, e pode causar stress aos seus utilizadores.

neste artigo, vamos explicar por que você precisa parar de construir sites com pergaminho infinito. Mas para começar, vamos olhar para um breve histórico de deslocamento.

a brief history of scrolling

To understand what scroll really is, let’s see where the term scroll comes from.

scroll (N.): C. 1400,”rolo de pergaminho ou papel”

pergaminhos originalmente foram usados para quando a informação se tornou longa (como conteúdos religiosos). Tanto conteúdo tornou-se difícil de gerir, ler e escrever.Quando os computadores entraram nas nossas vidas, ainda precisávamos de uma forma de navegar através de grandes pedaços de conteúdo.

the evolution of scrolls in computers

Lines (and columns)

In the early years of the internet, UX designers invented/explored many ways of paging/scrolling the content. Antes da web ser popular, estávamos a deslizar linhas na nossa tela.

pergaminhos Horizontais fizeram deslocar uma ferramenta não só para ler o conteúdo, mas também uma maneira de navegar na tela do computador.

Windows (não o sistema operacional)

usar pergaminhos para navegar na tela encorajou as pessoas a criar janelas. Usando o windows, você seria capaz de ver várias peças de conteúdo de uma só vez.

páginas web

a rolagem resolve um problema fundamental que temos enquanto navegamos páginas web. No entanto, a rolagem pode causar muitos problemas para os usuários e pode afetar negativamente a experiência do Usuário. Vamos ver mais de perto.

as experiências inventadas para navegar nas páginas web

vou tentar definir como os programadores e designers criaram experiências para navegar pelos utilizadores nas suas páginas web.

vamos começar por aprender alguns sistemas de paginação back-end:

paginação Offset

este é o sistema de paginação mais conhecido. Nesta técnica, primeiro, temos que encontrar quantos itens temos que paginar:

-- All posts countSELECT COUNT(*) AS total FROM posts

depois de contar todos os itens, temos que calcular as páginas. Vamos supor que nós vamos mostrar – 10 itens por página:

-- First page itemsSELECT * FROM posts LIMIT 10

E se queremos avançar para a página 3, precisamos ignorar a primeira 30 itens usando OFFSET:

-- Third page itemsSELECT * FROM posts LIMIT 10 OFFSET 30

E vamos enviar a paginação de informações para o cliente da seguinte forma:

{ "pagination": { "items_count": 100, "current": 3, "total_pages": 10 }, "items": }

Prós e contras de deslocamento baseado paginação

• 👍 Bom: Fácil de saltar para qualquer página
• 👍 Boa: A experiência do cliente é mais livre
• 👎 Ruim: problemas de Desempenho
• 👎 Ruim: Itens duplicados podem ser mostrados se os dados mudam

paginação baseada em Cursor

grandes dados tornaram difícil calcular a contagem de tabelas, uma vez que está em constante crescimento (pense no Twitter). Então, os desenvolvedores inventaram novas técnicas para paginar os dados: Cursores.

cada linha deve ter um cursor único. Você não tem que contar toda a tabela que torna impossível saber a contagem de páginas reais:

-- Get extra 1 item to get its cursor.SELECT * FROM posts ORDER BY id DESC LIMIT 11

assuma que cada post tem um campo cursor único (ou seu ID neste exemplo) para ajudar a paginação. O cliente terá informações de paginação como segue:

{ "pagination": { "next": 1234 // extra item's ID (cursor), null if end of data. }, "items": }

E você pode pedir para a próxima página usando o cursor:

-- Offsetting records using 1234 cursorSELECT * FROM posts WHERE id >= 1234 ORDER BY id LIMIT 11

Prós e contras do cursor base de paginação

• 👍 Bom: Mais alto desempenho, sem a tabela de contagens
• 👍 Bom: mostra itens duplicados não é possível se alguém insere uma linha no centro da tabela
• 👎 Ruim: Impossível de saltar para qualquer página
• 👎 Ruim: o Cliente não está livre com a experiência, o total de página e a página atual não são calculados

Vamos dar uma olhada em algumas técnicas de navegação.

a experiência: baseado em click

a técnica: baseado em offset ou baseado em cursor

isto é usado principalmente para navegar em blogs. Esta é a versão mais antiga do deslocamento infinito. Usando esta abordagem, o usuário pode não saber onde o conteúdo termina.

paginação numerada

a experiência: baseado em click

a técnica: baseado em offset

este é o tipo de navegação mais utilizável (de acordo comigo). Ele usa paginação baseada em offset que lhe permite saltar para a página que você quer, ou ir para o fim ou começar com apenas um clique.

o Google utiliza este tipo de navegação nos resultados da pesquisa:

Carregar mais

experiência: clique em gatilho, com base

A técnica: com o cursor, que também pode ser compensados, mas seria estranho

Este é um dos mais recentes técnicas de paginação, e também utiliza a versão anterior do infinito rola.