Interfaces da Web são conversas atrasadas: projetando interfaces de conversação

Os usuários têm uma “conversa atrasada” com uma interface web.

Ou seja, uma empresa coloca todas as respostas possíveis para uma pergunta que um usuário tem ou para uma ação que ele quer que seja feita com antecedência.

• Quando funciona, parece uma discussão agradável. Este é o caso quando um usuário pergunta algo à interface do usuário e a interface o traz prontamente.
• Quando não funciona – quando um usuário está procurando um método de interação que o designer não pensou antes, quando a interface simples produz um erro 404 – pode ser uma “conversa” muito chata para o usuário, e ele ou ela pode nunca mais falar com sua empresa.

Pense em sua página da web como uma interface de usuário conversacional. Para uma conversa, você precisa de um entendimento entre duas partes. Para uma interface web, você precisa de um entendimento entre a empresa e o visitante. Abaixo, mostramos os conceitos básicos de design de interfaces de conversação para que você possa melhorar a experiência do usuário do seu site:

1. Modelos Mentais: o mínimo para uma conversa que funciona

Se você não está familiarizado com modelos mentais, é basicamente uma visão de como algo funciona .

Quando você pergunta a seus amigos o que acontece quando eles acessam um site, eles podem falar sobre carregar páginas e fazer coisas. Quando você pergunta a uma pessoa de tecnologia da web o que acontece quando alguém acessa um site, isso pode envolver “cookies” e “tokens” e “parâmetros passados”. Ambas as perspectivas podem estar “certas”, mas não “combinarão”.

Para designers de sites, uma das coisas mais importantes a se pensar é garantir que a interface e o modelo mental do usuário correspondam corretamente .

A coisa a lembrar é que os modelos são baseados em crenças e não em fatos. Você precisa influenciar essa crença com sinais, grandes e pequenos, para tentar colocar o modelo mental do usuário no lugar certo.

Aqui estão algumas coisas que você pode fazer:

• Quando os usuários têm uma tarefa que pode demorar um pouco, adicione um “carregador”. Isso fará com que eles pensem que, depois de clicarem em “algo está acontecendo, mas está demorando algum tempo”, em vez do modelo mental incorreto, “nada aconteceu”.

O carregador do Delta.com informa aos usuários que algo está acontecendo, mas está demorando algum tempo.

• Certifique-se de cortar algum texto em sua página inicial se houver conteúdo abaixo, ou tenha algum indicador de que o visitante pode rolar mais. Dessa forma, o modelo mental do usuário será “há mais conteúdo abaixo” em vez de “isso é tudo na página”.

Como você não pode falar diretamente com o usuário, grande parte da obtenção de modelos mentais para combinar se resume a significantes .

2. Affordance e Significantes – o que posso esperar desta conversa?

Os web designers precisam pensar em “acessibilidade” e “significantes”.

• Affordance – tudo o que você pode fazer com um sistema ou objeto. Um motor de busca “permite” a busca; uma gaveta de pedestal “permite” puxar.
• Significantes – símbolos que dizem às pessoas o que você pode fazer com um sistema ou objeto. Uma lupa “significa” que você pode pesquisar; uma alça “significa” que você pode puxar a gaveta.

Uma lupa “significa” que os usuários podem pesquisar.

Para uma interface da web, um significante pode fazer ou quebrar o quão bem um design corresponde ao modelo mental do usuário .

Se um botão for semitransparente, mesmo que mude ao passar o mouse, você pode deixar de comunicar que o botão permite clicar. Se os links do seu site não tiverem uma cor significativamente diferente do restante do texto, você terá um problema de significante que levará as pessoas a ter um modelo mental incompatível.

Assim como as perguntas em uma conversa indicam que você está esperando uma resposta, um significante bem colocado permite que os usuários saibam como podem interagir com um design. Certifique-se de ter significantes em toda a sua interface informando aos usuários com o que eles podem interagir.

3. Atribuindo importância – determinando o tom em um ambiente web

Quando você fala com as pessoas, você pode usar seu tom para dizer às pessoas o que é importante. Como as interfaces da Web são conversas demoradas, você não tem o luxo do tom. No entanto, você tem acesso a uma variedade de outras ferramentas:

• Contraste de cores – se a maior parte do seu site for cinza e preto, e sua frase de chamariz for vermelha, você está dizendo às pessoas para prestarem mais atenção ao CTA do que ao texto do site. Isso é algo que você pode usar para direcionar a atenção para os lugares certos.

A Asos.com chama a atenção para o call-to-action usando verde para o botão CTA – a cor não é usada em nenhum outro lugar na página de detalhes do produto.

• Tamanho – as pessoas prestam atenção aos elementos maiores. Use isso para chamar a atenção para os elementos que as pessoas costumam usar. No entanto, tome cuidado para não exagerar.
• Formas irregulares – nossos olhos são atraídos para formas irregulares mais do que para as regulares. Se o seu modelo tiver espaço para cantos arredondados, use isso para chamar sutilmente a atenção para os lugares onde isso importa.

Diga às pessoas o que é importante e o que elas podem percorrer tendo uma hierarquia visual clara na página.

4. Combinando a emoção do usuário – persuasão em uma conversa demorada

Quando um usuário está relativamente feliz , ele processa as coisas no modo “primeiro em largura” . É mais provável que o usuário fique bem com interrupções leves e não será muito ameaçado por coisas que não se comportam da maneira que eles esperam.

Quando um usuário está relativamente ansioso , ele muda para o modo “profundidade primeiro” . O foco desse usuário está bloqueado – esse é o estado em que você entra quando acha que sua conta bancária foi invadida. Até que você tenha certeza de que sua conta está bem, o medo fará com que você se concentre em tentar descobrir, em detrimento de todas as outras tarefas, e é mais provável que você perca coisas. (Ou achar coisas fofas.)

Em uma interface web, você precisa estar ciente de ambos os estados emocionais.

• Sua página de categoria de viagem pode apelar para o processamento “em amplitude” dos usuários, e você pode inserir controles deslizantes, etiquetas e outros elementos interativos que os visitantes podem usar para encontrar o que precisam.
• Suas páginas de formulário e checkout, no entanto, precisam lidar com o processamento “primeiro em profundidade” dos visitantes e exibir grandes símbolos de confiança para aliviar a ansiedade, para que possam prosseguir e começar a fazer transações com você.

Corresponder ao estado provável do seu usuário fará com que seu site “pareça” mais fácil de usar.

Projetando interfaces de conversação para melhorar o UX

Lembre-se: Interfaces são basicamente conversas, mas com as possíveis respostas para o usuário definidas com antecedência.

O que faz funcionar é o quão bem você combina com o modelo mental de um usuário . Quando os modelos mentais combinam, os visitantes podem fazer o que precisam e saem felizes. Quando os modelos mentais não combinam, bem, acontece o oposto.

Você pode fazer algumas coisas para garantir que ajuda as pessoas a descobrir como a interface funciona:

• Certifique-se de usar significantes para dizer às pessoas o que o sistema oferece.
• Direcione a atenção para os lugares certos usando cores, tamanhos e formas.

Depois de fazer tudo isso, você só precisa ter certeza de levar em consideração o estado emocional do usuário e usar os elementos do site apropriados para esse estado.

Se você fizer tudo isso bem, as pessoas devem estar mais dispostas a falar com você de novo e de novo.