Diseño de sistemas modulares de interfaz de usuario a través del desarrollo basado en guías de estilo

El uso de una guía de estilo para impulsar el desarrollo es una práctica que está cobrando mucha fuerza en el desarrollo front-end, y por una buena razón. Los desarrolladores comenzarán en la guía de estilo agregando código nuevo o actualizando el código existente, contribuyendo así a un sistema de interfaz de usuario modular que luego se integra en la aplicación. Pero para implementar un sistema de interfaz de usuario modular, debemos abordar el diseño de forma modular.

El diseño modular nos anima a pensar y diseñar una UI y UX en patrones. Por ejemplo, en lugar de diseñar una serie de páginas o vistas para permitir que un usuario realice una tarea, comenzaríamos el proceso de diseño entendiendo cómo está estructurado el sistema de interfaz de usuario y cómo se pueden usar sus componentes para crear el flujo de usuario.

Lectura adicional en SmashingMag:

• Cómo hacer una guía de estilo efectiva
• Una descripción detallada de las herramientas de la guía de estilo de vida
• Automatización del desarrollo basado en guías de estilo
• Conjunto de iconos de guías de estilo gratuito para escritores y editores

En esta publicación, explicaré el valor de la modularidad en el diseño de la interfaz de usuario y cómo se relaciona con el proceso de desarrollo basado en guías de estilo, lo que mejora la implementación de aplicaciones flexibles y fáciles de usar, mientras ayuda a los diseñadores y desarrolladores a colaborar de manera más productiva.

Diseño modular en la interfaz de usuario

El diseño modular se trata de dividir un diseño en partes pequeñas (módulos), crearlos de forma independiente y luego combinarlos en un sistema más grande. Si miramos a nuestro alrededor, encontraremos muchos ejemplos de diseños modulares: los automóviles, las computadoras y los muebles son todos modulares. Debido a su modularidad, las partes de estos sistemas se pueden intercambiar, agregar, quitar y reorganizar. Esto es excelente para los consumidores porque pueden personalizar el sistema para que se ajuste a sus necesidades . ¿Quieres un techo corredizo, un motor más potente, asientos de cuero? ¡Lo tienes! El diseño modular de los coches permite este tipo de personalizaciones y mucho más.

Otro gran ejemplo son los muebles de IKEA. En las ilustraciones a continuación, puede ver que la modularidad del diseño no está solo en la forma de la librería, que permite colocarla en diferentes direcciones, o en que puede agregar inserciones en sus aberturas, sino también en la misma partes que componen la pieza en sí, que son rectángulos de diferentes tamaños, repitiendo el mismo patrón.

Desde una perspectiva de fabricación, el diseño modular también es rentable. Un aspecto importante de esto es que la construcción de pequeñas piezas simples que se pueden conectar más tarde es más fácil y económica que la construcción de una sola pieza grande y compleja a la vez. Además, la solución se puede reutilizar una y otra vez, maximizando la productividad.

Los objetivos en la creación de un diseño de interfaz de usuario son similares. Como diseñadores, queremos crear un sistema de interfaz de usuario que sea eficiente tanto en la construcción como en la operación. Cuando encontramos una solución a un problema, queremos poder reutilizar la solución en muchos lugares. Esto no solo ahorra tiempo, sino que también establece un patrón que los usuarios pueden aprender una vez y volver a aplicar en otras áreas de la aplicación. También queremos poder personalizar el sistema para ciertos escenarios sin tener que reestructurar todo.

Esto es exactamente lo que aporta la modularidad al diseño de la interfaz de usuario: conduce a un sistema que es flexible, escalable y rentable , pero también personalizable, reutilizable y consistente .

Ejemplos de diseño modular

Algunos ejemplos de diseño de interfaz de usuario modular se pueden ver en patrones como cuadrículas receptivas, diseño de ventana de mosaico y diseño de tarjeta . En todos ellos, los módulos se utilizan repetidamente para proporcionar un diseño flexible que se adapta fácilmente a diferentes tamaños de pantalla. Además, los módulos actúan como contenedores de componentes, lo que nos permite insertar diferentes tipos de contenido y funcionalidad, de forma muy similar a las inserciones que se pueden añadir a un armario de IKEA.

