Introducción a los patrones de diseño

No te lo han explicado nunca, pero seguro que sabes qué son esas tres rayitas horizontales que están en casi todas tus aplicaciones del móvil. También sabes en qué consiste el concepto de «carrito de compra» de una tienda online o que cuando te hablan de «pasos» al registrarte en un sitio web, nadie quiere que te pongas a caminar.

El porqué sabes esas cosas, y más, es debido a los patrones de diseño.

Qué son

Un patrón de diseño es una solución ya definida, frecuente y de eficacia comprobada ante un problema común.

El objetivo principal de utilizar patrones de diseño es aprovechar el aprendizaje del usuario en beneficio de la experiencia que encontrará a lo largo de nuestro producto, ya sea una web, una herramienta digital o una aplicación móvil.

Como diseñadores, a veces sentimos unas ganas tremendas de innovar y de crear soluciones y diseños originales nunca vistos antes. Es esa cara, con sus luces y sombras, de la labor creativa que quiere convertirnos en artistas de la pista.

Pero, ¡quiet@! Antes de nada, es muy recomendable investigar y, en la mayoría de casos, descubrir que lo que buscamos ya ha sido diseñado, probado y certificado como una buena solución para el problema al que nos enfrentamos.

Para qué sirven

Llegados a este punto, quiero diferenciar los patrones de diseño separándolos en dos bloques:

Patrones que diseñamos y construimos para nuestro producto en particular y que llamaré en este artículo Patrones propios.
Patrones que, como decíamos antes, ya trae consigo el usuario cuando «aterriza» en nuestra interfaz y que llamaremos Patrones comunes.

Patrones propios

En este primer bloque he agrupado los patrones que, diseñados por nosotros, ayudarán al usuario a entender y aprender cómo es y cómo funciona nuestro producto. Patrones que quizá no haya visto anteriormente en otras plataformas o aplicaciones, pero que encontrará a lo largo de nuestra interfaz, familiarizándose con ella a medida que la utilice.

Al ser elementos o prácticas reutilizables, el uso de estos patrones de diseño permite lograr una mayor consistencia a lo largo de la experiencia de uso de nuestro producto, incrementa la capacidad para escalarlo y nos convierte en maestros jedi de la eficacia a la hora de diseñarlo y construirlo. ¡Ahorraremos tiempo y esfuerzo!

Diseñadores y desarrolladores utilizando patrones de diseño.

Resulta complicado poner ejemplos sobre este «tipo» de patrones ya que surgen como una necesidad específica para un producto digital que tiene unos requerimientos particulares. Pero, en base a mi experiencia, intentaré describir algunos casos en donde es posible aplicar el concepto de «patrón reutilizable» y así entender mejor esta agrupación:

Podemos definir que los elementos interactivos de nuestra aplicación (botones, enlaces e iconos interactivos, por ejemplo) tengan un mismo color. De esta manera llegaríamos a un momento en el que nuestro usuario sabría, antes incluso de realizar una acción, con qué elementos puede interactuar.
Los procesos implicados en nuestro producto (de compra, de transferencia de dinero, de creación de una cuenta de usuario, etc) podrían tener una estructura, y una manera visual de representarla, similar entre sí.
Los avisos del sistema que estemos diseñando aparecen y desaparecen de la interfaz con la misma lógica y bajo unas mismas reglas.
Que todos los estados vacíos de una página o sección tengan una misma estructura de elementos y componentes.
Definir que la información de un elemento de una lista se le muestre al usuario de una manera que repliquemos en todas las listas de nuestro producto. Por ejemplo, en una plataforma web de un banco, podríamos unificar cómo mostrar la información de una cuenta, de una tarjeta de crédito y de un préstamo bajo la premisa de que todos ellos encajan dentro de la misma categoría de «productos bancarios».

En conclusión, y como decíamos antes, la idea es aplicar la misma solución a una serie de circunstancias que tienen características comunes para que el usuario aprenda fácilmente a utilizar intuitivamente nuestra interfaz.

Patrones comunes

El segundo grupo lo forman los patrones que el usuario ya conoce porque se ha cruzado con ellos repetidamente en otras páginas web, plataformas o apps y que podemos (y debemos) aprovechar para fortalecer la experiencia que estemos creando.

Gracias a ellos conseguiremos reducir la carga cognitiva del usuario al utilizar nuestra interfaz, ya que el esfuerzo de aprender cómo funciona será mucho menor, generando la sensación de que nuestro producto es familiar, conocido y en consecuencia, más intuitivo.

Creo que viene bien colocar por aquí una cita de Jacob Nielsen: «Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.«

He encontrado algunas formas de catalogar estos patrones, aunque parece que no hay un criterio establecido que los englobe y agrupe. Un ejemplo, sin entrar en detalle, podría ser:

Navegación: rastros de migas, menús verticales y horizontales, menús expandibles, cabecera, pie de página, acordeones, tarjetas de contenido, paginación, etc.
Obtención de datos: formularios, calendarios, drag and drop, captchas, procesos con pasos, valoraciones, etc.
Búsqueda: caja de búsqueda, resultados, filtros, mapas de sitio, etiquetas, categorías, etc.
Contenido: tablas, carruseles, preguntas frecuentes, filtros de contenido, ordenación, etc.
Social: lista de amigos, compartir contenido o perfiles, reacciones, invitaciones, seguimiento de perfiles, muro, etc.
Otros: procesos de acceso, procesos de registro, procesos de pago, suscripciones, páginas de producto, carrito de compra, lista de deseados, etc.

En síntesis, estos patrones son elementos y maneras de realizar tareas frecuentes que se han ido propagando por numerosos productos digitales hasta que son conocidos por el grueso de los usuarios, independientemente del producto que utilicen.

Conclusión

Resulta muy conveniente aprovechar lo que el usuario ya tiene aprendido para que nuestros diseños le aporten sensaciones conocidas (es decir, intuición) y facilitar el uso de las interfaces que estemos creando.

Por otro lado, aplicar esa idea de repetición/reutilización en nuestros propios productos y bajo nuestras reglas específicas fomentará que el aprendizaje de los mismos sea más rápido.