1.1 ¿Qué es un patrón de diseño?

Como diseñadores de UX, abordamos el diseño de interfaces mediante el uso de patrones de diseño

Los patrones de diseño son soluciones comunes para problemas de diseño comunes. El concepto de patrón tiene sus raíces en la arquitectura. En 1977, Christopher Alexander y otros coautores escribieron un libro llamado “El lenguaje de patrones” sobre cómo organizar pueblos y ciudades utilizando entendimientos comunes que las personas tienen sobre el espacio y utilizando soluciones repetibles.

Los patrones en UX también son soluciones repetibles. Los patrones de diseño son interacciones documentadas y mejores prácticas sobre cómo y cuándo usar el elemento de interfaz de usuario correcto.

Los patrones de diseño suelen constar de los siguientes elementos:

Interacción y comportamiento, descripción y mejores prácticas.

Según la biblioteca de patrones, el patrón puede tener especificaciones visuales y técnicas si se han desarrollado en componentes reutilizables que los ingenieros pueden usar al desarrollar la experiencia. Echemos un vistazo a cómo se construyen las interacciones de patrones.

En este ejemplo, tenemos un patrón para un calendario en una entrada de cuadro de texto

Si bien esto parece una interacción muy sencilla, existen algunos estados y consideraciones clave al profundizar en los detalles de esta entrada de calendario. Una consideración es si el calendario se invoca o no desde el icono o el campo. En esta descripción, es invocado por el foco en el campo, no solo por el icono. La siguiente interacción es con el propio calendario.

Algunas preguntas que queremos responder sobre cómo funciona este patrón son: ¿Cuál será la fecha predeterminada? ¿Cómo cambia este usuario la fecha si quiere seleccionar algo para el próximo año? ¿Puede el usuario simplemente ingresar la fecha en el campo? En este caso, pueden. Luego tenemos el estado final y cómo se formatea la fecha después de que el usuario selecciona la fecha del calendario. ¿Se mostrará como en este ejemplo o se utilizará el mes escrito como septiembre? Todas estas interacciones y estados deben documentarse en el propio patrón. Las especificaciones que resaltan las interacciones clave también se incluyen en la documentación del patrón. En nuestro ejemplo, recorremos un patrón de calendario. Este patrón no incluía ningún elemento visual o técnico, solo era un patrón de diseño que se centraba en las interacciones. Los patrones establecen consistencia para las interacciones y establecen expectativas sobre cómo el usuario debe interactuar con un elemento de la interfaz. El otro elemento de los patrones de diseño es el diseño visual. A menudo, los patrones de diseño son un sutil reflejo de la marca. Por ejemplo, al observar un elemento simple como un botón de radio, podemos ver cómo las diferentes marcas manejan el color para reforzar su identidad. Como en este ejemplo de E-Trade, una plataforma de comercio financiero, y este ejemplo de MailChimp, una plataforma de automatización de marketing. La combinación de patrones de interacción, especificaciones técnicas y visuales se conocen colectivamente como un sistema de diseño. Los sistemas de diseño son integrales y se utilizan para ayudar a acelerar el desarrollo mientras se mantiene la consistencia visual y de interacción. Los sistemas de diseño ayudan a diseñar la escala. Usando este ejemplo de acordeón, podemos visualizar el diseño de interacción como se comporta el acordeón cuando hacemos clic en el panel. El fragmento de código es el código subyacente que componía este elemento y el diseño visual es el color, el tipo y los íconos utilizados en el elemento mismo. Los sistemas de diseño tienen una combinación de interacción, código y diseño visual. Los patrones de interacción son la base de un diseño de interfaz usable y consistente.