Las leyes de UX
(lawsofux.com)- Reúne leyes relacionadas con la usabilidad del diseño y la psicología cognitiva junto con definiciones breves, organizando en un solo lugar conceptos que influyen en la forma en que las personas entienden y usan las interfaces
- En el ámbito de la elección y la toma de decisiones, conceptos como Hick’s Law y Cognitive Load conectan directamente la cantidad de opciones, la complejidad y la cantidad de recursos mentales con el juicio del usuario y la velocidad de interacción
- En el ámbito de la percepción visual y la organización de la información, principios como Law of Proximity y Law of Similarity hacen que la cercanía, la similitud, la conectividad y los límites comunes hagan que los elementos se perciban como un solo grupo
- En el ámbito de la interacción y el comportamiento, se abordan criterios que afectan la eficiencia de manipulación y el tiempo para adquirir un objetivo, como la respuesta de menos de 400 ms de Doherty Threshold y la distancia y el tamaño de Fitts’s Law
- También incluye el ámbito de la memoria y la experiencia, presentando leyes como Peak-End Rule y Zeigarnik Effect, y ofrece ampliamente marcos de referencia usados repetidamente en todo el diseño de UX
Estructura de las leyes de UX
- Laws of UX organiza leyes relacionadas con la usabilidad del diseño y la psicología cognitiva, cada una con una breve definición
- Cada elemento enlaza a una página individual de la ley correspondiente, y está agrupado como conceptos que influyen en la forma en que se entienden y usan las interfaces
- Abarca ampliamente temas que se tratan con frecuencia en el diseño UX, como elección, memoria, atención, búsqueda de objetivos y agrupación visual
Principales leyes
-
Cognición y toma de decisiones
- Choice Overload: cuando se ofrecen muchas opciones, aumenta la sensación de abrumamiento, y a menudo se usa como sinónimo de paradox of choice
- Cognitive Bias: los errores sistemáticos de pensamiento que afectan la racionalidad del juicio influyen en la percepción del mundo y en la capacidad de tomar decisiones
- Cognitive Load: se refiere a la cantidad de recursos mentales necesarios para entender e interactuar con una interfaz
- Hick’s Law: el tiempo que toma decidir aumenta a medida que crecen la cantidad de opciones y la complejidad
- Mental Model: es un modelo interno condensado de lo que una persona cree saber sobre un sistema y su funcionamiento
- Miller’s Law: una persona promedio solo puede mantener alrededor de 7 ± 2 elementos en la memoria de trabajo
- Occam’s Razor: entre hipótesis que predicen al mismo nivel, se elige la que tiene menos supuestos
- Tesler’s Law: en cualquier sistema siempre queda una cantidad irreductible de complejidad
- Working Memory: es el sistema cognitivo que almacena y manipula temporalmente la información necesaria para realizar una tarea
-
Percepción visual y organización de la información
- Aesthetic-Usability Effect: las personas tienden a percibir los diseños más atractivos estéticamente como diseños más fáciles de usar
- Chunking: es el proceso de dividir piezas individuales de información y volver a agruparlas en unidades con significado
- Law of Common Region: los elementos que comparten límites claros se perciben como un mismo grupo
- Law of Proximity: los objetos cercanos entre sí se perciben como agrupados
- Law of Prägnanz: las imágenes ambiguas o complejas se interpretan en su forma más simple
- Law of Similarity: los elementos similares, aunque estén separados, tienden a percibirse como una sola figura, forma o grupo
- Law of Uniform Connectedness: los elementos conectados visualmente parecen más relacionados que los que no lo están
- Von Restorff Effect: entre objetos similares, el diferente es el que mejor se recuerda
-
Interacción y comportamiento
- Doherty Threshold: cuando la computadora y la persona interactúan a una velocidad de menos de 400 ms, no necesitan esperarse mutuamente y la productividad aumenta notablemente
- Fitts’s Law: el tiempo para alcanzar un objetivo es función de la distancia y el tamaño
- Flow: es un estado mental en el que una persona está completamente inmersa en una actividad y experimenta energía, concentración, involucramiento profundo y disfrute
- Goal-Gradient Effect: cuanto más cerca se está de una meta, mayor es la tendencia a avanzar hacia ella
- Jakob’s Law: como las personas pasan la mayor parte del tiempo en otros sitios, prefieren que funcione de una manera similar a los sitios que ya conocen
- Paradox of the Active User: las personas comienzan a usar el software de inmediato sin leer el manual
- Parkinson’s Law: cualquier tarea se expande hasta consumir todo el tiempo disponible
- Postel’s Law: hay que ser tolerante con las entradas que se reciben y conservador con las salidas que se envían
- Selective Attention: entre los múltiples estímulos del entorno, normalmente se concentra la atención solo en una parte relacionada con el objetivo
-
Memoria y experiencia
- Pareto Principle: en muchos casos, aproximadamente el 80 % de los resultados proviene del 20 % de las causas
- Peak-End Rule: una experiencia se juzga con base en las emociones del punto más intenso y del final, más que por la suma o el promedio de toda la experiencia
- Serial Position Effect: existe una tendencia a recordar mejor el primer y el último elemento de una serie
- Zeigarnik Effect: se recuerdan mejor las tareas incompletas o interrumpidas que las ya terminadas
1 comentarios
Comentarios de Hacker News
Vuelvo a esto seguido. El diseño tipo póster también está bueno, y siempre me sorprende que muchas de estas “leyes” salgan de datos e investigaciones acumuladas durante mucho tiempo por Nielsen Norman Group
También hay muchos conceptos de UX con nombre propio, como Jakob's Law o Norman Door, y la industria de UX recibe una gran influencia de este pequeño grupo de observadores
Dicho eso, creo que la teoría moderna de UX/HCI también se está viendo cada vez más limitada por este tipo de reglas blandas. En especial, parece que se generalizan demasiado reglas observadas en patrones de uso de medios no interactivos como la radiodifusión
La página de la serie anterior estaba buena, pero esta se ve un poco descuidada
Por ejemplo, tomar Cognitive Bias, dejarlo solo con una definición de diccionario y subirlo como si fuera una “ley” no hace que sea una ley, y en esa forma tampoco es un concepto práctico
Más que una colección de reglas que un diseñador de UI o un desarrollador pueda aplicar, da más la impresión de que juntaron algunos términos con definiciones para vender pósters
Este tipo de material está bien, y obviamente tampoco son reglas absolutas e inmutables
Como no soy un diseñador tradicional, me ayuda tener este tipo de recopilaciones de best practices o leyes. Como punto de partida para que una IA revise de una sola vez, pantalla por pantalla, reglas que es difícil mantener siempre en la cabeza, me parece ideal
En lo personal, así como un atajo para formatear código fuente, creo que un set de estas leyes puede ser bastante útil como flujo rápido de sanity check al crear software de negocio
De hecho, descargué capturas de UX Laws y capturas de dashboards, y le pedí a ChatGPT y Claude que los revisaran con esas leyes como criterio y que hicieran nuevos mockups aplicando las recomendaciones
Project 1: CMMS Dashboard For Maintenance
Dashboard old: https://imgur.com/a/R3wrMpr
Dashboard new (Claude): https://imgur.com/a/cYq4gE8
Project 2: app de pronóstico de surf de https://swellslots.com
Forecast old: https://imgur.com/a/W3daZrP
Forecast new: https://imgur.com/a/kNi2Nvg
El problema con este tipo de conjuntos de reglas que a veces se contradicen es que un buen diseñador juzga intuitivamente según el contexto qué regla ignorar y cuál aplicar
Me da curiosidad saber si en el prompt pusiste el objetivo o el rol de forma específica, o si lo dejaste abierto
La ley 0 debería ser no refluír ni mover de lugar el elemento de UI que estoy a punto de hacer clic
Claro, la mejor solución es que desarrolladores y diseñadores tengan oficio y orgullo por este tipo de detalles. Cuando ves las peores interfaces, muchas veces parece que solo las probaron en entornos con backend y conexión gigabit, así que nunca detectaron este problema
Si una empresa considerada símbolo del diseño falla incluso en eso básico, algo anda muy mal en la industria
Me parece un recurso excelente
Pero si ves el punto 2, Choice Overload, dice que demasiadas opciones abruman a la gente, y sin embargo la página entierra las 30 “leyes” completas en puro texto, mientras la mitad del espacio visual está ocupada por 30 ilustraciones irrelevantes
Se ve bonito, pero no es una estructura adecuada para aprender
Con Doherty Threshold, cuando la interacción entre la computadora y el usuario se mantiene por debajo de 400 ms para que ninguno tenga que esperar al otro, la productividad sube muchísimo
Por eso al programar prefiero mucho más los modelos pequeños. Son lo bastante rápidos como para que el flujo de trabajo conserve sensación de tiempo real
Entonces terminas dividiendo el trabajo en partes más pequeñas y validando continuamente, lo que hace que yo participe de forma activa y que mi modelo mental no se desalineé
Hace tiempo probé con tres cambios simples de código, asignándolos por separado a un modelo grande y a uno pequeño, y ambos los resolvieron
Pero el modelo grande fue 3 veces más lento y costó 10 veces más
Desde entonces, mi criterio de Best Model dejó de ser el número uno en benchmarks y pasó a ser el modelo más pequeño, rápido y barato que haga el trabajo real de forma confiable
También estaría bueno agregar estabilidad. No hay que cambiar las cosas solo por cambiar o por seguir una moda nueva
No deberían usarse íconos sin significado
Es mejor mostrar la información en un flujo lineal que esconderla como un árbol obligando al usuario a abrir caja por caja
Tampoco hay que presentar opiniones como si fueran hechos
Cuando rediseñé una gran plataforma asiática de e-commerce, usé varias de estas leyes en la estrategia de UX real
Gracias por compartirlo. Llevo casi 10 años trabajando como full stack, y recién ahora me estoy metiendo más a fondo en UI; en UX todavía apenas he rozado la superficie
Un poco aparte del tema, me pregunto si hay algún recurso que recopile patrones de UI comunes en apps móviles o webapps. Por ejemplo, cosas como hamburger menu o toast notification
Estoy buscando un sitio que esté organizado de forma sistemática, tenga bastante amplitud y además incluya ejemplos visuales
En ese entonces era la época inicial de los smartphones, así que tenía menos peso lo móvil, pero parece que la edición más reciente sí cubre bastante más ese tema
https://www.oreilly.com/library/view/designing-interfaces-3rd/9781492051954/