Melhores práticas para implantar indicadores de progresso animados a seu favor

Se você já usou um PC, deve estar ciente do símbolo animado do Windows que aparece quando o sistema é inicializado. Foi necessária uma evolução no design e na animação para se tornar o que vemos hoje, mas no Windows 1995 a imagem não se movia. Alguns de vocês podem estar pensando, por que usar esses indicadores animados?

Mas considere isso, você prefere esperar e assistir a uma tela em branco para ver sua ação concluída? Ou permanecer entretido com algo significativo até que a tela apareça novamente?

Entre os recursos mais importantes do design da interface do usuário está a capacidade de mostrar seu progresso como status do sistema. O usuário precisa saber se o sistema está ciente de sua ação e está respondendo a ela de acordo. Indicadores de progresso animados são capazes de mostrar o contexto atual da operação em quase qualquer momento sem o uso de recursos extensos de texto ou vídeo. Isso os torna ideais para fornecer o status do sistema enquanto o progresso está sendo concluído em segundo plano.

Por que é importante interagir com o usuário durante o progresso do sistema?

Quem não gosta de uma resposta rápida de um aplicativo ou site? Embora signifique muito para o usuário, não é possível executá-lo com consistência inabalável. Certos fatores são sempre adicionados à equação que podem prejudicar a velocidade do seu aplicativo. Esses fatores incluem principalmente conexão ruim com a Internet, desempenho lento devido à carga pesada e até falha do programa. Nessas circunstâncias, a melhor ação seria minimizar a tensão do usuário e garantir que o aplicativo está funcionando e que o progresso está sendo feito. Para fazer isso, você deve fornecer feedback ao usuário para que o tempo não atrapalhe a paciência do usuário.

Mantenha os usuários conectados com feedback

O tempo de espera começa quase imediatamente quando uma ação é feita pelo usuário. Mas o pior é a ausência de um indicador adequado para representar o progresso do sistema. O usuário assume naturalmente que o aplicativo não respondeu quando não mostra uma notificação de que o sistema está demorando. Os resultados podem ir desde cliques desenfreados até abandono do usuário, apenas porque o aplicativo não forneceu feedback a tempo.

As ações que são conectadas para reiniciar o progresso ou atualizar o sistema geralmente são feitas quando leva mais tempo para carregar do que o previsto. Mais uma vez, a ausência de feedback não pode exibir a resposta da solicitação, mesmo que ela seja feita em segundo plano. É por isso que um indicador animado deve ser introduzido para defender o progresso do sistema do aplicativo a qualquer momento.

Como usar um indicador de progresso para qualquer ação que demore mais de um segundo?

Normalmente, quando um app demora menos de 1 segundo para carregar, o andamento parece quase desimpedido e o usuário não perde o foco. No entanto, se o tempo de carregamento exceder 1 segundo, medidas devem ser tomadas para manter o usuário engajado. O pequeno atraso torna-se perceptível e o usuário começa a divagar sobre a eficácia da tarefa que está sendo realizada no aplicativo.

É por isso que o aplicativo deve responder por meio de um indicador de progresso para oferecer um motivo confiável para a espera e reduzir a incerteza do usuário antes que ela fique fora de controle. Deve-se notar que a ação que leva menos de um segundo para carregar não requer necessariamente um indicador de animação, mas a imagem pode. Isso é recomendado porque uma animação que fica piscando na tela toda vez que uma ação é realizada pode desorientar o usuário. Os indicadores de progresso animados são melhor usados ​​para neutralizar os efeitos da espera prolongada e manter o usuário envolvido no aplicativo ou site.

Tipos de indicadores de progresso

