Leyes de UX: Fitts, Hick, Jakob, Miller y cómo usarlas al diseñar

En una revisión de diseño con un equipo de desarrollo, alguien propuso hacer más pequeño el botón de «Reservar» de la versión móvil para que cupiera el selector de idioma al lado. Sobre el papel no pasaba nada: el botón seguía ahí. Le pedí al equipo que lo probara con el pulgar, con una mano, mientras sujetaba una taza con la otra. Nadie volvió a proponerlo.

Ese tipo de decisiones, que parecen de gusto, tienen una explicación bastante precisa. Hace décadas que la psicología experimental y la investigación en interacción persona-ordenador estudian cuánto tardamos en alcanzar un objetivo, en elegir entre opciones o en recordar lo que acabamos de ver. Algunos de esos hallazgos se conocen hoy como «leyes de UX», y tenerlas en la cabeza ahorra muchas discusiones.

En esta guía repasamos las cuatro que más usamos en el estudio, con su origen real, lo que dicen y lo que no, y cómo se traducen en medidas y decisiones concretas.

01Qué son las leyes de UX (y qué no son)

Son principios con base empírica que describen tendencias del comportamiento humano al usar interfaces. Algunas vienen de experimentos de laboratorio de los años cincuenta, otras de la observación de miles de usuarios. El diseñador Jon Yablonski las popularizó en su web y su libro Laws of UX (2020), que es una buena puerta de entrada.

Conviene entenderlas como modelos y no como mandamientos. Describen lo que pasa en condiciones concretas; en el mundo real influyen el contexto, la motivación y el conocimiento previo. Por eso sirven para razonar y anticipar, y luego se confirman con usuarios.

02Ley de Fitts: tamaño y distancia

Lo que dice

Paul Fitts estudió en 1954 cuánto tardaban las personas en tocar objetivos físicos de distintos tamaños y a distintas distancias. Su conclusión, que se ha confirmado una y otra vez con ratones, pantallas táctiles y mandos, es que el tiempo para alcanzar un objetivo depende del cociente entre la distancia y el tamaño. En la formulación más usada hoy, la de Scott MacKenzie: T = a + b · log2(D/W + 1), donde D es la distancia y W el ancho del objetivo.

Traducido: duplicar el tamaño de un botón tiene un efecto parecido a reducir a la mitad la distancia hasta él. Y la relación es logarítmica, así que las mejoras son grandes al principio y se suavizan después. Pasar de un botón de 20 px a uno de 44 px se nota mucho; pasar de 60 a 80, bastante menos.

Cómo aplicarla

• →Botones principales grandes. En móvil, entre 44 y 48 px de alto. WCAG 2.2, en su criterio 2.5.8 de nivel AA, exige como mínimo 24 × 24 píxeles CSS para objetivos táctiles (o espacio libre equivalente alrededor), y su nivel AAA recomienda 44 × 44. Apple aconseja 44 × 44 puntos y Material Design, 48 × 48 dp.
• →Zonas clicables generosas. El área activa puede ser mayor que lo que se ve. Un enlace de texto pequeño puede tener un área táctil cómoda gracias al relleno.
• →Acciones relacionadas cerca. El botón de enviar, justo debajo del último campo del formulario, no al otro lado de la pantalla.
• →Acciones destructivas lejos. «Eliminar» separado de «Guardar», para que un dedo impreciso no cause un disgusto.
• →Los bordes de la pantalla son infinitos en el ordenador: el cursor se detiene en ellos, así que los objetivos pegados a un borde son muy fáciles de alcanzar. En móvil, en cambio, manda la zona del pulgar, que contamos en la guía de UX móvil.

Un ejemplo de CSS para ampliar el área táctil de un icono sin cambiar su aspecto:

.icon-button {
  position: relative;
  inline-size: 24px;
  block-size: 24px;
}
.icon-button::after {
  content: "";
  position: absolute;
  inset: -12px; /* área táctil de 48 × 48 px */
}
.btn-primary {
  min-block-size: 48px;
  padding-inline: 24px;
}

03Ley de Hick: opciones y decisión

Lo que dice

William Hick (1952) y Ray Hyman (1953) midieron el tiempo que tardaban las personas en reaccionar cuando tenían que elegir entre varios estímulos igual de probables. El tiempo crecía de forma logarítmica con el número de opciones: T = b · log2(n + 1). Cada opción adicional añade un poco menos que la anterior, pero suma.

La letra pequeña es importante. La ley describe decisiones sencillas entre opciones equiparables y desconocidas. Si el usuario ya sabe lo que busca y las opciones están ordenadas (alfabéticamente, por ejemplo), no las evalúa todas: escanea hasta encontrar la suya. Por eso un selector de 190 países funciona bien si está ordenado y tiene buscador.

Cómo aplicarla

• →Reducir opciones cuando hay que compararlas. Tres planes de precios se evalúan mejor que siete. La paradoja de la elección desarrolla esta idea desde la psicología del consumo.
• →Agrupar y jerarquizar. Un menú de doce elementos sin orden es lento; el mismo menú en tres grupos con título se recorre en un vistazo.
• →Destacar una opción recomendada. Marcar el plan más elegido o el servicio más pedido reduce la decisión a confirmar o descartar.
• →Revelar por pasos. Un formulario largo dividido en pasos lógicos presenta pocas decisiones a la vez. Es lo que se llama divulgación progresiva.
• →Ordenar lo predecible. Fechas en orden cronológico, países por orden alfabético, tallas de menor a mayor.

