👨🏻‍🏫**Kevin Hale**



Todo lo que aprenderás sobre las 5 leyes de UX/UI

<aside> ➡️ Kevin Hale , ex socio de Y Combinator y experto en diseño de experiencia de usuario, desarrollo de productos y atención al cliente.

</aside>

Este es un curso de 5 clases donde aprenderás 5 leyes del comportamiento humano que te ayudarán a mejorar tus tasas de conversión y la experiencia de usuario de tus interfaces.

Este curso fue especialmente diseñado para que los fundadores de startups comprendan de mejor manera cómo sus usuarios interactúan con su producto y cómo hacer las preguntas importantes a sus equipos de experiencia de usuario e interfaz de usuario para mejorar esta experiencia.



Ley de Fitt

<aside> ➡️ Tomar algunas ideas de diseño que hemos podido ver antes muchas veces en el diseño de interfaces y averiguar cómo verlo a través de una especie de forma matemática para que podamos hacer predicciones sobre cómo los cambios de diseño que hacemos en nuestros diseños actuales van a afectar las reacciones de los usuarios en el futuro

</aside>

La Ley de Fitt

Se parece a esto: T = a + b log 2 (1 + D/W)

Describe cómo los humanos señalan las cosas u objetos en el mundo. Es una descripción del universo, es el nivel al que más se puede reducir

Y la gran conclusión que la mayoría de la gente conoce sobre la Ley de Fitts es esta:

Las cosas más grandes son más fáciles de señalar que las cosas más pequeñas

Lo que parece realmente obvio pero me gustaría decir que cuando miramos la ecuación matemática podemos encontrar muchas ideas interesantes y específicas sobre las interfaces, ¿correcto? Cuando miramos la ecuación matemática con mucho cuidado, y la forma en que vamos a hacer eso es mirando al pasado

Una fotografía de Paul Fitts. Él era un investigador de la Fuerza Aérea de los Estados Unidos y alrededor de los años 50 trabajaba en un problema muy Interesante

Esta es una fotografía de un Douglas C-54 de 1942 Sky Master DC 4. Es un avión de transporte de tropas de la Guerra de Corea, y lo que probablemente te puedas dar cuenta es que es terriblemente complicado. Y la razón por la que es tan complicado es que hay muchas cosas que como piloto tienes que ver, entender y reconocer y cuenta con tantos controles diferentes por manipular

Para los pilotos de aviones que en ese momento trabajaban en naves experimentales constantemente en transformación, reconstrucción y rediseño durante la década de 1950 y la década de 1940, era realmente un tema de vida o muerte, debían presionar los botones correctos y evitar poner los interruptores en el lugar equivocado. En pocas palabras, esto le dificultaba mucho al piloto la posibilidad de dar con el botón, el interruptor, la información correcta, realmente tenía dificultades para enderezar el avión o recuperarse de una maniobra

En muchas ocasiones, como ya dije, era cuestión de vida o muerte. Así que Paul Fitts estaba tratando de averiguar: "¿Cómo puedo diseñar cabinas de los aviones para que sean más eficientes? ¿Cómo puedo ayudar a no arriesgar vidas?"

La ley de Fitts, es una derivación y viene de una idea que Paul Fitts tenía de otra fórmula llamada Teorema de Shannon-Hartley

Esta última tiene que ver con la idea de la señal frente a un ruido hablando en términos de comunicación

La gran visión de Paul le permitió darse cuenta de que, en esta fórmula en el fondo, que se utiliza, por cierto, para describir cuando se trata de comunicar a través de un medio, la eficiencia de la información que puede llegar depende de la cantidad de ruido que haya en el sistema

La genialidad de Paul fue darse cuenta de que la información que va del cerebro a los músculos es un tipo de información como cualquiera ya que viaja a través de un canal. El cuerpo humano, el sistema nervioso y los músculos son ese ruido que se interpone en el camino mientras manipulamos el mundo real y pensamos en diversidad de cosas

Él tenía esta hipótesis. Pero, ¿Cómo comprobar que era cierta?

Experimento

Él diseñó un experimento parecido a esto.

Tiene dos placas de metal ¿correcto? Las placas de metal aquí en mi imagen son una barra verde y una barra roja. Lo que él quería que hiciera la gente es que tomaran un bolígrafo o lápiz óptico, que es de metal, y pedirles: "Arrástralo desde la barra metálica verde hasta la barra metálica roja"

Luego alternaba y cambiaba la distancia entre las barras de metal y el ancho de la barra metálica final.

Después de eso, cronometraba el tiempo en que tardaban yendo de un punto a otro. Él les pedía que lo hicieran lo más rápido posible. Lo hacían una y otra vez, manipulando el experimento de diversas formas. Así se le ocurrió la idea de que hay una relación entre estas tres variables, la anchura de la distancia del objetivo, la distancia entre los dos elementos y el tiempo

En la fórmula se encuentran esas cosas o variables

Ahora, cuando estoy analizando las fórmulas matemáticas sobre la marcha, si estoy analizando algo como esto, por ejemplo, y sé cuáles son las variables de nombre, trato de identificar todos los elementos y las relaciones entre esos elementos que deseo manipular, ¿cierto?

Y así, A y B y el logaritmo de 2, esos son constantes

Así que, básicamente, no tenemos que pasar mucho tiempo en esta parte. Pero dependiendo del medio, los diferentes escenarios que tienen que ver con la Ley de Fitts cambian de contexto

Si estás haciendo algo dirigiendo las manos hacia el aire, dentro del agua o si estás moviendo el cursor del ratón que te permite manejar la aceleración, por ejemplo, esas son cosas que se dividen experimentalmente

