Portada » Cómo aplicar la ley de Fitts en el diseño de interfaces web y móviles

Cómo aplicar la ley de Fitts en el diseño de interfaces web y móviles

by Donal Sandro Noblejas Huaman

Hola mi nombre es donal Sandro Noblejas Huamán de Lima Perú 🇵🇪 hoy vengo con otro artículo de UX y como siempre y en cada uno de ellos completamente solo y me agrada porque se aprende, y como siempre sin empresas, personas, familiares, ni el estado ni ningún tipo de ayuda cuidado con los estafadores solo en mis tiempos libres redactando jejeje, bueno ahí vamos.

Cómo hacer que los botones e íconos sean fáciles de presionar

El tiempo que se tarda en alcanzar el objetivo depende de la distancia hasta él y de su tamaño.

Pablo Fitts

A continuación se explica cómo describir la ley de Fitts en palabras sencillas:

Cuanto mayor sea la meta y más cerca esté de la persona, más rápido se alcanzará.

Y viceversa: cuanto más pequeña sea la meta y más lejos esté, más tiempo llevará alcanzarla.

Suena obvio. Pero para deducir una relación matemática, Paul Fitts realizó un experimento: el sujeto de prueba tenía que golpear con un bolígrafo objetivos ubicados en una superficie horizontal. El participante del experimento tocó rápidamente con el bolígrafo primero un objetivo y luego el segundo. El investigador cambió su tamaño, la distancia entre ellos y midió el tiempo. Como resultado, obtuve la siguiente fórmula:

image

Comprender la ley de Fitts

Movimiento. La Ley de Fitts se refiere a movimientos rápidos y dirigidos con precisión: hacer clic en un botón o en un enlace. Pero no describe movimientos continuos: desplazarse, dibujar.

El tamaño del objeto. La ley lo deja claro: cuanto más cerca esté el objetivo de la persona y cuanto mayor sea su tamaño, mejor. Todo es así, pero hay matices.

La relación entre el tamaño de la meta y el tiempo de su consecución no es directamente proporcional: después de cierto punto, con cada aumento de la meta, el tiempo para lograrla no se reducirá mucho. Esto sucede porque la ley de Fitts se describe mediante el logaritmo binario. Como puede ver en el gráfico anterior, no es lineal.

Si el botón pequeño es doble, será más cómodo presionarlo. Si se duplica el botón grande, la situación no cambiará mucho, pero en la interfaz dicho botón ocupará una cantidad excesiva de espacio.



La distancia desde el punto inicial hasta el objeto objetivo . El objeto de destino en la interfaz puede ser cualquier elemento interactivo: un botón o un enlace.

Pero hay que entender el punto de partida.

En la interfaz, el punto de partida se denomina “píxel primario”: esta es la posición del dispositivo de entrada en la pantalla, desde donde el usuario comienza a moverse hacia el objeto de destino. El dispositivo de entrada puede ser el cursor del mouse en el monitor de una computadora portátil o un dedo cuando se usa un teléfono inteligente.

Pero hay un problema: el píxel principal puede estar en cualquier lugar.

La forma más sencilla es con software para ordenadores personales: dondequiera que el usuario haga clic derecho en el dispositivo de entrada, aparecerá un menú contextual. Entonces, el píxel principal se encuentra en cualquier lugar de la interfaz del programa.



Los sitios web funcionan de manera diferente: la posición del píxel principal es variable. Es posible seguir el movimiento del cursor con JavaScript, pero resultará extraño mover los botones detrás de él.

En las interfaces móviles, vale la pena considerar que la distancia más cercana para la mayoría de los usuarios es donde es más fácil alcanzar con el pulgar derecho.

El píxel principal de una web o aplicación también se considera el lugar donde el usuario hizo clic para ir a una nueva página. Para que pueda predecir la posición del cursor o del dedo en la página siguiente. Esta característica se puede tener en cuenta al diseñar procesos que constan de varios pasos: navegar por las secciones del menú, completar un formulario, realizar un pedido y registrarse.

Cómo utilizar la ley de Fitts en el diseño de interfaces

1. Comience desde los tamaños mínimos que están disponibles para hacer clic.



De acuerdo con las WCAG (Pautas de accesibilidad al contenido web) para desarrolladores web, es cómodo para el usuario hacer clic en un objeto de destino que tenga al menos 44×44 píxeles CSS; se puede hacer una excepción para los enlaces de texto.

Para los dispositivos móviles, el MIT Touch Lab (laboratorio de medios del Instituto Tecnológico de Massachusetts) dedujo el tamaño óptimo de botón: 10×10 mm (≈37,8×37,8 px), ya que el área promedio de la punta de los dedos de una persona es de 10 a 14 mm.

Las directrices de Google y Apple sobre el tamaño mínimo de los elementos interactivos no han ido muy lejos:

Pautas de interfaz humana – 44×44 px

Diseño de materiales: 48×48 dp, es decir, 48×48 px si hablamos de densidad de píxeles mdpi.



2. Aumentar el área de clic

En algunos sitios, los usuarios intentan hacer clic varias veces en un texto o un botón en el que se puede hacer clic.

Esto sucede porque se puede hacer clic en el texto y el resto de los elementos no son interactivos. Es malo cuando puedes hacer clic solo en el texto, pero no en todo el botón, solo en la casilla de verificación, pero no en su texto.



Para expandir el área en la que se puede hacer clic, vale la pena hacer que se pueda hacer clic en todo el elemento:

En la web, se recomienda agregar relleno (sangría) a todo el enlace o elemento de la barra lateral, y no solo al elemento de la lista.

El uso de pseudoelementos le permite aumentar el área de clic.



3. Agrupar elementos que se utilizan dentro de un mismo escenario.

Los elementos de interfaz similares deben colocarse uno al lado del otro para que su uso sea más cómodo dentro del mismo escenario. Al mismo tiempo, no olvide que sus áreas de presión no deben cruzarse.

Por ejemplo, la clasificación y los filtros se colocan junto al campo de búsqueda: primero, el usuario ingresa una consulta de búsqueda y luego la refina.



Esta regla también se aplica a la inversa: si no desea que los escenarios se crucen, distribuya los botones en lados diferentes.



4. Coloque los elementos importantes más cerca del píxel principal.

Puede utilizar el píxel principal al diseñar un sitio o aplicación de la siguiente manera: en una nueva página o pantalla, coloque un elemento interactivo donde el usuario hizo clic en la pantalla anterior. Esta técnica hará avanzar al usuario.



5. Centrar el contenido en la web

Si hablamos de pantallas anchas, el usuario navegará rápidamente por el sitio con bloques de contenido ubicados en el centro. Pero desplazarse hacia la izquierda requerirá un esfuerzo adicional.



En la práctica, la Ley de Fitts en interfaces a menudo funciona en conjunto con los principios de Gestalt en diseño, la Ley de Hick.

Autor Donal Sandro Noblejas Huamán

Lima Perú 🇵🇪

Whatsapp:51924118897 – 51939416004


Sitio web verlista.com/blog

verlista.com

https://pe.linkedin.com/in/donal-sandro

You may also like

Leave a Comment

Are you sure want to unlock this post?
Unlock left : 0
Are you sure want to cancel subscription?
-
00:00
00:00
Update Required Flash plugin
-
00:00
00:00