17

Minha questão é sobre (experiencia do usuário), não é sobre material-design e afins e também não é sobre "acho que", mas sim sobre alguma experiencia neste tipo de funcionalidade que já tenha passado com usuários, vamos ao problema:

Eu noto muitas vezes duas situações distintas:

  1. É exibido sempre um load, mesmo que resposta seja rápida (ou não), um exemplo disto são os votos do site https://stackoverflow.com, ao clicar para ver a diferença de downvotes e upvotes é exibido sempre o load:

    demonstração load da diferença de downvotes e update no stackoverflow

  2. Não usam load, pois geralmente as requisições são rápidas, mas estes desenvolvedores se esquecem de coisas como oscilações devido a "sobrecargas" ou alguma perda de sinal temporária (isto é independente de HTTP, as oscilações podem ser até em programas locais, causadas devido a outro programa consumindo os mesmos recursos)

Na primeira situação senti (dos votos no https://stackoverflow.com) que o load foi tão rápido que talvez não fosse necessário, então a minha ideia para resolver isto (o que seria quase como uma resposta) seria simplesmente detectar se a requisição aos dados esta demorando e então sim mostrar o load se necessário, por exemplo (fiz em html+js, mas se aplica em qualquer lugar):

var rapida = document.getElementById("rapida"),
    lenta = document.getElementById("lenta"),
    resposta = document.getElementById("resposta"),
    container = document.getElementById("container"),
    tempoMinimoParaExibirLoad = 500; // Se em meio segundo não tiver ainda a resposta será exibido o load

rapida.onclick = function () {
    requisitar(100); //Simula uma requisição rapida (1ms)
};

lenta.onclick = function () {
    requisitar(5000); //Simula uma requisição rapida (5 segundos)
};

function requisitar(delay)
{
     var timeout = setTimeout(load, tempoMinimoParaExibirLoad, true);

     setTimeout(enviarResposta, delay, delay, timeout);
}

function enviarResposta(delay, timeout)
{
   //Se a requisição for rapida para o timeout do load
   clearTimeout(timeout);

   delay /= 1000;
   resposta.textContent = "Sua resposta levou " + delay + " segundos";

    //Remove classe in-load se necessário
    load(false);
}

function load(mostar)
{
    container.classList.toggle("in-load", mostar);
}
#container > div {
   padding: 10px;
}

#container .load {
    display: none;
}

/*Exibe o load acaso a requisição esteja demorando*/
#container.in-load > .load {
    display: block;
}

/*oculta outros elementos durante o load*/
#container.in-load > :not(.load) {
    display: none;
}
<div id="container">
    <button id="rapida">Requisição rápida</button>
    <button id="lenta">Requisição lenta</button>
    <div id="resposta"></div>
    <div class="load">Carregando...</div>
</div>


Claro que isto é uma percepção que tenho de como ficaria melhor a experiencia para o usuário, mas gostaria de ver alguma resposta que afirmasse que algo assim pode na verdade prejudicar a experiencia ou que existem abordagens melhores ou até como melhorar esta abordagem. Realmente espero que a pergunta não seja muito subjetiva.

9
  • Uma abordagem é verificar o tempo de todas as requisições, e se a conexão estiver rápida não usar o load. Mas todo esse trabalho pra uma melhora mínima de UX, considero inviável. Um outro fator importante se retirar o load, é deixar outra forma de o usuário saber que houve um click, uma submissão de formulário, etc
    – Costamilam
    19/01/2019 às 16:54
  • 1
    Caro @GuilhermeCostamilam verificar o tempo da requisição não é justamente o que formulei no exemplo? Não estamos falando de exatamente de HTTP, o cenário simulado é apenas um exemplo, a abordagem é para qualquer lugar, a questão não é a melhora minima e nem dá para afirmar que é minima, mas sim qual abordagem melhoraria de verdade, o que vai ser resolvido na hora da programação e pode ser algo que atende todas requisições especificas sem precisar copiar e colar código, mas não estamos discutindo o nivel de dificuldade se apenas o UX mesmo ;)
    – Syzoth
    19/01/2019 às 17:04
  • Nem nunca tinha reparado no load, de tão rapido que é. So agora que olhei com atenção é que reparei que tem
    – Isac
    19/01/2019 às 20:22
  • 3
    @Isac o interessante é que se não tiver o load, mesmo que rápido o que provavelmente aconteceria? Vc provavelmente clicaria novamente antes da requisição terminar... Ou então por algum instante pensaria "acho que deu pau, não deve estar funcionando" nesse caso vc poderia até sair da página sem saber que ela ainda estava processando para te entregar um resultado.... Ao meu ver deve ter sempre, mesmo que não apareça em todos os cenários. Mas é uma opinião minha, não tenho um Autor para fundamentar meu argumento... :/
    – hugocsl
    21/01/2019 às 13:37
  • @hugocsl Eu concordo, até porque isso já me aconteceu em alguns sites, de a pessoa clicar e ficar sem saber se deu ou não, e por vezes acaba mesmo por fazer refresh para tentar de novo.
    – Isac
    21/01/2019 às 13:50

1 Resposta 1

19
+50

De acordo com Jakob Nielsen do Nielsen Norman Group existem três principais limites de tempo (que são determinados pelas habilidades de percepção humana) a serem lembrados ao otimizar o desempenho da Web e de aplicativos.

  • 0,1 segundo é o limite para que o usuário sinta que o sistema está reagindo instantaneamente, o que significa que nenhum feedback especial é necessário, exceto para exibir o resultado.
  • 1,0 segundo é o limite para o fluxo de pensamento do usuário permanecer ininterrupto, mesmo que o usuário perceba o atraso. Normalmente, nenhum feedback especial é necessário durante atrasos de mais de 0,1 mas menos de 1,0 segundo, mas o usuário perde a sensação de operar diretamente nos dados.
  • 10 segundos é o limite para manter a atenção do usuário focada no diálogo. Para atrasos mais longos, os usuários desejarão executar outras tarefas enquanto aguardam a conclusão do computador, portanto, devem receber um feedback indicando quando o computador espera que seja feito. O feedback durante o atraso é especialmente importante se o tempo de resposta for altamente variável, pois os usuários não saberão o que esperar.

