Los Patrones de diseño o Design patterns son una parte imprescindible dentro de un design system. Estos patrones son elementos o agrupaciones de componentes que podemos ver repetidamente en un producto digital.
Podríamos decir que un patrón de diseño es una solución estandarizada a un “problema” o estado que se repite a lo largo del diseño de una interfaz o producto.
Los patrones de diseño de una interfaz de usuario son soluciones recurrentes que resuelven problemas de diseño comunes.
ui-patterns.com
¿Para que sirven los Patrones de Diseño?
La utilidad principal de definir estos patrones de diseño UI es estandarizar y ofrecer una solución a los problemas comunes dentro de una interfaz.
Almacenar y documentar patrones de diseño sirve para poder agilizar y facilitar los flujos de trabajo de diseño, permitiendo centrarse en mejorar la usabilidad y experiencia de usuario final con una interfaz.
Los patrones de diseño ux son piezas que tienden a generar mucha interacción, por lo que trabajarlos e ir modificándolos ayudará positivamente a los usuarios que interactúen con nuestros productos.
Por qué utilizar patrones de diseño
Utilizar un patrón de diseño en el desarrollo de software y diseño de productos digitales ofrece varias ventajas clave:
- Coherencia y consistencia: Los patrones de diseño proporcionan un enfoque estandarizado para resolver problemas comunes en el diseño y desarrollo. Al seguir un patrón, se establece una estructura coherente y consistente en el producto, lo que mejora la experiencia del usuario y facilita la comprensión y uso del producto.
- Reutilización y eficiencia: Los patrones de diseño permiten la reutilización de soluciones probadas y eficientes. En lugar de reinventar la rueda cada vez que se enfrenta a un problema similar, los patrones ofrecen soluciones comprobadas que han demostrado ser efectivas en situaciones similares. Esto ahorra tiempo y esfuerzo, permitiendo un desarrollo más rápido y eficiente.
- Mantenibilidad y escalabilidad: Los patrones de diseño están diseñados para ser mantenibles y escalables. Proporcionan una estructura modular que facilita la actualización, modificación y expansión del producto con mayor facilidad. Los patrones también ayudan a mantener un código limpio y organizado, lo que simplifica la resolución de problemas y la incorporación de nuevas funcionalidades.
- Comunicación y colaboración: Los patrones de diseño son un lenguaje común entre diseñadores y desarrolladores. Al utilizar patrones reconocidos y documentados, el equipo de desarrollo puede comunicarse de manera más efectiva, compartir conocimientos y colaborar de manera más fluida. Esto mejora la eficiencia del equipo y fomenta un enfoque colectivo en la resolución de problemas.
- Mejora de la calidad y confiabilidad: Los patrones de diseño están respaldados por buenas prácticas y se han probado en múltiples situaciones. Al seguir patrones establecidos, se aumenta la calidad del producto y se reduce el riesgo de errores o fallas. Los patrones también promueven la aplicación de principios de diseño sólidos, lo que conduce a productos más confiables y robustos.
Características que debe tener un patron de diseño?
Para que podamos catalogar un nuevo design pattern se deben cumplir dos características:
- Debe haberse comprobado con anterioridad su efectividad resolviendo un problema concreto.
- Debe ser reutilizable como solución en diversas circunstancias.
¿Qué tener en cuenta a la hora de crear patrones de diseño?
No hay que reinventar la rueda, hay que detectar la solución que encaja y funciona dentro de nuestro sistema y aplicarlo en nuestro producto.
«Los usuarios pasan la mayor parte de su tiempo en otras webs. Esto significa que prefieren que tu web se parezca y funcione como los sitios que ya conocen».
Jacob Nielsen
Para crear patrones de diseño eficaces hay que conocer el modelo mental de los usuarios. Si los usuarios no entienden la interfaz que tienen frente a ellos no serán capaces de hacer un uso correcto y fluido de esta.
Para esto los usuarios deben entender de manera sencilla e intuitiva dos aspectos de la interfaz:
- La Estructura: Como se categorizan los contenidos. (Arquitectura de la Información)
- El Funcionamiento (Patrones de diseño)
A la hora de crear elementos o componentes a integrar dentro del patrón de diseño debemos tener en cuenta varios conceptos tales como:
Affordance: Según Don Norman, son «aquellas propiedades perceptibles de un objeto que determinan como puede ser usado«. Es importante que cuando diseñemos elementos gráficos con los que se ha de interactuar, estos «inviten» a realizar al acción que pretendemos para facilitar la usabilidad de nuestra interfaz.
Si nos vemos obligados a explicar al usuario cómo usar algo, probablemente sea por que esté mal diseñado.
Carga Cognitiva: Esta es como una barra que se rellena a medida que el usuario interactua con nuestro producto o servicio. La carga cognitiva de un usuario funciona siguiendo varios pasos, en los cuales:
- Filtra la información que recibe.
- Busca el significado de la información recibida.
- Interactúa con lo presentado dentro de un tiempo determinado.
- Almacena fragmentos de la interacción e información en sus recuerdos.
Jacob’s Law: Es una ley presente en el mundo de la UX, en el que se prima que el funcionamiento de lo que presentamos al usuario sea de la misma manera que en otros sitios similares que ya conocen y utilizan.
Fitts’s Law: Con esta ley tratamos de detectar posibles áreas y movimientos que dificultan el acceso muscular de los usuarios a determinadas áreas de una interfaz.
Hick’s Law: Esta ley viene a demostrar que cuantas más opciones tengamos disponibles más tiempo tardamos en decidir y responder.
¿Cómo documentar un patron de diseño?
La documentación de un patrón de diseño es esencial para comunicar de manera efectiva su propósito, estructura y uso a otros miembros del equipo de diseño y desarrollo. Aquí hay algunas pautas para documentar un patrón de diseño:
Partes de la documentación de un patrón de diseño
- Título y descripción: Comienza por darle un título claro y descriptivo al patrón de diseño. Luego, proporciona una breve descripción que explique su propósito y los problemas que aborda.
- Contexto de uso: Describe el contexto en el que se aplica el patrón de diseño. Explica las situaciones o escenarios en los que es relevante y cómo se relaciona con otros elementos del sistema.
- Ejemplo visual: Proporciona un ejemplo visual del patrón de diseño en acción. Puede ser una ilustración, un diagrama o una captura de pantalla que muestre cómo se ve y se utiliza el patrón en el producto o interfaz.
- Estructura y elementos: Detalla los elementos que componen el patrón de diseño. Esto puede incluir componentes visuales, interacciones, reglas de diseño, pautas de comportamiento y cualquier otro aspecto relevante para su implementación.
- Uso y mejores prácticas: Describe cómo y cuándo utilizar el patrón de diseño de manera efectiva. Proporciona pautas claras sobre cómo aplicarlo correctamente y las mejores prácticas a tener en cuenta. Esto puede incluir consideraciones de accesibilidad, usabilidad y adaptabilidad a diferentes contextos.
- Ventajas y consideraciones: Destaca las ventajas y beneficios de utilizar el patrón de diseño, así como las posibles limitaciones o consideraciones a tener en cuenta al aplicarlo.
- Relaciones con otros patrones: Si el patrón de diseño se relaciona con otros patrones o tiene dependencias, explícalas y proporciona referencias a esos patrones relacionados.
- Ejemplos adicionales: Incluye otros ejemplos o casos de uso donde el patrón de diseño pueda ser aplicado. Esto ayudará a ilustrar su versatilidad y adaptabilidad en diferentes situaciones.
- Actualizaciones y versiones: Si el patrón de diseño evoluciona con el tiempo, asegúrate de mantener la documentación actualizada y registrar cualquier cambio o nueva versión.
- Referencias y recursos adicionales: Proporciona enlaces o referencias a recursos adicionales relacionados con el patrón de diseño, como libros, artículos o tutoriales, que puedan brindar más información y ejemplos prácticos.
La documentación puede presentarse en forma de documentos escritos, wikis internos, páginas web o cualquier otro formato accesible y fácilmente compartible dentro del equipo.
El objetivo de documentar estos patrones es crear una referencia que guíe a los miembros del equipo de diseño y desarrollo en la implementación exitosa del patrón de diseño en un proyecto o producto digital.
Ejemplo documentado de patrones de diseño de IBM -> AQUÍ
Ejemplo de patrones de diseño en Carbon DS -> AQUÍ
Ejemplos y aplicación de patrones de diseño.
Existen patrones de diseño estandarizados, en los cuales poderse basar en el momento de diseñar e implementar nuestros productos. Estos recursos facilitan la integración con los sistemas de diseño de plataformas como Android (Material Design) e IOS (Human Interface).
Los elementos más comunes a definir en los ux pattern design son:
- Elementos de navegación como menús y botones.
- Entradas de datos como en los formularios.
- Elementos sociales
- Elementos de oferta de feedback
Hay una gran diversidad de elementos que catalogar como design patterns, y en la página de Ui-patterns nos muestran una gran cantidad de patrones de interfaz de usuario y patrones de diseño persuasivos para mejorar y facilitar el desarrollo de productos digitales.
Óscar López Poveda
Diseñador UX/UI y de producto digital.
Soy Óscar López y vivo diseñando y creando ideas, me encanta descubrir, aprender y compartir todo lo que aprendo sobre entornos, productos digitales y UX. Me apasiona el diseño y siempre estoy abierto a apuntarme a un «bombardeo» de poryectos y descubrir personas que les apasione el mundo digital.