¿Es esto homogéneo?

Si el diseño modular se trata de diseñar un sistema, y ​​los sistemas de interfaz de usuario en su mayoría comprenden las mismas partes (botones, tipos de letra, íconos, cuadrículas, etc.), entonces quizás se esté preguntando:

• ¿No van a tener todos los diseños modulares el mismo aspecto?
• ¿Cómo afectará esto a la identidad de marca?
• ¿Cómo se puede hacer que la interfaz de usuario de un producto sea única?

Estas preguntas, si bien son válidas, plantean una pregunta subyacente: ¿Dónde radica la innovación y la singularidad en el diseño de productos? Este debate ha retomado últimamente (ver “La insoportable homogeneidad del diseño” y “En defensa del diseño homogéneo”), pero yo diría que, debido a que el diseño visual es lo que vemos primero, tendemos a pensar que la innovación y la singularidad se encuentran en la forma en que se ve un diseño. Sin embargo, el diseño visual es solo una parte de eso. La innovación y la singularidad en el diseño de productos deben tenerse en cuenta en todo el producto: en el valor intrínseco que proporciona y en la forma en que las personas lo experimentan, lo que incluye su apariencia. Toma una silla. Se requiere que sea una silla, pero no todos los diseños de sillas se ven, se sienten o funcionan igual. De hecho, el diseño de sillas ha sido históricamente un área de innovación en diseño y materiales. Del mismo modo, las interfaces de usuario tienen sus propios requisitos, y el uso de patrones que se ha comprobado que funcionan no significa sacrificar la innovación y la singularidad. Por el contrario, se necesitará innovación y singularidad para resolver los problemas particulares que tienen sus clientes. La belleza del diseño modular es que nos anima a abordar estas soluciones como un sistema de partes que están interconectadas, en lugar de encontrar soluciones originales de forma aislada por ser diferentes. En otras palabras, un diseño innovador aplicado a un control de UI no se quedará relegado a un lugar en la aplicación, sino que impregnará todo el sistema, manteniendo la cohesión y mejorando la usabilidad.

La modularidad del desarrollo de guía de estilo-drive

Desde el punto de vista de la implementación, el desarrollo basado en guías de estilo también es muy modular. Para empezar, el proceso comienza con una fase de descubrimiento : comprensión del problema que debe resolverse, recopilación de requisitos e iteración a través de soluciones de diseño. Si bien las soluciones de diseño generalmente se presentan como un paquete completo o una función, en realidad deberían ser la combinación de las muchas partes del sistema documentadas en la guía de estilo. Algunas partes del diseño pueden ser nuevas, pero aun así deben crearse como módulos. El objetivo es usar la guía de estilo para determinar qué módulos están disponibles en el sistema de interfaz de usuario que se pueden reutilizar o ampliar para crear el diseño.

(¿Qué pasa si no hay una guía de estilo? ¡No se preocupe! En la siguiente sección le mostraré cómo diseñar de forma modular, incluso si no está usando una guía de estilo).

El siguiente paso en el desarrollo guiado por una guía de estilo es la fase de abstracción , que es básicamente el ejercicio de dividir la solución de diseño en partes más pequeñas. Durante esta fase, los diseñadores y desarrolladores trabajan juntos para discernir el diseño propuesto e identificar los elementos y componentes (es decir, módulos) que se utilizarán o mejorarán o que será necesario crear para la implementación.

La fase de abstracción también sirve para trazar un plan para el siguiente paso: implementación y documentación . Durante esta fase, los módulos se construyen o mejoran de forma aislada del resto de los módulos existentes. En desarrollo web, esto significa construir un componente o definir los estilos para un elemento independiente de la aplicación. Este es un aspecto importante de la modularidad, porque le ayuda a identificar cualquier problema al principio del proceso, evitando dependencias imprevistas con otras partes del sistema. El resultado son partes más estables que son más fáciles de integrar en el todo.