Fonte: https://www.nngroup.com/articles/response-times-3-important-limits/

Como a pergunta está mais focada na resposta instantânea (intervalo inferior a 1s) vou focar nesse outro exemplo do próprio Nielsen. 0,1 segundo é o limite de tempo de resposta se você quiser que os usuários sintam que suas ações estão causando diretamente algo na tela.

Por exemplo, se você clicar em um menu expansível e visualizar a versão expandida em menos de 0,1 segundos, será como se você mesmo tivesse aberto o menu. Se demorar mais de 0,1 segundos para o estado expandido aparecer, a resposta não parecerá instantânea - em vez disso, vai parece que o computador está processando alguma coisa para fazer com que o menu se expanda.

Nesse artigo da Smashing Magazine o autor aborda um dos pontos para não se usar animações para tempos de respostas inferiores a 1s. De acordo com ele o "piscar" de uma imagem na tela pode causar um certo desconforto ao usuário, pois ver a imagem na tela por uma fração de segundo e não conseguir identifica-la ou entender o que aconteceu pode deixar o usuário confuso e com certa ansiedade por não entender o que aconteceu na tela.

O fato é que sim, o loader é um indicativo valioso de feedback para o usuário, eles atenuam os efeitos negativos do tempo de espera. Até por que você sempre deve fornecer um feedback ao usuário sobre o que está acontecendo com o aplicativo ou página.

Veja abaixo que:

These figures are based on the particular qualities of the human brain. Any animation shorter than 100 ms is instantaneous and won’t be recognized at all. Whereas the animation longer than 1 second would convey a sense of delay and thus be boring for the user.

Traduzindo:

"Estas figuras são baseadas nas qualidades particulares do cérebro humano. Qualquer animação com menos de 100 ms é instantânea e não será reconhecida. Considerando que a animação com mais de 1 segundo iria transmitir uma sensação de atraso e, portanto, pode ser chata para o usuário."

inserir a descrição da imagem aqui

Fonte: https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9


Pontos a se considerar

Loader Indeterminado x Determinado

Para tempos entre 2 e 10 segundos o ideal é que se use animações do tipo indeterminadas, como um spinner infinito. Caso o tempo seja maior que 10 segundos é aconselhável que se use uma animação do tipo determinada e com indicador de progresso. Isso dá uma tranquilidade para o usuário em saber que a sua ação está em andamento.

inserir a descrição da imagem aqui

Velocidade x Tempo

Aqui é uma opinião particular, não achei referência sobre o assunto.

Veja esses dois exemplos de animação. Elas são iguais, mas estão com velocidades diferentes. Repare como a que gira mais rápido também parece que está processando mais rápido. A animação mais lenta por sua vez dá uma percepção de que o processo também é mais lento, mesmo não sendo...

inserir a descrição da imagem aqui

Outro exemplo é com a Load Bar. Essas duas barras se completam com 2 segundos, porém a barra maior pode parece que é mais rápida, e a barra mais curta parece mais lenta. Além disso a barra maior tem um ease-out, ou seja a animação dela começa lenta e acelera para o final. Isso aumenta ainda mais a percepção de que o processo está finalizando rápido.

OBS: uma barra de progresso nunca deve parar ou ser interrompida, pois qualquer pausa pode indicar que o processo falhou e pode provocar alguma ação indevida ou desnecessária do usuário.

inserir a descrição da imagem aqui

Outro exemplo, de como o Ease pode interferir na percepção da velocidade da animação, veja que as duas animações são iguais, mas a de cima parece mais lenta por ser linear, porém as duas tem o mesmo tempo de duração! Sugiro que pondere bem o use de ease para animações com mais de 1s, pois o efeito pode mudar a percepção real do que está acontecendo. Em animação com menos de 400ms, vai ser tão rápido que não vai fazer o usuário mudar a percepção do que aconteceu (é só uma dica).

O fato é que o ease pode ser confundido com um retardo de performance ou de velocidade de conexão ou algo similar a queda de rendimento em animações mais longas. Então pondere o uso de acordo com o tipo de animação! Em uma barra de load por exemplo eu não indico, mesmo que ela tenha menos de 400ms.

inserir a descrição da imagem aqui

A minha dica é que para tempos entre 2s e 10s se use spinners ou load bars indeterminadas e com uma velocidade mais alta na animação. Para processos mais longo que 10s use animações determinadas e com um tamanho um pouco maior que o convencional, isso vai fazer com que a animação preencha espaços largos, dando a impressão que está se completando mais rápido.


Uma curiosidade

Quando os usuários foram apresentados a uma animação de carregamento personalizada no aplicativo do Facebook para iOS (esquerda), eles culparam o aplicativo pelo atraso. Mas quando os usuários foram mostrados o spinner do sistema iOS (à direita), eles eram mais propensos a culpar o próprio sistema.

Então quando era exibida a animação do loader padrão do sistema operacional o usuário tendia a acredita que a lentidão era provocada pelo aparelho. Mas com o loader personalizado do Facebook o usuário acreditava que a lentidão era provocada pelo próprio App e não pelo aparelho.

inserir a descrição da imagem aqui

Fonte: https://usersnap.com/blog/progress-indicators/

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 .