La próxima vez que te subas a tu automóvil, fíjate bien en tus pedales. Puede notar algo que nunca antes le había prestado demasiada atención: su pedal de freno es más grande y está más cerca de su asiento que su pedal de acelerador.

Una vez que nota esta sutileza, inmediatamente tiene sentido, ¿no? Si el pedal de freno es más grande y está más cerca de usted, entonces es más rápido y más fácil de detener que de acelerar. Esto hace que conducir sea más seguro para usted y para todos los demás en el camino. Si el tamaño y la cercanía de los pedales se invirtieran, nuestras carreteras se verían constantemente como el parachoques de un automóvil.  Descargue más de 195 plantillas de diseño de marketing visual para publicaciones en redes sociales, infografías y más.

El diseño de los pedales de automóviles se basa en un modelo predictivo de movimiento humano llamado ley de Fitts. Y está a nuestro alrededor: la barra espaciadora es la tecla más grande en su teclado porque es la más importante. Y el botón que apaga la maquinaria pesada es más grande que el que lo enciende: no quiere que la gente encienda accidentalmente la maquinaria pesada. Pero lo que sí desea es facilitar que las personas lo desactiven.

En el mundo físico, esta ley parece bastante sencilla. El botón más grande en un microondas es el botón de la puerta porque la apertura de la puerta de microondas es la acción más importante. En la interacción humano-computadora, es igual de simple.

Cuando el cursor está lejos de un pequeño llamado a la acción, debe ser más preciso para hacer clic con precisión, lo que aumenta el tiempo y la energía que gasta moviendo su ratón hacia la CTA. Pero cuando el cursor está cerca de un CTA grande, no necesita ser tan preciso para hacer clic con precisión. Puede pasar menos tiempo y energía moviendo el mouse hacia la CTA y obtener el mismo resultado.

La ley de Fitts se aplica ampliamente en el diseño de UX y UI, o en cualquier interfaz que implique apuntar con el mouse o el dedo. Es la razón por la cual los llamados a la acción en los sitios web son grandes. Piénselo: si desea que los usuarios realicen acciones específicas en su sitio, realizar convocatorias de acción grandes donde los usuarios esperan que sean fáciles de encontrar y hacer clic en.

Dicho esto, estas pautas deben tomarse con un grano de sal. La lógica por sí sola no puede diseñar una experiencia de usuario estelar. Las emociones impulsan el comportamiento humano, atrayéndonos a objetos visualmente atractivos que son fáciles de usar. Y diseñar una experiencia centrada en el usuario requiere una sólida comprensión de la psicología humana. A continuación, explicaremos cómo equilibrar la lógica de la ley de Fitts con la psicología examinando tres ejemplos de algunas de las mejores experiencias de usuario que existen.

3 Ejemplos de la Ley de Fitts en Diseño Web

1. Tamaño | VeryGoodCopy

Cuando un botón o imagen completa es grande, puede hacer clic y tiene límites claros, son fáciles de seleccionar. Los usuarios pueden entender intuitivamente dónde hacer clic y dónde no hacer clic. Pero forzar a los usuarios a apuntar el cursor directamente sobre una parte específica de un botón, como el texto, requiere más precisión y, a su vez, tiempo y esfuerzo.

Más grande no siempre es mejor. Aumentar el tamaño de su botón puede producir rendimientos decrecientes de usabilidad. Un botón que es demasiado grande puede destrozar el saldo de su página y acaparar valiosos bienes inmuebles que se adaptan mejor a espacios en blanco u otro llamado a la acción. Los botones que son lo suficientemente grandes como para exigir atención sin interrumpir el equilibrio visual de su página son los que maximizan la usabilidad.

En última instancia, los píxeles son escasos. Pero la relación de usabilidad y tamaño le permite rescatar bienes inmuebles valiosos para limpiar su página con espacios en blanco o aumentar su tasa de conversión al agregar otro llamado a la acción, como el sitio web de VeryGoodCopy a continuación.

2 . Distancia | HubSpot

Cuando los usuarios llegan a su sitio web y desea que realicen una acción específica, debe estimar dónde estará el punto de inicio de su cursor. Esto se llama píxel principal.

Las marcas en realidad no conocen la ubicación del píxel principal de los visitantes de su sitio web, pero sorprendentemente es algo bueno. Si supieran dónde estaba este punto, entonces podrían adaptar el diseño de su sitio web a la ubicación de su cursor y crear la ruta más corta hacia un CTA deseado. Su experiencia de usuario sería diferente cada vez que ingresó al sitio. Y eso haría mucho más difícil encontrar las cosas: esencialmente, buscarías un nuevo diseño de sitio web cada vez que lo ingresas.

