Leyes de UX
Un conjunto de trabajo de 30 principios sobre cómo las personas ven, recuerdan, deciden y actúan — cada uno traducido a decisiones que puedes tomar en una interfaz real. No son opiniones de estilo. Provienen de la investigación en percepción y cognición, y se mantienen a través de plataformas, épocas y tendencias visuales.
Usa esta habilidad para diseñar nuevas interfaces de usuario, diagnosticar por qué una pantalla existente se siente incorrecta, o respaldar una decisión de diseño con una razón en lugar de una preferencia.
Cómo realizar una revisión UX
- Nombra el síntoma. "Demasiados botones", "se siente lento", "la gente abandona el formulario", "nadie nota el CTA". Los síntomas se corresponden con principios; el índice a continuación está organizado de esa manera.
- Toma los 1 a 3 principios relevantes y lee su entrada completa en
reference/laws.md. Lee el mecanismo y las trampas, no solo la definición — ahí es donde está el matiz útil. - Propón un cambio concreto a esta pantalla y cita el principio por nombre para que el razonamiento sea auditável. No "añade más contraste" — en lugar de eso: "Efecto Von Restorff: haz que la acción principal sea el único botón relleno para que deje de competir con los tres botones fantasma a su alrededor."
- Verifica conflictos. Los principios se contradicen entre sí. Más espacio en blanco (Prägnanz) frente a más opciones visibles (descubribilidad). La simplicidad (Occam) tiene un límite inferior (Tesler). Resuelve deliberadamente; no apliques una ley a ciegas.
- Verifica con usuarios cuando las apuestas sean reales. Estos principios predicen bien el comportamiento, pero no reemplazan las pruebas — el Efecto de Usabilidad Estética advierte específicamente que un diseño atractivo puede ocultar tareas rotas.
Los 30 principios, según lo que gobiernan
Percepción y agrupación visual (Gestalt) — cómo el ojo organiza una pantalla antes de que alguien lea una palabra.
- Ley de Proximidad · Ley de Región Común · Ley de Similitud · Ley de Conectividad Uniforme · Ley de Prägnanz · Efecto Von Restorff · Atención Selectiva · Efecto de Usabilidad Estética
Memoria y atención — lo que las personas pueden mantener en la cabeza mientras usan tu UI.
- Ley de Miller · Memoria de Trabajo · Agrupación (Chunking) · Efecto de Posición Serial · Carga Cognitiva · Efecto Zeigarnik · Regla del Pico-Final
Toma de decisiones — cómo se toman las elecciones y dónde se estancan.
- Ley de Hick · Sobrecarga de Opciones · Sesgo Cognitivo · Navaja de Occam · Principio de Pareto
Interacción y rendimiento — velocidad, esfuerzo, movimiento, impulso.
- Ley de Fitts · Umbral de Doherty · Flujo · Efecto de Gradiente de Objetivo · Ley de Parkinson
Expectativas y modelos mentales — lo que las personas asumen antes de llegar.
- Ley de Jakob · Modelo Mental · Paradoja del Usuario Activo · Ley de Postel · Ley de Tesler
Índice — recurre a ello cuando…
| Principio | Recurre a ello cuando… |
|---|---|
| Efecto de Usabilidad Estética | Necesitas saber por qué un diseño más bonito se prueba como "más fácil" — y por qué eso es una trampa. |
| Sobrecarga de Opciones | Demasiadas opciones hacen que la gente se congele, decida peor o se vaya. |
| Agrupación (Chunking) | Contenido denso o cadenas largas necesitan agrupación para ser escaneables. |
| Sesgo Cognitivo | Las decisiones se desvían de lo "racional" — marco, valores predeterminados, anclaje, confirmación. |
| Carga Cognitiva | La interfaz pide al cerebro que sostenga o procese demasiado a la vez. |
| Umbral de Doherty | Algo se siente lento; las respuestas superan ~400ms; necesitas estados de carga. |
| Ley de Fitts | Dimensionar y colocar botones, enlaces y objetivos táctiles. |
| Flujo | Mantener a las personas inmersas; igualar desafío con habilidad; eliminar fricción. |
| Efecto de Gradiente de Objetivo | Motivar la finalización; progreso que se acelera cerca del final. |
| Ley de Hick | El tiempo de decisión se dispara con el número y la complejidad de las opciones. |
| Ley de Jakob | Los usuarios esperan que tu UI se comporte como todas las demás que conocen. |
| Ley de Región Común | Agrupar con bordes, tarjetas, fondos, contenedores. |
| Ley de Proximidad | Agrupar solo por espaciado — lo que está cerca se lee como relacionado. |
| Ley de Prägnanz | Reduce la complejidad visual; el ojo prefiere la lectura más simple. |
| Ley de Similitud | El aspecto similar implica función similar (enlaces vs. texto plano). |
| Ley de Conectividad Uniforme | Une elementos relacionados con líneas, marcos, contenedores compartidos. |
| Modelo Mental | Coincide con cómo los usuarios ya creen que la cosa debería funcionar. |
| Ley de Miller | La memoria de trabajo es pequeña (~7±2 fragmentos); agrupa (chunk) — pero no limites en exceso. |
| Navaja de Occam | Elimina cada elemento que no está ganando su lugar. |
| Paradoja del Usuario Activo | La gente no leerá documentación; enseña en contexto, en línea, justo a tiempo. |
| Principio de Pareto | Enfócate en el ~20% de las funciones que impulsan ~80% del valor. |
| Ley de Parkinson | Las tareas se expanden hasta llenar el tiempo; acorta pasos, autocompleta, establece expectativas. |
| Regla del Pico-Final | Diseña el momento más intenso y el final a propósito. |
| Ley de Postel | Acepta entradas desordenadas generosamente; emite salidas limpias y predecibles. |
| Atención Selectiva | La gente ignora cosas; evita la ceguera al banner y la ceguera al cambio. |
| Efecto de Posición Serial | Los primeros y últimos elementos se recuerdan; coloca las acciones clave en los extremos. |
| Ley de Tesler | Algo de complejidad es irreducible — deja que el sistema la soporte, no el usuario. |
| Efecto Von Restorff | Haz que lo único importante sea visiblemente distinto (sin fingir un anuncio). |
| Memoria de Trabajo | Apoya el reconocimiento sobre el recuerdo; lleva el estado a través de las pantallas. |
| Efecto Zeigarnik | Las tareas incompletas tiran de la atención; usa señales de progreso para impulsar la finalización. |
Combinaciones predefinidas
- Despejar una pantalla recargada → Navaja de Occam + Ley de Proximidad + Ley de Miller.
- Eliminar un flujo que se siente lento → Umbral de Doherty + Efecto de Gradiente de Objetivo + UI optimista.
- Arreglar una nueva función confusa → Ley de Jakob + Modelo Mental + Paradoja del Usuario Activo.
- Rescatar un formulario abandonado → Ley de Hick + Ley de Parkinson + Ley de Postel + señales de progreso (Zeigarnik / Gradiente de Objetivo).
- Afinar una página de destino → Efecto Von Restorff + Atención Selectiva + Efecto de Posición Serial + Regla del Pico-Final.
Las entradas completas — mecanismo, cómo aplicar, trampas y un ejemplo real cada uno — están en reference/laws.md.