Algo único sobre el desarrollo basado en guías de estilo es que, mientras la implementación avanza, también se lleva a cabo la documentación, en lugar de ser una ocurrencia tardía. Esto es posible porque cuando se usa un generador de guía de estilo, la documentación se convierte en una guía de estilo viva , que sirve como marco y como espacio aislado para la implementación:

• La guía de estilo de vida sirve como un marco de definiciones para los elementos de la interfaz de usuario (como encabezados, listas, enlaces, controles de entrada, etc.) y como una biblioteca de componentes (como sistemas de navegación, barras de herramientas, herramientas de búsqueda, tablas de cuadrícula, etc.). ) que están disponibles para su uso. Esto significa que el desarrollo no se inicia siempre desde cero. En su lugar, se basa en las definiciones existentes en el sistema de interfaz de usuario y contribuye a ello.
• También es una caja de arena porque sirve como espacio de demostración para construir y probar la implementación. Aquí es exactamente donde tiene lugar el desarrollo antes de que se integre en la aplicación.

El último paso del desarrollo guiado por una guía de estilo, la fase de integración , se asemeja al paso de ensamblaje en el diseño modular. Los elementos o componentes de la interfaz de usuario que se necesitan se han desarrollado y están listos para integrarse en la aplicación. Lo que queda es configurarlos y personalizarlos. Durante la integración, la guía de estilo es como cualquier buen manual de instrucciones que se utiliza para ensamblar un diseño modular físico.

Ahora que hemos identificado los conceptos fundamentales del diseño modular y el desarrollo basado en guías de estilo, pongámoslos en práctica.

Diseñar de forma modular

Imagínese esto: se le ocurrió un gran flujo de usuarios, reunió maquetas y prototipos para ilustrar las interacciones y documentó cada parte. Lo más probable es que sus diseños ya sigan una guía de estilo, lo que podría darle una gran ventaja. (Si no es así, ¡no se preocupe!) Solo dé un paso atrás y comience a trazar las partes principales de su solución de diseño a un alto nivel. Estas partes podrían ser los puntos de interacción donde se logran ciertas cosas. Por ejemplo, un flujo de pago podría verse así:

¡Pero mantengan sus armas! Estos no son módulos todavía. Para llegar allí, debemos identificar los elementos de la interfaz de usuario que persisten en el flujo, como:

• el indicador de pasos de pago,
• elementos de formulario utilizados para introducir información,
• la representación de productos en el carrito,
• la representación de productos relacionados que otros han comprado,
• políticas sobre la compra,
• texto de ayuda,
• mensajes y alertas.

Profundizando un poco más, también encontraremos estilos y patrones de interacción:

• Estilos:

• colores usados ​​para denotar:

  • mensajes de error, éxito, advertencia e información;
  • acciones primarias versus secundarias;
  • estados inactivos versus seleccionados versus deshabilitados;
  • enlaces frente a texto normal;
  • marca;

• tipografía utilizada para denotar diferentes tipos de contenido:

  • tamaño de letra para la disposición jerárquica de la información;
  • tipos de fuentes para resaltar mensajes o proporcionar información adicional;
  • listas para resumir información;

• iconografía para transmitir significado visual y para referencia rápida a acciones comunes.

• Patrones de interacción:

  • mostrando los próximos pasos (deshabilitado);
  • mostrar los pasos anteriores (habilitado para que se pueda editar la información);
  • mostrar resúmenes que se pueden editar;
  • validar la información una vez que el usuario ha hecho clic fuera del campo;
  • proporcionando texto de ayuda en el rollover;
  • actualizando el carrito una vez que se ha hecho una selección.

