13 noviembre, 2018

Diseño UX: Leyes fundamentales

Vamos a hacer hoy una entrada teórica, centrada en un campo concreto del diseño: el UX o Experiencia de Usuario (en inglés, User eXperience, de ahí las siglas).

Así pues, parecida a otras entradas anteriores, como cuando vimos los 10 principios del Buen Diseño de Dieter Rams, o las 5 frases para vivir (y diseñar) de Massimo Vignelli, en ambos casos enseñanzas de grandes maestros con toda una vida de dedicación profesional detrás.

Dado que el UX se centra específicamente en ofrecer la mejor experiencia al usuario –por tanto en presentar los contenidos de la forma más comprensible y/o accesible posible-, no se trata de una disciplina tan subjetiva como otras partes del diseño. Así pues, más sencilla de sistematizar en “leyes” o “normas”. Aunque como siempre esto será opinable.

Sea como sea, sin duda resultarán de interés estas “leyes del UX” que enumeraremos a continuación, aunque sea como meros consejos y consideraciones. Desde luego, la experiencia de usuario es algo que siempre conviene tener en cuenta a la hora de diseñar y presentar cualquier información.

Vamos a utilizar además un ejemplo concreto, que nos servirá para entender mejor todo. Se trata del desarrollo de una aplicación móvil de tipo educativo, un proyecto real como veremos, que las irá aplicando una por una durante toda la fase de diseño de la app. Como hemos comentado, se trata de un ejemplo real, extraído de un máster en UX, sin duda utilísimo para aprender sobre este tema. Es accesible públicamente de forma libre y gratuita, en la siguiente ubicacación. Muy recomendable echarle un vistazo (no solo la parte del UX, sino a todo el proyecto).

Sin más, adentrémonos en materia.

Las 12 leyes fundamentales del UX.

12 principios del UX

Este cuadro que vemos arriba está extraído precisamente del máster antes citado. Concretamente, del apartado centrado en el diseño de la app (apartado 7).

Entre las referencias de dicho máster se menciona como fuente este otro artículo: UX Laws with practical examples. En dicho artículo, a su vez, se cita otra referencia: Laws of UX. Las imágenes que acompañan a cada “ley” a continuación, proceden todas de este último sitio.

Muy recomendable visitar los links anteriores. Son referencias sin duda de mucho interés para este tema. En ellos, las “leyes del UX” se definen inicialmente de la siguiente manera:

“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.”

También se aclara que:

“Un diseño pensado y basado en la experiencia de usuario debe cumplir parte de todas y cada una de estas normas.”

Como hay muchos textos en inglés, vamos a aportar aquí una traducción libre punto por punto, comentada y explicada. En realidad, como veremos, es todo de puro sentido común.

1. Ley de Fitts. "El tiempo para llegar a un área objetivo depende de la distancia al objetivo y del tamaño del objetivo”.

Leyes UX póster Ley de FittsCréditos posters: https://lawsofux.com/

Bastante obvio, de aplicación sobre todo para botones en páginas web y apps. Es mejor que tengan un tamaño grande, para facilitar verlos y clicarlos, especialmente en pantallas táctiles.

Se recomiendan botones bastante anchos y con altura suficiente (280x50 píxeles como mínimo en dispositivos móviles).

Ejemplo de aplicación de la Ley de Fitts

En la aplicación que se muestra en el máster (imagen de arriba), podemos ver este principio en la pantalla inicial de su app para padres.

2. Ley de Hick. "El tiempo de tomar una decisión se incrementa con el número y complejidad de opciones”.

Leyes UX póster Ley de Hick

También sencillo de entender. Conviene establecer pocas alternativas para que sea más fácil y se tarde menos en elegir. Las mínimas posibles, en definitiva.

También se desprende que, si por ejemplo tenemos que plantear 20 opciones a completar, será mejor dividirlas en 4 pasos con 5 opciones cada una, que plantear las 20 de golpe.

Ejemplo de aplicación de la Ley de Hick

Se ve muy bien en nuestra app de ejemplo: a la hora de presentar diversas opciones, lo mejor es divirlas en varias pantallas, debidamente agrupadas, y cada una con 4-5 opciones como mucho.

