Práticas recomendadas 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 eles de acordo. Os indicadores de progresso animados são capazes de mostrar o contexto atual da operação em praticamente qualquer momento sem usar 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 andamento do sistema?

Quem não gosta de respostas rápidas 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 de sua aplicação. Esses fatores incluem principalmente conexão ruim com a Internet, desempenho lento devido à carga pesada e até falha do programa. Em tais circunstâncias, a melhor medida seria minimizar a tensão do usuário e apresentar a garantia de que o aplicativo está funcionando e o progresso está sendo feito. Para fazer isso, você deve fornecer feedback ao usuário para que o tempo não prejudique a paciência do usuário.

Mantenha os usuários ligados ao feedback

O tempo de espera começa quase imediatamente quando uma ação é feita pelo usuário. Mas o que piora é a ausência de um indicador adequado para representar o progresso do sistema. O usuário naturalmente assume que o aplicativo não respondeu quando não mostra uma notificação de que o sistema está demorando. Os resultados podem variar de cliques desenfreados até o 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 seja feita em segundo plano. É por isso que um indicador animado deve ser introduzido para defender o progresso do sistema do aplicativo sempre que necessário.

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

Normalmente, quando um aplicativo leva menos de 1 segundo para carregar, o progresso 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 envolvido. 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 uma razão 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 fazer. Isso é recomendado porque uma animação que fica piscando na tela toda vez que uma ação é feita pode desorientar o usuário. Indicadores de progresso animados são melhor usados ​​para neutralizar os efeitos da espera prolongada e manter o usuário engajado 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 mais comum e mais simples de indicador de espera é “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-10 segundos. Qualquer tempo maior que isso e 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 indicadores mantém o usuário informado sobre o tempo aproximado ou exato necessário para concluir o andamento. 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 matar a espera. Isso ajuda o usuário a manter-se seguro sobre o progresso que está sendo feito e mostrado por meio da animação, ao mesmo tempo em que aumenta sua disposição 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 os indicadores de progresso animados em loop majoritários são indeterminados. Por exemplo, o indicador de progresso do Windows 7 foi projetado para mostrar a mesma animação repetida sem nenhum feedback sobre o tempo preciso que pode levar para concluir o progresso. Além disso, incluía tudo, 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 de animação, círculo ou barra de 0% a 100%. Como mostra o tempo que leva para concluir o progresso, o indicador de porcentagem concluída é classificado em indicadores de espera determinados. 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 de porcentagem concluída para processos que levam 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?

Usar indicadores de progresso de forma eficaz em seus aplicativos e sites pode significar a diferença de sucesso e 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 principiante manter o usuário alheio ao progresso do carregamento que está sendo feito em segundo plano. Isso aumenta sua tendência a perder a paciência e sair do aplicativo ou site. Você pode manter o usuário informado mostrando o 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 feito, por exemplo, 'carregar gráficos' ou 'carregar mapas' etc.
2. Indique uma estimativa de tempo simples para tarefas que exigem períodos de tempo mais longos : Não leve as coisas a microescalas. Você pode manter o usuário engajado 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ário : 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 longas, considere usar várias etapas para destacar o progresso feito.
4. Mantenha o progresso : Tente buscar consistência em sua barra de progresso durante o carregamento de tarefas. Após 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. Consequentemente, qualquer congelamento em meio ao progresso pode causar sérios golpes nas expectativas dos usuários. Por exemplo, quando a barra chega a 99% e permanece assim por um período prolongado de tempo, a maioria dos usuários fica frustrada com esse comportamento e deixa o aplicativo acreditando que ele congelou. Para combater isso, você pode mascarar esses atrasos inconsistentes na barra de progresso, mostrando que ela se move de forma instantânea e constante.
5. Mostrar progresso na barra mais rápido que a velocidade real : A velocidade bruta pode ser manifestada por uma simples percepção que você pode criar para fazer a barra de progresso parecer mais rápida. Você pode fazer isso projetando a animação para se mover lentamente no início e escolher seu ritmo à medida que fecha 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 criativos. Se o aplicativo mostrar alguns detalhes textuais ou visuais interessantes enquanto o progresso é feito, ele pode distrair a mente do usuário do tempo necessário 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é jogos triviais.

Alternativa - Use Telas de Esqueletos para 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 de 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é ficar completamente estocada. 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 sua 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 de esqueleto mantém durante o progresso do carregamento.

Pensamentos finais

Não importa quão rápidas sejam as operações do nosso aplicativo ou site, sempre há uma chance de tempo de processamento indesejado. O uso de indicadores de progresso de espera animados, como indicadores de porcentagem concluída e spinners de carregamento, ajudam a tranquilizar os usuários sobre os processos em andamento e o estado atual do sistema. Como resultado, aumenta a probabilidade de eles permanecerem no site ou aplicativo para aguardar o carregamento e continuar com suas tarefas restantes. 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 assistidas com o indicador de porcentagem concluída. No caso de animações em loop e telas de esqueleto, é melhor optar por telas de esqueleto, pois elas são capazes de realizar qualquer ação que vá além de alguns milissegundos e ainda mantendo a calma com os usuários.