Las leyes de diseño que has de conocer para crear mejores experiencias de usuario

Publicada en WordPress.

Mira nuestro vídeo

Existe una versión mejor de tu web

Comparte este artículo

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:

Beyond pretty-simple design principles to create richer user experiences, de Eileen Violini.

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.

Definición gráfica de la ley de Hick. Tener más opciones hace que el tiempo que conlleva tomar una decisión aumente de forma logarítmica.

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.

Proceso de onboarding de WooCommerce donde tienes los pasos a seguir, para ayudarte a terminar el proceso de configuración del plugin.
Proceso de onboarding de WooCommerce donde tienes los pasos a seguir, para ayudarte a terminar el proceso de configuración del plugin.

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.

Configuración del test de páginas con Nelio A/B Testing para probar la versión alternativa con vídeos en vez de imágenes estáticas.
Pantalla de edición de un test A/B de páginas con Nelio A/B Testing, imitando el tipo de interfaz que encuentras en el editor de bloques Gutenberg. Imitar diseños ya establecidos en la mente del usuario también ayuda a mejorar su experiencia.

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.

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.

Ejemplos de principios de la Gestalt
Ejemplos de principios de la Gestalt (fuente).

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.

Scrollmap en Nelio A/B Testing
Un scrollmap nos puede dar información mediante colores de cuales son las zonas más relevantes en nuestra web.

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.

Añadir nuevo perfil social a Nelio Content
La página de ajustes de Nelio Content está dividida en varias secciones más simples que si mostráramos todo a la vez en una única pestaña. Agrupar componentes simplifica la interfaz y mejora la experiencia de nuestros 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.

Imagen destacada de Halacious en Unsplash.

Deja una respuesta

No publicaremos tu correo electrónico. Los campos obligatorios están marcados con: •

He leído y acepto la Política de privacidad de Nelio Software

Al marcar la casilla de aceptación estás dando tu legítimo consentimiento para que tu información personal se almacene en SiteGround y sea usada por Nelio Software con el propósito único de publicar aquí este comentario. Contáctanos para corregir, limitar, eliminar o acceder a tu información.