3. Ley de Jackob. "Los usuarios están la mayor parte del tiempo en otros sitios. Esto significa que preferirán que tu sitio trabaje de la misma manera que todos los demás que ya conocen”.

Leyes UX póster Ley de Jackob

En definitiva, será recomendable buscar referencias análogas a nuestro site o app, para plantear un desarrollo parecido, que se entienda de inmediato.

4. Ley de Proximidad. "Los elementos tienden a percibirse agrupados si están cerca”.

Leyes UX póster Ley de Proximidad

Por tanto, lógicamente deberemos presentar de esta forma elementos que en efecto pertenezcan a grupos temáticos. Lo contrario generaría confusión.

5. Ley de Similitud. "El ojo tiende a asociar los elementos similares de un diseño. Por tanto los percibe como grupos, imágenes o formas, incluso si están separados”.

Leyes UX póster Ley de Similitud

Habremos de asegurarnos de que los enlaces y sistemas de navegación se diferencien visualmente de los elementos de texto normales y tengan un estilo consistente entre ellos (sean “similares”).

6. Ley de Conectividad Uniforme. "Los elementos que están conectados visualmente son percibidos como más relacionados que otros elementos sin conexión”.

Leyes UX póster Ley de Conectividad Uniforme

Dicha conexión visual puede crearse con líneas, colores, marcos u otras formas. Las zonas así conectadas se percibirán como agrupadas.

Los ejemplos de esto son innumerables. Por ejemplo un timeline: los puntos para cada hora están conectados por una línea y además con un color concreto para resaltar su conexión. Esto facilita al usuario el percibir el hilo del tiempo.

Ejemplo de aplicación de las leyes de Proximidad o Región Común, Similitud y Conectividad Uniforme

Volviendo a nuestra app de muestra, en esta pantalla puede verse bien la aplicación de las leyes anteriores (conectividad y agrupación de los diversos elementos gráficos e información).

7. Ley de Miller. "La persona promedio solo puede retener hasta 7 elementos en su memoria inmediata (más/menos 2)”.

Leyes UX póster Ley de Miller

Esto es vital para los menús de navegación, elección de opciones, encuestas, formularios y similares. Al parecer, diversos estudios acreditan que la mayoría de personas tienen dificultad para recordar más allá de 5-9 elementos. Por tanto, es recomendable establecer cuantos menos, mejor.

8. Ley de Parkinson. "Cualquier tarea se demorará hasta agotar todo el tiempo disponible".

Leyes UX póster Ley de Parkinson

Es una ley derivada de pensar que cuánto más tiempo dediquemos a algo, mejor será (no siempre es así, por supuesto). Esto es algo a tener en cuenta a la hora de definir tiempos para realizar tareas, por ejemplo rellenar formularios o realizar compras.

Es –en nuestra opinión- una regla complicada de aplicar, pues reducir el tiempo también incrementa el estrés. No acotarlo, en cambio, induce a la relajación e incluso a abandonar la tarea. Así pues, es un complicado equilibrio. En los link anteriores se aporta el caso de una importante tienda online, cuyos carritos de la compra, una vez pasamos a la pasarela de pago final, tienen establecidos tiempos de 5 minutos para completar la tarea. Suponemos que habrán realizado muchas pruebas sobre esto previamente, pues es un tema importante.

Ejemplo de aplicación de la Ley de Parkinson

En nuestra app de ejemplo, este principio se aplica permitiendo a los padres elegir el tiempo que dedicarán a gestionar la app cada día. Parece bastante acertado.

9. Efecto de posición de una serie. "Los usuarios tienden a recordar mejor el primer y último elemento de una serie”.

Leyes UX póster Efecto de posición de una serie

Por tanto, obviamente se debe tener en cuenta a la hora de colocar botones, anuncios y en general elementos imporantes.

10. Ley de Tesler. "En todo sistema hay un mínimo de complejidad que no se puede reducir”.

Leyes UX póster Ley de Tesler

También conocida como Ley de Conservación de la Complejidad. Implica que, por mucho que queramos, siempre llega un momento que no se puede simplificar y facilitar más una tarea.

Una recomendación relacionada, es la de presentar primero las tareas más sencillas, y a continuación, una vez dominadas las primeras, presentar las que sean forzosamente más complejas.

