Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Design Theory

Cómo Aplicar la Ley de Fitts al Diseño de Interfaces Móviles

by
Length:LongLanguages:
This post is part of a series called UX Foundations.
Crafting the Experience of User Interface Messages
The Psychology of Content Design

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

La Ley de Fitts es un principio esencial en la teoría de Interacción Humano-Computadora, formulado hace casi 60 años atrás. Es fundamental para el diseño de UX (User Experience - Esperiencia de Usuario) tanto para escritorio como para portátil, pero al ser tan diferentes las técnicas de interacción, ¿podemos usarla de la misma manera para dispositivos móviles? Veremos en qué consiste la ley de Fitts y cómo se aplica para el diseño en dispositivos móviles.

Para descubrir cómo utilizamos la ley de Fitts debemos ver primero qué es exactamente. y cuál es su uso previsto. Fue creada en 1954 por Paul Fitts y se propone modelar el acto de apuntar a un objetivo en un monitor de computadora. Sorprendentemente, fue diseñada para considerar tanto acciones hechas por el mouse como por la mano.

Por ejemplo: imagina que el cursor de tu mouse y tu atención están en el logo de un sitio web dado. Entonces, te ves obligado a hacer click en un call to action, así que centras tu atención en el botón en cuestión. La eficiencia de este movimiento de una posición a otra es a lo que la Ley de Fitts apunta a determinar con precisión.

Fitts Law

Esta es la fórmula:

MT=a + b * log2(D/W + 1)

MT es el tiempo que toma moverse de un punto a otro, que es lo que estamos tratando de descifrar. Las variables a y b son la intercepción y la pendiente, respectivamente, que por lo general son determinadas experimentalmente. D es la distancia entre el origen y el objetivo. W es el ancho del objetivo. Con todo eso dicho, es raro ver a un diseñador de UX profesional usar esta fórmula en su forma cruda, ya que hay aplicaciones más simples que se derivan de la misma.

La idea básica de la Ley de Fitts es que cuanto más lejos esté el objetivo y más chico sea, más difícil será para el usuario llegar a él. Aunque tiene que estar balanceado con otras consideraciones de UX, la Ley de Fitts debería ser parte del cinturón de herramientas de UX.

Toma como ejemplo las barras de desplazamiento en Windows versus las de Mac (pre OSX Lion). Windows tiene la flecha hacia arriba en la parte superior de la barra y la flecha hacia abajo en la parte inferior, del mismo modo con la izquierda y la derecha. Este formato intenta apoyarse más en el modelo mental de mirar para arriba para ir hacia arriba y abajo y para ir hacia abajo. La de Mac sin embargo pone las flechas lado a lado porque, debido a la Ley de Fitts, navegar entre ellas es mucho más rápido con ese formato.

osx vs windows scrollbars

En el mundo de la UX, la base de usuarios debe tenerse en cuenta en todo momento y la ley de Fitts no es diferente. Su correcta aplicación se vuelve incluso más importante para usuarios con habilidades motoras limitadas como niños, ancianos y discapacitados. Los objetivos tienen que ser aun más grandes para ayudar a que el usuario apunte al objetivo exitosamente.

Aplicaciones de la Ley de Fitts para Escritorio

Tamaño y Distancia

El tamaño y la distancia de las interacciones más comunes debe ser considerado al diseñar cualquier elemento de UI (User Interface - Interfaz de Usuario) con el cual interactúa el usuario. Hay muchas pautas de diseño diferentes por ahí pero la mayoría vienen con un tamaño mínimo para los botones y la distancia con otros elementos interactivos. También es importante tener en cuenta aquellos elementos interactivos riesgosos que no quieres que el usuario active accidentalmente. Esos generalmente deberían estar alejados de los elementos más usados.

Bordes

  • Esquinas - A medida que el cursor se detiene en el borde de la pantalla, se puede considerar que las esquinas tienen un ancho "infinito". El usuario necesita mucho menos precisión porque puede simplemente lanzar el ratón en dirección a una esquina y las limitaciones de la pantalla restringen donde termina el puntero. Esto, en parte, es la razón por la que el menú de inicio de Windows y el menú de Apple están en las esquinas de la pantalla.
  • Parte Superior e Inferior - Similarmente, los extremos inferior y superior son más fáciles de acceder debido a las limitaciones de la pantalla. Estos no son tan fáciles de acceder como las esquinas porque solo están limitados verticalmente, pero aun así son más fáciles de acceder que un punto en el medio de la pantalla. Es por esto que Apple coloca los menús de las aplicaciones en la parte superior de la pantalla en vez de colocarlos en la parte superior de la ventana de la aplicación.

