En Nelio no somos diseñadores per se, pero intentamos cuidar al detalle los diseños de las interfaces de usuario que desarrollamos para nuestros plugins para WordPress. Creemos que un buen diseño es de vital importancia para el éxito de cualquier desarrollo. Desafortunadamente, esto es algo que no todo el mundo entiende así, y muchas veces nos encontramos con diseños que nos ponen los pelos de punta.
Lo que quizás no sabías es que detrás de un buen diseño hay una serie de leyes que se basan en los resultados de muchos estudios psicológicos para entender el comportamiento de las personas.
En la última WordCamp Europe pude ver una charla muy interesante de Eileen Violini, @itsjusteileen en Twitter, sobre leyes de diseño. Eileen es diseñadora y desarrolladora de experiencias de usuario e interfaces para sitios web y productos de WordPress. Tienes su charla a continuación:
En esta charla, Eileen nos presenta varias leyes de diseño. He querido profundizar un poco más en cada una de ellas, así que vamos a ir viendo con más detalle las características de estas leyes y como nos sirven para mejorar nuestras interfaces de usuario para conseguir una mejor experiencia de usuario en nuestros productos.
Ley de Hick
La ley de Hick, o ley Hick-Hyman, llamada así por los psicólogos británicos y estadounidenses William Edmund Hick y Ray Hyman, describe que el tiempo que tarda una persona en tomar una decisión va en función de la cantidad de posibles elecciones que tiene: aumentar el número de opciones aumentará el tiempo de decisión y la carga cognitiva que el usuario tendrá que afrontar.
Una de las reglas filosóficas de WordPress es que es nuestro deber como desarrolladores tomar decisiones de diseño inteligentes, evitando poner el peso de escoger opciones técnicas en los hombros de nuestros usuarios.
Cada vez que le das una opción a un usuario, le estás pidiendo que tome una decisión. Cuando a un usuario no le importa o no entiende la opción, esto le lleva a la frustración. Como desarrolladores, a veces creemos que proporcionar miles de opciones y ajustes en nuestro software es lo mejor. Así cualquiera se lo puede configurar a su gusto. Sin embargo, nuestro usuario promedio no necesita tener tantas opciones sobre la mesa. Quiere algo sencillo, que sólo tenga que instalar y funcione.
Para solucionar este problema, los filtros de WordPress son perfectos para que los usuarios más avanzados puedan configurar opciones de funcionalidad más complejas. En Nelio intentamos tener diseños de pantallas de ajustes para nuestros plugins con pocas opciones y luego proporcionar muchos filtros para personalizar tu experiencia, en caso de que así lo necesites.
El efecto Zeigarnik
El efecto Zeigarnik define la tendencia a recordar tareas inacabadas o interrumpidas con mayor facilidad que las que han sido completadas.
Para ayudar al usuario a no perderse por el camino de la interfaz, utilizar indicadores de progreso para indicar visualmente que una tarea no ha sido finalizada aumenta la posibilidad de que esa tarea acabe siendo completada.
Sólo tienes que ver lo que hacen plugins complejos como WooCommerce, que incluyen un proceso de onboarding para que los nuevos usuarios sigan los pasos correctos y así puedan tener el plugin funcionando desde el primer momento sin necesidad de ayuda externa.
En el diseño de la pantalla de edición de un test A/B con Nelio A/B Testing seguimos el mismo principio de presentar la información de forma ordenada. Primero tienes la sección con las variantes a probar y luego tienes la sección con los objetivos a medir. Por último, en la barra lateral tienes opciones adicionales.
Diseñar interfaces complejas teniendo en cuenta que el usuario necesita saber en cada momento qué ha de hacer es más complejo de lo que uno puede imaginar de primeras. Entender el modo de pensar del usuario y facilitarle la vida en cada momento ayudará a que tus interfaces sean más efectivas.
Nelio A/B Testing
Pruebas A/B nativas en WordPress
Usa tu editor de páginas favorito en WordPress para crear variaciones y lanza pruebas A/B con solo un par de clics. No se necesita saber nada de programación para que funcione.
Principios de la Gestalt
Los principios o leyes de la Gestalt son unas reglas que explican el origen de las percepciones a partir de los estímulos. Tal y como Eileen comenta en su presentación, describen como los humanos ven los objetos agrupando elementos similares, reconociendo patrones y simplificando imágenes complejas.
Hay diversas leyes que conforman los principios de la Gestalt, pero nos vamos a quedar con las siguientes, que están mucho más relacionadas con el diseño al que nosotros hacemos referencia en software:
- Principio de la semejanza: la mente agrupa los elementos similares en una entidad. La semejanza depende de la forma, del tamaño, del color y de otros aspectos visuales de los elementos.
- Principio de simetría: los components simétricos son percibidos como iguales, como un solo elemento.
- Principio de la proximidad: los objetos cercanos tienden a ser vistos como una unidad. Los estímulos que están próximos tienden a percibirse como parte de la misma unidad.
- Principio de dirección común: los elementos que parecen construir un patrón o un flujo en la misma dirección se perciben como una figura.
- Principio de continuidad: los detalles que mantienen un patrón o dirección tienden a agruparse juntos, como parte de un modelo.
Te recomiendo este artículo de Eleana Gkogka con ejemplos para cada uno de los principios de la Gestalt. Si sigues las normas de estas leyes de teoría del diseño en tus interfaces, conseguirás uniformidad y disminuir la carga cognitiva de tus usuarios.
Si te fijas en la captura de pantalla anterior que te mostré sobre el editor de tests A/B de Nelio A/B Testing (la encontrarás un poco más arriba), estamos utilizando un diseño similar al mismo diseño que puedes encontrar en el editor de bloques Gutenberg de WordPress. Con esto lo que queremos conseguir es que un usuario de Gutenberg se sienta confiado cuando accede a nuestra interfaz, ya que sigue los mismos patrones y es muy similar (principios de simetría, semejanza, etc.).
Efecto de posición serial
El efecto de posición serial es la tendencia de una persona a recordar mejor el primer y último artículo de una serie y recordar peor los artículos del medio de la serie.
Esto es algo que ya habíamos encontrado cuando analizamos los heatmaps de nuestras páginas con Nelio A/B Testing. Vimos que aquellos elementos que estaban en el primer corte de nuestra web tenían mucha más relevancia. Por este motivo, cuando nos enfrentamos a un nuevo diseño, deberíamos emplazar aquellos elementos más relevantes de la interfaz al principio y al final.
Del mismo modo, hemos de tener en cuenta que si en nuestra interfaz vamos a incluir un listado de componentes, los primeros y los últimos serán más relevantes para el usuario. Con esto en mente, podemos modificar el orden de los componentes para dejar aquellos menos importantes en el medio.
Ley de Miller
La ley de Miller establece que el número de objetos que una persona promedio puede retener en la memoria presente es de alrededor de siete. Esto viene de uno de los artículos más citados en psicología (recuerdo habérmelo leído y también citarlo cuando trabajaba en la universidad), «The Magical Number Seven, Plus or Minus Two: Some Limits on our Capacity for Processing Information» de George A. Miller.
Sabemos, pues, que los humanos funcionamos mejor con grupos de elementos de hasta 7 ítems (entre 5 y 9, según Miller). Por tanto, en interfaces con más de 7 componentes, deberemos agrupar o categorizar aquellos que tengan un nexo de unión semántico de forma que simplifiquemos la interfaz (e interacción) final para los usuarios.
La idea es que reduciendo la cantidad de información que presentamos en grupos más pequeños, facilitamos la experiencia de usuario y hacemos que las interfaces parezcan más manejables y generen menos rechazo.
Esto es aplicable en casi todas las interfaces que puedes encontrar en WordPress. Seguro que has visto páginas de ajustes de plugins con montones de opciones que provocan un scroll casi infinito en la página. Esto genera estrés y frustración a los usuarios. Categorizando elementos, uniéndolos en grupos, ocultando aquellos que no tienen porqué ser visibles de primeras, conseguiremos mejorar la efectividad de las interfaces.
Conclusiones
Un buen diseño es aquel que no se nota, ya que la interacción que proporciona al usuario es tan natural que no le hace pensar. Conseguir este tipo de resultados ya sea diseñando un componente web como un objeto físico es realmente complicado.
Si te dedicas al desarrollo de plugins para WordPress, como nosotros, seguro que alguna vez te ha pasado el echo de que un usuario te pida ayuda porque no sabe cómo realizar cierta acción. Algo que para ti es evidente, pero que no lo es para tus usuarios. Ahí es cuando te das cuenta realmente que puedes hacerlo mejor.
Tener en cuenta estas leyes de diseño y pensar en el usuario como nexo entre tu software y el valor que proporcionas con él es clave para mejorar la experiencia de usuario que creaste.
Te recomiendo que le eches un vistazo a las presentación de Eileen que te he dejado más arriba y me cuentes qué te han parecido estas leyes de diseño que te he presentado hoy. No te va a costar nada dejarme un breve comentario aquí abajo y a mi me va a hacer mucha ilusión leerte.
Deja una respuesta