UI Otimista: o segredo para o crescimento da receita online
Como a Optimistic UI pode melhorar a experiência dos usuários e aumentar o potencial de ganhos financeiros nos websites.
Nesse artigo irei explorar como utilizar UI otimista (Optimistic UI) pode melhorar a experiência dos usuários e aumentar o potencial de ganhos financeiros nos websites.
No material publicado recentemente por mim, denominado “Melhorando a taxa de conversão de websites com Skeleton Screens”, trago alguns dados de pesquisas realizadas relacionando o tempo de carregamento de páginas com taxas de conversão, dentre eles gostaria de retomar dois pontos.
Em 2013, Tammy Everts publicou um estudo indicando uma taxa de abandono de 87% em transações após uma demora de 2 segundos entre etapas. O estudo pode ser conferido através desse link.
Além desse estudo, a agência de marketing digital Portent publicou o artigo “Site Speed is (Still) Impacting Your Conversion Rate” em 2019 com uma pesquisa onde foi encontrada uma correlação entre tempo de carregamento de páginas e taxa de conversão de sites.
No estudo foi dado um exemplo onde 1000 usuários visitariam um site para comprar um produto de 50 reais, os valores obtidos conforme as taxas de conversão considerando a diferença entre tempos de carregamento seriam os seguintes, caso a página carregasse em:
- Um segundo o ganho seria de R$ 1.525,00.
- Dois segundos o ganho seria de R$ 840,00.
- Três segundos o ganho seria de R$ 560,00.
- Quatro segundos o ganho seria de R$ 335,00.
Não se convenceu da importância de ter um site otimizado ainda? Aqui vão mais alguns dados!
Em 17 de maio de 2012, Marcus Austin publicou a pesquisa “Consumers dump slow websites”. A pesquisa nos mostra que aproximadamente 78% dos consumidores sentem emoções negativas como resultado de websites lentos ou não resilientes.
Outro ponto apontado é que, apesar das mulheres serem mais afetadas pelo estresse e raiva, os homens são mais inflexíveis e reportaram mais vezes a decisão de não usar novamente o serviço como resultado de um site lento.
Por fim, gostaria de recomendar o artigo “Why Perceived Performance Matters, Part 1: The Perception Of Time” publicado em 25 de setembro de 2015 na Smashing Magazine por Denys Mishunov. Gostaria de dar ênfase no termo “Performance Budget” ou “Orçamento de performance” apresentado pelo autor.
A ideia parte do pressuposto de que tempo é dinheiro e que, cada vez mais, os usuários estão desejando experiências com respostas tão rápidas quanto interações com outros humanos.
O orçamento de performance consiste em definir qual o limite de tempo desejamos ter em determinadas operações. Normalmente, conversas entre humanos possuem alguns curtos intervalos de tempo entre a pergunta feita e sua resposta.
Segundo a psicologia, devemos ter em mente os seguintes intervalos de tempo ao lidar com questões de curta duração:
- Instantâneo: entre 0,1 e 0,2 segundo. O artigo “A Literature Review on Reaction Time” aponta esse intervalo de tempo como o máximo aceitável para simular o comportamento instantâneo, onde os usuários quase não notariam o atraso.
- Imediato: entre 0.5 e 1 segundo. Esse é o tempo máximo de resposta para um comportamento imediato. Esse é normalmente o intervalo de resposta entre interlocutores em uma conversa entre humanos. Atrasos dentro desse intervalo são notados, apesar de serem facilmente tolerados pela maioria dos usuários, é necessário que durante esse tempo o usuário receba uma indicação de que seu comando foi acento.
- Fluxo de usuário: entre 2 e 5 segundos. O psicólogo Mihaly Csikszentmihalyi define fluxo ou experiência ideal como um estado onde pessoas experimentam concentração, absoluta absorção em uma atividade e profundo prazer.
- Limiar de atenção: entre 5 e 10 segundos. Conforme o National Center for Biotechnology Information no US National Library of Medicine, a média do limiar de atenção humana caiu de 12 segundos no ano 2000 para 8,25 segundos em 2015 – 1 segundo a menos que o limiar de atenção de um peixe-dourado. Entretanto, consideramos o limite em 10 segundos, na prática, esse tempo limite significa que o usuário tem uma tendência maior a perder o foco da tarefa em andamento, não que vá.
Funcionamento antes da UI otimista
Como mencionado anteriormente, tenho o objetivo de apresentar uma forma de minimizar problemas de performance de websites e/ou melhorar suas taxas de conversão via pequenas alterações e decisões de design que podemos adotar no dia-a-dia.
A UI otimista ou no inglês, Optimistic UI, é uma técnica sutil, mas muito presente em nosso cotidiano. Para entender essa técnica, precisamos primeiro analisar o fluxo comum de interações em websites.
Abaixo podemos observar um exemplo prático de como um fluxo de usuário “normal” (sem utilização de UI otimista) se dá.
- O usuário clica em um botão.
- O botão fica desabilitado.
- Uma chamada é feita para o servidor.
- A página recebe uma resposta do servidor.
- A página é atualizada para refletir o status da resposta.
Visualmente temos o seguinte:
Com o tempo e a popularização da realização de coisas assíncronas no front-end, esse fluxo evoluiu para o seguinte:
- O usuário clica em um botão.
- O botão fica desabilitado e aparece um spinner indicando que o sistema está trabalhando na requisição.
- É feita uma requisição para o servidor.
- A página recebe uma resposta do servidor.
- O estado visual do botão é atualizado conforme o status da resposta.
Visualmente, ficaria algo assim:
UI otimista aplicada
Como citado na introdução, pessoas odeiam esperar, então a resposta imediata a ação do usuário é extremamente positiva para a percepção de performance da aplicação e pela boa sensação enquanto seu sistema é usado. Portanto, adotar a técnica de UI otimista é uma boa forma de melhorarmos a percepção de performance do usuário.
Mas o que queria uma UI otimista?
Segundo as definições do Oxford Languages, o termo “Otimismo” significa “Disposição para ver as coisas pelo lado bom e esperar sempre uma solução favorável, mesmo nas situações mais difíceis.”. Ou seja, estar confiante sobre o futuro, com boas esperanças.
Assim sendo, ao nos referirmos a UI otimista, estamos nos referindo a uma interface do usuário onde sempre esperamos um retorno positivo das ações realizadas. Confira um exemplo de implementação a seguir.
No ponto de vista dos usuários:
- O usuário clica no botão
- O visual do botão é alterado para o modo de sucesso instantaneamente, ou seja, sempre partimos do ponto de que a requisição vai ser realizada com sucesso (otimismo)
No ponto de vista do desenvolvedor:
- O usuário clica no botão.
- O visual do botão é alterado para o modo de sucesso instantaneamente.
- A chamada é enviada para o servidor.
- A resposta do servidor é enviada de volta para a página.
- Sabemos que na maioria das vezes o retorno será sucesso, então não precisaremos incomodar o usuário. Os detalhes serão explicados mais abaixo.
- Apenas em casos de falhas o sistema irá alertar.
O pessimismo dentro da UI otimista
Imagine um cenário onde um usuário está utilizando o Instagram e está com problemas de conexão, em determinado momento ele encontra uma postagem interessante e a curti, é imediatamente acionada a animação indicando o sucesso da ação e então é realizada a requisição para o servidor, que falha devido aos problemas de conexão. Como você lidaria com esse cenário onde foi indicado um sucesso, mas, logo após, ocorreu uma falha?
Vamos um pouco mais além, imagine que o usuário escreveu um comentário em uma publicação e logo após enviar, fechou a aba do navegador, logo antes de obter a resposta do servidor. Dado que o usuário estava com problemas de conexão e a requisição falhou, como podemos lidar com esse cenário, já que o usuário fechou a página logo após ter o sucesso indicado?
Essas são algumas importantes questões que precisamos nos atentar no momento de optarmos por utilizar uma abordagem otimista em nossos sites. Sempre existirá o risco de falhas nas requisições, seja por conta do servidor ou por conta do cliente, como a questão de internet citada anteriormente, desse modo, devemos sempre buscar deixar nossa taxa de falhas a menor possível.
Lidando com erros
Como na UI otimista a gente define o estado de sucesso logo após a realização da ação, é importante que o erro, caso haja, seja comunicado em até 2 segundos após a realização da ação. Para ter uma noção do efeito disso, imagine uma conversa onde alguém fica concordando com a cabeça enquanto você fala e então discorda de tudo o que você disse.
Notificar o usuário de que uma solicitação não pôde ser enviada ou que ocorreu um erro deixaria o sistema o mais transparente, mas há um problema — ou melhor, uma série de problemas.
- Qualquer tipo de notificação que aparece repentinamente na tela mudaria o contexto do usuário, levando-o a analisar o motivo da falha, motivo que estaria provavelmente apresentado na mensagem de erro.
- Como acontece com qualquer mensagem de erro ou notificação, esta deve orientar o usuário neste novo contexto, fornecendo informações adicionais.
- Essa informação adicional definiria ainda outro contexto.
Tendo isso em vista, precisamos buscar utilizar o bom senso e proporcionalidade, não devemos mostrar um modal com informações de erro para uma falha ao curtir uma foto, neste caso só voltar o estado do botão e a quantidade de likes para o estado anterior deverá ser o suficiente.
Recomendações para uso da UI otimista
- A API na qual você está confiando precisa ser estável e retornar resultados previsíveis. O ideal é que haja uma certeza de sucesso no mínimo de 97%, ou seja, no máximo 3% de taxa de falha nas requisições.
- A interface deve detectar possíveis erros e problemas antes que uma requisição seja enviada ao servidor. Busque eliminar totalmente qualquer coisa que possa fazer com que a API retorne um erro. Quanto mais simples for um elemento de interface do usuário, mais simples será torná-lo otimista.
- Aplique padrões otimistas a elementos binários simples. Por exemplo: elementos onde os retornos possíveis sejam apenas “sucesso” ou “falha”, caso o clique em um botão possa gerar como resposta “sim”, “não” ou “talvez”, tal botão seria melhor sem a abordagem otimista.
- Conheça os tempos de resposta da sua API. Se você sabe que o tempo de resposta para uma determinada requisição nunca fica abaixo de 2 segundos, provavelmente é melhor realizar algumas otimizações antes, pois conforme citado anteriormente, uma UI otimista funciona melhor em casos onde o tempo de resposta do servidor é abaixo de 2 segundos. Ir além disso pode levar a resultados inesperados e muitos usuários frustrados.
- Uma interface de usuário otimista não é apenas sobre cliques de botão. A abordagem pode ser aplicada a diferentes interações e eventos durante o ciclo de vida de uma página, incluindo o carregamento da página.
As telas de esqueleto (skeleton screens) seguem a mesma ideia: você prevê que o servidor responderá com sucesso para preencher espaços reservados para mostrar ao usuário o mais rápido possível. Mais sobre skeleton screens e seus efeitos podem ser visualizados em meu artigo Skeleton screens melhorando a taxa de conversão de websites. - Evite usar a técnica em componentes críticos. Como vimos anteriormente, eventualmente teremos cenários onde o usuário poderá fechar a aba logo após obter o sucesso, cumprindo os requisitos anteriores, conseguimos reduzir as ocorrências visto que temos requisições sendo concluídas em menos de 2 segundos e com taxa de sucesso superior a 97%.
Existem cenários onde essas garantias podem não bastar, então caso você, entendendo o comportamento do seu usuário e sua aplicação, julgar um cenário como sendo crítico para a operação, talvez seja interessante repensar o uso da UI otimista para esse elemento.
Técnicas de UI Otimista
- Feedback contextual: Dê feedback imediato e relevante com base nas ações do usuário. Por exemplo, ao adicionar um item ao carrinho de compras, exiba uma mensagem de confirmação ou atualize o contador do carrinho para mostrar que a ação foi concluída.
- Skeleton screens: Utilize esqueletos ou placeholders para representar a estrutura da página antes que o conteúdo real seja carregado. Isso dá a impressão de que o carregamento está em andamento e mantém os usuários engajados.
- Carregamento progressivo: Em vez de carregar todos os recursos e conteúdos de uma só vez, priorize o carregamento dos elementos mais importantes primeiro. Isso permite que os usuários visualizem e interajam com o conteúdo relevante rapidamente, enquanto o restante é carregado em segundo plano.
- Preenchimento automático: Antecipe e preencha campos de formulários com base em informações conhecidas sobre o usuário, como nome, endereço ou preferências. Isso economiza tempo e esforço para os usuários, tornando a experiência mais rápida e conveniente.
- Prévia de mídia: Ao carregar imagens, vídeos ou outros conteúdos de mídia, exiba uma prévia ou thumbnail para os usuários poderem ter uma ideia do que será exibido antes mesmo de carregar o arquivo completo.
- Respostas offline: Se possível, permita que os usuários continuem a interagir com o aplicativo ou site mesmo quando estão off-line. Salve as ações e sincronize-as automaticamente assim que a conexão for restabelecida, evitando interrupções na experiência do usuário.
- Carregamento assíncrono: Carregue conteúdos, como imagens ou widgets de mídias sociais, em segundo plano, sem bloquear o carregamento principal da página. Isso permite que os usuários comecem a interagir com a interface mais rapidamente, mesmo que o conteúdo secundário esteja sendo carregado posteriormente.
- Lazy loading: Aplique a técnica de carregamento lazy, onde o conteúdo é carregado sob demanda à medida que os usuários rolam a página. Isso evita carregamentos desnecessários de conteúdo que os usuários ainda não visualizaram.
- Cache inteligente: Utilize estratégias avançadas de cache para armazenar em cache apenas os recursos necessários e otimizar o tempo de resposta, evitando armazenar em cache informações que podem estar desatualizadas.
- Personalização adaptativa: Adapte a interface com base nas preferências e comportamentos do usuário. Por exemplo, salve as configurações e ajustes feitos pelos usuários para que a próxima visita ao site ou aplicativo já esteja otimizada para suas preferências pessoais.
Diante dos fatos apresentados, podemos observar que a percepção de performance em nossos websites é um fator de extrema importância para gerarmos boas experiências aos usuários e conseguirmos boas taxas de conversão. Visando apresentar formas de alcançarmos uma boa percepção perante nossos websites, nesse artigo tratamos sobre o conceito de interfaces de usuário otimistas.
Apenar dessa técnica trazer formas, até certo ponto, boas e baratas, devemos sempre agregá-las em nossos sites com cautela, pensando cuidadosamente em como os usuários utilizam nosso site e qual a experiência queremos proporcionar, pois seu uso errado pode causar um efeito rebote. O uso da técnica de UI otimista tem que ser pensado para manter a coesão em nosso site e no fluxo a ser realizado pelo usuário, porque sem isso, nosso site acaba ficando com múltiplas possibilidades de contexto e, consequentemente, mais complexo e menos atrativo.
Referências
- Melhorando a taxa de conversão de websites com Skeleton Screens
- True Lies Of Optimistic User Interfaces
- Case Study: How a 2-Second Improvement in Page Load Time More Than Doubled Conversions
- Site Speed is (Still) Impacting Your Conversion Rate
- Consumers dump slow websites
- Why Perceived Performance Matters, Part 1: The Perception Of Time
- A Literature Review on Reaction Time
- Attention Span Statistics