1. Indeterminado: indicadores de espera animados são projetados para se comunicar com o usuário e mantê-lo informado sobre sua última ação do usuário. O tipo de indicador de espera mais comum e mais simples é “Indeterminado”. Esses tipos de indicadores dizem aos usuários para aguardar a conclusão da ação, mantendo-os inconscientes do tempo que pode levar para concluir o progresso. É quase entendido que o indicador de progresso indeterminado deve ser usado para ações rápidas, de preferência dentro de 2 a 10 segundos. Qualquer tempo maior que isso pode afetar a paciência do usuário. Isso pode aumentar a taxa de rejeição de um site e o abandono de aplicativos.
2. Determinado: No caso do indicador de progresso “Determinado”, o tempo é bastante estendido dentro da animação. Esse tipo de indicador mantém o usuário informado sobre o tempo aproximado ou exato envolvido para concluir o progresso. Eles são o tipo mais popular de indicadores de espera, pois mostram o progresso de onde começou, quanto foi realizado e quanto mais será necessário para acabar com a espera. Isso ajuda o usuário a ter certeza sobre o progresso que está sendo feito e mostrado por meio da animação, ao mesmo tempo em que aumenta sua vontade de permanecer engajado no site ou aplicativo.

Indicador de animação em loop e indicador de porcentagem concluída

• Animação em loop: o indicador de animação em loop é projetado para representar o progresso sem mostrar o tempo de carregamento aproximado ou exato que levará. É por isso que a maioria dos indicadores de progresso animados em loop são indeterminados. Por exemplo, o indicador de progresso do Windows 7 foi projetado para mostrar a repetição da mesma animação sem nenhum feedback sobre o tempo exato que pode levar para concluir o progresso. Além disso, incluía desde funções de inicialização, configuração da operação da interface e outras formas de carregamento de dados. Devido a esses dois motivos, os usuários não preferem ver o indicador de espera em loop para representar o tempo de carregamento do site ou aplicativo.

• Indicador de porcentagem concluída: como o nome sugere, o indicador de porcentagem concluída mostra o progresso do carregamento preenchendo o intervalo, o círculo ou a barra da animação de 0% a 100%. Como mostra o tempo que leva para concluir o progresso, o indicador de porcentagem concluída é classificado em determinados indicadores de espera. Para essa qualidade específica, é melhor usar o indicador de porcentagem concluída para tarefas que exigem mais de 10 segundos para serem concluídas.

  De acordo com uma pesquisa, 10 segundos é o limite da paciência média do usuário. Além disso, o usuário se torna imprudente e fica impaciente até que mais feedback seja fornecido. Ao mostrar o indicador de progresso percentual concluído para processos que demoram mais de 10 segundos para carregar, você pode manter o usuário conectado ao site ou aplicativo sem comprometer sua paciência.

Como usar os indicadores de progresso de forma eficaz?

O uso eficaz de indicadores de progresso em seus aplicativos e sites pode significar a diferença entre o sucesso e o fracasso. Aqui estão algumas dicas para garantir que seus indicadores de progresso tenham um desempenho adequado.

