Cómo crear una guía de estilo: comience con un marco de interfaz de usuario

Preguntas y respuestas con el Diseñador de experiencia de usuario de AdRoll sobre por qué lo hicimos y qué aprendimos

Esta publicación de blog es la primera de una serie que narra el viaje de la guía de estilo, desde su creación, hasta proporcionar un marco de interfaz de usuario maduro para nuestros equipos y, finalmente, destilar una voz y un tono únicos para nuestros productos.

¡Hola! Soy Arya Srinivasan, investigadora de UX en AdRoll. Me senté con Mason Lee, un diseñador de experiencia de usuario que trabaja en el producto API de anuncios nativos de AdRoll, para hablar sobre su trabajo en el desarrollo de la guía de estilo de AdRoll.

Arya: Para empezar, ¿por qué comenzaste el proyecto de guía de estilo? ¿Cuál era el problema que necesitaba resolver?

Mason: El problema era la inconsistencia de diseño, tanto entre productos como dentro de un solo producto. Por ejemplo, un botón que debería verse igual en todas partes, pero que en realidad varía en color, peso de fuente y estilo de borde.

Los botones se ven diferentes en las simulaciones de los diseñadores individuales y nuestras aplicaciones.

El rápido crecimiento de AdRoll significaba que estábamos enfocados en la velocidad. Ahora somos una empresa más grande con múltiples productos, por lo que como diseñador creo que es importante para nosotros enfatizar la consistencia en la forma en que presentamos nuestros productos: a través del diseño.

Para centrarnos en el diseño, primero teníamos que corregir las inconsistencias existentes. Los diseñadores de UX aquí generalmente se centran en uno o dos productos, por lo que para que nuestro equipo piense en el diseño de todos los productos, organizo una reunión semanal de "UI Smackdown" para discutir las pautas de UI.

En cada reunión, analizamos las inconsistencias de diseño para decidir sobre un diseño único. Después de algunas reuniones, los diseñadores aún me preguntaban sobre el color o el relleno correctos, etc. Necesitábamos un documento central con todas las respuestas, así que construí nuestro Marco de interfaz de usuario en Sketch como recurso para los diseñadores. Cada vez que nos damos cuenta de que falta un componente o queremos incluir un nuevo componente, lo discutimos y lo agregamos al archivo maestro de UI Framework.

Arya: Usted mencionó que desea que AdRoll sea una empresa centrada en el diseño. ¿Qué quiere decir con eso?

Mason: Quiero que AdRoll ponga el diseño a la vanguardia para que sea un diferenciador competitivo, reconocido por los clientes como un producto bien diseñado que realmente resuelve sus necesidades.

Arya: ¿Cuáles fueron tus objetivos inmediatos para la guía de estilo? ¿Tiene una visión a más largo plazo para este proyecto?

Mason: Mi objetivo a corto plazo es lograr una coherencia de diseño entre los diseñadores al estandarizar nuestros componentes de la interfaz de usuario. Quiero que los diseñadores hablen el mismo idioma cuando hablen de diseño. Por ejemplo, en un modo o menú desplegable, los ingenieros crean según lo que sugiere el diseñador. Si los elementos de diseño son diferentes entre los diseñadores, los ingenieros harán que el mismo elemento sea diferente.

Mi objetivo a medio plazo es definir este estilo en nuestro código en "RollUp", la biblioteca interna de componentes de interfaz de usuario de AdRoll. Si tenemos una hoja de estilo predefinida, todo lo que nuestros ingenieros deben hacer es copiarla. Los diseñadores e ingenieros pueden hablar el mismo idioma.

Arya: ¿Tuviste algún problema al crear la guía de estilo? Como los resolviste?

Mason: Uno de los mayores obstáculos fue obtener la aceptación de personas de todos los equipos de productos. Para involucrar a todos, organicé una reunión con una lista clara de temas de la agenda para cubrir. Presenté inconsistencias de diseño, como la variación de los menús desplegables entre productos. Proporcionar evidencia visual desencadena conversaciones y, al final, las personas se preocupan por su producto y quieren consistencia.

Otro desafío fue decidir sobre las reglas. Cuando se habla de estandarizar un componente, debería ser aplicable en cualquier lugar, en cada contexto. Tienes que pensar en cada caso extremo. El componente tiene que ser flexible, pero al mismo tiempo debe ser lo suficientemente completo para que sea fácil de usar, consumible y aplicable.

