Como melhorar o design da experiência do usuário ao otimizar a ansiedade intersticial
Publicados: 2018-06-30
Hoje, estamos falando sobre algo que nos faz estremecer: ansiedade intersticial - sim, isso parece horrível e, na verdade, da perspectiva de um designer, realmente não é ótimo. No entanto, faremos o possível para virar essa carranca de cabeça para baixo, discutindo tudo o que você precisa saber, incluindo as maneiras pelas quais você pode atingir a ansiedade intersticial otimizada em todo o processo de design.
A ansiedade intersticial é aquela sensação de irritação que você tem ao interagir com uma página da web ou design de aplicativo e algo parece errado. Não está carregando, está atrasado ou simplesmente não está funcionando como deveria. Entrarei em mais detalhes sobre essa frase mais tarde, mas é importante saber o que é e como é importante no design UX.
Quando se trata de design, as marcas precisam manter os consumidores e sua experiência digital em mente. Eles precisam criar plataformas que sejam empolgantes e envolventes e que ofereçam ao público exatamente o que procuram.
Isso não é apenas no conteúdo, mas na aparência do design. É como os usuários passam de uma página de um bloco de conteúdo para a próxima. E se estiver confuso ou lento, é quando os usuários começarão a sentir essa ansiedade intersticial que os desligará de sua página e de sua marca como um todo.
Profissionais de marketing e proprietários de empresas - ouçam! Este guia para ansiedade intersticial pode ajudar a transformar o design de seu site e aplicativo para promover conversões, vendas e identidade de marca como um todo.
O que é ansiedade intersticial otimizada?
Em primeiro lugar, antes de começar a otimizá-la, a ansiedade intersticial se refere ao estado momentâneo de tensão que os usuários experimentam entre uma ação e uma resposta. Por exemplo, se estou em um site e opto por clicar em um botão (ação) para navegar para outra página, essa página terá que carregar (resposta) antes que eu possa visualizá-la.
Se você nasceu antes da banda larga, estará familiarizado com as páginas da web de carregamento lento - o criador de ansiedade definitivo! Isso, junto com o feedback lento e os problemas de latência, geralmente são os principais motivos por trás dos atrasos que um usuário terá entre sua ação e a resposta esperada.
Você pode achar que esses pensamentos e sentimentos são passageiros - mas eles causam um impacto profundo nos usuários e permanecem com eles, mesmo que seja inconscientemente. Os usuários inevitavelmente perceberão a lentidão do seu site e irão comparar isso com a ineficiência de sua marca em geral.
E isso significa um desastre para futuras conversões, leads, vendas e crescimento.
A ansiedade intersticial otimizada é importante para a experiência do usuário?
Se você prefere que pessoas felizes voltem ao seu site, então sim! Ter um design centrado no usuário é vital para reduzir a ansiedade do design UX e promover sua marca e negócios. Com toda a seriedade, a ansiedade intersticial pode ter um impacto profundo, infelizmente, no desempenho de seu site ou aplicativo.
Durante a Web 2.0 Conference em 2006, Marissa Mayer, então vice-presidente do Google, revelou uma pesquisa mostrando que um atraso de 0,5 segundo no tempo de carregamento resultou em uma queda de 20% no tráfego para a página de busca do Google.
Um em cada cinco usuários saiu do site porque ficou paralisado por meio segundo ... deixe que isso aconteça.
Agora pense no que isso pode significar potencialmente em relação ao seu site. Se você optar por deixar os problemas de velocidade e desempenho sem supervisão, quanto tempo levará para que seus usuários experimentem uma ansiedade semelhante e acabem alienados? Não muito, de acordo com Mayer.
Olhe isto deste modo. Seu site pode estar preenchido com todas as respostas certas. Suas campanhas sociais podem ressoar perfeitamente com seu público-alvo. Seus designs criativos podem estar chamando a atenção do cliente perfeito. No entanto, não terá valor se essas pessoas não puderem acessar as informações que você passou horas elaborando em seu site.
As pessoas não querem apenas um bom conteúdo, elas querem eficiência. Eles querem o que querem, onde querem, mas o mais importante, quando querem. Se o seu site está causando atrasos nesse processo, os consumidores provavelmente procurarão em outro lugar as informações, produtos ou serviços que estavam procurando originalmente.
Uso da ansiedade intersticial otimizada para aprimorar o design de experiência do usuário
A última coisa que você quer é um design UX que afete negativamente a experiência que os visitantes do seu site estão tendo. Portanto, usar a ansiedade intersticial otimizada é uma ótima maneira de reduzir a probabilidade de os usuários encontrarem velocidades de carregamento lentas ou problemas de transição.
Antes de realmente delinearmos as maneiras pelas quais você pode fazer isso, é importante entender que há dois componentes conectados que formam a ansiedade intersticial: ansiedade transicional e ansiedade temporal.
Ansiedade de transição
Em primeiro lugar, vamos considerar a ansiedade de transição que as pessoas podem sentir. Esta é a primeira etapa da sequência e se refere à ansiedade derivada do período de transição para outra tela ou página. Essa mudança de transição de uma seção de um site ou etapa de um processo para outra deve ser totalmente contínua. Se um usuário experimentar qualquer atrito, isso acabará por atrapalhar o processo e interromper o que deveria ser uma experiência contínua.
Um grande exemplo de ansiedade de transição é durante a fase de checkout de uma transação online que um usuário está realizando. Digamos, por exemplo, que você adicionou todos os itens que deseja comprar da Amazon em sua cesta. Você está pronto para pagar seu pedido e começar a seguir as etapas para revisar sua compra.
Tudo parece estar indo conforme o planejado, no entanto, você percebe que quando clica em concluir compra, você é redirecionado para a página inicial da Amazon.
“Meu pedido foi concluído?”
“Fui cobrado?”
“Onde está o e-mail de confirmação do meu pedido?”
Todas essas são perguntas em potencial que você pode se perguntar em pânico se não tiver recebido a tela ou página de transição esperada. A mudança repentina provoca um aumento da ansiedade - esse é apenas o nosso instinto natural.
Mesmo que haja uma solução fácil - mesmo que seja apenas um pequeno soluço momentâneo - é o suficiente para desligar as pessoas e preenchê-las com uma negatividade que permanecerá com elas no futuro. E pode até fazer com que eles saiam de seu site e encerrem totalmente a compra.
Ansiedade Temporal
A segunda forma de ansiedade intersticial se concentra na tensão causada pelo tempo que leva para uma página que um usuário está tentando acessar para carregar. Isso ocorre depois que um usuário faz a transição para a nova página ou tela, mas se refere especificamente ao tempo que leva para carregar todo o conteúdo da página.
Naturalmente, quanto mais tempo isso demorar, mais ansioso você ficará e, em situações específicas, pode ser bastante estressante - mais uma vez, pense em um processo de compra.
Por exemplo, você está tentando comprar ingressos para um show do Ed Sheeran. Você espera que seja difícil conseguir ingressos e que o site fique mais lento do que o normal, mas ainda espera passar pelo processo normal de reserva se tiver a sorte de ter a oportunidade de comprar os ingressos.
Você chega à fase de pagamento do processo de reserva - você está quase com seus ingressos! No entanto, quando você clica em “pagar agora”, a tela muda para uma tela que está apenas cerca de 25% carregada. Você não pode dizer se pagou ou não pelos ingressos, e a tela parece congelar.
“Devo atualizar a página?”
“E se eu tiver que pagar duas vezes?”
“Perdi meu lugar na fila?”
Este é um excelente exemplo de ansiedade temporal e algo comumente experimentado nisso. Você está literalmente no limbo para saber se recebeu os ingressos ou não.
E é um que todos nós podemos relacionar também. Você não tem certeza do que fazer, não tem certeza se fez algo errado - tudo que você sabe é que há um atraso no processo e seus resultados finais podem nunca ser alcançados.
Em uma escala menor, no entanto, essa ansiedade pode ser sentida quando qualquer página não carrega. Você não precisa estar nos estágios finais de uma transação. Se você realmente deseja comprar um vestido novo, mas as imagens do produto em sua loja online favorita não carregam, você será forçado a procurar em outro lugar, pura e simplesmente.
E sua marca não quer isso.
Como melhorar a experiência do usuário por meio da ansiedade intersticial otimizada
Para simplificar, vamos dividir isso nos tipos de ansiedade intersticial identificados anteriormente novamente. Começando com…
Como reduzir a ansiedade transitória
A maneira ideal de reduzir a ansiedade de transição é por meio do uso de animações sutis e transições entre as telas. Porque? Bem, isso deve ajudar os usuários a se ajustarem gradualmente à mudança entre as páginas ou telas que, de outra forma, pareceriam bem diferentes.
Como as empresas online perceberam, aprender como canalizar a ansiedade de transição em seu benefício é uma abordagem melhor do que tentar removê-la por completo. Ao criar elementos de transição - como oferecer uma amostra do snippet ou um vislumbre do que está por vir na próxima seção - os usuários podem antecipar, em vez de se preocupar com o que acontecerá a seguir.
Os tempos de carregamento e lentidão são inevitáveis em alguns casos. E tentar consertar esses problemas pode levar mais tempo e causar mais irritação do que as marcas desejam. Mas incorporar essas animações é uma maneira simples e eficaz de criar uma transição contínua que aumenta a positividade e o entusiasmo.
Usando um exemplo prático da vida real, imagine quando você é acordado às 6 da manhã pelo despertador (não é um pensamento agradável, eu sei!). Agora, torne essa experiência ainda pior imaginando como você reagiria se a luz do seu quarto também acendesse inesperadamente ao mesmo tempo. Você ficaria chocado, perturbado, com raiva, chateado e provavelmente confuso.
No entanto, se a luz do quarto acender gradualmente ao longo do tempo em que o alarme soneca estiver ativado, você terá nove minutos para se ajustar à luz, em vez de ser pego de surpresa e deixado em estado de choque. Este é o mesmo princípio aplicado à transição gradual da página da web.
Precisa de ajuda com seu destino online? Essas agências de web design e desenvolvimento podem ajudar a transformar seu site de monótono em fabuloso!
Como reduzir a ansiedade temporal
Existem dois métodos principais que você pode usar para combater o problema da ansiedade temporal, sendo que ambos se concentram no uso de recursos visuais para fornecer algo mais interessante do que uma tela em branco: uma animação de carregamento e uma animação de espaço reservado.
Carregando animação
Usar uma animação de carregamento, como uma roda giratória ou barra de carregamento, pode ser tudo o que é necessário para transformar uma sequência confusa de carregamento de página em uma experiência de usuário satisfatória. Você deve estar ciente e provavelmente já experimentou a animação de carregamento do Facebook.
O que você pode não perceber é que, com base no tipo de gráfico usado para a animação, os usuários se sentirão de maneira diferente. Por exemplo, foi sugerido que “quando os usuários viram uma animação de carregamento personalizada no aplicativo iOS do Facebook (à esquerda), eles culparam o aplicativo pelo atraso. Mas quando os usuários viram o botão giratório do sistema iOS (à direita), eles ficaram mais propensos a culpar o próprio sistema. ”
Novamente, colocando essa técnica em algum contexto - pense na última vez que você esteve em um elevador. Digamos que você estivesse no 20º andar e quisesse descer no quarto andar. Quando o elevador começa a se mover, você obviamente está ciente disso.
No entanto, e se você não tivesse noção de em que andar está? Como você saberia quando descer? Enquanto você espera no elevador, geralmente você pode ver o número do andar exibido. Ao descer em direção ao quarto andar, você sabe quando o elevador irá parar.
Isso não apenas dá a você a chance de se preparar um pouco, mas também contribui para uma viagem agradável - ou, em outras palavras, é uma experiência de usuário sem atrito!
E você pode até mesmo incorporar algum conteúdo de marca e animações aqui para fazer parecer que tudo foi feito de propósito! Isso pode adicionar uma personalidade lúdica e criativa à sua marca e identidade, o que torna os usuários mais felizes para interagir e se envolver.
A marca é importante, e o design afeta imensamente a marca. Se você tem problemas com ansiedade de UX, pode ser a seu favor usar o problema a seu favor e solidificar uma identidade de marca estimulante e inovadora em resposta.
Animação de espaço reservado
Como alternativa, você pode optar por uma animação de espaço reservado que simula a aparência do conteúdo real quando for carregado. O exemplo abaixo é do Medium, que usa um wireframe de imagem simples como espaço reservado, enquanto a imagem real é carregada.
Essa é uma maneira mais simples e elegante de resolver o problema de ansiedade. E funciona muito bem para marcas que não precisam nem querem todos os sinos e assobios que vêm de animações criativas e complicadas.
Ele promove um sentimento e uma atmosfera de elegância e sofisticação que dá à sua marca uma autoridade que, de outra forma, seria perdida devido aos atrasos no carregamento e aos designs repletos de ansiedade.
Uso da ansiedade intersticial otimizada para criar designs
Agora que entendemos o que é a ansiedade intersticial, como ela se relaciona com o usuário e como podemos minimizá-la, podemos começar a juntar as etapas que os designers podem tomar para garantir que seus projetos atendam às expectativas de UX definidas pelas pessoas que importa - os usuários!
Com base nas soluções potenciais delineadas para ansiedade transicional e temporal, fica claro que o movimento desempenha um papel importante na redução da ansiedade intersticial. Issara Willenskomer, do UX in Motion, elaborou um 'Manifesto UX in Motion' no qual ele descreve as 12 oportunidades específicas para apoiar a usabilidade em seus projetos UX usando movimento.
No caso de ansiedade intersticial, isso significa:
- Reduzindo o tempo que leva para uma página ou tela carregar
- Minimizando o número de telas e páginas em branco
- Reduzindo qualquer atrito causado por transições estagnadas
E assim, as marcas podem usar essas 12 opções delineadas para criar um design dinâmico e intuitivo.
Você também pode incorporar elementos dinâmicos em sites corporativos! Verifique esses sites profissionais de topo para se inspirar!
Os 12 princípios da experiência do usuário em movimento
Duas coisas vêm à mente com a imagem acima. Em primeiro lugar, os movimentos são bastante sutis e, em segundo lugar, é bastante interessante como 12 movimentos simples podem constituir as bases a partir das quais a maioria das animações são construídas.
Esses são apenas os princípios básicos, mas podem ser desenvolvidos de maneiras dinâmicas e criativas para criar um design que promova interatividade, envolvimento e, com sorte, até vendas.
Willenskomer analisa cada um desses elementos detalhadamente, mas, em resumo, eles são os seguintes:
- Facilitação: o comportamento do objeto se alinha com as expectativas do usuário quando ocorrem eventos temporais
- Offset & Delay: Define relações de objeto e hierarquias ao introduzir novos elementos e cenas
- Paternidade: cria relações hierárquicas espaciais e temporais ao interagir com vários objetos
- Transformação: Cria um estado contínuo de fluxo narrativo quando a utilidade do objeto muda
- Mudança de valor: Cria uma relação narrativa dinâmica e contínua quando o assunto de valor muda
- Mascaramento: Cria continuidade em um objeto de interface ou grupo de objetos quando o utilitário é determinado por qual parte do objeto ou grupo é revelado ou oculto
- Sobreposição: cria narrativa e relação espacial do objeto em uma planície visual quando os objetos em camadas dependem da localização
- Clonagem: cria continuidade, relacionamento e narrativa, quando novos objetos se originam e partem
- Obscuração: permite que os usuários se orientem espacialmente em relação a objetos ou cenas, não na hierarquia visual primária
- Paralaxe: cria hierarquia espacial em planície visual quando os usuários rolam
- Dimensionalidade: fornece uma estrutura narrativa espacial quando novos objetos se originam e partem
- Dolly & Zoom: preserva a continuidade e a narrativa espacial ao navegar por objetos e espaços de interface
Manter essas 12 opções de movimento em mente é um ótimo guia para garantir que seu design esteja no topo do jogo, incorporando movimento quando necessário para reduzir a ansiedade e promover uma sensação de entusiasmo no design do seu site e aplicativo.
Tudo o que as empresas on-line precisam saber sobre ansiedade intersticial otimizada
Em resumo, vimos a ansiedade intersticial, o que é e como pode impactar a UX de sites e aplicativos. E não é apenas mais uma tendência de design passageira.
Como uma recapitulação rápida, aqui estão alguns pontos-chave rápidos para ter em mente quando você estiver revisando o tópico no futuro:
- A ansiedade intersticial é o estado momentâneo de tensão que um usuário experimenta entre uma ação e uma resposta, como clicar em um botão e esperar que a página carregue
- Existem dois estágios de ansiedade intersticial: transicional e temporal
- Transicional está relacionado à mudança de uma tela ou página para outra
- Temporal é o tempo que leva para uma página ou tela carregar e como isso afeta o comportamento do usuário
- A introdução de transições graduais de página e carregamento de animações de tela o ajudará a obter ansiedade intersticial otimizada e, portanto, um design de experiência do usuário com melhor desempenho
- Os 12 princípios da UX em movimento definem as maneiras pelas quais você pode usar a animação para melhorar a usabilidade
A ansiedade intersticial costuma ser esquecida e, recentemente, tornou-se um tópico de discussão no mundo do design, branding e marketing. Mas é um conceito importante para entender e corrigir em seus próprios projetos.
Os usuários fazem julgamentos com base no design da web e do aplicativo. Eles chegam a suas próprias conclusões sobre sua marca em resposta a como seus designs os fazem sentir. E se frustrarem, confundirem ou irritarem, não voltarão.
Esperançosamente, você terá uma melhor compreensão do conceito depois de ler este artigo. Se você acha que perdemos algum ponto crucial ou se gostaria de nos fazer alguma pergunta sobre a ansiedade intersticial otimizada, você sempre pode compartilhar nos comentários.
Quer mais informações sobre design? Inscreva-se para o DesignRush Daily Dose!
A experiência do usuário também é fundamental no design do aplicativo. A DesignRush tem uma lista de grandes empresas de design e desenvolvimento de aplicativos que podem criar um destino móvel eficaz para sua marca.