5 exemplos de modais de feedback para você se inspirar

O que torna um modal de feedback bom?

Antes de mostrar os designs que fazem o mundo (modal de feedback) girar, deixe-me falar mais sobre os itens que certamente melhoram a experiência do usuário ao usar um modal de feedback.

1- Texto claro e conciso

Todo modal de feedback tem uma finalidade, seja apenas para obter feedback do cliente ou para ser avaliado publicamente em uma plataforma.

Quando chegar a hora de informar os usuários sobre a sua intenção com um modal de feedback específico, você deve declarar claramente o seu objetivo no texto e mantê-lo o mais curto possível.

Se estiver buscando uma alta taxa de resposta (quem não está?), convém garantir que o texto seja conciso, não colocando muito texto em um modal.

Quando tudo o que você tem são alguns segundos antes de os usuários fecharem a janela modal, você deve se concentrar em manter essa interação curta, mas direta, para chamar a atenção do usuário sem problemas.

2- Design amigável ao usuário

Você não entraria em uma loja cuja vitrine não o intrigasse, certo?

O mesmo se aplica às janelas modais de feedback.

Se o seu público-alvo não achar o design do modal de feedback acessível o suficiente, ele poderá simplesmente não interagir com ele.

Aqui estão algumas etapas que podem ser úteis ao projetar uma janela modal para feedback:

• o tipo do modal,
• o tamanho do modal,
• o tema de cores do modal.

Primeiro, você deve decidir o tipo de modal de feedback. Será um modal de site ou um modal móvel?

Em seguida, calcule o tamanho da janela se ela não for uma janela modal de tela cheia.

Se não for usar tela cheia, certifique-se de que o modal seja grande o suficiente para o engajamento dos usuários, mas não muito grande a ponto de sobrecarregá-los.

A última etapa trata da personalização, em que você deve combinar o modal com a estética do site.

Isso pode ser feito combinando a cor do modal com o tema de cores da sua marca e com os elementos que você coloca no modal.

Coloque o reconhecimento de sua marca em prática!

3- Botão de fechar

Outro item que você deve dar importância é o botão de dispensa.

Aqui, você também pode optar por ter um botão de fechar na parte superior - não importa, desde que você forneça aos usuários uma saída.

É preciso pensar em todas as possibilidades, em todos os cenários... e um deles é um visitante do site que precisa comprar um item e que também pode continuar com o processo de cadastro.

Com um modal de feedback que aparece logo após a detecção de um novo item no carrinho de compras, isso pode interferir na experiência de compra atual e até mesmo diminuir as chances de cadastro após o checkout.

Com um botão de dispensa presente, nenhum usuário ou visitante teria que interromper suas ações para fornecer feedback.

4- CTAs inteligentes

Assim como o texto, as chamadas para ação também são importantes.

Um bom texto apresenta aos usuários o que você gostaria que eles fizessem, enquanto uma boa CTA os direciona para como exatamente eles podem fazer isso.

Há duas maneiras de fazer isso para coletar feedback:

Você pode preparar o modal com emojis, como estrelas, ações de polegar para cima e polegar para baixo, ou fornecer a eles uma seção de comentários para uma pergunta aberta.

Ou você pode levá-los para outra página, como um formulário de feedback ou o próprio aplicativo, que é o que a maioria dos aplicativos móveis faz.

Dependendo da sua escolha, você deve criar uma CTA que apoie o seu objetivo e que permita que os usuários naveguem sem problemas.

5- Sem repetição

As janelas modais são conhecidas por serem sinais que interrompem as sessões do usuário, por isso você deve usá-las somente quando necessário.

Se você usar modais de feedback constantemente, o feedback positivo se transformará em feedback negativo ou pior... os usuários poderão simplesmente ignorá-lo e até mesmo parar de usar seus serviços devido aos intervalos ininterruptos durante toda a experiência no aplicativo.

Confie em mim, nenhum botão de desligar pode salvá-lo disso.

É por isso que você deve usar esse elemento da interface do usuário para obter feedback crucial do cliente em intervalos.

5 ótimos exemplos de modais de feedback para se inspirar

Agora, é hora de ver o que esses elementos criam quando são combinados.

1- UserGuiding

Aqui, a UserGuiding realiza um sonho com seu modal de feedback.

Vou explicar em detalhes: Em primeiro lugar, você pode escolher o local exato em que deseja que o modal de feedback apareça, o que ajuda no problema do intervalo de experiência do usuário, pois a sequência pode não ser cortada com base no posicionamento do modal.

O reconhecimento da marca está se destacando ao combinar o tema geral de cores de acordo com a própria marca, com branco e azul (isso também pode ser visto nos elementos do plano de fundo 🤭).

Meu próximo ponto inclui como esse exemplo cria uma sequência ao ter um botão Próximo que os usuários podem usar para passar para a próxima pergunta ou voltar para as perguntas anteriores usando o botão Anterior.

Aqui está outro exemplo com um elemento diferente, que é uma pergunta de múltipla escolha que os usuários podem escolher.

O texto em si ainda é curto e direto, mas o tom se torna mais amigável com o uso de emojis.

Além disso, os usuários podem escolher várias opções ao mesmo tempo e, se escolherem Outro, será exibida uma seção de comentários para obter mais ideias sobre o tópico.

Você também pode ver que ambos os modais de feedback têm um botão de fechar para os usuários que não desejam participar do processo de feedback.

