Publicado el 15 Feb, 2022 6 minutos de lectura
Imagina que cada automóvil tuviera el acelerador o el freno en ubicaciones distintas, o que las luces intermitentes se encendieran de diferentes maneras dependiendo del tipo de vehículo. Si bien con suficiente práctica podríamos aprender a conducir un modelo, sin duda tendríamos dificultades para usar otro, distinto al que ya conocemos.
En el diseño de experiencia, una de las leyes de Jakob Nielsen dice que al trabajar en un producto digital tenemos que considerar que los usuarios han pasado más tiempo en otros sitios web o aplicaciones y menos tiempo en el nuestro, por ende, ya vienen con aprendizajes en base a esas experiencias previas. Si al ingresar por primera vez a una página el usuario se encuentra con patrones que ya conoce, el foco estará entonces en la experiencia, productos o servicios que ofrece el sitio, y no en cómo aprender a usarlo. Por el contrario, si al navegarlo el usuario se enfrenta a una curva de aprendizaje empinada, es muy probable que se confunda y se vaya.
El diseño basado en patrones preexistentes nos permite crear mejores experiencias, y el uso de estos patrones impactan positivamente en la agilidad y eficiencia de tu equipo.
¿Qué son los patrones de diseño?
El concepto “patrones de diseño” fue acuñado por primera vez por arquitectos de la universidad de Berkeley, California, en el libro A Pattern Language de 1977. En él, se habla de los patrones como soluciones recurrentes a un problema común de diseño, y de cómo al utilizar buenos patrones dentro de un mismo entorno podemos construir un lenguaje compartido para los usuarios. En otras palabras, los patrones actúan como “building blocks” para crear soluciones eficientes a problemas simples o complejos, y lo más importante, soluciones reutilizables.
La idea de usar patrones como los cimientos de todo gran sistema, junto con la industria emergente de la programación y el diseño de la época se influenciaron mutuamente. Desde entonces, numerosas personas del mundo de la tecnología han estudiado los patrones de interacción entre humanos y computadoras, evidenciando el beneficio de utilizarlos en el diseño de interfaz, software, usabilidad, entre otros.
Una de ellas es Alla Kholmatova, quien en su libro Design Systems (2017) los define como “todas las partes repetibles y reutilizables de la interfaz que puedan ser aplicadas para resolver un problema de diseño específico, satisfacer una necesidad del usuario o evocar una emoción.”
Algunos ejemplos de patrones en el diseño de productos digitales son:
- El uso de un ícono con tres líneas horizontales o “menú hamburguesa” para la navegación en dispositivos móviles
- Gestos como el doble tap para dar un “me gusta”
- Breadcrumbs para mostrarle al usuario su ubicación actual y navegar
- Agregar un producto al carrito de compras
- Comparadores de productos o servicios
- Posibilidad de subir de nivel y obtener recompensas, gamification
¿Para qué sirven los patrones de diseño?
Existe una ley del aprendizaje que indica que el tiempo demorado en realizar una tarea disminuye en función a la cantidad de veces que la hemos practicado. Cada vez que ingresamos a un sitio a realizar una tarea, recurrimos a lo que hemos aprendido navegando otras páginas web para ejecutarlas sin necesidad de pensarlo. Por ejemplo, si quisiéramos navegar al homepage, lo más común es hacerlo al clickear el logo que se encuentra en la esquina superior izquierda, dentro del menú de navegación. Si por alguna razón decidimos salirnos de este estándar y utilizar un diseño con el logo a la derecha, en vez de hacerlo intuitivamente, el usuario se detendrá a pensar: ¿Cómo hago para ir al homepage?
Cada vez que hacemos pensar al usuario, estamos aumentando la carga cognitiva de la interfaz, haciendo al sitio o la aplicación menos usable. Al tomar la decisión de incorporar patrones a nuestros diseños, estamos acompañando al usuario en su recorrido por la interfaz, permitiéndole saber qué hacer en cada momento, lo que genera una sensación de seguridad y nos ayuda a evitar las frustraciones.
¿Hay espacio para la creatividad al usar patrones de diseño?
Diseñar con patrones no significa la muerte de la innovación. Una misma solución se puede aplicar de formas distintas dependiendo del contexto. Existen patrones del mundo de los videojuegos que pueden ser aplicados dentro de flujos complejos de productos financieros, como lo son los indicadores de progreso.
Sistema de puntos y recompensas en Mercado Libre (izquierda) similar al utilizado en juegos como PokemonGO (derecha).
También hay gestos como el scroll horizontal, o el pull to refresh que vieron su génesis en las redes sociales y ahora están presentes en la versión mobile de casi cualquier producto digital.
Aunque fue criticado en sus inicios, el scroll horizontal ha probado su éxito porque permite una navegación más flexible. Ayuda a los usuarios a ver varios elementos de una misma categoría sin necesidad de ir a diferentes páginas.
Reutilizar estas soluciones nos ayuda a generar consistencia entre lo aprendido por el usuario y lo que espera que suceda al ingresar a nuestro sitio. Un buen proceso de diseño logra identificar estos patrones y adaptarlos al contexto del producto digital para finalmente testearlos y verificar si funcionan.
Nuevos patrones surgen cuando un gran número de diseñadores adopta una tendencia que ha probado ser eficiente, o cuando las grandes compañías de tecnología se arriesgan a innovar dentro de sus productos porque en la mayoría de los casos los usuarios están obligados a aprender a usarlas, como lo es el caso de Google o Apple. Un claro ejemplo de esto es la actualización de iOS 15 que trajo consigo un cambio de posición en la barra de búsqueda de Safari, la cual ahora se ubica en la parte inferior del dispositivo como se aprecia en la imágen:
La razón detrás de este cambio se basa en la ergonomía, ya que dejando al buscador abajo, este queda mucho más cerca de los dedos que usamos para escribir. Si bien suena muy acertado, la actualización generó mucha controversia porque a una buena parte de los usuarios no les gustó, y en algunos casos generaba problemas de usabilidad.
I can’t be the only one who finds the URL bar at the bottom of the browser in iOS 15 to be entirely counter to a natural UX flow, or is it just me? pic.twitter.com/QBXHkGpqEh
— Eric Wright (@discoposse) October 3, 2021
La decisión entre usar un patrón de diseño o una solución innovadora depende de con cuánta frecuencia los usuarios van a usar mi producto. Mencionamos que a mayor cantidad de repeticiones, menor es el tiempo que demoramos en realizar una tarea. Sin embargo, en algunas interfaces la cantidad de repeticiones necesarias para que el usuario encuentre lo que necesita sin pensarlo mucho, va a ser más elevada. A esto se le conoce como curva de aprendizaje, y a medida que se vuelve más empinada, el usuario va perdiendo la motivación de completar la tarea y las ganas de volver a usar nuestro producto digital.
¿Qué impacto tienen los patrones de diseño para un equipo que construye productos digitales?
Más allá de ser beneficioso para los usuarios, los patrones funcionan como una especie de red donde todo está conectado dentro de un gran sistema. En Modyo por ejemplo, en el laboratorio de diseño y experiencia trabajamos con la metodología Atomic Design, la cual nos sirve de base para construir un Design System al inicio de un Product Discovery con nuestros clientes.
En este artefacto se encuentran estandarizados todos los elementos de la interfaz que puedan ser reutilizables. Contar con este gran repositorio de componentes nos ayuda no solo a ser más rápidos y consistentes, si no que a la vez permite al diseñador concentrarse en mejorar el flujo y la experiencia completa en vez de dedicar tiempo a diseñar un banner diferente para cada landing page.
Al comenzar la fase de implementación, el equipo de desarrollo se basa en el Design System para crear su propio repositorio dentro del front-end, creando clases y componentes reutilizables. Además de ahorrar tiempos de desarrollo, permite optimizar el código y evitar el re-trabajo al tener todo definido desde un inicio. Esto genera una ventana para que el desarrollador pueda enfocarse en cosas que realmente den valor al cliente.
Para el equipo de QA, las definiciones del sistema de diseño se transforman en una especie de biblia desde donde se verifica si lo que pasó a producción cumple o no con nuestros estándares de calidad, y en base al mismo artefacto, hemos construido templates y widgets que cada cliente puede reutilizar para crear nuevas vistas dentro del sitio de forma rápida e independiente, sin perder la consistencia con el resto de la interfaz.
Establecer patrones da espacio a la creación de un lenguaje compartido por diseñadores, desarrolladores, project managers y cada integrante dentro del equipo. En el fondo, las ventajas de aplicar patrones se traducen a mayor agilidad en los procesos y a productos fácilmente escalables a lo largo del tiempo.
Conclusiones
Es fácil descubrir patrones de diseño, pero el verdadero trabajo está en identificar aquellos que nos servirán para crear una experiencia de usuario positiva y relevante. Sin embargo, si no conocemos a nuestros usuarios, no podemos saber qué les parece relevante. Para obtener esta información, es necesario realizar user research y/o apoyarse en estudios previos que nos sirvan como antecedentes para validar una solución.
Entender quién va a usar nuestro producto es lo que nos dará el norte sobre lo que funciona y lo que no.
Para los usuarios, los patrones de diseño favorecen la capacidad de aprendizaje debido a que generan consistencia, y la consistencia es un pilar clave dentro de los 10 heurísticos de Nielsen porque apoya la exploración y la resolución de problemas.
Si quieres aprender más sobre patrones de diseño, aquí tienes algunos recursos adicionales donde puedes encontrar ejemplos aplicables y casos de uso interesantes:
https://www.nngroup.com/articles/design-pattern-guidelines/https://ui-patterns.com/
https://uxmovement.com/
https://uigarage.net/
http://www.welie.com/patterns/index.php
