¿Cómo aplicar la Ley de Fitts en UX?

¿Alguna vez te ha pasado que hay botones en algunas webs que son casi imposibles de pulsar, mientras que otros los usas casi sin darte cuenta? La verdad es que esto no es ninguna casualidad. Tiene mucho que ver con la Ley de Fitts, un principio con más de setenta años a sus espaldas pero que, a día de hoy, sigue siendo increíblemente útil.

Continúa leyendo y averigua con nosotros cómo puedes aplicar esta ley en tus diseños de experiencia de usuario.

¡Comenzamos!

¿Qué es la Ley de Fitts?

La Ley de Fitts viene a decir que el tiempo que tarda una persona en llegar a un objetivo en la pantalla depende de dos factores: el tamaño de ese objetivo y la distancia que tiene que recorrer para alcanzarlo. Dicho de un modo más sencillo: cuanto más grande sea un botón y más cerca esté de nuestro cursor o punto, más rápido podremos pulsarlo.

Esta regla tiene su historia. Paul Fitts, un psicólogo estadounidense, la propuso en 1954 después de varios experimentos sobre cómo nos movemos. Lo interesante es que sus estudios comenzaron mientras trabajaba para las Fuerzas Aéreas de EE. UU., donde se dio cuenta de que muchos accidentes de avión se debían a errores de los pilotos al usar los controles. Quién iba a decir que algo tan alejado del mundo digital acabaría siendo fundamental para entender cómo interactuamos con las pantallas.

La ciencia detrás de nuestros movimientos

La ciencia detrás de esto tiene hasta una fórmula, MT = a + b log₂(2D/W) donde MT es el tiempo de movimiento, D la distancia a recorrer y W el ancho del objetivo. Parece un lío, ¿verdad? Pero en el fondo es pura lógica.

Piensa en tu día a día navegando. ¿A qué te resulta más fácil hacer clic en un botón grande justo debajo del texto que acabas de leer que en un enlace diminuto perdido en una esquina? Pues eso es la Ley de Fitts en acción. Fitts demuestra que, al intentar movernos rápido hacia objetivos pequeños, la probabilidad de error aumenta. Esto pasa porque nuestro cerebro, sin que nos demos cuenta, siempre intenta encontrar un equilibrio entre ir deprisa y ser precisos.

Si estás interesado/a en el

Curso de Diseño Gráfico

Descarga gratis el índice del temario

Aplicaciones prácticas en Diseño UX

Ahora que ya sabes de qué va la Ley de Fitts, vamos a ver cómo se traduce esto en los elementos con los que interactuamos en una web o una aplicación.

Según esta ley, los botones y enlaces deben tener un tamaño que facilite las cosas. Por ejemplo, referencias como Apple recomiendan un tamaño mínimo de 44×44 píxeles (aproximadamente 6,9 mm) para los botones táctiles, y Google sube la apuesta a 48×48 píxeles (aproximadamente 9,0 mm). Ojo, no se trata de hacerlo todo gigante, sino de dar prioridad a lo más importante. El botón principal de compra, por ejemplo, tiene que destacar sobre uno secundario.

Es como el mando de la tele: el botón de encendido suele ser el más grande o, al menos, el más visible. No tendría sentido que fuera igual de pequeño que el de cambiar de canal. Se trata de guiar a la persona, de hacerle el camino más sencillo.

De hecho, hay estudios de usabilidad que demuestran que los botones de menos de 10 mm en dispositivos táctiles pueden provocar hasta un 50 % más de errores al pulsarlos. Este dato, por sí solo, ya deja claro lo mucho que influye el tamaño en una buena experiencia.

Curso de Diseño Gráfico

Descargar gratis el índice del programa

La distancia justa entre elementos relacionados

La distancia es igual de fundamental. En un formulario, el botón de «Enviar» debería estar cerca del último campo que rellenas, no en la otra punta de la pantalla. Esto ayuda a que todo sea más rápido y la experiencia mucho más fluida.

Piensa en un proceso de pago. Si acabas de introducir los datos de tu tarjeta y el botón de «Pagar ahora» está tres pantallas más abajo, tienes un problema. La gente se pierde, se impaciente y, al final, abandona el carrito. Y es una lástima, porque era un cliente que ya lo tenía decidido.