Aquí hay un ejemplo de la flexibilidad de nuestra guía de estilo. Nuestra decisión inicial para el relleno en este menú desplegable de orientación geográfica fue demasiado grande, por lo que revisamos la guía de estilo para tener en cuenta este caso de uso.Antes (izquierda), Después (derecha)

¡En realidad quiero llamar a un desafío más! Nombrar puede ser difícil. Como dije antes, quiero que los diseñadores e ingenieros hablen el mismo idioma, pero esto debe hacerse con cuidado. Para algo tan simple como un menú desplegable, en realidad tenemos varias variaciones (una con casillas de verificación, otra con casillas de verificación y un bloque de texto, y otra es un menú desplegable estándar). ¿Cómo nombramos tres menús desplegables diferentes para que haya una comprensión universal de cuál es cuál?

La semántica es desafiante; nuestros nombres deben tener sentido. Utilizamos algunas herramientas de colaboración interesantes para lograr un consenso cuando decidimos un nombre. Por ejemplo, Wake nos ayudó a recopilar todas las preguntas y problemas abiertos, discutir soluciones, monitorear las decisiones de Smackdown de la interfaz de usuario y continuar la conversación con el equipo de producto más grande a través de una integración con Slack.

Cómo usamos Wake para analizar las inconsistencias de la interfaz de usuario y colaborar en las reglas de los componentes.

Arya: ¿Hay algo único sobre la interfaz de usuario de AdRoll que tuviste que tener en cuenta al crear la guía de estilo?

Mason: Nuestro tablero es muy pesado en datos. Además, el flujo de creación de campañas ofrece a los anunciantes un montón de palancas para impulsar. Para satisfacer las necesidades de los anunciantes con menos experiencia, nuestro objetivo es tener una configuración predeterminada efectiva. En nuestros productos, los componentes tienen funciones complejas pero parecen simples y fáciles de usar.

Arya: ¿Hay algunas cosas que desearías saber cuando comenzaste a crear la guía de estilo?

Mason: Ojalá tuviera una comprensión más profunda de cómo funcionan todos nuestros productos desde el principio. Por ejemplo, compartimos cómo funciona nuestro producto respectivo en nuestra reunión de crítica de diseño semanal, así que sé cómo SendRoll (nuestro producto de reorientación de correo electrónico) funciona en la superficie, pero no tengo el profundo conocimiento de SendRoll que tiene su diseñador. Creo que la comprensión matizada del producto definitivamente ayuda al trabajar en la guía de estilo, porque entonces entiendo mejor todos los casos de uso potenciales.

Arya: Entonces, ¿cuál es la mejor manera de lograr esa comprensión común del proceso de un diseñador y su producto?

Mason: Aunque estamos realmente enfocados en enviar nuestros productos, hacemos un buen trabajo al compartir nuestro proceso de diseño en nuestra reunión semanal de crítica de diseño. Creo que podemos ser mejores acerca de cerrar el ciclo después de cada reunión: ¿cómo incorporó el diseñador los comentarios de la reunión? Una vez que nuestros anunciantes envíen y utilicen el producto, también podríamos compartir cómo los anunciantes están utilizando los productos en función de los datos analíticos.

Arya: ¿Hubo algún recurso al que se refirió mientras trabajaba en este proyecto?

Mason: Leí el diseño atómico de Brad Frost, investigué en línea y hablé con otros diseñadores de UX en MeetUps. Si crees que una empresa en particular practica un buen diseño, es muy probable que hayan hablado de su guía de estilo en algún lugar en línea.

Arya: ¿Cuál es el estado de nuestra guía de estilo?

Mason: He capturado y revisado todos los elementos de la interfaz de usuario que utilizamos en nuestros diferentes productos y los he agrupado en bases, componentes, patrones y páginas, que servirán como fuente de verdad para nuestros diseños de interfaz de usuario.

Puede consultar los elementos básicos y componentes de la interfaz de usuario en Dribbble. Si está familiarizado con el diseño atómico, agrupé los niveles de "átomo" y "molécula" en lo que llamo "componentes". Por ejemplo, combinar el título del formulario y la entrada facilita a otros diseñadores copiar fácilmente un formulario completado campo.

¡Gracias por leer!

Esté atento a estos próximos temas a medida que desarrollamos nuestra guía de estilo:

  • Cómo un marco UI simplifica la colaboración
  • Desarrollo de nuevas hojas de estilo basadas en el marco de la interfaz de usuario
  • Cómo construir un sitio web de guía de estilo
  • El viaje para encontrar nuestra voz y tono