Las leyes de UX
(lawsofux.com)- Una colección de más de 30 principios y patrones basados en psicología que los diseñadores deben considerar al diseñar interfaces de usuario desde la perspectiva de la usabilidad del diseño y la psicología cognitiva
- Organizado por categorías: cognición y percepción, toma de decisiones, retroalimentación y respuesta, inmersión y motivación, estructuración de la información, principios de la Gestalt, patrones de comportamiento del usuario, principios de diseño, y gestión del tiempo y de tareas
- En el detalle de cada ley se incluyen la definición, implicaciones clave, origen y enlaces recomendados para profundizar y aplicarlo en la práctica
Cognición y percepción
1. Efecto de usabilidad estética (Aesthetic-Usability Effect)
Los usuarios tienden a percibir los diseños estéticamente atractivos como más fáciles de usar
- Un diseño visualmente atractivo provoca una respuesta positiva en el cerebro del usuario, haciendo que crea que funciona mejor de lo que realmente indica su usabilidad
- Si el diseño es bello, los usuarios se vuelven más tolerantes con problemas menores de usabilidad
- Por otro lado, también existe el riesgo de que el atractivo visual oculte problemas de usabilidad y estos no se detecten en pruebas de usabilidad
- Se confirmó por primera vez en 1995 en un estudio del Hitachi Design Center, donde Masaaki Kurosu y Kaori Kashimura probaron 26 variaciones de interfaces de cajeros automáticos con 252 personas: la correlación entre el atractivo estético y la facilidad de uso percibida fue más fuerte que la correlación entre el atractivo estético y la facilidad de uso real
2. Sesgo cognitivo (Cognitive Bias)
Errores sistemáticos de pensamiento que ocurren al juzgar y que afectan la percepción del mundo y la capacidad de tomar decisiones
- En lugar de analizar cada situación por completo, los seres humanos ahorran energía mental usando reglas prácticas basadas en experiencias previas (heurísticas)
- Estos atajos mentales permiten decidir rápidamente, pero también influyen en el juicio y en la toma de decisiones sin que lo notemos
- Ejemplo representativo: sesgo de confirmación (confirmation bias), la tendencia a preferir información que respalde creencias previas
- Amos Tversky y Daniel Kahneman introdujeron el concepto de sesgo cognitivo en 1972 y demostraron mediante experimentos reproducibles que el juicio y la toma de decisiones humanas difieren de la teoría de la elección racional
3. Carga cognitiva (Cognitive Load)
La cantidad de recursos mentales necesarios para comprender e interactuar con una interfaz
- Cuando la cantidad de información entrante supera el espacio mental disponible, la tarea se vuelve más difícil, se pierden detalles y aparece la sensación de agobio
- Carga cognitiva intrínseca (intrinsic): esfuerzo necesario para recordar información relacionada con el objetivo y asimilar nueva información
- Carga cognitiva extrínseca (extraneous): procesamiento mental que consume recursos sin ayudar a comprender el contenido (por ejemplo, elementos de diseño innecesarios)
- John Sweller desarrolló la teoría de la carga cognitiva a finales de la década de 1980, ampliando la teoría del procesamiento de la información de George Miller para sostener que el diseño instruccional puede reducir la carga cognitiva del aprendiz
4. Atención selectiva (Selective Attention)
Proceso de concentrar la atención solo en una parte de los estímulos del entorno, principalmente en aquellos relacionados con el objetivo
- Los usuarios prestan atención selectiva solo a la información relacionada con sus objetivos e ignoran el resto
- Al diseñar una interfaz, la información y las acciones clave deben hacerse visualmente prominentes para captar la atención del usuario
- Los elementos visuales innecesarios dispersan la atención y dificultan alcanzar el objetivo
5. Memoria de trabajo (Working Memory)
Sistema cognitivo que retiene y manipula temporalmente la información necesaria para completar una tarea
- La capacidad de la memoria de trabajo es limitada, y si una interfaz exige más información de la que puede manejar, la usabilidad se deteriora
- Está estrechamente relacionada con la ley de Miller, el chunking y la carga cognitiva
- La clave en el diseño es minimizar la cantidad de información que el usuario debe recordar al mismo tiempo
Toma de decisiones
6. Sobrecarga de elección (Choice Overload)
Tendencia a sentirse abrumado cuando se presentan demasiadas opciones; a veces se usa como sinónimo de la “paradoja de la elección”
- Demasiadas opciones perjudican la capacidad de decisión del usuario y también afectan negativamente su satisfacción con la experiencia general
- Cuando hace falta comparar, ofrecer una función de comparación lado a lado (side-by-side comparison) puede aliviar la sobrecarga
- También es efectivo reducir de forma anticipada las opciones mediante productos recomendados destacados, herramientas de búsqueda y filtros
- Alvin Toffler introdujo por primera vez el término overchoice en su libro de 1970 Future Shock
- Está estrechamente relacionada con la ley de Hick
7. Ley de Hick (Hick's Law)
El tiempo necesario para tomar una decisión aumenta según la cantidad y la complejidad de las opciones
- En situaciones donde el tiempo de respuesta es importante, es necesario minimizar las opciones para reducir el tiempo de decisión
- Las tareas complejas deben dividirse en pasos más pequeños para reducir la carga cognitiva
- Destacar opciones recomendadas ayuda a orientar la elección del usuario, y para usuarios nuevos conviene aplicar onboarding progresivo
- Sin embargo, si se simplifica en exceso, puede volverse demasiado abstracto y generar más confusión, por lo que hay que tener cuidado
- Página principal de Google: logra simplicidad al minimizar las decisiones necesarias para realizar una búsqueda y eliminar otros contenidos
- Onboarding progresivo de Slack: en lugar de mostrar todas las funciones desde el inicio, primero enseña la mensajería a través de un bot y luego presenta gradualmente funciones adicionales
- Fue formulada en 1952 por el psicólogo británico William Edmund Hick y el psicólogo estadounidense Ray Hyman al estudiar la relación entre la cantidad de estímulos y el tiempo de respuesta
8. Modelo mental (Mental Model)
Modelo condensado basado en lo que creemos saber sobre cómo funciona un sistema
- Los usuarios trasladan a un producto nuevo las expectativas formadas a partir de experiencias previas
- Aprovechar los modelos mentales existentes del usuario permite construir experiencias superiores en las que pueda centrarse en la tarea en sí en lugar de aprender un modelo nuevo
- Está directamente conectada con la ley de Jakob
Retroalimentación y respuesta
9. Umbral de Doherty (Doherty Threshold)
Si la computadora y el usuario interactúan a una velocidad en la que no tengan que esperarse mutuamente (menos de 400 ms), la productividad aumenta drásticamente
- Proporcionar retroalimentación del sistema dentro de 400 ms ayuda a mantener la atención del usuario y mejora la productividad
- Se puede aprovechar el rendimiento percibido (perceived performance) para mejorar el tiempo de respuesta y reducir la percepción de espera
- Las animaciones son un recurso para mantener al usuario visualmente inmerso mientras ocurre la carga o el procesamiento en segundo plano
- Las barras de progreso (progress bar) hacen que la espera sea más tolerable aunque no sean precisas
- Agregar retrasos de forma intencional puede aumentar el valor percibido del proceso y transmitir confianza (incluso si el tiempo real de procesamiento es corto)
- En 1982, Walter J. Doherty y Ahrvind J. Thadani publicaron en IBM Systems Journal que el tiempo de respuesta debía establecerse en menos de 400 ms en lugar del estándar previo de 2 segundos
10. Ley de Fitts (Fitts's Law)
El tiempo que toma adquirir un objetivo es proporcional a la distancia hasta él y al tamaño del objetivo
- Los objetivos táctiles deben ser lo suficientemente grandes para que el usuario pueda seleccionarlos con precisión
- Es necesario asegurar suficiente espacio entre objetivos táctiles
- Las acciones rápidas y los objetivos pequeños provocan altas tasas de error debido al trade-off entre velocidad y precisión
- La práctica de hacer grandes los botones interactivos en dispositivos móviles proviene de esta ley
- En 1954, el psicólogo Paul Fitts demostró al estudiar el sistema motor humano que el tiempo de movimiento hacia un objetivo es proporcional a la distancia e inversamente proporcional al tamaño
Inmersión y motivación
11. Flujo (Flow)
Estado mental de concentración enérgica, inmersión total y disfrute completo al realizar una actividad
- El estado de flujo ocurre cuando la dificultad de la tarea y el nivel de habilidad del usuario están en equilibrio
- Las tareas demasiado difíciles generan frustración, y las demasiado fáciles producen aburrimiento
- Una parte clave del diseño para el flujo es ofrecer retroalimentación adecuada para que el usuario sepa qué acción realizó y qué logró
- Eliminar fricciones innecesarias y optimizar la capacidad de respuesta del sistema ayuda a evitar la desconexión con la interfaz
- En 1975, el psicólogo Mihály Csíkszentmihályi presentó el concepto de “Flow”, ampliamente citado en diversos campos como la terapia ocupacional
12. Efecto de gradiente de meta (Goal-Gradient Effect)
La tendencia a aumentar el esfuerzo por alcanzar una meta a medida que uno se acerca a ella
- A medida que los usuarios se acercan a completar una tarea, la realizan más rápido
- Proporcionar un estado de progreso artificial (por ejemplo, una tarjeta de sellos ya parcialmente llena) es eficaz para motivar
- Proporcionar un indicador de progreso claro motiva a los usuarios a completar la tarea
- Hipótesis propuesta por Clark Hull en 1932: las ratas corren progresivamente más rápido a medida que se acercan al alimento
- Caso de uso de Uber para gestionar la percepción del tiempo de espera
13. Efecto Zeigarnik (Zeigarnik Effect)
Las personas recuerdan mejor las tareas incompletas o interrumpidas que las tareas terminadas
- Proporcionar significantes claros que indiquen la existencia de contenido adicional para fomentar su exploración
- Ofrecer un estado de progreso artificial hacia una meta aumenta la motivación para completar la tarea
- Motivar al usuario a completar mediante una indicación de progreso clara
- La psicóloga soviética Bluma Zeigarnik descubrió en investigaciones sobre la memoria en la década de 1920 que las tareas incompletas son más fáciles de recordar que las completadas
Estructuración de la información
14. Chunking
Proceso de descomponer piezas individuales de información y luego agruparlas en conjuntos significativos
- Mediante el chunking, los usuarios pueden escanear fácilmente el contenido e identificar y procesar rápidamente la información relevante para su objetivo
- Estructurar el contenido con grupos visualmente diferenciados y una jerarquía clara se ajusta a la forma en que los usuarios evalúan y procesan la información
- Agrupar el contenido en módulos independientes, aplicar separadores y proporcionar una jerarquía ayuda a comprender las relaciones subyacentes
- Término derivado del artículo de George A. Miller de 1956, "The Magical Number Seven, Plus or Minus Two"
15. Ley de Miller (Miller's Law)
Una persona promedio solo puede mantener 7 (±2) elementos en la memoria de trabajo
- No usar el "número mágico 7" como justificación de restricciones de diseño innecesarias
- Organizar el contenido en chunks más pequeños para ayudar a que los usuarios puedan procesarlo, comprenderlo y recordarlo con mayor facilidad
- La capacidad de la memoria a corto plazo varía según el conocimiento previo del individuo y el contexto situacional
- En 1956, George Miller sostuvo que tanto el alcance de la memoria inmediata como el juicio absoluto están limitados a aproximadamente 7 piezas de información
16. Efecto de posición serial (Serial Position Effect)
Los usuarios tienden a recordar mejor el primer y el último elemento de una serie
- Es eficaz colocar la información o acción clave al principio y al final de una lista o serie
- Fundamento práctico para ubicar los elementos más importantes de la navegación en el extremo izquierdo y el extremo derecho
- Combinación del efecto de primacía (primacy effect) y el efecto de recencia (recency effect)
Principios de la Gestalt
17. Ley de la región común (Law of Common Region)
Los elementos que comparten una región con límites claramente definidos tienden a percibirse como un grupo
- Al agregar un borde alrededor de un elemento o grupo de elementos, se puede crear fácilmente una región común
- También se puede crear una región común definiendo un color de fondo detrás de los elementos
- La región común crea una estructura clara que ayuda a comprender de forma rápida y efectiva las relaciones entre elementos y secciones
- Uno de los principios de agrupación de la psicología Gestalt (proximidad, similitud, continuidad, cierre, conexión)
18. Ley de proximidad (Law of Proximity)
Los objetos que están cerca unos de otros o son adyacentes tienden a agruparse
- La proximidad se usa para establecer una relación con objetos cercanos
- Los elementos cercanos se perciben como si compartieran funciones o características similares
- Página de resultados de búsqueda de Google: el espacio entre cada resultado contribuye a la facilidad de escaneo general y agrupa eficazmente cada resultado como un clúster de información relacionada
- Principio central de agrupación en la psicología Gestalt
19. Ley de Prägnanz / ley de la concisión (Law of Prägnanz)
Las personas perciben e interpretan imágenes ambiguas o complejas en la forma más simple posible
- Hay una tendencia a preferir interpretaciones que minimizan el esfuerzo cognitivo
- Sirve de fundamento para mantener los elementos visuales simples y claros en el diseño
- También se conoce como "Ley de la buena forma (Law of Good Figure)"
20. Ley de similitud (Law of Similarity)
El ojo humano tiende a percibir elementos similares, aunque estén separados, como una figura, forma o grupo completo
- Los elementos visualmente similares (color, forma, tamaño) se perciben como si tuvieran la misma función o significado
- Fundamenta el diseño visualmente consistente de botones con funciones relacionadas en una interfaz
21. Ley de conexión uniforme (Law of Uniform Connectedness)
Los elementos conectados visualmente se perciben como más relacionados que los que no lo están
- Expresar la conexión entre elementos mediante líneas, color, marcos u otros atributos visuales
- Puede proporcionar una señal de agrupación más fuerte que la región común o la proximidad
- Corresponde a la quinta categoría (Connectedness) de los principios de agrupación Gestalt
Patrones de comportamiento del usuario
22. Ley de Jakob (Jakob's Law)
Los usuarios pasan la mayor parte del tiempo en otros sitios. Por lo tanto, prefieren que tu sitio funcione de la misma manera que otros sitios que ya conocen
- Los usuarios transfieren las expectativas formadas en productos familiares a otros productos con una apariencia similar
- Aprovechar los modelos mentales existentes permite que los usuarios se concentren en la tarea en sí en lugar de aprender un modelo nuevo
- Al introducir cambios, se puede minimizar la disonancia permitiendo que los usuarios sigan usando la versión anterior durante un periodo limitado
- Caso del rediseño de YouTube en 2017: a los usuarios de escritorio se les mostró por adelantado la nueva UI de Material Design, pero se les ofreció la opción de volver a la versión anterior para evitar desajustes con su modelo mental
- Propuesta por Jakob Nielsen (cofundador de Nielsen Norman Group)
23. Paradoja del usuario activo (Paradox of the Active User)
Los usuarios empiezan a usar el software de inmediato sin leer el manual
- Los usuarios prefieren la acción inmediata antes que el aprendizaje y tienden a saltarse manuales o tutoriales
- La interfaz debe diseñarse para que sea intuitiva incluso sin instrucción explícita
- Se necesita soporte de aprendizaje en línea mediante pistas contextuales, tooltips, divulgación progresiva (progressive disclosure), etc.
24. Regla del pico y el final (Peak-End Rule)
Las personas juzgan una experiencia basándose no en la suma o el promedio de todos sus momentos, sino en las emociones que sintieron en el punto más intenso y en el momento final
- Se debe prestar especial atención al momento más intenso y al momento final del recorrido del usuario
- Identificar los momentos en que el producto resulta más útil, valioso o divertido y diseñarlos para deleitar al usuario
- Las personas recuerdan las experiencias negativas con más intensidad que las positivas
- Mailchimp: al completar el envío del primer correo, en lugar de un modal de confirmación simple, usa ilustraciones, animación sutil y humor para suavizar un momento potencialmente estresante
- Uber: al centrarse en la percepción del tiempo y la espera de las personas, logró reducir la tasa de cancelación después de la solicitud y evitar picos emocionales negativos
- Demostrado en un estudio de 1993 de Kahneman, Fredrickson y otros: los participantes eligieron repetir la versión más larga de una experiencia desagradable porque su final era ligeramente mejor
Distinción visual y memoria
25. Efecto Von Restorff / efecto de aislamiento (Von Restorff Effect)
Cuando hay varios objetos similares, es más probable que se recuerde mejor el que es diferente a los demás
- La información importante o la acción clave deben hacerse visualmente distintivas
- Si se abusa del énfasis visual, los elementos pueden competir entre sí o correr el riesgo de ser confundidos con publicidad
- Al transmitir contraste, no depender solo del color; considerar también a los usuarios con daltonismo o baja visión
- Al transmitir contraste con movimiento, también se debe considerar a los usuarios con alta sensibilidad al movimiento
- Descubierto en 1933 por la psiquiatra y pediatra alemana Hedwig von Restorff: en una lista de elementos similares, mejora el recuerdo de un elemento único y aislado
26. Efecto de primacía-recencia → efecto de posición serial (Serial Position Effect)
Los usuarios tienden a recordar mejor el primer y el último elemento de una serie
- (Ver el punto 14 — explicado en detalle arriba, en la sección “Estructuración de la información”)
Principios de diseño
27. Ley de Tesler / ley de conservación de la complejidad (Tesler's Law)
En cualquier sistema existe una cantidad fija de complejidad que no puede reducirse
- Un buen diseño absorbe la mayor parte de la complejidad mediante valores predeterminados inteligentes, algoritmos, etc. para simplificar la interacción del usuario
- Si la UI exige al usuario muchas configuraciones o pasos, la complejidad se está conservando en el lugar equivocado (del lado del usuario)
- Un buen diseño no elimina la complejidad, sino que la procesa internamente y la oculta
- Establecida por Larry Tesler (Apple Lisa y trabajo temprano en GUI) en la década de 1980
28. Ley de Postel / principio de robustez (Postel's Law)
Sé liberal en lo que aceptas y conservador en lo que envías
- Acepta con flexibilidad distintos formatos y variaciones en la entrada del usuario
- La salida del sistema debe ofrecerse en un formato consistente y predecible
- Jon Postel la formuló como principio de robustez para el protocolo TCP/IP, y en diseño UX sirve como base para la flexibilidad en la entrada
29. Navaja de Occam (Occam's Razor)
Entre hipótesis competidoras que predicen igual de bien, debe elegirse la que tenga menos supuestos
- En las soluciones de diseño, elimina la complejidad innecesaria y prioriza el enfoque más simple
- Antes de agregar funciones, elementos o adornos visuales, valida si realmente son necesarios
- Las interfaces simples imponen una menor carga cognitiva al usuario
30. Principio de Pareto / regla 80/20 (Pareto Principle)
Aproximadamente el 80% de los efectos proviene del 20% de las causas
- Reconoce que el 80% del comportamiento de los usuarios se concentra en el 20% de las funciones
- Concentra los recursos de diseño en el 20% de las funciones más utilizadas
- Combinado con la ley de Parkinson, ayuda a establecer prioridades para las funciones más importantes
Gestión del tiempo y de tareas
31. Ley de Parkinson (Parkinson's Law)
Todo trabajo se expande hasta consumir todo el tiempo disponible para completarlo
- Es efectivo ofrecer al usuario un marco de tiempo claro para completar una tarea
- Si se agregan pasos innecesarios a un formulario o proceso, el tiempo de finalización aumenta de forma desproporcionada
- También aplica al propio proceso de diseño: es importante definir con claridad el alcance y el calendario
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/