Psicologia do Design e a Neurociência do Awesome UX

Publicados: 2022-03-11

Ouça a versão em áudio deste artigo

Existe uma ciência sobre por que designs específicos chamam sua atenção e fazem seu sangue bombear.

O cérebro humano é preguiçoso, tendencioso e propenso a atalhos.

O estudo da experiência do usuário da cognição humana pode ser piegas, não científico e cheio de falsas suposições – talvez seja culpa de um cérebro preguiçoso.

A cognição é complexa e muitos fatores influenciam as reações intestinais ou uma impressão instantânea. Quando você pergunta a alguém: “Por que você fez isso?” há uma grande chance de que eles não sejam capazes de responder ou que você interprete mal a resposta deles.

Entra a neurociência.

psicologia do design e a neurociência da grande ux

Embora os métodos de pesquisa, como observação e entrevista, muitas vezes exijam que o pesquisador e o participante de UX façam suposições, a tecnologia moderna, como o rastreamento ocular , permite que os pesquisadores estudem reações e preferências quase imperceptíveis .

No caso de produtos com tráfego substancial, detalhes aparentemente minúsculos, como a largura de um botão ou o contraste de cores do texto, podem fazer milhões de dólares de diferença. É por isso que gigantes da tecnologia como Facebook e Google estão começando a empregar técnicas baseadas em neurociência para estudar como as pessoas usam seus produtos.

Vamos começar com uma introdução ao “pensamento rápido” reativo e fornecer algumas dicas para designers ajudarem a alavancar o poder da neurociência para criar ótimas experiências de usuário.

Psicologia do Design: Pensamento Rápido, Pensamento Lento

Não é nenhum segredo que muito do que impulsiona o comportamento humano é subconsciente. Nos milissegundos depois que uma pessoa encontra um novo aplicativo ou site, milhões de neurônios disparam e o cérebro toma centenas de decisões subconscientes.

Estou no lugar “certo”? Devo confiar neste site?

O pesquisador de UX do YouTube Javier Bargas-Avila determinou em um estudo de 2012 que as pessoas formam reações estéticas a uma página da web nos primeiros 17 a 50 milissegundos após a exposição .

Para colocar isso em perspectiva, o olho leva de 300 a 400 milissegundos para piscar. Seu produto pode receber seu julgamento, julgamento e sentença em menos de um piscar de olhos.

Essas impressões podem não ser registradas, mas afetam o comportamento. Por exemplo, se um site carrega lentamente e o cérebro lê os primeiros itens carregados como “fora do tópico”, o usuário pode navegar imediatamente em vez de esperar o carregamento do site.

teste de usuário web ux

Empresas como o Facebook investem recursos significativos no estudo da ordem de carga dos elementos. Se alguém fizer login no Facebook e não vir nenhum selo de notificação, ele poderá sair instantaneamente. Se os selos forem carregados primeiro, eles poderão esperar enquanto o feed de notícias com conteúdo pesado é carregado.

O livro do Prêmio Nobel Daniel Kahneman, Thinking, Fast and Slow, divide o pensamento humano e a tomada de decisão em dois sistemas para ajudar a ilustrar a diferença.

Sistema 1: rápido, automático, frequente, emocional, estereotipado, subconsciente.

O pensamento do Sistema 1 é reativo — responsável pela cognição complexa, mas instintiva, como determinar a distância entre objetos ou determinar respostas emocionais. Seu cérebro preguiçoso geralmente adota como padrão o pensamento do Sistema 1.

Sistema 2: lento, esforçado, lógico, calculista, consciente, pouco frequente.

O pensamento do Sistema 2 é analítico e é aplicado a cenários mais complexos, como determinar o comportamento social apropriado ou comparar dois produtos com preços e características diferentes.

pensamento rápido e lento na psicologia do design

Como o cérebro não quer reprocessar informações ou tomar novas decisões toda vez que se depara com um novo cenário, grande parte da tomada de decisão humana cai no Sistema 1, ou “pensamento rápido”.

Ao tomar decisões rapidamente, o cérebro pode confiar demais em esquemas ou modelos mentais — padrões familiares de informação e interação. Quando o pensamento do Sistema 1 está engajado, o Sistema 2 nunca entra em vigor. As pessoas podem não estar cientes da abreviação de tomada de decisão de seu cérebro, mas isso afeta fortemente seus comportamentos e percepção do produto.

A Ciência da Psicologia no Design

O cérebro humano consome 25% do oxigênio do corpo, apesar de representar apenas cerca de 2% de sua massa. O cérebro é preguiçoso como mecanismo de sobrevivência – reconhecimento de padrões e atalhos significam menos energia gasta para processar conscientemente a situação . O cérebro identifica as coisas, as rotula e as ignora até que sejam relevantes novamente.

