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.
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.
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.
Recibe todos las semanas contenido de calidad sobre Diseño UX y UI en tu mail.👇🏼👇🏼
Óscar López
Diseñador gráfico digital
Me llamo Óscar y vivo diseñando y creando cosas, me encanta descubrir, aprender y compartir lo que aprendo. Me flipan los entornos digitales y siempre estoy abierto a un bombardeo de ideas y posibles proyectos.
Cualquier duda o o comentario relacionado con diseño digital y UX es bien recibido y agradecido.