Una vez que el diseño se haya dividido en todas estas piezas más pequeñas, finalmente tendremos nuestros módulos. En este punto, es más fácil ver que muchos de ellos se aplican no solo al proceso de pago, sino a muchas otras áreas de la aplicación. Con un enfoque de diseño modular, estos módulos se pueden crear para que se puedan utilizar en este diseño en particular, así como en los futuros.

Vale la pena mencionar el diseño atómico como una metodología que puede acelerar este proceso de creación de diseños modulares. Esta metodología analiza las relaciones entre las diferentes partes del sistema y cómo se interrelacionan, usando la química como analogía. Seguir los pasos es más o menos lo contrario de nuestro ejercicio anterior:

1. Partimos de los átomos , que son los módulos más pequeños del sistema (en nuestro ejemplo, los botones, la tipografía y la iconografía).
2. Los módulos crecen en complejidad, uniéndose en moléculas , que brindan más funcionalidad (en nuestro ejemplo, los indicadores de pasos de pago y el módulo de productos relacionados).
3. Luego están los organismos , que son moléculas que se agrupan en la aplicación (en nuestro ejemplo, el encabezado de la aplicación y varias formas).
4. Dejando la analogía de la química, el siguiente nivel son las plantillas , que son estructuras predefinidas donde se colocan los organismos.
5. Por último, están las páginas , que son instancias de plantillas.

La pieza que falta aquí es una forma de documentar los módulos que se han identificado. No se trata solo de crear un documento de especificaciones para capturar cómo deben construirse los módulos, o escribir pautas que capturen definiciones de alto nivel, como colores de marca y familias de fuentes (que son típicas de cualquier guía de estilo estándar). Más bien, la documentación necesita ser más sofisticada y dinámica, para que cuando estos módulos cambien (¡y usted sabe que lo harán!), la documentación no se vuelva obsoleta. ¡Aquí es exactamente donde las guías de estilos de vida llenan el vacío!

Usando una guía de estilo de vida

Una guía de estilo de vida puede ser muy útil durante el proceso de diseño porque proporciona varias cosas.

Una línea de base para trabajar

En lugar de comenzar desde cero cada vez, la guía de estilo proporciona la dirección visual y los módulos que debe usar para crear el diseño.

Debido a que una guía de estilo de vida se genera a partir del código real, refleja la última y mejor versión del diseño implementado.

Documentación de Soluciones de Diseño

El conocimiento que se ha adquirido para resolver un problema particular de UI o UX puede consignarse para su uso posterior.

Esto ayuda a mantener la coherencia en la implementación, lo que lo alienta a adaptar cualquier solución nueva en parte del diseño actual.

Desarrollará patrones con los que los usuarios se puedan familiarizar, mejorando así la usabilidad.

Facilidad de comunicación

La guía ayuda a comunicar el diseño al proporcionar la representación más actualizada de la interfaz de usuario (a diferencia de las maquetas estáticas, que se vuelven obsoletas rápidamente).

Se desarrolla un lenguaje de interfaz de usuario común porque tiene que nombrar los diversos elementos en la guía de estilo. Esto requiere la colaboración no solo entre los diseñadores de UI, sino también entre los diseñadores y los desarrolladores, lo cual es una gran ventaja cuando tienes que comunicar cómo se debe implementar un diseño.

Ya sea que tenga una guía de estilo existente o esté planeando crear una, la automatización del proceso lo pondrá en la dirección correcta, impulsando el proceso de diseño de manera modular. Entonces, si está listo para comprar un generador de guías de estilo de vida, le recomiendo los siguientes recursos:

• "Una descripción detallada de las herramientas de la guía de estilo de vida", Robert Haritonov, Smashing Magazine
• "Descripción general de los generadores de bibliotecas de patrones", David Hund, GitHub
• “Resumen del generador de guías de estilo”, Susan Robertson, A List Apart

¡No lo lleves al extremo!

Ahora que hemos analizado cómo ajustar el proceso de diseño para incorporar la modularidad, así como las ventajas de una guía de estilo de vida, exploremos algunos de los escollos comunes que puede encontrar en el camino.