11. Efecto Von Restorff. "Cuando se muestran muchos elementos similares, aquel que se diferencie será más fácilmente recordado”.

Leyes UX póster Efecto Von Restorff

También conocido como el Efecto Aislamiento (Isolation Effect). Es otra peculiaridad de los grupos de objetos: cuando hay muchos parecidos y uno diferente, siempre destacará el que difiere del resto. Así pues, es una manera de resaltar cosas muy efectiva.

En los menús, por ejemplo, donde hay varias opciones, diseñando una con alguna diferencia la destacará del resto.

12. Efecto Zeigarnik. "Las personas recuerdan mejor tareas inacabadas o interrumpidas que las tareas completadas".

Leyes UX póster Efecto Zeigarnik

Entre las diversas aplicaciones prácticas, está por ejemplo mostrar una barra o gráfico de progresión, que muestre lo ya completado y por completar. Esto hará que los usuarios se activen y concentren más en la conclusión de una tarea.

Ejemplo de aplicación del Efecto Zeigarnik

En nuestra app de ejemplo, podemos ver una muestra de la aplicación de este principio. Nuevamente, parece algo bastante acertado, que además permite introducir gráficos que aporten información extra relacionada.

Las 19 leyes del UX.

Hasta aquí las 12 “leyes fundamentales del UX”, de las que se habla en el máster que citamos al principio. No obstante, se han definido hasta 7 principios más, además de estos.

Concretamente, son aportados por el sitio Laws of UX, que en realidad es de donde “beben” muchos de los principales artículos sobre el tema –no nos cansaremos de repetir que es una de las principales referencias en este campo-. Allí se enumeran un total de 19 principios.

Estos 19 principios han sido después mezclados de diversas formas por otros sitios y autores, siendo por tanto los fundamentales. Así pues vamos a enumerarlos también a continuación. En realidad son los 12 ya comentados más los siguientes:

13. Efecto de usabilidad estética. "Los usuarios a menudo perciben el diseño estéticamente agradable como un diseño más útil".

Leyes UX póster Efecto de usabilidad estética

Facil de entender este principio: se han de hacer diseños agradables, limpios, bien hechos. Obviamente, las personas tendrán así una mejor experiencia de usuario. Así pues, el Diseño Gráfico como tal forma parte del UX de forma indisoluble.

14. Ley de Región Común. "Los elementos tienden a percibirse agrupados si comparten un área con un límite claramente definido".

Leyes UX póster Ley de Región Común

Esta ley suele aparecer unida a la de Proximidad, pues en realidad son similares (y bastante obvias). No obstante, en puridad son dos principios distintos, y ambos a tener en cuenta a la hora de diseñar.

15. Umbral Doherty. "La productividad se dispara cuando una computadora y sus usuarios interactúan a un ritmo que garantiza que ninguno de los dos tiene que esperar en el otro".

Leyes UX póster Umbral Doherty

Diversos estudios realizados por IBM durante los años 80, mostraron que la velocidad de respuesta de un programa no debía superar aproximadamente el medio segundo (concretamente los 400 milisegundos), para no “frustrar” a la persona usuaria. Tiempos por encima resultaban en pérdidas de concentración.

Así pues, la aplicación de este principio es muy sencilla: el sitio o aplicación debe funcionar de forma rápida, para su óptima usabilidad. Por tanto responder de forma casi inmediata cuando pulsamos un botón o introducimos un dato.

16. Ley de Prägnanz. "Las personas percibirán e interpretarán las imágenes ambiguas o complejas como la forma más simple posible, porque es la interpretación que requiere un menor esfuerzo cognitivo".

Leyes UX póster Ley de Prägnanz

Nuevamente, diversas experiencias científicas han mostrado que este efecto se produce en nosotros, para evitar quedar “sobrepasados” cuando hay demasiada información. Como ejemplos se ponen las decoraciones con luces, que siendo una serie de bombillas encendidas (puntos), las percibimos como líneas y formas.

Esto es algo que se relaciona con varias leyes anteriores (similitud, proximidad…), así pues algo a tener en cuenta a la hora de diseñar cualquier interfaz gráfica. También aprovechable para innumerables efectos decorativos artísticos, por supuesto.