Clave: la ley de Hick no pide menos contenido; pide menos decisiones simultáneas entre cosas parecidas.

04Ley de Jakob: lo familiar se usa mejor

Lo que dice

Jakob Nielsen la formuló en el año 2000: los usuarios pasan la mayor parte de su tiempo en otras webs, así que esperan que la tuya funcione igual que las que ya conocen. No es una ley experimental como las anteriores, sino una observación de décadas de tests de usabilidad, con un fundamento claro: usamos modelos mentales aprendidos para movernos por lo nuevo.

Cómo aplicarla

Las convenciones que conviene respetar casi siempre:

1. 01Logo arriba a la izquierda, enlazando a la página de inicio.
2. 02Navegación principal arriba, o en un menú de hamburguesa reconocible en móvil.
3. 03Carrito y cuenta de usuario arriba a la derecha.
4. 04Enlaces de texto que parecen enlaces (color distinto, subrayado o ambos).
5. 05Datos de contacto, legales y redes en el pie de página.
6. 06Formularios de arriba abajo, con la etiqueta encima del campo.
7. 07Proceso de compra en pasos lineales: carrito, datos, envío, pago, confirmación.

La originalidad tiene mucho espacio en todo lo demás: en el tono, la fotografía, la tipografía, la composición, las transiciones. Lo que funciona es innovar en lo que se siente y ser convencional en lo que se usa.

Cuando toca cambiar algo que la gente ya conoce

En un rediseño, la ley de Jakob también se aplica a tu propia web: tus clientes habituales tienen un modelo mental de ella. Si mueves el acceso a clientes o cambias el nombre de una sección muy usada, conviene hacerlo de forma gradual, con avisos breves y manteniendo durante un tiempo los caminos antiguos (por ejemplo, redirecciones).

05Ley de Miller: memoria a corto plazo

Lo que dice (de verdad)

George Miller publicó en 1956 el artículo The Magical Number Seven, Plus or Minus Two, en el que observaba que la capacidad de la memoria a corto plazo rondaba los siete elementos. Investigaciones posteriores, como la revisión de Nelson Cowan (2001), sitúan el límite real más cerca de cuatro «bloques» de información. Lo que sí se mantiene es la idea central: retenemos pocas cosas a la vez, y las retenemos mejor si las agrupamos en bloques con sentido (chunking).

El malentendido más común

La ley de Miller se cita muchas veces para defender que un menú no debe tener más de siete elementos. No es eso lo que dice. Las opciones de un menú están a la vista; no hay que memorizarlas. Miller importa cuando el usuario tiene que recordar algo sin verlo: un código, un dato de un paso anterior, una instrucción que ya desapareció de la pantalla.

Cómo aplicarla

• →Agrupar números largos: un IBAN o un teléfono en bloques de cuatro o tres cifras se leen y se copian mucho mejor.
• →Mostrar en lugar de pedir que se recuerde: resúmenes visibles en procesos de varios pasos, el código de verificación visible mientras se escribe.
• →Instrucciones junto al campo: los requisitos de una contraseña visibles mientras se escribe, no solo antes.
• →Bloques de contenido con título: textos largos divididos en secciones cortas que se escanean.

Este principio conecta con un concepto más amplio, el de la carga cognitiva, que tratamos en su propia guía.

06Otras leyes que conviene conocer

Sin entrar a fondo, estas son otras que aparecen a menudo en nuestras revisiones:

• →Ley de Tesler (conservación de la complejidad). Larry Tesler sostenía que toda tarea tiene una complejidad que no desaparece; solo se decide quién la asume, el sistema o el usuario. Calcular el envío automáticamente en lugar de pedir al cliente que consulte una tabla es asumirla desde el diseño.
• →Umbral de Doherty. En un trabajo de 1982, Walter Doherty y Ahrvind Thadani, de IBM, observaron que la productividad crecía mucho cuando el sistema respondía en menos de unos 400 ms. Hoy Google usa un umbral de INP de 200 ms para considerar buena la respuesta de una página.
• →Efecto Von Restorff. Lo que es diferente se recuerda y se ve más. Lo desarrollamos en la guía sobre atención visual y saliencia.

07Ejemplo aplicado: una página de reservas

Ningún cambio era espectacular por separado. Juntos, hacían que reservar dejara de requerir atención.

08Principios que se sienten en el pulgar

Lo que más me gusta de estas leyes es que nos devuelven a lo esencial: diseñamos para cuerpos y mentes reales, con dedos que no son precisos, atención que se cansa y memoria que se llena enseguida. Tenerlas presentes es una forma de respeto hacia quien usa la web.

En SIMA las aplicamos en cada decisión de interfaz de nuestros proyectos de diseño web y experiencia digital, y las contrastamos siempre con personas reales. Si quieres que revisemos tu web o tu app con esta mirada, escríbenos y lo vemos.