Jogos ao longo do tempo: acelerando o aplicativo no nível de percepção

Um estudo recente do Google, em colaboração com Awwwards, descobriu que a velocidade está atualmente no topo da hierarquia de UX. É improvável que surpreenda alguém: o ritmo da vida cotidiana está aumentando, as soluções móveis tendem a integrar-se o mais organicamente possível - tudo isso define um certo nível de expectativas. Os usuários esperam um tempo de inatividade mínimo.



Neste artigo, não abordaremos métodos técnicos para acelerar honestamente o carregamento de um site e as operações de processamento. Em vez disso, dissecamos o aspecto temporal da experiência do usuário: veja o que realmente está por trás das palavras "longo" e "rápido", como e por que a percepção do tempo é distorcida e quais práticas de UX existem para controlar as expectativas.

Vamos começar definindo os conceitos. O que geralmente se entende por carregamento "rápido" e para onde vai a linha entre velocidade tolerada e inaceitável? De acordo com um estudo do Google e da Awwwards, a escala de classificação do tempo de espera para os usuários é assim:

• 200 milissegundos - a ação é classificada como instantânea
• 1 segundo - Um senso de continuidade não é quebrado
• 5 segundos - A operação é percebida como parte da cadeia geral
• 8 segundos - Atenção enfraquece, o usuário sai do processo

Aqui, no entanto, duas reservas devem ser feitas. Em primeiro lugar, o esquema acima se torna válido já no decorrer do trabalho com o site ou aplicativo. No início, o crédito de paciência, que o usuário está pronto para alocar, é significativamente menor - a maioria deles aguardará o carregamento não mais que três segundos. Segundo, os valores absolutos são dados na escala, enquanto a percepção subjetiva do tempo pode distorcer a estimativa. Em geral, os usuários tendem a superestimar o tempo de espera em suas mentes - os valores estimados são cerca de 80 milissegundos mais altos que os reais. Essa diferença de percepção pode aumentar sob a influência de vários fatores:

1. Demografia do público . Segundo pesquisas, o mais categórico em termos de tempo é um grupo de usuários na faixa de 18 a 24 anos. As gerações mais antigas são muito mais tolerantes: após os 25 anos, a probabilidade de um visitante avaliar o site como rápido aumenta em quase 50%.
2. Termos de interação . Se os cenários de uso do aplicativo ou site envolverem trabalho em casa, em um ambiente descontraído, você poderá relaxar. Se as pessoas recorrerem ao produto principalmente em movimento (por exemplo, visualizar mapas ou rastrear o movimento de veículos), esteja preparado para o fato de que sua precisão aumentará em 50% os mesmos.
3. O estado psicológico do usuário . A percepção do tempo é grandemente influenciada pelo estado interno: em situações de estresse, congestão mental ou ansiedade severa, o tempo começa a fluir para nós quase duas vezes mais rápido.

Portanto, os requisitos de velocidade do site, multiplicados por detalhes psicológicos e situacionais, são bastante rigorosos. As estatísticas mostram que, do ponto de vista técnico, são bastante realistas (70% dos sites examinados no estudo foram carregados em menos de 4 segundos, enquanto um terço deles foi suficiente para um), mas aqueles que trabalham com conteúdo volumoso, pesado ou com muitos scripts, pode ter problemas.

Nesse caso, vem em socorro ... todos os mesmos detalhes da percepção do tempo. Os recursos de nosso pensamento tornam possível construir o UX de forma a ocultar ou compensar a expectativa prolongada. Todo o conjunto de recomendações sobre esse assunto pode ser resumido em três princípios básicos, de acordo com os quais o quadro emocional geral da interação com o site ou aplicativo é formado.

Princípio # 1: O senso de tempo é entorpecido quando o usuário tem algo em que se concentrar

Existem dois tipos de espera - ativos e passivos. A diferença psicológica entre os dois pode ser ilustrada por um exemplo instrutivo de um aeroporto em Houston. A administração do aeroporto enfrentou um problema comum: os clientes ficaram irritados com a necessidade de permanecerem inativos por um longo período de tempo (até sete minutos) perto da esteira enquanto aguardavam a bagagem. A otimização dos processos de trabalho não resultou e, como resultado, foi encontrada uma saída muito elegante - o layout foi alterado para aumentar a distância do terminal à pista de pouso. O período de espera não foi reduzido, mas agora as pessoas gastaram uma parte significativa dele em movimento. Milagrosamente, o fluxo de reclamações cessou: o tempo não parecia mais desperdiçar clientes, simplesmente porque eles estavam ocupados com alguma coisa.

