👨🏻🏫Kevin Hale
<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.
<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.
Para lograr que el tiempo sea cero, la forma de optimizar ese valor en una interfaz es asegurar una distancia cero entre el elemento en el que tendrías que hacer clic y el ancho infinito de los objetivos que intentas alcanzar
Veamos algunos ejemplos en los que la distancia es nula
Menús contextuales. La razón por la que hacer clic con el botón derecho forma parte del sistema operativo y es tan potente y fácil de usar es porque cuando hago clic derecho, no tengo que mover el ratón en absoluto. Las cosas a las que necesito llegar están a la derecha, allí mismo. Es mucho más fácil llegar a esos elementos que a cualquier otra cosa de la configuración. No tienes que ir a la parte superior, buscar entre todas las propiedades y luego volver hacia abajo. Puedes ir directamente a esa opción
Otra cosa de la interfaz de la que mucha gente habla cuando se trata de la Ley de Fitts son los menús circulares. Son más fáciles de manipular y de trabajar porque, para llegar a toda clase de elementos de la página, los elementos alrededor de los exteriores están a igual distancia unos de otros
Veamos las situaciones de anchura infinita
Digamos que tenemos un monitor y tenemos el cursor aquí. Los bordes exteriores de tu monitor, son lugares de anchura infinita porque cuando muevo el cursor hacia los bordes el mismo deja de moverse. Por lo tanto, una vez que el cursor llega a estos puntos solo está tocando todos los bordes de un píxel alrededor del exterior de la pantalla.
Así que tienen anchos de objetivo infinitos en los bordes de un sistema operativo. Además, en las esquinas, tenemos dimensiones infinitas. Tanto la altura como la anchura se salen infinitamente, hasta llegar a las esquinas de la pantalla, los lugares más fáciles de pulsar en una interfaz
Y esa es una de las razones por las que los sistemas operativos construyen "hotspots" (puntos de interés) y accesos directos en esos lugares. Cuando llegas a esos bordes, cuando llegas a esas esquinas, lugares a los que es más fácil llegar, encuentras allí la posibilidad de acceder más fácilmente a ciertas características del sistema