Dándole espacio a la variación
Por Yesenia Perez-Cruz. Original en inglés, traducción al español por Mariana Ramírez
Nota de los editores: A List Apart se complace en presentar este capítulo de un extracto del nuevo libro de Yesenia Pérez-Cruz, Expressive Design Systems, disponible ahora en A Book Apart.
Hacer que una marca se sienta unificada, cohesiva y armoniosa, dejando al mismo tiempo espacio para la experimentación, es un equilibrio difícil. Es uno de los aspectos más desafiantes de un sistema de diseño.
La diseñadora gráfica y socia de Pentagram Paula Scher enfrentó este desafío con la identidad visual del Teatro Público de Nueva York. Como explicó en una charla en Beyond Tellerrand:
Empecé a darme cuenta que si hacías todo igual, era aburrido después del primer año. Si lo cambiabas individualmente para cada obra, el teatro perdía reconocimiento. Lo que hay que hacer, lo cual conseguí totalmente por primera vez después de trabajar allí durante 17 años, es que lo que necesitaban eran temporadas.
Podrías tomar la tipografía y el sistema de color para el festival de verano, el Festival Shakespeare in the Park, y podrías empezar a traducirlo en carteles cambiando los colores, pero usando algunos de los mismos motivos, y podrías crear temporadas enteras a partir de los gráficos. Eso se convertiría en su propio manual de estándares, donde tengo unas seis personas diferentes haciendo esto todo el año (http://bkaprt.com/eds/04-01/).
La estrategia de Scher fue retener el lenguaje visual del Teatro Público cada año, pero variar algunos de sus elementos (Fig 4.1–2). Los colores se intercambiarían. El texto se inclinaría en diferentes direcciones. Nuevos motivos visuales serían introducidos. El resultado es que cada temporada se cohesiona a su manera, pero también lo hace la identidad del Teatro Público en su conjunto.
Incluso los sistemas más robustos o planificados necesitarán tener en cuenta las variaciones en algún momento. Tan pronto como lances un sistema de diseño, la gente te preguntará cómo desviarse de él, y querrás estar armado con respuestas persuasivas. En este capítulo, voy a hablar de lo que significa la variación para un sistema de diseño, cómo saber cuándo se necesita, y cómo gestionarlo de forma escalable.
Qué es variación?
Hemos pasado la mayor parte de este libro hablando de la importancia de la unidad, la cohesión, y la armonía en un sistema de diseño. Entonces, ¿por qué estamos hablando de variación? ¿No está eso en conflicto con todos los objetivos que nos hemos fijado hasta ahora?
La variación es una desviación de los patrones establecidos, y puede existir en todos los niveles del sistema. En el nivel de componente, por ejemplo, un equipo puede descubrir que necesita un componente que se comporte de una manera un poco diferente; quizás este componente en particular necesita aparecer sin una foto, por ejemplo. En un nivel de lenguaje de diseño, puede que un equipo tenga una audiencia diferente, por lo que quieren ajustar su identidad de marca para servir mejor a esa audiencia. Incluso puede haber variación a nivel de principios de diseño: si un equipo está trabajando en un producto que es funcionalmente diferente a su producto principal, puede que tengan que ajustar sus principios para adaptarse a ese contexto.
Hay tres tipos de desviaciones que aparecen en un sistema de diseño:
- Divergencia involuntaria: típicamente ocurre cuando los diseñadores no pueden encontrar la información que están buscando. Puede que no sepan que cierta solución existe dentro de un sistema, por lo que crean su propio estilo. Una documentación y unas guías de uso claras y fáciles de buscar pueden ayudar a tu equipo a evitar la variación involuntaria.
- Divergencia intencional pero innecesaria: usualmente sucede cuando los diseñadores no quieren sentirse limitados por el sistema, o creen que tienen una mejor solución. Asegurarse que tu equipo sabe cómo retroceder y contribuir al sistema puede ayudar a mitigar este tipo de variación.
- Divergencia intencional y significativa: es el objetivo de un sistema de diseño expresivo. En este caso, la divergencia es significativa porque resuelve un problema muy específico del usuario que ningún patrón existente resuelve.
Queremos permitir una variación intencional y significativa. Para hacerlo, necesitamos entender las necesidades y los contextos para la variación.
Contextos para la variación
Cada variación que añadimos hace más complicado nuestro sistema de diseño. Por lo tanto, debemos tener cuidado de encontrar los momentos adecuados para la variación. Tres grandes cambios contextuales son servidos por la variación: la marca, la audiencia y el ambiente.
Marca
Si estás creando un sistema para múltiples marcas, cada una con su propio lenguaje de marca, entonces tu sistema necesita soportar variaciones para reflejar esas marcas.
La clave aquí es encontrar los elementos básicos comunes y luego establecer algunos criterios sobre cómo deben desviarse. Cuando creamos el sistema de diseño para nuestros sitios web en Vox Media, debatíamos constantemente sobre cuáles elementos deberían ser más expresivos. ¿Deberíamos estandarizar un pie de página o permitir una gran cantidad de personalizaciones? Volvimos a nuestros objetivos principales: nuestros usuarios visitaban nuestros sitios para consumir contenido editorial. Por lo tanto, las variaciones deben estar al servicio del contenido, del estilo de redacción y del tono de voz de cada marca.
Los módulos de newsletter de todas las marcas de Vox Media fueron un ejemplo de variación innecesaria. Eran consistentes en funcionalidad y distribución, pero tenían variaciones en tipografía, color y tratamientos visuales como los bordes (Fig 4.3). Había bastante diseño personalizado dentro de un área muy pequeña: el componente de newsletter de Curbed tenía un fondo sesgado, por ejemplo, mientras que el de Eater tenía una imagen de fondo. Debido a que estos módulos eran tan consistentes en sus objetivos de usuario, decidimos unificar su diseño y crear menos variación (Fig 4.4).
El diseño unificado limpió algunas deudas técnicas. En el diseño anterior, cada módulo de newsletter tenía anulaciones CSS para lograr un estilo distinto. Algunos módulos incluso tenían anulaciones en el color primario del botón para que funcionara mejor con el color de fondo. Pequeños cambios en CSS como este se añaden con el tiempo. Cada vez que publicábamos un nuevo cambio, teníamos que actualizar manualmente los puntos que contenían anulaciones CSS.
El diseño optimizado también puso un énfasis más apropiado en el módulo del newsletter. Aunque es importante, este módulo no es la estrella de la página. No necesita fondos llamativos o formas elegantes para llamar la atención, especialmente porque está ubicado alrededor del contenido del artículo. La variación en este módulo no era necesaria para expresar las marcas.
Por otro lado, considera la variación de los componentes del encabezado global de Vox Media. Cuando rediseñamos The Verge, sus equipos editoriales se mostraron muy interesados en tener más libertad para dirigir el arte de la página, guiar la atención hacia grandes especiales, y mostrar ilustraciones personalizadas. Nos ocupamos de esto creando un componente de cabecera (Fig 4.5) que se sitúa encima de la cabecera global de las páginas de inicio. Contiene un logo, un tagline, una fecha y una imagen de fondo personalizable. Aunque en ese momento este era un componente único, sentimos que la variación era valiosa porque fortalecería la voz de la marca The Verge.
El equipo de The Verge encarga o realiza arte original que cambia a lo largo del día. La parte más emocionante es que pueden usar una cabecera y un one-up hero cuando dejan caer una gran característica y usan estos componentes flexibles para dirigir el arte de la página (Fig 4.6). Poco después del lanzamiento, la cabecera de The Verge incluso consiguió una cuenta fan de Twitter (@VergeTaglines) que tuitea cada vez que la imagen cambia.
Aunque este componente fue construido específicamente para The Verge, pronto ganó una aplicación más amplia con otras marcas que comparten la plataforma de publicación de Vox, Chorus. El sitio web de la familia McElroy, por ejemplo, necesitaba transmitir su sentido del humor y sus raíces apalaches; el componente de la cabecera brilla con una ilustración original que muestra una adorable ardilla (Fig 4.7).
El Chicago Sun-Times — otro sitio de la plataforma Chorus — es muy diferente en contenido, tono y audiencia al de la familia McElroy, pero el componente de cabecera es igual de valioso para transmitir el tono del periodismo de investigación de alta calidad de la organización y la cobertura de noticias de última hora (Fig 4.8).
¿Por qué la variación de la cabecera funcionó bien mientras que la del newsletter no? las variaciones en el diseño del newsletter eran puramente visuales. Cuando las creamos, no teníamos una estrategia sobre cómo debería funcionar la variación; al contrario, buscábamos cualquier oportunidad para hacer que las marcas se sintieran distintas. La variación de la cabecera, en cambio, estaba atada directamente a la estrategia de marca. Aunque empezó como algo único para The Verge, era lo suficientemente flexible y con un propósito como para migrar a otras marcas.
Audiencia
La próxima variación contextual viene de la audiencia. Si tus productos sirven a diferentes audiencias que necesitan cosas diferentes, entonces tu sistema debe poder adaptarse para satisfacer esas necesidades.
Un buen ejemplo de esto son las páginas de listados de Airbnb. Adicionalmente a sus listas estándar, también tienen Airbnb Plus — alquileres únicos, de alta gama, a un precio más alto. Las audiencias que reservan en el listado Plus probablemente buscan calidad excepcional y atención al detalle.
Tanto la página de listado estándar de Airbnb como la página de listado Plus, son inmediatamente reconocibles como parte de la misma familia porque usan muchos elementos consistentes (Fig 4.9). Ambas usan la fuente personalizada de Airbnb, Cereal. Ambas destacan la fotografía. Ambas usan muchos de los mismos componentes, como el selector de fecha. La iconografía es la misma.
Sin embargo, algunas de las decisiones de diseño transmiten una actitud distinta. Airbnb Plus usa tipografía más grande, un espacio vertical más aireado, y un peso más ligero de Cereal. Tiene una paleta de colores más discreta, con un color más profundo en la llamada a la acción. Estas opciones hacen que Airbnb Plus se sienta más como una experiencia premium. Puedes ver que han ajustado la densidad, el peso y los niveles de escala para lograr una estética más elegante y sofisticada.
La página de listado estándar, por otro lado, es más funcional, con el módulo de reserva al frente y en el centro. El diseño de Plus lleva la densidad y los niveles de peso en una dirección más ligera y aireada. La página de listado estándar tiene un menor contraste de tamaño entre los elementos, lo que la hace más funcional.
Debido a que usan los mismos elementos básicos — la misma tipografía, iconografía y componentes — ambas experiencias se sienten como Airbnb. Sin embargo, las variaciones en espaciado, los pesos tipográficos y el color, ayudan a distinguir el listado estándar del listado premium.
Ambiente
He estado hablando principalmente de añadir variación a un sistema para permitir un rango de tono de contenidos, pero también puede que necesites que tu sistema escale basado en los contextos del entorno. “Ambiente” en este contexto pregunta: ¿Dónde se usarán tus productos? ¿Eso tendrá un impacto en la experiencia? Los entornos son las diversas restricciones y presiones que rodean e informan una experiencia. Eso puede incluir la iluminación, el sonido ambiente, la participación activa o pasiva, el nivel esperado de enfoque, o los dispositivos.
El sistema de diseño Polaris de Shopify surgió inicialmente a partir del producto de Gestión de Tienda de Shopify. Cuando el equipo de Shopify Retail inició un proyecto para diseñar la próxima generación de sistema de punto-de-venta (POS), se dieron cuenta que los patrones en Polaris no se ajustaban exactamente a sus necesidades. El sistema POS necesitaba funcionar bien en un espacio de venta al por menor, a menudo bajo una iluminación brillante. La aplicación debía usarse a la longitud del brazo, a una distancia de 24 a 36 pulgadas del comerciante. Y a diferencia del núcleo de administración, donde la interacción principal es entre el comerciante y la interfaz de usuario, los comerciantes que utilizan el sistema POS necesitan priorizar sus interacciones con sus clientes en lugar de la interfaz de usuario. El equipo de ventas al por menor quería que los comerciantes lograran un nivel de dominio “a ojos cerrados” sobre la interfaz de usuario para que pudieran mantener el contacto visual con sus clientes.
El equipo de Retail decidió que la paleta de color existente, que sólo funcionaba sobre un fondo claro, podría no ser lo suficientemente clara bajo las luces brillantes de una tienda minorista. La escala de la tipografía también era muy pequeña para ser legible a distancia. Y para que los comerciantes pudiesen usar el sistema POS sin perder el contacto visual con los clientes, los botones y otros elementos de la interfaz de usuario tendrían que ser mucho más grandes.
El equipo de Retail reconoció que el sistema de diseño actual no soportaba una variedad de escenarios ambientales. Pero después de hablar con el equipo de Polaris, se dieron cuenta que otros equipos se beneficiarían de las soluciones que crearon. El equipo de almacenamiento, por ejemplo, también estaba desarrollando una aplicación que necesitaba usarse a una distancia bajo luces brillantes. Este trabajo inspiró al equipo de Polaris a crear el modo oscuro para el sistema (Fig 4.10).
Este bucle de retroalimentación entre el equipo de producto y el equipo de sistema de diseño es un gran ejemplo de cómo construir la variación correcta en tu sistema. Construye tu sistema para ayudar a tus usuarios a navegar tu producto de forma más clara y a satisfacer las necesidades de contenido y desbloquearás la expresión escalable.