Da mesma forma, os visitantes do site são muito mais sensíveis à espera passiva (ou seja, contemplando uma página em branco) do que à espera, temperada com pelo menos alguma atividade mental, mesmo que seja objetivamente inútil. Como isso pode ser aproveitado?

Alguns desenvolvedores criam um evento de entretenimento separado por expectativa, até minijogos que podem ser cortados na tela de carregamento enquanto o site está "pensando". Entretanto, as animações são usadas muito mais amplamente - a melhor opção em termos da proporção de trabalho e efeito. As animações são visualmente atraentes e dinâmicas, o que lhes permite manter a atenção do usuário por alguns preciosos segundos e fornecer uma transição suave para o conteúdo principal.



Animação que você pode assistir por muito tempo

A equipe do Google fornece as seguintes diretrizes para a criação de animações:

• Velocidade ideal - não mais que 60 quadros por segundo; cada quadro deve render em cerca de 16 milissegundos
• A duração ideal é de 200 a 500 milissegundos. Nas animações que usam efeitos de salto, a taxa elasctica de tempo sobe para 800-1200 milissegundos.
• As animações em que a velocidade é linear parecem menos naturais do que aquelas em que o movimento acelera ou diminui gradualmente.
• Animações lentas criam uma sensação de resposta rápida - isso pode ser muito útil ao interagir com os elementos da interface.
• É melhor evitar animações aceleradas se o tempo de espera for longo.
• As animações CSS são adequadas para transições curtas e simples. Animações e efeitos de transformação mais complexos são mais convenientes em Javascript.

Outra abordagem não é distrair o visitante da beleza, mas fornecer o conteúdo imediatamente, apenas em pequenas porções. Nesse caso, o download começa com os elementos mais básicos que não exigem muito tempo, enquanto os mais "pesados" são carregados nas próximas etapas. Isso também elimina o efeito de uma tela em branco: mesmo que os componentes do primeiro escalão não sejam muito informativos, o usuário ainda pode saciar a fome cognitiva por um tempo, até que algo mais significativo chegue.

Como elementos substitutos podem ser:

• Esqueleto da página: marcação que mostra quais blocos (texto, títulos, imagens) estão carregando e onde eles estarão localizados.
• Imagens pixelizadas ou de baixa qualidade, que estão gradualmente “esclarecendo diante dos olhos” do usuário - o chamado download progressivo.
• Metadados que informam a essência geral do item carregado.
• A página anterior ou seus componentes individuais. Os especialistas recomendam emprestar elementos repetidos ao máximo - primeiro, torna a transição mais suave e, segundo, este é o conteúdo com o qual você pode continuar interagindo.

Facebook oferece esqueleto de página como um spoiler leve

Princípio 2: O download é considerado concluído após o início bem-sucedido da interação

Em um estudo , a UIE descobriu uma ilustração divertida desse princípio. A pedido dos pesquisadores, os entrevistados avaliaram a velocidade dos sites e a grande maioria, comparando os sites Amazon e About.com, deu prioridade à Amazon. Para referência: o tempo médio de carregamento do About.com era de cerca de 8 segundos, e o tempo médio de carregamento do Amazon era de cerca de 36 segundos. A explicação era simples: durante a interação, os usuários simplesmente não suspeitavam que a Amazon não estivesse totalmente carregada. A funcionalidade de que eles precisavam ficou disponível em segundos e não prestaram mais atenção aos processos em segundo plano.

Daí a conclusão: quanto mais cedo o usuário puder iniciar a operação desejada, menos importante será o tempo total de carregamento. Ao dividir a carga em várias etapas, de acordo com um sinal pragmático, criamos a ilusão de velocidade. Existem várias maneiras de fazer isso:

Faça o download "dentro da tela" . Em outras palavras, somente o que será visível na tela imediatamente após o carregamento da transição. O conteúdo abaixo desta linha é deixado para mais tarde. Naturalmente, esse método só funciona se a tela superior estiver informatizada e o usuário não desejar rolar mais por algum tempo. Por exemplo, é muito popular nas páginas com mercadorias em lojas on-line, onde as primeiras posições costumam prender a atenção com sucesso enquanto o sistema carrega o restante dos materiais.

Pré-carregamento . Tudo é transparente aqui: enquanto o usuário está trabalhando com a página atual, o sistema em segundo plano carrega tudo o que pode ser necessário quando ele abre a próxima. Assim, no momento da solicitação, isso será feito o suficiente para fornecer uma transição "instantânea". Esse método funciona bem em seções lineares e previsíveis da viagem do usuário - por exemplo, ao preencher formulários de várias páginas ou na tela de login.