Estimar la ubicación de tu píxel principal es una mejor alternativa porque te permite construir un sitio consistente y fácil de navegar. Por ejemplo, el cuadro de búsqueda de Google siempre está en el centro de la pantalla porque cuando los usuarios ingresan al sitio, lo más probable es que miren a la mitad de la pantalla. La mayoría de las veces, el píxel principal debe influir en la ubicación del objeto objetivo. Y cuanto más corto sea el camino hacia la acción deseada, mejor será la experiencia del usuario.

En dispositivos móviles, el píxel principal es el área donde se encuentran los pulgares, que se denominan zonas de pulgar. La ley de Fitts se aplica al rango de movimiento de nuestros pulgares en términos de experiencia de usuario móvil. Es por eso que los menús del iPhone están en la parte inferior de la pantalla. Tus pulgares, naturalmente, se ciernen sobre esa zona, por lo que no necesitas estirarlos ni mover las manos para alcanzar esos botones importantes.

Pero como los teléfonos móviles no tienen mucho espacio en sus pantallas, es difícil no agrupar botones juntos en su sitio web. Esto podría facilitar que el pulgar de alguien apunte a un botón y golpee por error a otro. Poner suficiente espacio entre los botones evitará que ocurran estos contratiempos.

Sin embargo, colocar botones alrededor del píxel principal no es una regla difícil. En teoría, los menús circulares deberían ser más fáciles de usar porque apenas tiene que mover el cursor para seleccionar una opción. Los botones están centrados alrededor del píxel principal. Pero el uso de submenús dentro de un menú circular los separa de los círculos, lo que puede saturar su página.

Los menús desplegables son la opción más fácil de usar. Aunque técnicamente tardan más en seleccionar una opción (los usuarios tienen que hacer un movimiento de cursor más largo para encontrar sus botones), los menús desplegables son más agradables visualmente y ocupan menos espacio que los menús de pie. También despejan su interfaz y organizan su contenido en jerarquías y diferentes grupos. Esto le permite tener múltiples menús desplegables uno al lado del otro con submenús en todos ellos, sin sacrificar la estética de su página o una gran cantidad de espacios en blanco, como la página de inicio de HubSpot.

 Ley de Fitts - Distancia

La ley de Fitts también sugiere que debe disminuir la distancia entre los objetos que usan los usuarios en un orden lógico. Por ejemplo, el botón de inicio de sesión siempre se encuentra junto a los campos de formulario de nombre de usuario y contraseña.

Cuando se relacionan ciertos botones, debe organizarlos de manera que sea fácil de recordar y encontrar. Agrupar botones similares crea un mapa mental familiar en su sitio web que los usuarios básicamente pueden memorizar.

Pero colocar cada botón comparable uno al lado del otro podría saturar su página y provocar muchos errores del usuario, especialmente si pone un alto riesgo botón, como un botón eliminar correo electrónico, justo al lado de un botón de uso frecuente, como un botón enviar correo electrónico. Para reducir estas acciones accidentales, debe haber un método de dos pasos para verificar la acción, una opción de deshacer o un espacio amplio entre los botones.

3. Esfuerzo | Google y Apple

Muchos comandos vitales como 'salir', 'iniciar' y 'cerrar' se encuentran en las esquinas de la pantalla de su computadora. Colocar botones allí hace que sea más fácil para los usuarios seleccionarlos porque los botones están fijados por dos lados. Y el cursor se detiene a cada lado, por lo que no puede ir más allá de ellos. Esto significa que no debe ser tan preciso cuando desea hacer clic en un botón en una esquina o borde. Simplemente tiene que mover el cursor a su proximidad general.

Sin embargo, colocar botones en esquinas y bordes no es tan fácil de usar en los dispositivos móviles. Si los coloca allí, los usuarios deben estirar los dedos o mover las manos para alcanzarlos.

Menos esfuerzo tampoco siempre es mejor. Los comandos cruciales que son fáciles de hacer, como apagar el teléfono, no permiten a los usuarios minimizar el costo de sus errores. Una vez que los activan, los usuarios no pueden deshacerlos. No hay perdón en el diseño en absoluto.

Para evitar frecuentes apagados accidentales en sus teléfonos, Apple hace que los usuarios deslizan un control deslizante para apagar su teléfono. Y para cancelar un apagado, todos los usuarios tienen que hacer es presionar el botón de cancelar. La consecuencia del botón cancelar no se compara con apagar el teléfono, por lo que Apple facilita su pulsación accidental.

La ley de Fitts es increíblemente útil, pero no es una prueba completa. Los datos siempre prevalecen sobre la teoría, especialmente cuando se prueba la experiencia del usuario, así que considere seguir la forma en que los usuarios usan su sitio web y optimizar su diseño para la usabilidad y las conversiones. Recuerde, la ley de Fitts nunca debe ser una regla difícil en el diseño de la experiencia del usuario. Pero siempre debe ser una guía esencial.

 Pruebe el complemento del sitio web de HubSpot



Source link