Por que a barra de progresso de carregamento do GitHub é visualmente atraente e como construí-la

Introdução#

Ao navegar para uma nova página no GitHub (ou mesmo neste site), você verá uma barra de progresso de carregamento no topo da página. A animação da barra é suave e parece natural. Vou discutir a experiência do usuário por trás disso e construir uma similar em React.

Neste tutorial, vou usar Remix como o framework React. No entanto, você pode usar qualquer outro framework ou biblioteca React, desde que suporte o rastreamento do estado de transição de página.

Experiência do usuário#

Você pode perceber que o progresso do carregamento não é linear. Ele começa rápido e desacelera rapidamente, depois progride em pequenos passos. Assim que a página é carregada, a barra de progresso rapidamente atinge 100% e desaparece.

Se você verificar a aba de rede nas ferramentas de desenvolvedor do navegador, verá que a barra de progresso não está diretamente relacionada à requisição de rede, mas é mais como um efeito visual.

Esse design é intencional e um truque psicológico para fazer o usuário sentir que a página está carregando mais rapidamente. Vamos compará-la com uma barra de progresso linear e um spinner tradicional:

Como você pode ver, a barra de progresso linear parece um pouco lenta, enquanto o spinner não dá nenhum feedback sobre o progresso. A barra de progresso do GitHub dá ao usuário uma sensação de progresso e torna a experiência de carregamento mais agradável.

Mas por que?#

Na interação homem-computador, há um conceito chamado desempenho percebido. É sobre o quão rápido o sistema parece para o usuário, não o quão rápido ele realmente é.

Para movimentos lineares, eles podem frequentemente parecer abruptos e mecânicos, o que pode ser mais mentalmente cansativo de seguir (maior carga cognitiva). Movimentos mais naturais, como suavização (easing) e molas (springing), podem parecer mais previsíveis e mais fáceis de processar.

Estudos descobriram que transições mais suaves podem reduzir a carga cognitiva dos usuários, tornando as interfaces mais amigáveis. Isso é útil para fazer com que o sistema pareça mais responsivo.

Além disso, Harrison et al. (2007) descobriram que os usuários percebem a barra de progresso como mais rápida quando ela segue a função de suavização "Fast Power", que é muito similar à barra de progresso do GitHub.

Podemos concluir que a chave para fazer a barra de progresso parecer mais rápida é "começar rápido, desacelerar e depois acelerar de maneira exponencial".

Construindo a barra de progresso#

Agora vamos construir uma barra de progresso similar em React. Usaremos Remix e seu hook useNavigation para rastrear o estado de transição de página. Se você estiver usando outros frameworks React, pode usar APIs similares para obter o mesmo efeito.

Organizando a animação#

Para torná-la ainda mais natural, vamos usar a animação spring da react-spring para animar a barra de progresso (essa biblioteca já é um bom exemplo de como as animações baseadas em física podem melhorar a experiência do usuário). Podemos dividir a animação em três estágios:

1. Comece rápido e desacelere rapidamente
2. Progrida lenta e constantemente
3. Chegue a 100% e desapareça

Com as APIs imperativas da react-spring, podemos facilmente atingir esse efeito. Aqui está o código:

Vamos explicar o código:

Temos uma spring ref api para controlar a animação. Quando precisamos iniciar a barra de progresso, chamamos start com a seguinte configuração:

1. Comece com 0% de largura.
2. Use uma tensão alta e ajuste o atrito para fazer a barra de progresso começar rápido e desacelerar rapidamente para 10%. Note que usamos clamp: true para evitar que a barra de progresso ultrapasse ou oscile.
3. Progrida para 15% com uma duração de 5 segundos. É um estágio de buffer para tornar a animação mais natural.
4. Progrida para 100% com uma tensão e atrito maiores para fazer a barra de progresso avançar com um movimento de mola suave (o GitHub usa um comprimento aleatório de etapas aqui, mas pessoalmente prefiro um movimento suave).

Quando a página for carregada, chamamos end para "interceptar" a animação e fazer a barra de progresso alcançar 100% e desaparecer rapidamente.

Atualizando na transição de página#

Remix oferece o hook useNavigation para rastrear o estado de transição de página. Podemos usá-lo para iniciar e terminar a barra de progresso. Aqui está o código:

Sinta-se à vontade para personalizar o estilo da barra de progresso para combinar com o design do seu site e ajustar os parâmetros de animação de acordo com sua preferência. Contanto que você siga o estilo de suavização "Fast Power", você pode alcançar o mesmo objetivo.

Conclusão#

A interação homem-computador é realmente um campo interessante. Mesmo pequenos detalhes, como a barra de progresso de carregamento, podem afetar significativamente a experiência do usuário. No Logto, nós não apenas nos preocupamos com a infraestrutura técnica e implementações, mas também com a experiência e o design do usuário. Acreditamos que eles também são partes importantes de uma plataforma amigável para desenvolvedores.