A preferência do cérebro por padrões e tomada de decisão preguiçosa pode facilitar a sobrevivência, mas torna o design de UX mais difícil. Como você estuda algo que seu sujeito de pesquisa nem consegue perceber?

Um punhado de técnicas de neurociência recentemente deram um salto para a pesquisa de UX, ajudando os pesquisadores a esclarecer as coisas que estimulam o “pensamento rápido”.

Atenção e percepção podem ser estudadas com câmeras de rastreamento ocular. A resposta emocional e a excitação podem ser determinadas com sensores de pele ou análise facial. A resposta elétrica no cérebro pode ser medida com eletroencefalografia.

análise de ondas cerebrais teste psicologia design
Um eletroencefalograma (EEG) é um teste que detecta a atividade elétrica no cérebro.

Para os designers, pode parecer uma tarefa impossível capturar o interesse de alguém e transmitir informações vitais em menos de um piscar de olhos. Felizmente, assim como a neurociência pode nos ajudar a diagnosticar problemas, ela também pode revelar soluções gerais e melhores práticas.

Aqui estão algumas lições gerais aprendidas com a pesquisa de experiência do usuário em neurociência que os designers podem empregar ao projetar produtos digitais.

Dica de psicologia de design nº 1: facilite a identificação

Todo mundo chega a um site ou aplicativo com alguma expectativa de como deve ser. Permanecer próximo a essa expectativa ajuda os designers a se beneficiarem da tomada de decisão subconsciente instantânea.

A pessoa que abre seu aplicativo ou site quer saber a) se isso tem o que procuro; eb) isso é de alta qualidade? Manter os designs simples e manter a marca, os serviços e os produtos à frente e no centro ajuda as pessoas a se orientarem.

Colocar algumas informações à frente e no centro significa evitar que outras informações as excluam. Organizar um design é tão importante quanto reorganizar os componentes.

Você notará um movimento nas empresas de tecnologia para interfaces mais simples e menos lotadas. Esses designs minimalistas superam designs mais complexos na conclusão de tarefas e a clareza visual é mostrada para impactar as decisões de compra on-line e off-line.

Está cientificamente comprovado que designs visualmente simples e limpos têm melhor desempenho. O cérebro preguiçoso pode entender o propósito do site instantaneamente e entender qual ação tomar.

design minimalista vs design de interface do usuário barulhento para uma melhor psicologia de design de web ux
Barulho versus calma. O Google otimizou seu site para chamar a atenção do usuário para seu logotipo e incentivar a interação com a caixa de pesquisa. Em 2017, eles detinham 80,5% do tráfego total de pesquisa na web, acima dos 65,5% em 2016

Dica de psicologia de design nº 2: indique o que está por vir

Preparar ou preparar alguém para alguma informação ou interação futura pode melhorar a capacidade do usuário de entender e reagir a novas informações. Você pode preparar alguém para esperar coisas como elementos da interface do usuário, certas interações ou tempo em um processo.

Por exemplo, o Yelp usa uma tela adicional para alertar os usuários de que estão deixando o Yelp para visitar um site de terceiros. O contexto adicional ajuda a sinalizar ao usuário que espera um novo design e arquitetura de informações.

yelp priming exemplo em psicologia do design

Priming é uma faca de dois gumes. As informações que você não pretende comunicar ainda podem afetar a tomada de decisões . Por exemplo, se sua empresa de fotografia apresenta apenas fotos de bebês, uma pessoa pode incorretamente assumir que você atende apenas a clientela infantil.

Dica #3 da Psicologia do Design: Organize-se para Leitores Preguiçosos

Os estudos de rastreamento ocular são capazes de seguir o olhar de uma pessoa enquanto ela interage com um produto. Eles podem produzir mapas de calor que mostram o tempo gasto focado em uma parte da tela ou mapas de como o olho salta pela página.

Sabemos que, em todos os setores e tipos de aplicativos, o cérebro geralmente procura informações em um padrão F (ou padrão E). A pessoa olha para as informações na parte superior, lendo à direita e, em seguida, digitalizando a página para obter informações ou ícones relevantes.

Quebrar o padrão F – por exemplo, colocar informações importantes no canto inferior direito – tornará mais difícil encontrá-las.

estudos de rastreamento ocular em psicologia em design
Os mapas de calor de rastreamento ocular mostram o tempo que os participantes focaram em cada parte da página. Observe o padrão F para a atenção, e essa atenção diminui à medida que a pessoa se move para baixo na página.

Domine seu texto

De acordo com um estudo da Nielsen Norman de 45.237 visualizações de página, as pessoas lêem apenas cerca de 20% do texto em uma página. Pior, em sites com mais conteúdo, as pessoas dedicaram apenas cerca de 4 segundos extras para cada 100 palavras adicionais de texto.

