Como Designers Podem Manipular o Tempo — Design para Performance

Gabriel Vaz
Jusbrasil Design
Published in
4 min readFeb 18, 2020

Um tempo medido em um relógio é um tempo absoluto, não existe discussão se o recorde de 9.58 segundos dos 100 metros corridos por Usain Bolt em 2009 são realmente 9.58 segundos. O tempo medido em um cronômetro é igual para todo mundo.

Mas e se eu te disser que nós, como designers, conseguimos fazer com que 9.58 segundos pareçam menos para uma pessoa? E que possuímos a habilidade de manipular o tempo?

Foto: Unsplash

Desenvolvedores têm a habilidade de medir a velocidade de uma página e fazer ajustes necessários para deixá-la tecnicamente mais rápida. É uma tarefa técnica na qual nós designers devemos apoiar com alternativas que ajudem na performance, como quantidade de conteúdo, compactação de imagens e outros detalhes.

Existem várias técnicas para melhorarmos o tempo de carregamento de uma página que se relacionam com os tamanhos dos arquivos e carregamentos simultâneos por exemplo, mas a técnica que venho trazer aqui não trata disso. Esse artigo não vai te ajudar a diminuir o tempo de 9.58, mas vai te ajudar a fazer com que as pessoas percebam que 9.58 aparentem durar menos.

Foto: Unsplash
Foto: Unsplash

Há muitos anos atrás empresas de elevadores estavam ouvindo uma série de reclamações dos clientes que diziam que os elevadores eram muito lentos. E por isso resolveram enfrentar o desafio de deixar as subidas mais rápidas, quando a velocidade aumentava, aumentava a preocupação da segurança. Nessa época, avançar nesse sentido tinha um custo muito elevado, até que um engenheiro propôs olhar para o problema de uma outra perspectiva: pessoas pensavam que subir de elevador era lento, então ao invés das empresas se concentrarem em motores mais potentes e designs mais aerodinâmicos por que não focar na pessoa de dentro do elevador?

Uma nova geração de elevadores surgiu e as reclamações dos clientes foram finalmente atendidas, em uma pesquisa lançada logo depois, os usuários comentavam o quão mais velozes os “novos” elevadores eram. Mal sabiam que a velocidade era exatamente a mesma, a diferença estava no interior deles: espelhos.

Distraídos pelos espelhos, as pessoas começaram a se concentrar mais na aparência visual, cabelo e maquiagem e a sensação era que a viagem do ponto A ao ponto B era mais rápido do que quando não existiam espelhos.

Esse exemplo mostra que existe outra forma de perceber o tempo, a percepção do tempo é subjetiva e potencialmente controlável. Esse tipo de percepção é relativa e pode ser manipulada para que seja percebida pelos usuários como mais rápido do que realmente é.

  • Até 0.1 segundo: O usuário não reconhece nenhum delay. Carregamentos parecem instantâneos. Esse padrão deve ser mirado quando estivermos otimizando websites.

No livro Usability Engineering, Jakob Nielsen identifica três importantes limites para a percepção das pessoas em relação ao tempo de carregamento de um website:

  • Até 1 segundo: O delay é pouco percebido. O usuário sente uma pausa. Se todas as operações demorarem 1 segundo, o site é percebido como lento.
  • Até 10 segundos: Se uma operação levar 10 segundos ou mais para ser concluída, você irá perder a atenção do usuário. Ele pode alternar para uma outra aba ou aplicativo ou simplesmente fechar sua página. No entanto, há casos em que um usuário espera, como quando acaba de enviar os detalhes do cartão de crédito na finalização da compra.
Foto: Unsplash

Levando em consideração que esse livro foi escrito em 1993, é seguro dizer que o limite de 10 segundos provavelmente seja bem menor agora, como 5 segundos, ou até menor. Desde o lançamento do livro, a velocidade da internet e dos dispositivos aumentou significativamente, o que aumenta o nível de exigência das pessoas por carregamentos mais próximos de instantâneo.

Caso não seja possível melhorar tecnicamente o tempo de carregamento de um certo conteúdo, podemos trabalhar para diminuir a sensação de tempo percebida pelos usuários em diversas ocasiões, como:

Quando a página tem muito conteúdo a ser carregado, podemos criar indicadores de progresso animados, definir prioridade no carregamento de conteúdo above-the-fold ou fazer o pré-carregamento de conteúdo em um fluxo específico do usuário, se já sabemos que ele vai passar por aquela próxima etapa, por que não deixar o conteúdo já carregado?

Podemos fazer melhores transições entre as telas, colocar os famosos placeholder loadings para passar a sensação para o usuário de que o conteúdo vai aparecer naquele exato lugar e já ajudar a treinar a visão dele para aquela área.

Uma outra possibilidade é eliminar contadores de conteúdo, deixando eles carregarem depois, ou se não forem tão necessários assim, removermos.

As pessoas estão ficando mais ansiosas e com isso a exigência do carregamento de uma página fica cada vez maior. Muito disso pode ser melhorado por nós, designers. Que tal colocarmos espelhos nas nossas interfaces?

--

--