Psicologia e UX em formulários

Como aplicar as leis e melhorar a conversão.

Joao Bosco Ribeiro
Grupo OLX Tech
6 min readOct 21, 2021

--

Créditos: sceneit

Recentemente fizemos uma apresentação, em um encontro do time de Design da OLX Brasil, sobre as leis da psicologia aplicadas à UX. Interessado pelo assunto, resolvi aplicá-lo dentro de um projeto de documentação de boas práticas em formulários, que já estava fazendo dentro do meu time para um projeto da companhia.

O objetivo da associação das boas práticas com as leis da psicologia é ajudar na compreensão, memorização e engajamento da documentação. Fiz aqui uma breve explicação das leis que julguei mais relevantes neste projeto, mostrando algumas aplicações na sequência.

Lei de Hick

O tempo necessário para tomar uma decisão aumenta com o número e a complexidade das escolhas.

Pergunte apenas o necessário

Cada campo extra que você adiciona a um formulário afetará sua taxa de conversão. Sempre considere por que você está solicitando certas informações do usuário e como você as usará. Faça um protocolo de questões:

  • Você precisa da informação para entregar o serviço?
  • Por que você precisa da informação?
  • O que vai fazer com ela?
  • Quais usuários precisam lhe fornecer a informação?
  • Como verificará se as informações são precisas?
  • Como manter as informações atualizadas e seguras?

Divulgação progressiva

Ao divulgar as informações de forma progressiva, revelamos apenas o essencial e ajudamos os usuários a gerenciar a complexidade apenas quando precisam.

Padrões inteligentes

Os padrões inteligentes são valores predefinidos com base nas informações disponíveis sobre o usuário e podem tornar o preenchimento de formulários mais rápido e preciso:

  • Deixe a opção mais usada marcada em controles de seleção.
  • Use-os com cuidado, porque os usuários tendem a deixar os campos pré-selecionados como estão.

Preenchimento automático

O preenchimento automático permite eliminar uma grande quantidade de digitação.

  • Verifique se há campos que podem fornecer dados para o preenchimento automático. Ex: Digitando o CEP você preenche automaticamente o campo de endereço, reduzindo o esforço do usuário.
  • Permita que alguns dados pessoais do usuário sejam guardados, com seu consentimento, para otimizar futuros acessos.

Caminho claro de conclusão

Se um formulário tiver campos em múltiplas colunas, o usuário deve ler em padrão Z, diminuindo a velocidade de compreensão e confundindo o caminho até a conclusão. Mas se um formulário estiver em uma única coluna, o caminho para a conclusão é uma linha reta descendo na página.

  • Defina um caminho claro de conclusão alinhando os campos as ações da interface;
  • O uso de múltiplas colunas também pode atrapalhar a navegação por tabs, prejudicando a acessibilidade.

Lei de Postel

Seja liberal no que você aceita e conservador no que você envia.

Campos de pesquisa

Incorpore um campo de pesquisa em dropdowns quando houver muitas opções, possibilitando que o usuário encontre rapidamente o que deseja.

Mensagens de erro

Comunique de forma clara que um erro ocorreu:

  • Evite mensagens ambíguas e genéricas;
  • Indique soluções acionáveis para corrigir os erros;
  • Destaque os campos específicos de erro com a cor primária de erro.

Efeito Zeigarnik

As pessoas se lembram melhor de tarefas incompletas ou interrompidas do que de tarefas concluídas.

Barras de progresso

Use barras de progresso para tarefas complexas para indicar visualmente quando uma tarefa está incompleta e, assim, aumentar a probabilidade de ser concluída.

Lei de Miller

A pessoa média só pode manter 7 (mais ou menos 2) itens em sua memória de trabalho.

Agrupe informações relacionadas

O fluxo de perguntas deve ser parecido com uma conversa. Agrupar campos relacionados ajuda os usuários a entenderem as informações que devem preencher e facilita seu escaneamento.

Radio buttons

Quando houver até 5 opções, deixe os itens da lista expostos, utilizando radio buttons.

Lei de Fitts

O tempo para interagir com um alvo é uma função da distância e tamanho do alvo.

Zona do polegar

Em telas sensíveis ao toque, posicione os botões de ação primária e links importantes na zona de fácil alcance, próximos ao polegar do usuário, garantindo uma experiência fluida e amigável. Os elementos de interação também devem estar com tamanho adequado para a interação do usuário.

Efeito Von Restorff

O efeito Von Restorff, também conhecido como Efeito Isolamento, prevê que, quando vários objetos semelhantes estiverem presentes, é mais provável que aquele que difere do resto seja lembrado.

Ações primárias e secundárias

Reduzir a proeminência visual de ações secundárias minimiza o risco de erro e reforça o caminho das pessoas para um resultado bem-sucedido.

Planos e preços

Destaque a "melhor oferta" das demais, orientando o usuário para uma opção específica e facilitando sua escolha.

Teoria da codificação dual

A informação, tanto visual quanto verbal, é utilizada para representar informação.

Campos customizados

Nossos cérebros processam imagens muito mais rápido do que texto. O uso de dicas como ícones, imagens, formas — o que quer que ajude a ilustrar seu ponto de vista — tornará a experiência do usuário mais intuitiva.

Ajudas e dicas

Use ilustrações ou fotos para ajudar o usuário a preencher campos com maior eficiência.

Lei de Jacob

Os usuários passam a maior parte do tempo em outros sites. Isso significa que os usuários preferem que seu site funcione da mesma maneira que todos os outros sites que eles já conhecem.

Campos de busca

Aproveitando modelos mentais já usados em um produto familiar, o usuário pode se concentrar em sua tarefa em vez de aprender novos modelos.

Conclusão

Quando forem aplicar esses princípios, é provável que sintam dificuldade em qual deles priorizar ou percebam que uma lei pode acabar se contrapondo a outra.

Por isso é importante analisar os dados disponíveis, saber o objetivo principal que desejam alcançar e fazer validações com os usuários em cada contexto de uso.

Assim terão mais clareza e confiança de qual caminho seguir para aumentar a performance de seus formulários, possibilitando gerar grandes impactos positivos em curto prazo.

Referências

Laws of UX

Form Design Patterns

Web Form Design: Filling in the Blanks

Digging deeper: the psychology of web forms

Designing complex user forms: 12 UX best practices

Zona polegar: Desenhando para usuários de smartphones

--

--