As Leis de UX
(lawsofux.com)- Uma coleção com mais de 30 princípios e padrões baseados em psicologia que designers devem considerar ao projetar interfaces de usuário sob a perspectiva de usabilidade do design e psicologia cognitiva
- Organizado por cognição e percepção, tomada de decisão, feedback e resposta, imersão e motivação, estruturação da informação, princípios da Gestalt, padrões de comportamento do usuário, princípios de projeto e gestão de tempo e tarefas
- Os detalhes de cada lei incluem a definição da lei, principais implicações, origem e links para leituras adicionais voltadas à aplicação prática
Cognição e percepção
1. Efeito de Usabilidade Estética (Aesthetic-Usability Effect)
Os usuários tendem a perceber designs esteticamente bonitos como mais fáceis de usar
- Um design visualmente atraente provoca uma resposta positiva no cérebro do usuário, fazendo com que ele acredite que funciona melhor do que sua usabilidade real
- Quando o design é bonito, os usuários se tornam mais tolerantes a pequenos problemas de usabilidade
- Por outro lado, há também o risco de que o apelo visual esconda problemas de usabilidade e os problemas não sejam detectados em testes de usabilidade
- Confirmado pela primeira vez em 1995 em um estudo do Hitachi Design Center, no qual Masaaki Kurosu e Kaori Kashimura testaram 26 variações de interface de ATM com 252 pessoas: a correlação entre apelo estético e facilidade de uso percebida era mais forte do que a correlação entre apelo estético e facilidade de uso real
2. Viés Cognitivo (Cognitive Bias)
Erros sistemáticos de pensamento que ocorrem no julgamento e afetam a percepção do mundo e a capacidade de tomar decisões
- Em vez de analisar todas as situações, os seres humanos economizam energia mental por meio de regras práticas baseadas em experiências passadas (heurísticas)
- Esses atalhos mentais permitem decisões rápidas, mas também influenciam o julgamento e o processo de decisão sem que a pessoa perceba
- Exemplo representativo: viés de confirmação (confirmation bias) — a tendência de preferir informações que sustentem crenças já existentes
- Amos Tversky e Daniel Kahneman introduziram o conceito de viés cognitivo em 1972, demonstrando por meio de experimentos reproduzíveis que o julgamento e a tomada de decisão humanos diferem da teoria da escolha racional
3. Carga Cognitiva (Cognitive Load)
A quantidade de recursos mentais necessária para compreender e interagir com uma interface
- Quando a quantidade de informação recebida supera o espaço mental disponível, a tarefa fica mais difícil, detalhes passam despercebidos e surge a sensação de sobrecarga
- Carga cognitiva intrínseca (intrinsic): esforço necessário para lembrar informações relacionadas ao objetivo e absorver novas informações
- Carga cognitiva extrínseca (extraneous): processamento mental que consome recursos sem ajudar na compreensão do conteúdo (como elementos de design desnecessários)
- John Sweller desenvolveu a teoria da carga cognitiva no fim dos anos 1980, expandindo a teoria do processamento da informação de George Miller e defendendo que é possível reduzir a carga cognitiva do aprendiz por meio do design instrucional
4. Atenção Seletiva (Selective Attention)
O processo de concentrar a atenção apenas em parte dos estímulos do ambiente, em geral nos estímulos relacionados ao objetivo
- Os usuários dedicam atenção seletiva apenas às informações relacionadas aos seus objetivos e ignoram o restante
- Ao projetar interfaces, é preciso tornar visualmente mais destacados os principais dados e ações para captar a atenção do usuário
- Elementos visuais desnecessários dispersam a atenção e atrapalham o alcance do objetivo
5. Memória de Trabalho (Working Memory)
O sistema cognitivo que mantém e manipula temporariamente as informações necessárias para concluir uma tarefa
- A capacidade da memória de trabalho é limitada; se a interface exigir informações além desse limite, a usabilidade piora
- Está intimamente relacionada à Lei de Miller, chunking e carga cognitiva
- No design, o essencial é minimizar a quantidade de informação que o usuário precisa lembrar de uma só vez
Tomada de decisão
6. Sobrecarga de Escolha (Choice Overload)
A tendência de se sentir sobrecarregado quando muitas opções são apresentadas, frequentemente usada como sinônimo de “paradoxo da escolha”
- Opções demais prejudicam a capacidade de decisão do usuário e também afetam negativamente a satisfação com a experiência como um todo
- Quando for necessário comparar, a sobrecarga pode ser reduzida oferecendo um recurso de comparação lado a lado (side-by-side comparison) entre itens relevantes
- Destacar produtos recomendados, busca e ferramentas de filtragem para reduzir previamente as opções é uma abordagem eficaz
- Alvin Toffler introduziu pela primeira vez o termo overchoice em seu livro de 1970, Future Shock
- Está intimamente relacionada à Lei de Hick
7. Lei de Hick (Hick's Law)
O tempo necessário para tomar uma decisão aumenta conforme a quantidade e a complexidade das opções
- Em situações em que o tempo de resposta é importante, é necessário minimizar as opções para reduzir o tempo de decisão
- Tarefas complexas devem ser divididas em etapas menores para reduzir a carga cognitiva
- Destaque opções recomendadas para orientar a escolha do usuário e aplique onboarding progressivo para novos usuários
- No entanto, é preciso ter cuidado, pois simplificar em excesso pode tornar tudo abstrato demais e acabar gerando confusão
- Página inicial do Google: garante simplicidade ao minimizar as decisões necessárias para a ação de pesquisar e remover outros conteúdos
- Onboarding progressivo do Slack: em vez de expor todos os recursos desde o início, ensina primeiro a função de mensagens por meio de um bot e depois apresenta recursos adicionais de forma gradual
- Formulada em 1952 a partir de estudos do psicólogo britânico William Edmund Hick e do psicólogo americano Ray Hyman sobre a relação entre número de estímulos e tempo de resposta
8. Modelo Mental (Mental Model)
Um modelo condensado baseado naquilo que acreditamos saber sobre como um sistema funciona
- Os usuários transferem para novos produtos as expectativas formadas por experiências anteriores
- Aproveitar os modelos mentais já existentes dos usuários permite construir uma experiência melhor, na qual eles podem focar na tarefa em si em vez de aprender um novo modelo
- Está diretamente ligado à Lei de Jakob
Feedback e resposta
9. Limiar de Doherty (Doherty Threshold)
A produtividade aumenta drasticamente quando computador e usuário interagem em uma velocidade em que nenhum precisa esperar pelo outro (abaixo de 400 ms)
- Forneça feedback do sistema em até 400 ms para manter a atenção do usuário e aumentar a produtividade
- É possível melhorar o tempo de resposta percebido e reduzir a sensação de espera usando desempenho percebido (perceived performance)
- Animações são um meio de manter o usuário visualmente engajado durante carregamentos/processamentos em segundo plano
- A barra de progresso (progress bar), independentemente da precisão, faz com que a espera se torne mais suportável
- Adicionar atrasos de forma intencional pode aumentar o valor percebido do processo e transmitir confiança (mesmo que o tempo real de processamento seja curto)
- Publicado em 1982 por Walter J. Doherty e Ahrvind J. Thadani no IBM Systems Journal: estabeleceu como requisito um tempo de resposta de até 400 ms, em vez do padrão anterior de 2 segundos
10. Lei de Fitts (Fitts's Law)
O tempo necessário para adquirir um alvo é proporcional à distância até ele e ao tamanho do alvo
- Os alvos de toque devem ser grandes o suficiente para que o usuário consiga selecioná-los com precisão
- É necessário garantir espaçamento suficiente entre os alvos de toque
- Ações rápidas e alvos pequenos causam altas taxas de erro devido ao trade-off entre velocidade e precisão
- A prática de tornar maiores os botões interativos em dispositivos móveis deriva dessa lei
- Em 1954, o psicólogo Paul Fitts estudou o sistema motor humano e comprovou que o tempo de movimento até um alvo é proporcional à distância e inversamente proporcional ao tamanho
Imersão e motivação
11. Flow
Um estado mental de foco energizado, imersão completa e prazer total durante a realização de uma atividade
- O flow ocorre quando a dificuldade da tarefa e o nível de habilidade do usuário estão em equilíbrio
- Tarefas difíceis demais geram frustração; tarefas fáceis demais geram tédio
- Fornecer feedback adequado para que o usuário saiba o que fez e o que foi alcançado é a chave para projetar experiências de flow
- Remova atritos desnecessários e otimize a responsividade do sistema para evitar que o usuário se desconecte da interface
- Em 1975, o psicólogo Mihály Csíkszentmihályi apresentou o conceito de “Flow”, amplamente citado em diversas áreas, como terapia ocupacional
12. Efeito de Gradiente de Meta (Goal-Gradient Effect)
Quanto mais perto de uma meta, maior a tendência de tentar alcançá-la
- À medida que os usuários se aproximam da conclusão de uma tarefa, eles a executam mais rapidamente
- Fornecer um estado de progresso artificial (por exemplo, um cartão de fidelidade já parcialmente preenchido) é eficaz para motivação
- Forneça um indicador de progresso claro para motivar o usuário a concluir a tarefa
- Hipótese proposta por Clark Hull em 1932: ratos correm progressivamente mais rápido quanto mais se aproximam da comida
- Caso de uso da Uber para gerenciar a percepção do tempo de espera
13. Efeito Zeigarnik (Zeigarnik Effect)
As pessoas se lembram melhor de tarefas incompletas ou interrompidas do que de tarefas concluídas
- Forneça significantes claros que indiquem a existência de conteúdo adicional para incentivar a exploração do conteúdo
- Oferecer um estado de progresso artificial em direção a um objetivo aumenta a motivação para concluir a tarefa
- Motive o usuário à conclusão por meio de uma indicação de progresso clara
- A psicóloga soviética Bluma Zeigarnik descobriu, em pesquisas sobre memória na década de 1920, que tarefas incompletas são mais fáceis de lembrar do que tarefas concluídas
Estruturação da informação
14. Chunking
Processo de decompor partes individuais de informação e depois agrupá-las em conjuntos significativos
- Com o chunking, os usuários podem escanear o conteúdo com facilidade, identificar rapidamente as informações alinhadas ao seu objetivo e processá-las
- Estruturar o conteúdo com grupos visualmente distintos e uma hierarquia clara está de acordo com a forma como os usuários avaliam e processam informações
- Agrupe o conteúdo em módulos independentes, aplique divisórias e forneça uma hierarquia para ajudar a compreender as relações subjacentes
- Termo originado do artigo de 1956 de George A. Miller, "The Magical Number Seven, Plus or Minus Two"
15. Lei de Miller (Miller's Law)
Uma pessoa comum consegue manter apenas 7 (±2) itens na memória de trabalho
- Não use o “número mágico 7” como justificativa para restrições de design desnecessárias
- Organize o conteúdo em chunks menores para ajudar os usuários a processar, entender e lembrar com mais facilidade
- A capacidade da memória de curto prazo varia de acordo com o conhecimento prévio do indivíduo e o contexto situacional
- Em 1956, George Miller argumentou que tanto a amplitude da memória imediata quanto o julgamento absoluto são limitados a cerca de 7 pedaços de informação
16. Efeito de posição serial (Serial Position Effect)
Os usuários tendem a se lembrar melhor do primeiro e do último item de uma série
- É eficaz posicionar informações ou ações-chave no início e no fim de uma lista ou série
- Base prática para posicionar os itens mais importantes da navegação na extrema esquerda e na extrema direita
- Combinação do efeito de primazia (primacy effect) com o efeito de recência (recency effect)
Princípios da Gestalt
17. Lei da região comum (Law of Common Region)
Elementos que compartilham uma área com limites claros tendem a ser percebidos como um grupo
- É possível criar facilmente uma região comum adicionando uma borda ao redor de um elemento ou grupo de elementos
- Também é possível criar uma região comum definindo uma cor de fundo atrás dos elementos
- A região comum cria uma estrutura clara e ajuda a compreender de forma rápida e eficaz as relações entre elementos e seções
- Um dos princípios de agrupamento da psicologia da Gestalt (proximidade, similaridade, continuidade, fechamento, conexão)
18. Lei da proximidade (Law of Proximity)
Objetos próximos ou adjacentes tendem a ser agrupados juntos
- A proximidade é usada para estabelecer a relação com objetos vizinhos
- Elementos próximos são percebidos como compartilhando funções ou características semelhantes
- Página de resultados de busca do Google: o espaçamento entre cada resultado contribui para a escaneabilidade geral e agrupa cada resultado de forma eficaz como um cluster de informações relacionadas
- Princípio central de agrupamento da psicologia da Gestalt
19. Lei da pregnância / Lei de Prägnanz (Law of Prägnanz)
As pessoas percebem e interpretam imagens ambíguas ou complexas na forma mais simples possível
- Há uma tendência a preferir interpretações que minimizem o esforço cognitivo
- Fundamenta a importância de manter os elementos visuais simples e claros no design
- Também é chamada de "Lei da boa forma (Law of Good Figure)"
20. Lei da similaridade (Law of Similarity)
O olho humano tende a perceber elementos semelhantes como uma imagem, forma ou grupo completo, mesmo quando estão separados
- Elementos visualmente semelhantes (cor, forma, tamanho) são percebidos como tendo a mesma função ou significado
- Fundamenta o design visualmente consistente de botões de funções relacionadas na interface
21. Lei da conexão uniforme (Law of Uniform Connectedness)
Elementos visualmente conectados são percebidos como mais relacionados do que elementos não conectados
- Expresse a conexão entre elementos com linhas, cores, molduras ou outros atributos visuais
- Pode fornecer um sinal de agrupamento mais forte do que região comum ou proximidade
- Corresponde à 5ª categoria (Connectedness) dos princípios de agrupamento da Gestalt
Padrões de comportamento do usuário
22. Lei de Jakob (Jakob's Law)
Os usuários passam a maior parte do tempo em outros sites. Portanto, preferem que seu site funcione da mesma forma que os outros sites que já conhecem
- Os usuários transferem as expectativas formadas em produtos familiares para outros produtos de aparência semelhante
- Aproveitar modelos mentais existentes permite que os usuários se concentrem na própria tarefa em vez de aprender um novo modelo
- Ao introduzir mudanças, minimize a dissonância permitindo que os usuários continuem usando a versão anterior por um período limitado
- Caso do redesign do YouTube em 2017: mostrou previamente a nova UI em Material Design aos usuários de desktop, mas ofereceu a opção de voltar para a versão anterior para evitar incompatibilidades com o modelo mental
- Proposta por Jakob Nielsen (cofundador do Nielsen Norman Group)
23. Paradoxo do usuário ativo (Paradox of the Active User)
Os usuários começam a usar o software imediatamente sem ler o manual
- Os usuários preferem a ação imediata ao aprendizado e tendem a pular manuais ou tutoriais
- A interface deve ser projetada para ser intuitivamente utilizável mesmo sem instrução explícita
- É necessário oferecer aprendizado inline por meio de dicas contextuais, tooltips, divulgação progressiva (progressive disclosure) etc.
24. Regra do pico-fim (Peak-End Rule)
As pessoas avaliam uma experiência com base nas emoções sentidas no momento de pico e no momento final, e não pela soma ou média de todos os momentos da experiência
- Deve-se prestar atenção especial ao momento mais intenso e ao momento final na jornada do usuário
- Identifique os momentos em que o produto é mais útil, valioso ou divertido e projete-os para encantar o usuário
- As pessoas se lembram de experiências negativas com mais vividez do que de experiências positivas
- Mailchimp: ao concluir o envio do primeiro email, em vez de um modal simples de confirmação, usou ilustração, animação sutil e humor para suavizar um momento potencialmente estressante
- Uber: ao focar na percepção de tempo e espera das pessoas, conseguiu reduzir a taxa de cancelamento após a solicitação e evitar picos emocionais negativos
- Comprovado em estudo de 1993 de Kahneman, Fredrickson e outros: participantes escolheram repetir a versão mais longa de uma experiência desagradável quando ela terminava de forma ligeiramente melhor
Distinção visual e memória
25. Efeito Von Restorff / efeito de isolamento (Von Restorff Effect)
Quando há vários objetos semelhantes, aquele que é diferente dos demais tem maior probabilidade de ser lembrado
- Informações importantes ou ações principais devem ser visualmente distintas
- O uso excessivo de destaque visual pode fazer com que os elementos compitam entre si ou sejam confundidos com anúncios
- Ao transmitir contraste, não dependa apenas da cor; considere também usuários com daltonismo ou baixa visão
- Ao transmitir contraste com movimento, também é preciso considerar usuários com alta sensibilidade a movimento
- Descoberto em 1933 em pesquisa da psiquiatra e pediatra alemã Hedwig von Restorff: a memória de um item único e isolado em uma lista de itens semelhantes é aprimorada
26. Efeito de primazia e recência → efeito da posição serial (Serial Position Effect)
Os usuários tendem a lembrar melhor o primeiro e o último item de uma série
- (Consulte o item 14 — explicado em detalhes na seção "Estruturação da informação" acima)
Princípios de design
27. Lei de Tesler / lei da conservação da complexidade (Tesler's Law)
Em qualquer sistema, existe uma certa quantidade de complexidade que não pode ser reduzida
- Um bom design faz com que os desenvolvedores absorvam a maior parte da complexidade por meio de padrões inteligentes, algoritmos etc., simplificando a interação do usuário
- Se a UI exige muitas configurações ou etapas do usuário, a complexidade está sendo preservada no lugar errado (do lado do usuário)
- Um bom design não remove a complexidade, mas a processa internamente e a oculta
- Estabelecida por Larry Tesler (Apple Lisa e trabalhos iniciais de GUI) nos anos 1980
28. Lei de Postel / princípio da robustez (Postel's Law)
Seja liberal no que aceita e conservador no que envia
- Aceite com flexibilidade vários formatos e variações na entrada do usuário
- A saída do sistema deve ser fornecida em um formato consistente e previsível
- Jon Postel a formulou como princípio de robustez dos protocolos TCP/IP, servindo de base para a flexibilidade de entrada no design de UX
29. Navalha de Occam (Occam's Razor)
Entre hipóteses concorrentes que preveem igualmente bem, deve-se escolher a que faz menos suposições
- Em soluções de design, elimine a complexidade desnecessária e priorize a abordagem mais simples
- Antes de adicionar funções, elementos ou ornamentos visuais, verifique se isso é realmente necessário
- Interfaces simples impõem menor carga cognitiva aos usuários
30. Princípio de Pareto / regra 80/20 (Pareto Principle)
Cerca de 80% dos efeitos vêm de 20% das causas
- Reconheça que 80% do comportamento do usuário se concentra em 20% das funcionalidades
- Concentre os recursos de design nos 20% de funcionalidades mais usados
- Quando combinado com a Lei de Parkinson, ajuda a definir prioridades para as funcionalidades mais importantes
Gestão de tempo e tarefas
31. Lei de Parkinson (Parkinson's Law)
Qualquer tarefa se expande até consumir todo o tempo disponível
- É eficaz oferecer ao usuário um prazo claro para concluir a tarefa
- Se etapas desnecessárias forem adicionadas a um formulário ou processo, o tempo de conclusão aumenta de forma desproporcional
- Também se aplica ao próprio processo de design: é importante definir um escopo e um cronograma claros
1 comentários
Comentários do Hacker News
Volto a isso com frequência. O design em formato de pôster também é bom, e sempre me impressiona que muitas dessas “leis” venham de dados e pesquisas de longa data do Nielsen Norman Group
Há muitos conceitos de UX com nome próprio, como Jakob's Law e Norman Door, e a indústria de UX é bastante influenciada por esse pequeno grupo de observadores
Ainda assim, acho que a teoria moderna de UX/HCI também está ficando cada vez mais presa a essas regras suaves. Parece que estão generalizando demais regras observadas em padrões de uso de mídias não interativas, como a radiodifusão
A página da série anterior era boa, mas esta parece um pouco malfeita
Por exemplo, colocaram Cognitive Bias com uma definição de dicionário e publicaram como se fosse uma “lei”, mas isso nem é uma lei e, desse jeito, também não é um conceito prático
Em vez de parecer uma coletânea de regras que designers de UI ou desenvolvedores possam aplicar, passa mais a sensação de que escolheram alguns termos, colocaram definições e empacotaram tudo para vender pôsteres
Esse tipo de material é bom e, claro, também não são regras absolutas e imutáveis
Como não sou um designer tradicional, ter esse tipo de coletânea de best practices e leis ajuda bastante. Parece um ótimo ponto de partida para deixar a IA revisar de uma vez, por tela, regras que são difíceis de manter sempre na cabeça
Pessoalmente, do mesmo jeito que atalhos de formatação de código-fonte, acho que usar esse conjunto de leis como um fluxo rápido de sanity check ao criar software empresarial pode ser bem útil
Na prática, baixei capturas de tela do UX Laws e capturas de tela de dashboards, e pedi ao ChatGPT e ao Claude que revisassem com base nessas leis e criassem novos mockups incorporando as recomendações
Project 1: CMMS Dashboard For Maintenance
Dashboard old: https://imgur.com/a/R3wrMpr
Dashboard new (Claude): https://imgur.com/a/cYq4gE8
Project 2: aplicativo de previsão de surf do https://swellslots.com
Forecast old: https://imgur.com/a/W3daZrP
Forecast new: https://imgur.com/a/kNi2Nvg
O problema desse tipo de conjunto de leis conflitantes é que um bom designer julga intuitivamente de acordo com o contexto quais regras ignorar e quais aplicar
Fico curioso se você colocou no prompt detalhes específicos sobre objetivo ou papel, ou se deixou isso em aberto
A lei número 0 é: não faça reflow nem fique movendo o elemento de UI no qual eu estou prestes a clicar
Claro, a solução melhor seria desenvolvedores e designers terem capricho artesanal e orgulho nesses detalhes. Quando vejo as piores interfaces, quase sempre parece que foram testadas só em ambientes com backend ligado por gigabit, e por isso esse problema passou batido
Se uma empresa vista como símbolo de design erra até nisso, então há algo muito errado em algum lugar do setor
Acho que isso é um material excelente
Só que, ao olhar o item 2, Choice Overload, dizem que as pessoas ficam sobrecarregadas quando há opções demais, mas na própria página enterram as 30 “leis” todas em texto e metade do espaço visual é ocupada por 30 ilustrações irrelevantes
É bonito, mas não é uma estrutura boa para aprender isso
Com coisas como Doherty Threshold, quando a interação entre computador e usuário fica em menos de 400 ms, sem que um precise esperar pelo outro, a produtividade sobe bastante
Por isso prefiro muito mais modelos pequenos ao programar. A velocidade é alta o suficiente para manter o fluxo de trabalho em tempo real
Aí você acaba dividindo o trabalho em partes menores e validando o tempo todo, então eu fico envolvido de forma ativa e meu modelo mental também não se perde
Uma vez testei 3 mudanças simples de código com um modelo grande e um pequeno, e ambos tiveram sucesso. Só que o modelo grande foi 3 vezes mais lento e custou 10 vezes mais
Desde então, meu critério de Best Model deixou de ser o número 1 em benchmark e passou a ser o menor, mais rápido e mais barato modelo que entrega o trabalho real com estabilidade
Seria bom incluir também estabilidade. Não se deve ficar mudando só por mudar ou para seguir a moda do momento
Não se deve usar ícones sem sentido
Em vez de esconder a informação em forma de árvore e fazer o usuário abrir caixinhas uma por uma, é melhor mostrar em um fluxo linear
Também não se deve apresentar opinião como se fosse fato
Ao redesenhar uma grande plataforma de e-commerce da Ásia, usei várias das leis daqui na estratégia real de UX
Obrigado por compartilhar. Trabalho como full stack há quase 10 anos e só agora estou me aprofundando mais em UI; em UX ainda estou num nível bem superficial
Mudando um pouco de assunto, queria saber se existe algum material que organize padrões de UI comuns em mobile ou web apps. Por exemplo, hamburger menu, toast notification e coisas assim
Estou procurando um site que seja sistemático, tenha escopo amplo e até exemplos visuais
Na época, os smartphones ainda estavam no começo, então havia pouco foco em mobile, mas a edição mais recente parece cobrir bastante isso também
https://www.oreilly.com/library/view/designing-interfaces-3rd/9781492051954/