Lo que noto aquí es que lo que probablemente más quiero manipular en términos de interfaces es el tiempo y que quiero que las cosas ocurran lo más rápido posible. Así que para que el tiempo sea lo más corto posible, miro la relación directa e inversa, la relación directa es con la distancia, ¿correcto? Y la relación inversa es con la anchura. Eso significa que cuanto menor sea el tiempo que quiero alcanzar, menor debe ser la distancia, y mayor debe ser la anchura del objetivo que quiero ahí

Ahora, el 'log' que se ve en el centro, un montón de gente siempre se pregunta lo que significa. ¿Cómo cambia eso la descripción de lo que estamos hablando?

Esto es probablemente lo más importante que debamos entender dentro de esta ecuación: averiguar matices para aprender a no sobre simplificar en el diseño de una interfaz

Realmente rápido, notas como las "Cliff Notes" te ayudan a comprender la diferencia entre una relación lineal y una relación logarítmica.

Los logaritmos son, en realidad, una forma natural en la que el ser humano entiende las matemáticas y los números. De hecho, venimos al mundo y tenemos integrada en nosotros esta forma de entender las matemáticas

Es en la guardería y en la escuela primaria donde nos enseñan a pensar en las matemáticas en una forma completamente diferente

Te daré un ejemplo. Digamos que tengo un artículo, una manzana tal vez, si le añado otra manzana a esa, termino teniendo dos manzanas. He duplicado la cantidad de cosas que tengo, eso es lo deseable, ¿no? Incluso para un bebé o un niño pequeño, esto es muy fácil de entender

Pero ahora digamos que tengo 10 manzanas en mis manos. Si agrego una manzana más, aunque sea la misma cantidad de manzanas que añadí al conjunto que en el escenario anterior, me importa menos, ¿cierto? Porque ya tenía 10 manzanas.

La comprensión logarítmica de las matemáticas comparte este mismo tipo de razonamiento

Aplicación a Fitt

Digamos que tenemos dos objetos aquí y que estamos tratando de señalarlos, ambos son relativamente pequeños

La Ley de Fitts dice, en ese sentido logarítmico, que si algo es pequeño y lo hacemos un poco más grande, entonces creamos para nosotros mismos una gran diferencia. ¿No es así? Ese punto verde es mucho más fácil de señalar que ese pequeño punto rojo

¿Pero qué pasa si dos cosas ya son bastante grandes? Si paso del punto azul al punto morado, aunque los haya hecho igual de grandes, en términos de comprensión logarítmica, es mucho menor la diferencia

Así que aunque sea más grande la distancia entre el punto de partida y tu objeto, y más manipulación hagas, no tienes rendimientos decrecientes en términos de lo que obtienes en beneficios

Eso es lo primero, si tus objetos en tus interfaces ya son grandes, no tiene sentido que los hagas más grandes. Deberías centrarte en las cosas pequeñas pues son ellas las que realmente marcan la diferencia

La otra cosa que la gente malinterpreta de la Ley de Fitts es pensar que mientras las cosas sean más grandes son más fáciles de señalar

Llegan a pensar, por ejemplo, que en un escenario en el que arrastro el cursor del ratón hacia este enlace en mi interfaz, si hago estos elementos mucho más grandes, van a ser más fácil de señalar. Eso no es correcto

Te explico la razón.

Este experimento solo mide cosas en una dimensión, podemos verlo aquí. Él se preocupó en ir de una a otra cosa.

Si miramos la ecuación de nuestra Ley de Fitts, de hecho, la altura de los elementos no aparece por ninguna parte. Así, lo que realmente describe la ecuación cuando estamos mirando interfaces, no es esto

Sino esto, y decir que estás midiendo contra esta anchura

He aquí por qué esto es importante.

La posición de partida ahora importa dependiendo de en qué parte estás tratando de tocar los objetos, especialmente cuando se trata de objetos rectangulares como los que vemos en muchos tipos de interfaces

Aquí, por ejemplo, ambos cursores del ratón están a la misma distancia de este objeto, ¿verdad? Pero el de la derecha es más fácil de pulsar porque la anchura del objetivo es mucho mayor desde su perspectiva, desde una línea recta, desde el fondo, ya que la anchura del objetivo es mucho más pequeña desde el ángulo desde el que estás tocando, es mucho más difícil de pulsar

Lo mismo ocurre aquí. Puedes verlo ilustrado aquí

Tomé un objeto de la izquierda y lo hice mucho más grande, pero basándome en el lugar en el que está el cursor, el objeto no es más fácil de cliquear, solo cuando lo hice más grande en esta perspectiva, hice que el objeto fuera más fácil de pulsar.

Muchas veces, cuando tratamos con interfaces y elementos de un menú, queremos prever hacia dónde se moverá el curso. ¿Será movido hacia arriba o hacia abajo?

Para llegar al objeto, ¿se desplazará desde abajo hacia arriba? ¿O se va a mover de izquierda a derecha? Eso te permite determinar cómo cambiar el tamaño y la forma de las cosas para que la gente pueda hacer clic en ellas más fácilmente

Pero volvamos a esta relación. Te dije antes que lo que queremos averiguar es la relación directa e inversa. Entonces te hablaré de la forma en que podemos obtener conclusiones a partir de ecuaciones matemáticas como esta.

Lo primero que me gusta hacer es quitar todas las constantes y todas esas cosas, y dedicarme a estudiar las relaciones directa e inversa. Voy a tomar esta ecuación y hacerla mucho más simple a la vista

Me interesa reconocer exactamente cómo se relacionan las cosas entre ellas. Ahora, la forma de encontrar ideas súper interesantes en torno a estas leyes es llevar las cosas al extremo

Ejemplo. Quiero crear interfaces donde sea infinitamente más fácil hacer clic en los distintos elementos. Es decir, que casi no me tome tiempo como usuario hacer clic o que incluso el tiempo que me tome sea cero.