Em resumo, a UserGuiding é o lar de vários modelos de feedback que podem ser personalizados e adotados quando for o momento de coletar feedback dos usuários.

2- Calendly

O Calendly oferece um guia interativo que vem com uma pergunta em um modal pop-up para coletar feedback de usuários iniciantes que acabaram de concluir o onboarding.

Graças a essa etapa, o Calendly consegue ouvir os pensamentos sobre o onboarding inicial, em que os usuários se familiarizam com a ferramenta pela primeira vez.

Ao deixar um espaço em branco para que eles escrevam o que acharam e avaliem todo o processo em palavras, em vez de usar emojis, o software reúne com sucesso os prós e os contras em um só lugar para uma avaliação posterior.

Agora, as equipes podem utilizar esses comentários quando precisarem de dados. Por exemplo, as equipes de produtos podem ver o que os usuários pensam de um recurso específico durante o onboarding, enquanto o pessoal de marketing pode se inspirar com base nas dores mencionadas pelos usuários.

E o mais importante é que as equipes podem entender o que os usuários de primeira viagem pensam do produto, se chegaram a um momento Aha e se a sequência de onboarding foi bem-sucedida, nas palavras dos próprios usuários.

Passando para as opções de design, você pode ver que o Calendly opta por uma pergunta curta que mostra o que o Calendly está procurando.

O modal em si não é um elemento de UI grande que sobrecarrega os usuários; é um modal bem pequeno que vem com uma seção de comentários.

Ele também tem um botão Fechar para usuários que não querem deixar comentários e um botão Saiba mais para usuários que precisam de mais assistência após o onboarding.

3- ClickUp

‎O ClickUp requer a atenção dos usuários com uma pesquisa pop-up que inclui um NPS com texto dinâmico que muda de acordo com a pontuação dada pelos usuários.

Esse modal de feedback se beneficia de uma cor de contraste com o tema do modo de cor preferencial, o que permite que o modal chame a atenção dos usuários rapidamente.

O texto é breve e permite que os usuários entendam a intenção do ClickUp; ele ainda envolve um tom amigável com emojis em vez de palavras e sinais de pontuação.

Ele também utiliza uma seção de comentários em que os usuários podem fornecer feedback livremente sobre a experiência do usuário (e até mesmo informações adicionais para solicitações de novos recursos ou melhorias) para que as equipes considerem posteriormente.

Por último, mas não menos importante, ele tem um botão de fechar para os usuários que desejam ocultar o modal de feedback de suas telas enquanto isso.

4- Duolingo

Aqui está um exemplo de modal de feedback de um aplicativo móvel.

O Duolingo optou por empregar um modal de tela cheia que solicita feedback e estrelas em um mercado de aplicativos para que outras pessoas vejam e considerem antes de baixar o aplicativo.

Como um aplicativo móvel, faz sentido usar um modal de tela cheia, pois, caso contrário, o modal em si poderia ser muito pequeno para alguns usuários lerem ou interagirem.

Esse exemplo mostra como as cópias breves vencem as longas mais uma vez. Ele também dá atenção ao reconhecimento da marca usando a imagem de seu mascote oficial, o Duo. Tudo no ponto 👌

A parte da chamada para ação é simples, mas prática o suficiente para incentivar os usuários a fornecer feedback e estrelas com base na opinião.

Dessa vez, não há um botão fechar no canto superior direito, mas há uma opção de dispensa logo abaixo da opção Avalie-nos.

O posicionamento dela e da CTA é definitivamente uma decisão deliberada, porque o público-alvo usa a metade inferior da tela para passar para a próxima pergunta o tempo todo.

5- Slack

Não permitindo espaço para pedir repetidamente o feedback do usuário por meio de modais da UI, o Slack prossegue com um modal de feedback que aparece quando o usuário decide interagir com ele na seção Ajuda.

Os usuários são incentivados a seguir as instruções enquanto ainda veem o conteúdo por trás do modal, pois o Slack semi-escurece a área por trás do modal, apenas o suficiente para chamar a atenção dos usuários.

Além disso, ele envolve perguntas com várias respostas, não apenas pedindo opiniões sobre o novo design, mas também permitindo que os usuários façam uma solicitação de recurso.

Isso pode ser uma distração para alguns usuários, mas estou apostando no Slack para que essa aposta funcione a seu favor.

Continuando, esse formulário de feedback inclui uma pergunta de múltipla escolha e uma pergunta aberta juntas, mas você consegue ver como ele é curto?

Um último detalhe que devo destacar é que ele permite que os usuários entrem em contato com a equipe de suporte sobre seus comentários, se desejarem, bastando marcar a caixa.

Conclusão

Aqui, você acabou de ler as maneiras pelas quais pode criar modais de feedback práticos.

Esses modais de feedback ajudam as equipes a obter feedback dos usuários sobre tópicos de sua escolha, seja sobre um novo recurso ou sobre o processo de onboarding.

Há alguns elementos que você deve considerar ao criá-los como deveriam:

• ter um texto curto,
• incluir um botão de fechar,
• ter um design fácil de usar,
• incluir CTAs inteligentes,
• e evitar a repetição.

Você está em boas mãos porque os exemplos de modais de feedback que incluí acima contêm todos os elementos necessários.

Portanto, cabe a mim escrever e a você dar uma olhada!