Menús

  • Menús desplegables - Desplegar los menús donde está el cursor ayuda a reducir la distancia, reduciendo el tiempo de movimiento. Puedes ver esto en menús al hacer click derecho y controles flotantes.
  • Menús Circulares - Los menús circulares desplegables crean proximidad cercana con el beneficio de que los elementos del menú están más cerca del cursor. Entonces, ¿por qué no vemos menús circulares por todos lados? Francamente, porque son difíciles de diseñar y no suelen ser parte de los estándares de las librerías de UI.

La Ley de Fitts y los Dispositivos Móviles

Tenemos que ver los dos tipos principales de dispositivos móviles por separado porque las interacciones difieren lo suficiente como para considerar hacerlo. Nos referiremos al teléfono como la pantalla de 3,5 pulgadas y la table como la pantalla de 7 pulgadas. Es sabido que esas medidas no son universalmente ciertas para todos los dispositivos, en este artículo las usaremos para discutir tamaños y movimientos de la mano.

Otra diferencia clave en los dispositivos móviles es que hay diferentes orientaciones y maneras de agarrar los dispositivos. Para todos los efectos, los mouse se agarran y usan todos de la misma manera. Hay diferencias con los trakpads y demás, pero no cambian la interacción en términos de la Ley de Fitts como pasa en los dispositivos móviles. Esto lo exploraremos en la sección de cada dispositivo.

El patrón de diseño usado con las esquinas y bordes también aplica para dispositivos móviles, pero de una forma muy diferente. A diferencia del escritorio, los dedos no se limitan a las esquinas o bordes de la pantalla. Esto hace que no aplique la regla del ancho infinito. Sin embargo, vamos a examinar por qué los bordes y esquinas también pueden ser usados en dispositivos móviles.

Zonas del Pulgar

El uso de los pulgares es una interacción común en los dispositivos móviles. Hay veces que el pulgar no se utiliza, pero cuando estamos usando nuestro pulgar debemos tener en cuenta que la fórmula original de la Ley de Fitts se aplica sólo dentro del rango de movimiento de nuestro pulgar. El problema ocurre cuando un elemento queda afuera de esa zona. Entonces requiere un esfuerzo adicional que la ley de Fitts no tiene en cuenta y agrega una variable adicional que aumenta el tiempo de movimiento. Tenemos que tener esto en mente al discutir los efectos descritos a continuación.

La Ley de Fitts en Pantallas de 3,5 Pulgadas

Orientación Vertical

Veamos primero la orientación vertical, ya que es la orientación más usada en pantallas de 3,5 pulgadas. Si bien no quiero fijarme en Apple, hacen algunas cosas muy inteligentes para mejorar la usabilidad detrás de escenas que la mayoría de la gente ni se da cuenta. El iPhone tiene el tamaño que tiene para que el pulgar promedio pueda alcanzar cada parte de la pantalla. Imagina que en tu escritorio solo pudieras mover el cursor hacia arriba hasta 3/4 de la pantalla y después tuvieras que agarrar el mouse con la otra mano para moverte en el resto de la pantalla.  Obviamente, esto le da un vuelco interesante a la Ley de Fitts y aumenta significativamente el tiempo del movimiento.

Como señala el Diseñador Interactivo Josh Clark, hay razones para la colocación de ciertos elementos. Los menús en los iPhone están ubicados en la parte de abajo debido a la manera que el pulgar se dobla, junto con el hecho de que nuestro pulgar ya está cubriendo esa área por la manera en que agarramos el teléfono. La esquina superior a la mano con la que estás agarrando el teléfono requiere un esfuerzo extra y hasta estirarse para muchas manos. Como se indicó anteriormente, esto agrega una variable adiccional en la Ley de Fitts que aumenta el tiempo de movimiento. El movimiento entre dos objetivos ya no es un movimiento fluído y libre de resistencia.


Alcance del pulgar al agarrar el dispositivo con la mano derecha.

Android utiliza una táctica diferente y coloca los menús en la parte superior. Esto tiene una razón. Los teléfonos Android tienen el menú del sistema operativo en la parte de abajo del teléfono; los menús están en la parte de arriba intencionalmente para evitar hacer click en los elementos incorrectos accidentalmente.

Un derivado de la pauta de la ley de Fitts es colocar objetivos de alto riesgo (cerrar, borrar, etc.) lejos de objetivos altamente usados para ayudar a prevenir errores por parte del usuario. Con iPhone esto a veces es posible en la parte superior de la pantalla. Sin embargo, las pantallas de 3,5 pulgadas son pequeñas y encontrar un área que el usuario siempre pueda evitar puede ser difícil. Es por eso que hay trucos como "desliza hacia la izquierda para borrar" que demora más tiempo para lograrse pero ayuda a evitar el desencadenamiento accidental de acciones de alto riesgo.