Design otimista . Nesse caso, parece apenas ao usuário que ele concluiu a operação com êxito - o sistema fornece o status apropriado até o início do processamento (e algumas vezes antes), literalmente milissegundos após o clique. Por exemplo, você pode acessar redes sociais como Twitter e Instagram e lembrar como enganosamente instantaneamente elas permitem que você goste de postagens. Esse otimismo está repleto de um certo risco - sempre há uma chance de que algo dê errado. O silêncio nesses casos leva a descobertas e decepções desagradáveis; portanto, os erros devem ser relatados ex post, mesmo que isso crie uma impressão contraditória.

Princípio 3: O usuário é mais tolerante com o tempo de inatividade quando há feedback

Se algo no processo de download funcionar para nós, esse é o efeito dos custos irrecuperáveis. Depois de passar algum tempo trabalhando com o site, você não sairá apenas porque a próxima etapa leva muito tempo. No entanto, há uma ressalva: em algum momento, o usuário inevitavelmente duvidará que a operação prolongada, em princípio, chegue ao fim. A suspeita de que algo não está funcionando e a jornada atingiu um impasse pede que você feche a página muito mais do que apenas impaciência.

Portanto, esse ponto importante deve ser levado em consideração ao projetar estados de transição e carregar janelas - o usuário sempre deve ter certeza de que tudo está indo conforme o planejado. As seguintes regras podem ajudar:

• Os botões e outros elementos ativos devem ter uma marcação clara do estado atual e exibir quaisquer alterações imediatamente. Muitos navegadores móveis registram automaticamente um atraso de 300 a 350 milissegundos até que uma resposta seja retornada após um toque - é melhor se livrar dele escrevendo na cabeça: meta name = "viewport" content = "width = width-device"
• O Google recomenda enfaticamente que você maximize o uso de microinterações durante todo o trabalho do usuário com o site, incluindo ações menores em uma única página (adicionando aos favoritos, enviando texto por meio de um formulário de contato).
• Os elementos animados funcionam melhor que os estáticos: entretêm o usuário e criam uma sensação de dinamismo.
• O Spinner, um tipo comum de animação para o modo de espera, é bom porque transmite inteligentemente o status de "em andamento", mas fraco na falta de informações. Os especialistas recomendam usá-lo apenas em distâncias muito curtas - definitivamente não mais que dez segundos. Se possível, você também deve se esforçar para garantir que a animação não bloqueie visualmente o restante do conteúdo disponível. Por exemplo, ao enviar uma mensagem, você pode restringir-se a um pequeno botão giratório próximo ao campo de entrada, em vez de posicioná-lo no centro, escurecendo a página.
• Um indicador de progresso é o formato ideal de feedback: deixa claro que o processo está em execução e permite rastrear quanto tempo resta até que seja concluído. No entanto, é importante não ceder à tentação de aumentar as expectativas: a maioria dos visitantes não pode tolerar a “condenação de 99%” no nível genético. No mínimo, isso causará irritação severa e reduzirá a probabilidade de retorno.

Consequentemente, o tempo de inatividade total deve ser estimado honestamente, sem superar a primeira metade do indicador muito mais rápido que o segundo. A recomendação mais comum é manter o ritmo constante e evitar paradas no preenchimento do campo: elas novamente criam a sensação de que o processo é interrompido e pode não ser retomado. Se desejar, você pode agir do contrário: começar a encher lentamente e ganhar velocidade à medida que se move - isso será uma surpresa agradável para os usuários.


Indicador de status de falha

Se você se aprofundar ainda mais na toca do coelho, existem vários truques inócuos que permitem acelerar visualmente o processo de enchimento, o que, por sua vez, altera a percepção do tempo, tornando a aplicação mais rápida ... Por exemplo, ao contrário dos giradores, os indicadores de progresso são melhores para aumentar - eles são mais fáceis de observar o movimento, o que aumenta o senso de continuidade. As listras também criam a ilusão de velocidade se forem inclinadas na direção do movimento.

Em geral, as práticas de gerenciamento de expectativas se sobrepõem às tendências predominantes no design nos últimos anos: interfaces dinâmicas e interativas, transições suaves, elementos de “entusiasmo” no UX. Talvez isso fosse esperado - uma sensação de velocidade e continuidade é costurada na estética moderna em um nível básico. Boa sorte no jogo antes do previsto!