21

¿Por qué crear un patrón de diseño para la interfaz de usuario?

13796Puntos

hace 2 años

Introducción al Diseño de Prototipos 2018
Introducción al Diseño de Prototipos 2018

Introducción al Diseño de Prototipos 2018

Desarrolla prototipos de los productos basados en información adquirida a través de la investigación de usuarios. Crea prototipos en papel, a través de software de digitalización y llévalos a entornos clickeables. Evalúa la efectividad de tus prototipos con pruebas de usuario.

Los Patrones de Diseño o Patrones de Interfaz de Usuario (UI) son soluciones de diseño para resolver problemas comunes en temas de interacción e interfaces de aplicaciones.

Estos patrones cumplen su función basados en una serie de objetivos:

  • Ser elementos de diseño reusables. Nos dan la oportunidad de tener un catálogo amplio de elementos que podemos reusar en nuestros diseños de acuerdo al tipo de problema que estemos intentando resolver.
    Es importante mencionar que estos patrones surgieron a partir de investigaciones de otros productos por lo que cuentan ya con la validación de que pueden resolver cierto problema.
    Por ejemplo: Menú de hamburguesa. Este patrón es reciclable y nos ayuda a solucionar el tema de navegación para que el usuario conozca los rincones de nuestra aplicación.
hamburger-menu-3-850x476.jpg
  • Evitar reiteraciones. Una vez que existe un problema que va a ser constante en el diseño de una interfaz, tiene todo el sentido crear una solución que se pueda reusar y no repetir el proceso de solución.

  • Estandarizar el diseño. No propone un estándar en la tendencia del diseño, lo que propone es un estándar en las soluciones de diseño.

  • Condensa el conocimiento. Permite que nuevos diseños puedan contar con las soluciones estandarizadas para los problemas comunes.

  • Ahorro de tiempo y mejora en la efectividad de una aplicación. Ayudan a que la interacción y el flujo del usuario en una aplicación sea más amigable y natural.

Clasificación de los Patrones de Diseño o de UI

  • Patrones de Interacción: Comunicación fluida entre una aplicación y el usuario.

  • Patrones de Usabilidad: Mejores soluciones para los problemas de uso entre el usuario y una aplicación.

  • Patrones Arquitectónicos: Interacción de elementos entre niveles de Arquitectura de Información.

Pero, Señor Freddy ¿Esto es copiar?

Usar un patrón de diseño no es copiar, sino utilizar una solución conocida y probada, como ya lo mencionamos antes, a un problema frecuente. Muchos diseñadores de interfaces nos topamos con problemas parecidos en nuestro día a día, y hay quienes ya probaron la eficiencia de ciertas soluciones.

Asimismo, utilizar patrones de diseño nos ayuda a ser consistentes con el mundo exterior. Es dar cuenta que los usuarios de un producto también usan muchos otros y probablemente están acostumbrados a ciertas formas de navegar y encontrar los mismos componentes.

Por último, siempre tener con qué comenzar nos ayuda a la creatividad: no es lo mismo empezar con una hoja en blanco que tener ciertos elementos que ordenan nuestros diseños. Utilizar patrones que ya funcionan en otros productos nos ayudará a organizar mejor la estructura de nuestros diseños.

Tú ¿Qué patrones de diseño identificas que has utilizado y cómo lo has hecho? ¡Cuéntale a la comunidad!

Introducción al Diseño de Prototipos 2018
Introducción al Diseño de Prototipos 2018

Introducción al Diseño de Prototipos 2018

Desarrolla prototipos de los productos basados en información adquirida a través de la investigación de usuarios. Crea prototipos en papel, a través de software de digitalización y llévalos a entornos clickeables. Evalúa la efectividad de tus prototipos con pruebas de usuario.
Karen
Karen
@AyKaren

13796Puntos

hace 2 años

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
5
15847Puntos

Una de mis referencias favoritas para descubrir patrones de diseño, además de los design Systems de algunas empresas es: http://collectui.com

2
20864Puntos
2 años

Está interesante, pero es más bien un dribbble bien organizado que design systems de empresas. Estaría bueno algo así que compare sitios reales, no solo ideas como http://collectui.com/designers/BarthelemyChalvet/landing-page, si no sitios de verdad, que si funcionan en web (la animación inicial de esa landing no tiene sentido en web)

1
7036Puntos
2 años

Acá les dejo una de mis webs favoritas, con bastante material de UI y una de mis fuentes de inspiración ademas de Dribbble

UpLabs

0
14402Puntos
2 años

Muy buena referencia! Gracias.

1
457Puntos

Simplemente cuando no encuentro un patro que de solucion a algun problema existente, busco plantillas, imagenes o algun software como referencia e importanticimo elijo siempre el que me gusta poniendo del lado del usuario y el que tenga menos pasos.
Como bien lo mencionan, yo creia que era copiar y pegar pero ahora se que simplemente es utilizar un patron q ya existe y esta probada que es si funciona.
Ya no me siento mal de hacerlo.

1
13796Puntos
2 años

Exacto, y es que si nos damos cuenta, no importa qué necesidad supla una aplicación, las interacciones son todas iguales, las acciones que llevan al usuario a completar el proceso o viaje dentro de una aplicación es igual. Pero ejemplo, mandar un formulario, hacer una búsqueda en la aplicación, etc.

1
6990Puntos

Hablando con amigos que tiene tiempo programando, han mencionado que muchas veces los proyectos son construcciones de un solo hombre, backend, frontend la base de datos y todo el diseño, aun no soy el programador que quiero ser, pero te anima ver que cada vez tenemos más contenido disponible. Y una gran comunidad.

1
13796Puntos
2 años

Eso es genial, siempre que podamos ayudarte a llegar a tu meta, cuéntanos y estaremos felices de ayudarte 😄

1
5388Puntos

Creo que los que más uso son los patrones de usabilidad, es mucho mejor buscar empatia con el usuario ofreciendole interacciónes con las que ya esta familiarizado.