Orientación Horizontal

En la orientación horizontal, los extremos izquierdo y derecho se vuelven más importantes si estamos intentando minimizar el tiempo de movimiento. El otro problema es que el usuario a menudo tiene que usar las dos manos en esta orientación. Pueden ser usadas en simultáneo así que en algunos casos podemos ser capaces de disminuir el tiempo de usuario aplicando la Ley de Fitts en dos áreas simultáneamente en vez de en sucesión. El tiempo de movimiento total es el mismo pero el tiempo de usuario se ve reducido.


Alcance de los pulgares al agarrar el teléfono en la orientación horizontal...

Consecuentemente, el medio de la pantalla se vuelve más difícil de alcanzar, especialmente los extremos superior e inferior del medio. De nuevo, esto requiere estiramiento adicional lo que agrega una variable adicional que aumenta el tiempo de movimiento. Estas áreas deberían ser reservadas para acciones que son o muy poco usadas o son acciones de alto riesgo. 

Método Sostener y Apuntar

Hay otro estado en el que el usuario sostiene el dispositivo con una mano y usa el dedo índice de la otra mano para apuntar. En este modo, estirar los dedos no se vuelve un problema. Sin embargo, muchos usuarios que utilizan este se restringen ellos mismo a usar solo ese dedo. Esto no es lo ideal para actividades como escribir y algunos juegos.


Modo sostener y apuntar (ícono del gesto por gesturecons.com)

La Ley de Fitts en Pantallas de 7 Pulgadas

Orientación Vertical

En un artículo del libro "Designing For Touch" de Josh Clark, él dice que la mayoría de la gente sostiene sus tablets en la parte superior del dispositivo. Por lo tanto las dos esquinas superiores se convierten en las zonas más importantes para colocar objetivos útiles. En mi experiencia, he visto a mucha gente sostenerlo en la parte inferior. Esto es especialmente cierto para escribir cuando los usuarios usan el teclado del iPad separado. En este caso las esquinas inferiores serían las zonas más importante, excepto cuando se necesita escribir.

Orientación Horizontal

Las tabletas se pueden sostener verticalmente con una sola mano con relativa facilidad, pero hacerlo de forma horizontal es un poco más complicado. En gran medida podría aumentar la propensión a abandonar el dispositivo. Por lo tanto, cuando las tabletas se sostienen horizontalmente se hace casi siempre con dos manos. También debemos recordar que uno de los lados del dispositivo suele disponer de botones para regresar al inicio y para el menú de forma que en este lado existe menos espacio para operar con el pulgar en la pantalla.

Modo "Acoplada en un Soporte"

Todo lo anterior depende de como se sostengan las tabletas, pero debido al tamaño y grosor de la tableta se hace muy a menudo con ésta acoplada en un soporte. Esto es no significa que esté conectado sino que con frecuencia lo colocamos sobre nuestras piernas, escritorios o mesas. La nueva carcasa de iPad se dobla hacia atrás para crear un pequeño soporte que hace que esto sea aún más frecuente. Esto hace que sea más frecuente señalar sobre la tableta que sobre el smartphone. Por tanto el diseño no está ya tan restringido a las zonas de los pulgares y expande nuestra original Ley de Fitts a la pantalla táctil al completo.

Conmutar de Forma Fluida

Es importante recordar que la conmutación entre los modos y las orientaciones se dan con frecuencia. Los usuarios cambiarán los modos sin necesidad de pensarlo, dirigiéndose a lo más conveniente para la actividad que estén realizando en internet. Ahora mismo, hay un pequeño retraso al cambiar entre la orientación vertical y horizontal, lo que lo convierte en un cambio no muy fluido. Lo importante es que ciertamente debemos diseñar teniendo en cuenta los puntos que acabamos de mencionar, pero sin dar por hecho que los usuarios vayan a permanecer en un determinado modo u orientación. Tenemos que ser conscientes del modo y la orientación que el usuario utilizará probablemente para realizar una determinada actividad/acción y diseñar teniéndolo presente.

Conclusión

La orientación y el como el dispositivo es sostenido o anclado tiene una importancia crítica para nuestros diseños. La Ley Fitt se podría ver afectada de diferentes formas y para conseguir un diseño UX óptimo es importante saber en qué manera. La Ley de Fitt no es desde luego la única, ni tan siquiera la más consideración más importante para el diseño, pero casi siempre constituye un buen punto de partida. Existen ciertos retos a los que hacer frente en los dispositivos móviles que no se dan en los dispositivos de sobremesa. Con el rápido crecimiento que se está produciendo del móvil, estas consideraciones deberían ser un arma estándar dentro del repertorio UX.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.