Las leyes de UX con casos prácticos
🇺🇸🇬🇧 First. Do you want read this article in English? Check it here.
Hace unas semanas vi que se hacia bastante ruido sobre “Laws of ux” una página muy sencilla donde se habla de las principales leyes de la UX (Experiencia de usuario), una página fantástica y 100% recomendable.
Si tuviéramos que generar un titular sobre las leyes de UX…
“La recopilación de leyes o normas de diseño que los diseñadores deben tener en cuenta a la hora de pensar y mejorar la experiencia de usuario.”
Un buen diseño tiende a seguir principios generales que dan a los diseñadores directrices generales para trabajar. Pero para los diseñadores de interfaces y de experiencia del usuario, también hay ciertas leyes que todos deberían de tener en cuenta.
En “Laws of ux” cada ley obtiene su propia representación gráfica inspirada en las clásicas portadas de libros minimalistas. En vez de simplemente recogerlos como una lista, el objetivo es ayudar a la memorización de estas leyes.
“Es mas fácil recordar un objeto, ya sea un imagen o video, que un texto”
Obviamente estas representaciones están mas que discutidas y difundidas por la red, y no quiero entrar a debatirlas (además estoy 100% de acuerdo con ellas) sino exponer ejemplos con productos reales sobre estas leyes. ¡Empecemos!.
Ley de Fitts
Basada en el psicólogo Paul Fitts de 1954, que determina ‘El tiempo necesario para alcanzar el objetivo es una función de la distancia y tamaño que hay que recorrer hasta él.’
Esta ley afecta directamente a la experiencia de usuario a la hora del diseño de botones, por citar un ejemplo, más grandes, especialmente en dispositivos móviles que son táctiles, llegando a la conclusión que con los botones más pequeños es más difícil interactuar, un ejemplo práctico sería el siguiente.
Este sería un caso de aplicación de Ley de Fitts, se encuentra cerca de la que se presupone la zona de lectura del ratón (a la derecha, pues somos occidentales y leemos de izquierda a derecha), además abarca un amplio espacio (no es un botón pequeño) por lo que la probabilidad de “acertar” y hacer click en el botón es alta.
Ley de Hick
“El tiempo que se tarda en adoptar una decisión, aumenta a medida que se incrementa el número de opciones”
Así el tiempo que tarda un usuario en tomar una decisión aumenta cuantas más opciones tiene, es obvio el usuario, intenta contemplar todas las opciones posibles y lo que conllevan y tomará la que considere mejor opción.
¿Qué es mejor?
- Un único formulario con 20 opciones hasta completarlo
- Un formulario por etapas con 4 etapas y 5 opciones por etapa.
Obviamente depende del sector y tipología de usuario, pero la ley de Hick nos dice que lo segundo. Un caso práctico sería el siguiente.
Un ejemplo práctico de llevar al extremo la sencillez y aplicar la ley de Hick. Airbnb no se corta y prefiere dividir el proceso y simplificar.
“Dime directamente donde quieres ir, luego te preguntaré el cuándo y el cómo”.
Ley de Jakob
La mejor forma de crear algo nuevo, es buscar referencias, para que los primeros clientes entiendan de que va y puedan asociar.
¿Qué quiere decir? Que los usuarios pasan la mayor parte de su tiempo en otros sitios web (en caso de que el tuyo no lo conozca). Esto significa que prefieren sitios similares a los que frecuentan y ya conocen. Por eso es mejor no pasarse de original o creativo.
Esta norma fue acuñada por Jakob Nielsen, director de Nielsen Norman Group que fundó con el vicepresidente de investigación de Apple. No sé me da la impresión que algo sabrán del tema :).
Un caso práctico de esta ley sería cualquier e-commerce.
El 95% de los e-commerce tienen una disposición de este estilo. Imagen a izquierda y Nombre, precio, configuración y “Añadir al carrito” a la derecha.
Si vas a montar un e-commerce, lo lógico sería que plantearas esta estructura, pues un potencial cliente conoce el funcionamiento del e-commerce y espera algo así. ¡No le hagas pensar!.
Ley de Prägnanz
También llamada “Ley de simplicidad”, que establece que los usuarios perciben las formas complejas de la forma más simple porque es la interpretación que menos esfuerzo mental requiere.
Básicamente aplica describe que es más fácil entender y asimilar un cuadrado que un octógono. Y requiere de menor intensidad mental para obtener un reconocimiento de qué es eso y para qué sirve. Un ejemplo práctico de esto sería el siguiente.
Qué quiere decir esto. ¿Qué vemos antes, la figura A, la B o la C? obviamente la A, porque nuestro cerebro entiende que es la forma más simple posible que tenemos de asociar. Un ejemplo de uso práctico sería
¿Por qué el botón de “Añadir al carrito” no es un carrito y si un cuadrado?.
Ley de Proximidad
Los objetos que están próximos tienden a unirse y en la experiencia de usuario se entienden como en el mismo grupo.
El principio sostiene que si estás manejando un grupo de datos, todos los datos que entendamos que corresponden al mismo grupo deben de estar juntos y si empezamos a habla de datos diferentes debe de haber un espacio (aire) entre ellos. Nuestra cabeza hará el resto y los diferenciará.
Un ejemplo de esto sería.
Amazon un ejemplo práctico de esto, pese a la sensación de “caos” a nivel datos, está muy claro donde está cada grupo de estos datos.
A) Las últimas novedades están claramente diferenciadas de los más vendidos y no tienes problemas para diferenciar los grupos.
B) Si quiere filtrar, tienes cada Tecnología (LCD, LED, etc) junto y hay una separación entre las marcas (LG, Samsung, etc…)
Ley de Miller
Según esta ley las personas pueden recordar hasta 7 elementos distintos en su memoria de trabajo. Es por ello que los menús de opciones y navegación en una página web más o menos están basados en este tamaño. Más de 7 elementos genera confusión y perdida de foco del usuario, no es capaz de recordar donde estaba una opción que ahora busca.
Por eso en aplicaciones o servicios que tiene multitud de opciones, se agrupan estás para reducir la carga de memoria.
Se llama así en honor a George Miller, que parte de su teoría de la comunicación. Un ejemplo de esta ley sería:
Pese a que Netflix tiene miles de categorías para las películas, entiende que sería muy difícil de recordar de cara al usuario, no el contenido, pero si la posición. En cambio prefiere tener las 6 categorías mas “Top” que tiene, y a partir de ahí navegar en profundidad.
Ley de Parkinson
Esta ley dice que cualquier tarea se prolonga hasta que se agote totalmente el tiempo disponible para ella. Es también una ley de productividad.
Por una cuestión cultural, pensamos que como más horas le dediquemos a algo mejor es. Pero la práctica demuestra que no es así.
Cuando sabemos que tenemos más tiempo nuestro cerebro se relaja. En cambio cuando sentimos la presión de la fecha límite nos centramos en realizar aquello importante y que debemos finalizar a tiempo.
¿Qué quiere decir esto a nivel Experiencia de usuario?
Que el usuario tiene establecido ciertas “normas” temporales, dependiendo del tipo de usuario obviamente, pero por poner un ejemplo, realizar una compra en Amazon (una vez has seleccionado la compra obviamente) tiene una duración de 5 minutos (entre rellenar los datos, tarjeta, etc…) Todo lo que sea acortar esos plazos será positivo.
Stripe por ejemplo, simplifica el proceso de pago y permite recordar los datos, así en posteriores ventas el tiempo de compra se reducirá enormemente.
Efecto de posición de una serie
Según esta ley, entre los elementos de una serie, los usuarios siempre recordarán mejor el primero y el último.
Y esa es la razón por la cual vemos que en la barra de navegación de las aplicaciones se colocan las acciones más importantes a la izquierda o a la derecha, las cuales implementan elementos como inicio o perfil teniendo en cuenta la posición en serie.
Un ejemplo práctico de esta ley la tendríamos en Instagram.
El primer elemento es Inicio (La gente) y el último elemento es Perfil (Tú). Las partes más importantes y core del uso de la aplicación.
Ley de Tesler
También conocida como ‘conservación de la complejidad’, de Larry Tesler. Establece que para cualquier sistema existe cierta complejidad que no se puede reducir al máximo.
A todo diseñador UX le gustaría simplificar procesos y hacerlos más rápidos, pero tenemos que tener en cuenta que hay cosas que no se pueden simplificar más de base. (A menos que el formato cambie).
Un ejemplo lo encontraríamos en cualquier agencia para comprar billetes.
Por mucho que nos guste y lo deseemos, para reservar un vuelo hay 4 datos básicos. (Origen, Destino, cuando y cuantos). Sin esos 4 datos el proceso no puede ser completado.
Efecto Von Restorff
Este principio también conocido como “efecto de aislamiento”, predice que cuando hay varios objetivos, siempre se recordará el que difiere del resto.
Es simple, las cosas distintas nos atraen y nos resultan llamativas, los típicos. “Anda!” en UX es precisamente un síntoma de esta ley.
Un ejemplo práctico de esta ley sería los Customer Support como Intercom.
En este caso el servicio sale en la propia web de intercom y no difiere tanto, no obstante si se nota el cambio de “estilo”, pues es algo superpuesto que inicialmente no debería de estar ahi, con un background e incluso una fuente diferente.
Al final para donde queramos llamar la atención que sea diferente, en forma y colores.
Efecto Zeigarnik
Define la tendencia a recordar tareas inacabadas o interrumpidas con mayor facilidad que las que han sido completadas.
Aplicando este concepto a la UX, podríamos hablar de nuevas features (servicios) ofrecerlas para en cierto momento, decirle que si quiere continuar debe de hacer X acción (registrarse, comprar, etc…).
Un ejemplo visual podríamos encontrar un ejemplo con un listado de tareas pendientes de contemplar, como en el caso de Startupxplore.
Donde se deja ciertas tareas “incompletas” para que tu proceso interno quiera completarlas, pero además tienes la sensación que siempre te las recuerda porque no están completas.
“Una buena UX contempla o intenta contemplar todas las opciones que un usuario se va a encontrar e intenta simplificar el camino para que complete el servicio que estás ofreciendo”.
En resumen, un diseño pensado y basado en la experiencia de usuario debe cumplir parte de todas y cada una de estas normas.
Además como comenté con anterioridad siempre prensando en un producto MAP (Minimum Awesome Product).
¿Te ha gustado el post?
¡Dale claps! puedes darle hasta 50 veces al clap, y que mucha más gente encuentre y conozca este post, y claro… no te olvides de compartir.
¡Veamos esos aplausos!