La guía de estilo no reemplaza el trabajo de diseño

No es raro escuchar de los gerentes que, una vez que se establece la guía de estilo de vida, la mayor parte del trabajo de diseño está hecho. Si bien se realiza gran parte del trabajo repetitivo y trivial (como crear prototipos de los diferentes estados de un botón una y otra vez), considere lo siguiente:

• Continuamente será necesario crear nuevas características,
• encontrar una solución implica tomar decisiones de diseño.

Entonces, sí, tener una guía de estilo viva y seguir el desarrollo basado en la guía de estilo mejora el flujo de trabajo de desarrollo, pero no elimina al diseñador de la ecuación. Tener una herramienta que acelere los flujos de trabajo y mejore la comunicación es una ventaja tanto para los diseñadores como para los desarrolladores. Pero lo mejor de este enfoque es que deja mucho espacio para personalizar la interfaz de usuario, mejorando así la experiencia del usuario, y darse cuenta de eso es parte del rol del diseñador.

No sigas los patrones al extremo

Siempre debemos esforzarnos por usar patrones en una aplicación. Por ejemplo, el uso constante de colores y tamaños de fuente puede indicar rápidamente al usuario elementos en la interfaz de usuario con los que se puede interactuar. Sin embargo, evite usar un patrón solo porque se haya implementado antes; más bien, úselo porque realmente resuelve el problema en cuestión.

Por ejemplo, si ha establecido el patrón de mostrar las barras de herramientas en la parte superior de la pantalla, este patrón funcionará en la mayoría de los casos, pero habrá momentos en los que presentar una barra de herramientas contextual, más cerca de donde el usuario está realizando una acción, tenga más sentido. . Por lo tanto, siempre pregúntese si la reutilización de un patrón prioriza la facilidad de implementación sobre la experiencia del usuario.

No pase por alto la iteración del diseño

Esto se relaciona un poco con el punto anterior. No pase por alto el valor de la iteración y la innovación al probar nuevos patrones y encontrar formas de diseñar una interfaz, incluso si a primera vista no siguen la guía de estilo. La guía de estilo no debe ser un freno a su esfuerzo por crear la mejor experiencia de usuario posible. Más bien, como sugiere el nombre, debe ser una guía, un punto de partida para ayudarlo a resolver problemas aprovechando el trabajo y la experiencia anteriores. La iteración durante la fase de diseño debería seguir siendo tan importante como siempre y debería estimularlo a mejorar los patrones establecidos.

La carga de mantenimiento

Entre las miles de cosas que implica su trabajo, mantener la guía de estilo debería ser lo último que se sienta como una carga. Para superar esto, encuentro útiles las siguientes prácticas:

• Encuentre un sistema de documentación que sea fácil de instalar y fácil de interactuar con regularidad.
• Haga que las actualizaciones de la documentación sean parte de su flujo de trabajo, en lugar de una ocurrencia tardía una vez que la implementación ya esté lista. ¡Documente sobre la marcha!
• Establezca pautas que faciliten que todos contribuyan a la documentación. Esto distribuirá la carga de trabajo y aumentará el sentido de propiedad.

Diseño Modular Para Construir Modular

La creación de un sistema de interfaz de usuario flexible que sea coherente y fácil de personalizar, además de escalable y rentable, depende no solo de cómo se construya, sino también de cómo se diseñe. Una biblioteca de componentes tiene muy poco valor si cada nuevo diseño se crea de forma independiente, ignorando los estándares y patrones establecidos.

Por otro lado, no se trata de hacer interfaces de corte de galletas que reutilicen los mismos estilos y patrones porque es conveniente. Un buen diseño es efectivo no por su singularidad, sino porque combina forma y función para crear una gran experiencia . Este objetivo siempre debe ser una prioridad, y el uso de un método como el desarrollo basado en guías de estilo para brindar modularidad tanto al diseño como al desarrollo debería ayudarlo a crear un sistema de interfaz de usuario cohesivo que logre este objetivo.