1. Mantenha o usuário informado sobre o motivo da espera: é um erro de iniciante manter o usuário alheio ao progresso do carregamento que está sendo feito em segundo plano. Isso aumenta a tendência de perder a paciência e sair do aplicativo ou site. Você pode manter o usuário informado mostrando um indicador de progresso animado acompanhado por algum texto para compreensão adicional. Você pode mostrar qual processo está sendo especificamente direcionado. Por exemplo, você pode mostrar o progresso de espera de um videogame com uma barra de carregamento e texto que lê qual processo está sendo executado, por exemplo, ‘carregando gráficos’ ou ‘carregando mapas’ etc.
2. Indique uma estimativa de tempo simples para tarefas que requerem períodos de tempo mais longos: não leve as coisas a microescalas. Você pode manter o usuário envolvido fornecendo uma estimativa simples. Brincar com promessas que você não pode cumprir pode irritar os usuários e forçá-los a sair.
3. Mostrar a quantidade precisa de tempo necessária: No entanto, para operações que geralmente levam mais tempo do que o limite médio de espera do usuário, optar por determinados indicadores de progresso será a jogada mais inteligente. A escolha ideal seria o indicador de progresso de porcentagem concluída, pois traz o tempo de carregamento preciso para o centro das atenções. Para operações ainda mais demoradas, considere usar o número de etapas para destacar o progresso feito.
4. Mantenha o Progresso: Tente buscar consistência em sua barra de progresso durante o carregamento de tarefas. Depois de algumas experiências, a barra de progresso força os usuários a desenvolver uma expectativa sobre a rapidez com que a ação será concluída. Conseqüentemente, qualquer congelamento em meio ao progresso pode causar um sério golpe nas expectativas dos usuários. Por exemplo, quando a barra chega a 99% e permanece assim por um período prolongado, a maioria dos usuários fica frustrada com esse comportamento e sai do aplicativo acreditando que ele travou. Para combater isso, você pode mascarar esses atrasos inconsistentes na barra de progresso, mostrando que ela se move instantaneamente e de forma constante.
5. Mostrar progresso na barra mais rápido que a velocidade real: a velocidade bruta pode ser manifestada por uma percepção simples que você pode criar para fazer a barra de progresso parecer mais rápida. Você pode fazer isso projetando a animação para mover-se lentamente no início e escolher seu ritmo ao fechar o final. Isso criará uma ilusão de progresso rápido sem comprometer o tempo para concluir a tarefa.
6. Ofereça uma distração: a percepção de tempo do usuário pode ser consideravelmente reduzida com a introdução de indicadores de progresso criativo. Se o aplicativo mostrar alguns detalhes textuais ou visuais interessantes enquanto o progresso é feito, isso pode distrair a mente do usuário do tempo gasto para concluir a ação. Você pode oferecer uma variedade de coisas para manter os usuários ocupados, por exemplo, vídeos curtos, fatos interessantes, animações e até mesmo jogos triviais.

Alternativa – Use telas de esqueletos contra indicadores de progresso de animação

Embora os indicadores de animação de progresso possam abalar quase todos os sentimentos ruins que surgem da espera, alguns públicos são bastante resistentes a essas táticas. Entre algumas boas alternativas de fazer os usuários esperarem sem usar indicadores de progresso está um método chamado tela de esqueleto. Também conhecidas como contêineres de informações temporárias, essas técnicas envolvem mostrar o progresso em tempo real para o usuário, em vez de abrir uma barra de carregamento. Imagine uma tela em branco sendo gradualmente preenchida com seus componentes e elementos até que esteja completamente abastecida. Isso cria uma ilusão de que o aplicativo está agindo com o tempo de carregamento e sua espera está sendo recompensada com o progresso mostrado.

Isso não apenas mantém o público envolvido com o site ou aplicativo, mas também os mantém prontos para concluir a próxima tarefa. Embora os indicadores de progresso também sejam excelentes meios de satisfazer os usuários, eles não conseguem manter a energia dentro dos usuários que a tela do esqueleto mantém durante o progresso do carregamento.

Pensamentos finais

Não importa o quão rápidas sejam as operações de nosso aplicativo ou site, sempre há uma chance de tempo de processamento não solicitado. O uso de indicadores de progresso de espera animados, como indicadores de porcentagem concluída e spinners de carregamento, ajuda a tranquilizar os usuários sobre os processos em andamento e o estado atual do sistema. Com isso, aumenta a probabilidade de eles permanecerem no site ou aplicativo para aguardar o carregamento e continuar com as demais tarefas. Calculando o tempo necessário para a conclusão dos processos, você deve atribuir o tipo apropriado de indicadores de animação de progresso.

Um indicador em loop é ideal para operações que levam de 2 a 10 segundos, enquanto operações mais demoradas podem ser auxiliadas com o indicador de porcentagem concluída. No caso de animação em loop e telas de esqueleto, é melhor optar por telas de esqueleto, pois elas são capazes de realizar qualquer ação que ultrapasse alguns milissegundos e ainda manter a calma com os usuários.