17. La navaja de Occam. "Entre las diversas hipótesis en competencia que predicen igualmente bien, debe seleccionarse la que tenga menos supuestos".

Leyes UX póster La navaja de Occam

Esta “ley”, que más bien es una recomendación, se atribuye al famoso monje medieval que aparece en la novela (y película) El nombre de la rosa, William –Guillermo- de Occam. Se refiere a que, cuando hay varias teorías para explicar algo, lo más probable es que la más simple sea la correcta finalmente, debido a que generalmente las cosas se dan así. Era algo extraído de su experiencia, que ha resultado ser de verdadera aplicación en todos los campos de la ciencia.

Volviendo al UX, esta ley tiene una apliación obvia: simplificar. Cuantas menos opciones, supuestos y posibilidades, cuanto más directos al tema en cuestión, más comprensible e inequívoco será.

18. Principio de Pareto. "Para muchos eventos, el 20% de las causas determinan el 80% de los efectos".

Leyes UX póster Principio de Pareto

En muchos procesos, se ha visto que un porcentaje bajo de los participantes (alrededor de solo la quinta parte) será responsable finalmente de la mayor parte del resultado (hasta de las 4/5 partes). El resto de participantes serán mucho menos activos o determinantes en el resultado.

Este principio lo enunció por primera vez un economista italiano llamado Pareto, al descubrir que el 80% de la tierra italiana estaba en manos de solo un 20% de la población. Este porcentaje 20/80 se ha visto después que se da en todo tipo de procesos.

Esto tiene aplicación en muchos campos, como por ejemplo en el caso de las compras, donde es especialmente sensible. Implica que un 20% de los clientes realizará la mayoría del gasto, siendo el resto compradores menores. Así pues, será buena idea centrarnos en los compradores principales.

En términos generales de Diseño UX, este principio invita a concentrar la mayor parte del esfuerzo en las áreas que brindarán los mayores beneficios a la mayoría de los usuarios.

19. Ley de Postel. "Sé liberal en lo que aceptas y conservador en lo que envíes".

Leyes UX póster Ley de Postel

En definitiva, ofrecer un marco muy abierto, que acepte cualquier tipo de usuario, para después ir encaminando a todo el público por unos caminos claros y definidos, hasta resultados concretos y limitados.

Por tanto ser empático, flexible y tolerante a cualquier número de acciones que el usuario pueda realizar. Aceptar la entrada variable de los usuarios, pero definiendo un sistema con límites definidos y que proporcione una respuesta clara al usuario. Esto sin duda es pura usabilidad.

Conclusión-Resumen.

Así pues, estos serían los principios fundamentales. Pero, ya que hablamos en términos de UX, personalmente encuentro que en realidad todo esto podría resumirse todavía mucho más.

Sencillamente se trata, en mi opinión, de presentar un entorno los más limpio, claro y familiar posible, simplificado al máximo, con los botones y elementos bien definidos, relacionados y agrupados. Con un tamaño suficientemente grande, y siempre con las menores opciones posibles. Si es necesario que el usuario elija entre muchas posibilidades, mejor presentarlas en varias pantallas, y siempre utilizar barras o gráficos de progreso de tarea.

O, como dicen en uno de los artículos antes enlazados:

“A good UX contemplates or tries to contemplate all the options that a user is going to find, and tries to simplify the path to complete the service you are offering.”

Es decir, que “el buen UX” contempla todas las opciones que encontrará el usuario, e “intenta simplificar el camino para completar el servicio que estás ofreciendo”.

En definitiva, es básicamente el “menos es más” de siempre, la ley de oro del Diseño Gráfico, tal y como enseñan los grandes maestros (ver artículos enlazados al principio para más información).

Y poco más, aparte de algunos trucos… Como que el primer y último elemento de una serie son los que más llaman la atención, así como que todo elemento diferente dentro de un grupo de iguales destaca mucho más. Son buenas pautas para dirigir la atención hacia algo.

En definitiva, consejos bastante fáciles de seguir… De puro sentido común. Recuerden diseñador@s, simplifiquen.

Para terminar, recomendar una vez más otra entrada de La Grafiteca que complementa muy bien a ésta: "40 lecciones de maestros del diseño" (recopilación de "mandamientos" de grandes profesionales de todas las épocas, acompañados de muestras de sus obras).