Si agrupas los elementos con lógica, el usuario no solo tarda menos, sino que no tiene que pararse a pensar qué tiene que hacer después. Por eso, si las acciones que están relacionadas están cerca, el cerebro las interpreta como parte de la misma tarea.

Aprovechar los bordes y las esquinas

Los bordes y las esquinas de la pantalla son zonas muy interesantes. Como el cursor no se puede salir de ahí, funcionan como un tope. Por eso Windows pone el menú de inicio abajo a la izquierda, o las ventanas se cierran arriba a la derecha. No es por casualidad.

Puedes lanzar el ratón hacia una esquina sin miedo a pasarte de largo. Es una zona segura. Usar estas áreas para colocar controles importantes es una jugada muy inteligente. Un botón de «Ayuda» o «Soporte» fijado en una esquina siempre estará más a mano que uno perdido dentro de un menú.

Esta idea, es una extensión natural de la Ley de Fitts. Y es la misma razón por la que macOS coloca su menú principal siempre pegado al borde superior de la pantalla.

Del ratón al pulgar: la ley en la era móvil

En los móviles, la ley se interpreta de otra manera. Nuestro dedo, sobre todo el pulgar, no es un cursor de alta precisión. Es más grande, más torpe y, además, se cansa. Y, por si fuera poco, nuestra propia mano a menudo tapa lo que estamos intentando tocar.

Zonas de alcance del pulgar

Sin duda, el pulgar es el rey de la interacción en el móvil, pero no llega a todas partes igual de fácil. La zona más cómoda suele ser la parte inferior y central de la pantalla, que es donde apoyamos el pulgar de forma natural. Por eso apps como Instagram o TikTok ponen acciones como «me gusta» o «compartir» justo ahí.

Y con los móviles cada vez más grandes, esto es todavía más importante:

• La esquina superior izquierda es casi una zona muerta para los diestros.
• Si pones ahí un menú hamburguesa, obliga a mucha gente a usar las dos manos.
• Las áreas centrales e inferiores reciben hasta tres veces más interacciones que las esquinas superiores.

Gestos intuitivos y navegación fluida

Los gestos también entran en juego. Deslizar para actualizar la página es mucho más natural que andar buscando un botón de recarga. Los gestos eliminan la necesidad de apuntar con precisión a un punto concreto.

Además, se sienten más modernos y ágiles. La gente los aprende rápido y los prefiere. De hecho, está comprobado que los gestos bien implementados pueden reducir hasta un 25 % el tiempo para completar tareas comunes si los comparamos con interfaces que solo usan botones.

El «swipe» o deslizamiento se ha convertido en uno de los más naturales. Lo usamos para todo, desde desbloquear el teléfono hasta archivar correos.

Ejemplos que demuestran que la Ley Fitts funciona

Menús desplegables y navegación

Los menús desplegables que están bien hechos se abren justo al lado de dónde has hecho clic. Imagina uno que se despliega hacia la izquierda cuando tú has pulsado en la derecha… sería un incordio, ¿no? Te obligaría a cruzar toda la pantalla con el cursor. En cambio, si se abre hacia abajo, justo debajo de donde tienes el puntero, el camino es mínimo.

Es una aplicación directa de la Ley de Fitts: reducir la distancia al objetivo. Puede parecer una tontería, pero estas pequeñas distancias se van acumulando. Al final del día, el usuario nota si una web es ágil o si le está haciendo perder el tiempo.

El menú de Gmail es un buen ejemplo. Cuando seleccionas varios correos, las acciones disponibles aparecen justo encima, lo que minimiza el desplazamiento.

Formularios pensados para conversión

Aquí conviene juntar los campos que tienen relación y poner los botones justo donde el usuario espera encontrarlos. Un error muy típico es alejar el botón de «Enviar». La gente termina de rellenar y se queda pensando… ¿y ahora qué? ¿Dónde está el botón?

Lo ideal es que el botón esté visible, justo al lado del último campo. Así, el usuario termina de escribir y pulsa casi sin pensar. Eso es fluidez. Amazon lo hace de maravilla en su proceso de compra, donde cada paso te lleva de forma natural al siguiente.

