4 truques para tornar os tempos de carga mais rápidos
Não importa o quão bem projetada sua interface possa ser, em algum ponto ou outro, as pessoas que a usam terão que esperar que algo seja carregado.
O tempo de carregamento pode prejudicar a experiência geral. Fazer com que os usuários esperem muito tempo para que seu aplicativo seja carregado pode tornar os usuários impacientes. Se os usuários tiverem essa sensação, eles abandonarão seu site e irão para outro lugar. Felizmente, há algumas coisas que você pode fazer para acelerar o senso de tempo de seu usuário e fazê-lo sentir que seu conteúdo carrega mais rápido do que ele.
1. Nunca faça os usuários esperarem sem dar feedback
Se a conexão do usuário for lenta, pode demorar um pouco para um site preencher o conteúdo na tela. O tempo de espera de um usuário começa no momento em que ele inicia uma ação, e o pior caso é quando ele não tem nenhum indicador de que o site o recebeu.
Quando seu site não notifica os usuários de que precisa de algum tempo para concluir uma ação, os usuários geralmente acham que não receberam a solicitação e tentam novamente. Muitas torneiras extras resultaram devido à falta de feedback. Para fazer as pessoas felizes, precisamos dar uma indicação de que algo está acontecendo, oferecer feedback visual.
2. Evite indicadores de progresso estático
Os indicadores de progresso estáticos são aqueles que têm uma imagem ou texto imóvel, como “Carregando…” ou “Por favor, aguarde…” para indicar que a solicitação foi recebida. Embora qualquer feedback seja melhor que nenhum, os indicadores estáticos são ruins para UX. Os usuários não têm nenhum indicador de que o conteúdo está sendo carregado, por isso não têm certeza se o processo está realmente preso.
3. Use indicadores de carregamento animados
Estudos psicológicos do tempo de espera mostram que o foco do usuário começa a mudar após um segundo de espera, sem qualquer feedback. Para reduzir a incerteza de um usuário, use um indicador de progresso para qualquer ação que leve mais tempo do que isso. (Nota: o uso de animação não é recomendado para nada que precise de menos de um segundo para carregar, porque os usuários podem se sentir ansiosos sobre o que acabou de piscar na tela).
Spinners de carregamento infinito para operações razoavelmente rápidas
A forma mais simples de indicadores animados é um spinner de carregamento. Este tipo de feedback visual apenas indica o fato de que o usuário tem que esperar, mas não diz quanto tempo deve esperar. Como regra geral, você deve usar esse tipo de indicador de progresso para ações rápidas (2 a 10 segundos).
Um spinner de linhas cinzas irradiando de um ponto central é uma abordagem padrão.
Os spinners de carregamento costumam ser usados junto com o gesto de puxar para atualizar. Ele age como um intermediário entre dois estados da interface do usuário e ajuda os usuários a entender o que está acontecendo quando a tela muda.
Aplicativo do Apple Mail para iOS
Animação percentual realizada para operações de longa duração
Os spinners de carregamento não são o caminho certo para indicar um carregamento de longa duração. É muito mais suportável esperar por algo se soubermos quando isso acontecerá. É por isso que, para operações de longa duração, você deve fornecer aos usuários uma indicação clara de quanto tempo eles precisam aguardar. Como regra geral, você deve usar uma animação percentual para processos mais longos que levam 10 segundos ou mais.
Crédito da imagem: Behance
Alternativamente, você pode fornecer uma estimativa geral de tempo para a operação. Não tente ser exato, um simples "Isso pode levar um minuto" pode ser o suficiente para informar o usuário e incentivá-lo a esperar.
Instalando a atualização de software no Mac OS X
4. Aprimorando a percepção do tempo do usuário
A rapidez com que o conteúdo é carregado na mente do usuário. Ao tentar criar uma experiência de usuário mais rápida, você pode reduzir o tempo percebido em vez do tempo real. Para fazer isso, você pode preencher os tempos de espera usando conteúdo, animações ou ações que o usuário pode executar.
Barras de progresso
Uma barra de progresso faz com que os usuários desenvolvam uma expectativa de quão rápido a ação está sendo processada. A maneira como sua barra de progresso se move afeta a forma como eles percebem o tempo de carregamento. Para fazer com que uma barra de progresso se sinta mais rápida para os usuários, você pode usar as seguintes técnicas simples:
- A barra de progresso nunca deve parar, caso contrário, os usuários pensarão que o site congelou. O pior caso possível é quando a barra de progresso se aproxima de 99% e pára de repente. A maioria dos usuários ficará frustrada com esse comportamento.
- Você pode disfarçar pequenos atrasos em sua barra de progresso, movendo-a instantaneamente e com estabilidade.
- Mova a barra de progresso lentamente no início e acelere-a no final para dar aos usuários uma sensação rápida de conclusão.
Crédito da imagem: Dribbble
Telas de esqueleto
O tempo de espera é o momento certo para telas esqueléticas (também conhecidas como contêineres de informações temporárias). Uma tela de esqueleto é essencialmente uma versão em branco de uma página na qual a informação é gradualmente carregada. Ele fornece uma alternativa aos indicadores animados tradicionais. Em vez de mostrar um widget abstrato, as telas esqueléticas criam antecipação do que está por vir e faz com que o usuário se concentre no progresso, em vez de nos tempos de espera.
As imagens de esqueleto são carregadas rapidamente, uma vez que é uma imagem pequena que geralmente é composta de formas simples. Essas técnicas podem ser levadas ainda mais longe em aplicativos móveis porque o modelo básico pode ser armazenado localmente junto com os dados do aplicativo. O aplicativo do Facebook para iOS mostra aos usuários blocos e linhas em cinza para representar imagens e texto à medida que o aplicativo é carregado. Depois de terminar o carregamento, as imagens e o texto aparecem no lugar dos contêineres temporários. Isso não é mais rápido do que ter uma tela de carregamento com um spinner, mas na mente do usuário, parece que é.
Operações de fundo
Outro truque de velocidade que você pode usar é as operações em segundo plano. Ações que são embaladas em operações de segundo plano têm dois benefícios - elas são invisíveis para o usuário e acontecem antes que o usuário realmente as solicite. Dê aos usuários outras coisas para focar enquanto um processo está acontecendo em segundo plano. Um bom exemplo disso é o upload de fotos no Instagram. Assim que o usuário escolhe uma foto para compartilhar, ela inicia o upload. O aplicativo convida os usuários a adicionar títulos e tags enquanto a imagem está sendo carregada em segundo plano. No momento em que os usuários estiverem prontos para pressionar um botão "Compartilhar", o upload será concluído e será possível compartilhar suas fotos instantaneamente .
Carregamento de imagem progressiva
Como aplicativos e sites modernos carregam cada vez mais imagens, é bom pensar em seu processo de carregamento, pois afeta o desempenho e a experiência do usuário. Usando um efeito de desfoque, você pode criar um efeito de carregamento de imagem progressivo.
Um bom exemplo é o Medium, que desfoca a capa da imagem do post, bem como as imagens do conteúdo da postagem até que a imagem esteja totalmente carregada. Primeiro, ele carrega uma pequena imagem borrada (miniatura) e, em seguida, faz uma transição para a imagem grande. As miniaturas são muito pequenas (apenas alguns kilobytes) que, combinadas com o efeito borrado, permitem um melhor espaço reservado do que uma cor sólida, sem sacrificar a carga útil.
Médio usa desfoque para criar um efeito de carregamento de imagem progressiva
Distração visual
Você deve sempre tentar tornar a espera mais agradável se você não puder encurtar a linha. Para garantir que as pessoas não fiquem entediadas enquanto esperam que algo aconteça, ofereça-lhes alguma distração. Animações finas podem distrair seus visitantes e fazê-los ignorar os longos tempos de carregamento.
Tela inicial animada. Crédito da imagem: Ramotion (Dribbble)
Crédito da imagem: Vimeo