Em um mundo onde as pessoas não lêem palavra por palavra, a Nielsen Norman emprega as seguintes diretrizes para texto escaneável .

  • Palavras- chave destacadas
  • Subtítulos significativos
  • Listas com marcadores
  • Uma ideia por parágrafo
  • O estilo de pirâmide invertida - comece com a conclusão
  • Metade da contagem de palavras (ou menos) da escrita convencional

web ux ruim por causa de muito texto em um site – neurociência em UX
A grande quantidade de texto neste site é difícil de absorver - o usuário pode sair imediatamente em vez de continuar lendo. O texto é uniforme sem negrito ou marcadores. Os títulos das seções são genéricos, dificultando a análise precisa sem leitura.

Trabalhar com Color Pop e Contraste

A organização e localização do texto não são os únicos fatores importantes no design. Teoria das cores, pesos e contraste podem ser usados ​​para direcionar a atenção do usuário.

A equipe de design do cockpit da NASA usa luminância - ou o brilho percebido de um design - para ajudar a gerenciar a atenção do piloto em uma área repleta de informações concorrentes. A equipe de design do cockpit usa cor e contraste para dar destaque visual aos elementos mais importantes.

O design do cockpit da nasa usa psicologia do design e teoria das cores

Luminância e contraste podem ser usados ​​em todo o seu produto para destacar ou minimizar informações específicas, mas é mais frequentemente referenciado no design de botão ou call-to-action. Como você pode ver nos exemplos de botões vermelhos abaixo, embora o botão no canto superior esquerdo seja o mais saturado, ele “parece” o mais brilhante porque o contraste é o mais alto.

teste de contraste de botão da web para web ux

Contraste e luminância são apenas um primeiro passo. A teoria das cores sugere equilibrar as cores do seu produto usando a cor dominante 60% das vezes, secundária 30% e acento 10%. Esse colapso é consistente com a neurociência por trás do que chama a atenção. Como a cor de destaque é menos usada, chama mais a atenção.

teste de contraste de cores web ux para psicologia do design

Assim como o uso de cores brilhantes pode chamar a atenção, o uso de cores mais suaves pode ajudar o usuário a determinar quais informações são secundárias ou menos importantes. Por exemplo, a maioria dos sites usa áreas de rodapé com uma cor mais neutra para mostrar a separação do restante das informações da página.

Quaisquer recursos ou informações que os designers despriorizem ajudam o usuário a se concentrar diretamente nas interações ou informações mais importantes.

alaska airlines website footer psicologia de cores e a neurociência do UX
A maioria dos sites usa cores suaves na parte inferior para denotar navegação ou material de referência. As cores mais brilhantes no centro sinalizam ao usuário que são as informações mais importantes.

Dica #4 da Psicologia do Design: Verificação do intestino

Felizmente, você não precisa de milhares de dólares em software de rastreamento ocular ou eletroencefalograma para saber se um projeto está funcionando.

Os testes de 5 segundos são uma ferramenta poderosa para determinar se seus projetos são ou não instantaneamente compreensíveis.

Em um teste de 5 segundos, o participante visualiza um site ou aplicativo por 5 segundos e, em seguida, responde a perguntas sobre o assunto e o design. Incapaz de se referir à imagem, o participante dá suas “impressões” – o que os participantes presumiram ser o propósito e a função do produto, e o que eles fariam ou onde procurariam os próximos passos.

Seu produto pode ter todas as funcionalidades que seu usuário deseja, mas se o cérebro preguiçoso e amante de padrões não puder entender isso instantaneamente, ele seguirá em frente .

Designers como “leitores de mentes”

À medida que aprendemos mais sobre a psicologia do design, o cérebro e a percepção, as normas de design continuarão a mudar em todo o setor. O fio condutor são os dados – à medida que os métodos para o estudo da neurociência e da cognição melhoram, o tipo e a qualidade dos dados disponíveis para o design de UX também melhorarão.

Um ótimo design de experiência do usuário não é mágico, é ciência. Neurociência.

Este artigo foi escrito em colaboração com a pesquisadora de UX Caitria O'Neill , anteriormente no Facebook, atualmente no Airbnb, e bolsista da d.school de Stanford .

• • •

Leia mais no Blog Toptal Design:

  • eCommerce UX – Uma visão geral das melhores práticas (com infográfico)
  • A Importância do Design Centrado no Homem no Design de Produto
  • Os melhores portfólios de UX Designer – Estudos de caso e exemplos inspiradores
  • Princípios heurísticos para interfaces móveis
  • Design Antecipatório: Como criar experiências de usuário mágicas