As leis de UX
(lawsofux.com)- Reúne leis relacionadas à usabilidade de design e à psicologia cognitiva com definições curtas, organizando em um só lugar conceitos que influenciam a forma como as pessoas entendem e usam interfaces
- Na área de escolha e tomada de decisão, conceitos como Hick’s Law e Cognitive Load mostram como o número de opções, a complexidade e a quantidade de recursos mentais se conectam diretamente ao julgamento do usuário e à velocidade de interação
- Na área de percepção visual e organização da informação, conceitos como Law of Proximity e Law of Similarity mostram como proximidade, similaridade, conexão e limites comuns fazem com que elementos sejam percebidos como um único grupo
- Na área de interação e comportamento, aborda critérios que influenciam a eficiência de manipulação e o tempo para atingir objetivos, como a resposta abaixo de 400ms do Doherty Threshold e a distância e tamanho da Fitts’s Law
- Inclui também a área de memória e experiência, apresentando leis como Peak-End Rule e Zeigarnik Effect, oferecendo de forma ampla estruturas de avaliação usadas repetidamente em todo o design de UX
Estrutura das leis de UX
- Laws of UX organiza leis relacionadas à usabilidade de design e à psicologia cognitiva, cada uma com uma definição curta
- Cada item leva a uma página individual da respectiva lei e está agrupado por conceitos que influenciam a forma como as pessoas entendem e usam interfaces
- Abrange amplamente temas recorrentes no design de UX, como escolha, memória, atenção, busca de objetivos e agrupamento visual
Principais leis
-
Cognição e tomada de decisão
- Choice Overload: quando muitas opções são apresentadas, a sensação de sobrecarga aumenta, e o termo costuma ser usado com sentido semelhante ao paradoxo da escolha
- Cognitive Bias: erros sistemáticos de pensamento que afetam a racionalidade do julgamento influenciam a percepção do mundo e a capacidade de tomar decisões
- Cognitive Load: refere-se à quantidade de recursos mentais necessária para entender e interagir com uma interface
- Hick’s Law: o tempo necessário para tomar uma decisão aumenta conforme crescem o número de opções e a complexidade
- Mental Model: um modelo interno condensado do que se acredita saber sobre um sistema e seu funcionamento
- Miller’s Law: uma pessoa média consegue manter apenas cerca de 7 ± 2 itens na memória de trabalho
- Occam’s Razor: entre hipóteses com o mesmo nível de poder preditivo, escolhe-se a que tem menos suposições
- Tesler’s Law: em qualquer sistema, sempre resta uma quantidade irredutível de complexidade
- Working Memory: um sistema cognitivo que armazena e manipula temporariamente as informações necessárias para executar tarefas
-
Percepção visual e organização da informação
- Aesthetic-Usability Effect: usuários tendem a perceber designs visualmente mais atraentes como mais fáceis de usar
- Chunking: processo de dividir pedaços de informação e reorganizá-los em unidades significativas
- Law of Common Region: elementos que compartilham limites claros são percebidos como o mesmo grupo
- Law of Proximity: objetos próximos uns dos outros são percebidos como agrupados
- Law of Prägnanz: imagens ambíguas ou complexas são interpretadas em sua forma mais simples
- Law of Similarity: elementos semelhantes, mesmo separados, tendem a ser percebidos como uma única figura, forma ou grupo
- Law of Uniform Connectedness: elementos visualmente conectados parecem mais relacionados do que elementos não conectados
- Von Restorff Effect: entre objetos semelhantes, o diferente é o mais facilmente lembrado
-
Interação e comportamento
- Doherty Threshold: quando computador e usuário interagem em menos de 400ms, nenhum dos dois precisa esperar, aumentando bastante a produtividade
- Fitts’s Law: o tempo para atingir um alvo é uma função da distância e do tamanho
- Flow: estado mental de imersão total em uma atividade, com energia, foco, envolvimento profundo e prazer
- Goal-Gradient Effect: quanto mais perto se está de um objetivo, maior a tendência de avançar em direção a ele
- Jakob’s Law: como as pessoas passam a maior parte do tempo em outros sites, preferem que um site funcione de forma parecida com os que já conhecem
- Paradox of the Active User: usuários começam a usar o software imediatamente, sem ler o manual
- Parkinson’s Law: qualquer tarefa se expande até consumir todo o tempo disponível
- Postel’s Law: seja liberal ao aceitar entradas e conservador ao enviar saídas
- Selective Attention: entre vários estímulos do ambiente, a atenção costuma se concentrar apenas em alguns relacionados ao objetivo
-
Memória e experiência
- Pareto Principle: em muitos eventos, cerca de 80% dos resultados vêm de 20% das causas
- Peak-End Rule: experiências são julgadas mais pelas emoções no pico e no final do que pela soma ou média do todo
- Serial Position Effect: há tendência de lembrar melhor do primeiro e do último item em uma sequência
- Zeigarnik Effect: tarefas inacabadas ou interrompidas são lembradas melhor do que tarefas concluídas
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/