Hay estudios que indican que por cada segundo de más que un usuario tarda en encontrar el botón de envío, la tasa de abandono aumenta considerablemente. Este dato explica por qué las empresas se obsesionan tanto con la posición de sus llamadas a la acción.

Controles multimedia y aplicaciones que usamos a diario

Fíjate en Spotify: agrupa los controles de reproducción en el centro y hace que el botón de reproducción/pausa sea más grande que los demás. El control que más se usa es el más accesible. No quieres andar buscando el play cada dos por tres. Quieres que esté a mano, que sea fácil de encontrar y pulsar, incluso si vas corriendo o hay poca luz.

Es un diseño que piensa en cómo se usa la aplicación de verdad, no solo en que quede bonito. Netflix, YouTube y otras plataformas hacen lo mismo, colocando los controles principales en el centro.

Tres ideas para mejorar tu diseño UX

La teoría está muy bien pero como trasladamos la Ley Fitts a la práctica. A continuación, te damos varios consejos para mejorar tu diseño UX.

1. Analiza el comportamiento real con datos

Herramientas como los mapas de calor te muestran cosas que ni te imaginas. Te enseñan dónde hace clic la gente, por dónde se mueve o dónde se queda atascada. Son una radiografía de cómo usan tu web de verdad.

Puede que la gente haga clic en un sitio donde no hay nada, o que ignoran por completo ese botón que tanto te costó diseñar. La verdad es que los datos no mienten.

2. Ofrece una respuesta inmediata y clara.

Cuando alguien pulsa algo, necesita saber que la acción ha funcionado. Un simple cambio de color o una animación sutil es suficiente para decir «recibido». Si no hay respuesta, genera ansiedad: ¿Le habré dado bien? ¿Se habrá colgado? Y eso lleva a la gente a pulsar varias veces, provocando errores. Un pequeño feedback visual de seguridad y hace que la experiencia sea mucho más agradable.

3. Mantenga la estabilidad visual de la página.

Pocas cosas dan más rabia que ir a pulsar un botón y que todo se mueva en el último segundo por un anuncio. Las cosas tienen que estarse quietas. Si la interfaz baila mientras el usuario interactúa, es normal que falle, y la culpa no es suya.

Es típico de webs con publicidad mal puesta. Vas a hacer clic y, de repente, todo baja por un banner. Acabas pulsando el anuncio por error. Es una experiencia horrible que se puede evitar.

Una ley de 1954 más actual que nunca

Aunque tiene sus décadas, es evidente que la Ley Fitts está más vigente que nunca con los dispositivos táctiles, los relojes inteligentes y la realidad virtual. En un smartwatch, con tan poco espacio, los botones tienen que ser aún más grandes y estar mejores situados.

Y esto no es solo una cuestión de comodidad, es una cuestión de accesibilidad. Para alguien con temblor en las manos, un botón pequeño puede ser una barrera insuperable. Por lo tanto, la accesibilidad no es un extra; es una parte esencial de un buen diseño UX.

Conclusión y consejos formativos

Llegamos al final de nuestro recorrido por la Ley de Fitts. Como has podido comprobar no es solo teoría; es una guía fundamental para entender cómo nos relacionamos con la tecnología. Aplicarla bien consigue que las experiencias digitales sean más naturales y cómodas para el usuario. Al final, todo se reduce a ponernos en la piel de la persona que va a usar nuestro diseño.

Recuerda que cada píxel y cada milisegundo cuentan. La próxima vez que diseñes, pregúntate: ¿le estoy haciendo las cosas fáciles a quien usa esto? ¿O le estoy poniendo trabas sin darme cuenta? A veces, con un pequeño ajuste de tamaño o de posición, podemos convertir una experiencia frustrante en una fluida y agradable.

Por último, si de verdad quieres dominar estos principios y convertirte en un profesional, te recomendamos el Curso de Diseño Gráfico de Treintaycinco mm. Una formación que te permitirá profundizar no solo en leyes de usabilidad como la de Fitts, sino en todas las habilidades técnicas y creativas que el mercado laboral demanda hoy en día, ayudándote a construir un portafolio profesional desde el principio.