8

Tenho um projeto SPA que em cada transição de tela, será disparado um loading-bar (barra de progresso) para melhorar a experiência do usuário (essa UX vai englobar mais interatividade do que desempenho).

Porém ao pesquisar, estou chegando a conclusão que essa barra de progresso não passa de ilusão, ou seja, nada pode ser feito para que a mesma exiba porcentagens de carregamento reais obtendo porcentagem de carregamento.

Logo me deparo com ferramentas que fazem esse trabalho muito bem exemplo angular loading bar

Enfim, gostaria de saber, qual a melhor forma de implementa-lo, qual é a limitação operacional que impede tal controle de porcentagem? e se possível em termos de UX, por que é mais importante o usuário saber o tempo de carregamento, do que a página realmente carregar mais rápido, até por que transições desse tipo incluem várias bibliotecas, que refletem de alguma forma no desempenho.

6
  • 1
    Eu acho barras de progresso com porcentagem simplesmente ilusórias, porque não representam realmente o tempo levado pela aplicação. Uma abordagem que eu uso é a de uma image circular rodando, tipo quando inicia o win10 aquela imagem de load, acho que a experiência principal para o usuário não e saber o tempo que levou, mas sim ter a sensação de progressão., de que algo realmente está acontecendo. Commented 2/08/2017 às 16:24
  • 1
    É possível fazer algo que ilustra QUASE o real carregamento da página. Não é possível calcular o carregamento da página em si sem ela ter sido carregada antes, porém acho que é possível implementar um script que conta o número de elementos assíncronos na página (como img, iframe...) e com um onload dentro de um loop ir calculando a porcentagem exibida ao usuário. Quando todos os elementos tiverem sido carregados, exibe os 100%.
    – Sam
    Commented 2/08/2017 às 17:21
  • 1
    Cara, se eu não me engano o Flickr fez exatamente isso com a ajuda do node. Ele existe a % real dos arquivos a serem mostrados e upados.
    – user86267
    Commented 4/08/2017 às 17:14
  • 2
    Cara, vê se te ajuda. w3c.github.io/navigation-timing . Achei muito interessante a abordagem dele para tentar calcular o tempo total. De resto é so usar os valores na barra que vc quiser. Commented 4/08/2017 às 17:52
  • 1
    > Qual a melhor forma de implementa-lo, qual é a limitação operacional que impede tal controle de porcentagem? Não sei, mas vi no SO gringo que essa lib resolve o trabalho: pace.js. Commented 10/08/2017 às 3:10

2 Respostas 2

7
+50

Qual a melhor forma de implementa-lo, qual é a limitação operacional que impede tal controle de porcentagem?

A principal causa de limitação é bem simples: não há como saber o "total" do processamento antes de efetivamente realizá-lo. Considere o exemplo simples de listar todos os arquivos em uma pasta recursivamente. Se você soubesse quantos arquivos existem em todas as subpastas, você poderia calcular um percentual e incrementá-lo a cada arquivo listado. Mas em geral você não sabe isso. Logo, não há como calcular esse percentual e, consequentemente, não há como informar ao usuário qualquer estimativa real de término. O máximo que você consegue indicar é que a busca está em progresso.

Por que é mais importante o usuário saber o tempo de carregamento, do que a página realmente carregar mais rápido (até por que transições desse tipo incluem várias bibliotecas, que refletem de alguma forma no desempenho)?

Essa comparação não é muito correta, pois são problemas diferentes. Primeiramente, o tempo de carregamento é uma questão de eficiência - um dos aspectos da usabilidade). Independentemente de mostrar ou não o progresso é desejável que a execução seja a mais rápida possível para não fazer o usuário ficar esperando. Tempo de espera é tempo ocioso (idle), e quase sempre prejudica a experiência. Em segundo lugar, a barra de progresso é uma questão de feedback e sensação de controle (somente quando uma opção de cancelar acompanha a barra de progresso) - outros dois aspectos da usabilidade. Em tarefas relativamente longas, o usuário precisa saber que o computador está realizando a tarefa e, idealmente, precisa saber quanto tempo falta para esta tarefa ser cumprida. Somente assim o usuário é capaz de refletir a respeito do uso que ele fará do seu próprio tempo ocioso. E mais: a possibilidade de cancelar essa tarefa dá ao usuário uma sensação de controle importante, pois com base na informação de progresso ele pode decidir sobre esperar ou não pela conclusão.

Em resumo, o que se deve fazer é procurar desenvolver o sistema para realizar as tarefas da forma mais rápida possível. Quando existirem tarefas longas (algo que pode ser inevitável dependendo do domínio de problema), deve-se sempre fornecer informação de feedback (nem que ela seja estimada de forma mais abrangente - por exemplo, poder-se-ia estimar o progresso com base na contagem de pastas do primeiro nível, no exemplo de listagem de arquivos dado anteriormente), e fornecer uma forma do usuário cancelar/interromper esse processo. De fato, é bastante comum realizar essa operação de forma assíncrona, isto é, sem impedir o usuário de utilizar o sistema para outros fins enquanto a tarefa está em progresso (o que não elimina a necessidade de feedback).

1

Só complementando a ótima resposta do Luiz Vieira

Qual a melhor forma de implementa-lo?

Existem várias formas e bibliotecas para fazer isso, mas para que criar uma bola de neve em algo trivial?

Usei um método bem simples. biblioteca ngProgress

Basta intercala-lo em cada rota exemplo

angular.module('suaAplicacao').run(function ($rootScope, ngProgressFactory) { 

    // first create instance when app starts
    $rootScope.progressbar = ngProgressFactory.createInstance();

    $rootScope.$on("$routeChangeStart", function () {
        $rootScope.progressbar.start();
    });

    $rootScope.$on("$routeChangeSuccess", function () {
        $rootScope.progressbar.complete();
    });
});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .