Cómo crear definiciones de Layout consistentes y transversales: el caso de LATAM Airlines
Sumergirse en las definiciones de layout (disposición y combinación de columnas para crear un set de plantillas) de una variedad de productos digitales, orientada a distintas audiencias, puede ser un poco abrumador.
Cuando decidimos tomar como prioridad esta definición al interior del equipo, sentí que era similar a correr una maratón (o bueno una media maratón para ser más realista) y no lograba imaginar el punto final de este proyecto o el momento en que le daría “publicar” en Figma.
Parte crucial en la construcción y evolución de un sistema de diseño, se trata de sentar bases robustas que sean lo suficientemente claras y precisas para guiar a un equipo, y que a la vez entreguen flexibilidad al momento de escalar los productos. Suena un poco complejo, pero en este artículo contaré como abordamos estas decisiones y cuál fue el resultado final que obtuvimos.
Si el alcance del proyecto es abrumador córtalo en pequeños pedazos
Primero nos reunimos los tres integrantes del equipo que avanzaríamos en estas definiciones: Misael, Juan y yo. Comenzamos por dividir en partes lo que pudiésemos abarcar en un sprint para tener una idea aproximada de cuánto tiempo nos tomaría. Es decir, tomamos esta torta gigante, y la partimos en varios trozos y fuimos tomando cada uno de ellos como una sub tarea o definición que debíamos “cerrar” o al menos obtener una resolución. Así, pudimos establecer el comienzo de esta propuesta y qué temas avanzaríamos por cada sprint. Como primera decisión optamos por comenzar por las resoluciones de escritorio que consideraban una mayor cantidad de casos, y nos dividimos los productos a revisar.
Analizar la data para que sea una guía
A partir de la data recopilada en Google Analytics sobre los dispositivos y resoluciones más utilizadas para acceder a LATAM durante los últimos 6 meses, comenzamos con la revisión de las pantallas “L”, en dónde se agrupan todas las resoluciones de computadores de escritorio. Con la revisión de la data y el ranking de los más utilizados, pudimos establecer los puntos de quiebre que abordaríamos para este segmento de pantallas.
Con el horizonte un poco más claro, definimos 4 áreas de trabajo, que iríamos completando para avanzar hacia la siguiente etapa.
- Segmento de resoluciones Desktop — tamaño “L”
- Segmento de resoluciones Mobile — tamaño “S”
- Segmento de resoluciones Tablet — tamaño “M”.
- Comportamiento de modales, lightbox y ventanas de configuración de cookies 🍪 para todas las resoluciones. (S,M y L)
Para comenzar el análisis desarrollamos un levantamiento de los comportamientos de los diseños que ya están en producción, con la finalidad de contrastar cómo se adecuaban a los diversos puntos de quiebre y el nivel de consistencia entre todos ellos.
Luego ejecutamos un mapeo de todos los diseños en Figma de cada producto, para ver si coincidían con lo que estaba declarado en el sitio web. Con este panorama creamos un proyecto con todos los casos, y marcamos aquellos que nos parecían correctos para replicar en otros productos.
Con esta vista completa, logramos cuantificar el número total de tipos de disposición de columnas que se utilizaban en los productos de LATAM y a partir de esta cifra, decidimos reducirlo considerablemente para limitar las posibilidades de comportamiento de los diseños. Esta restricción no era un acto al azar, sino que provenía de reciclar, filtrar y dejar únicamente plantillas que se alinearan con los tres pilares que estamos impulsando: transversalidad, consistencia y escalabilidad.
Desktop y las particularidades de las casuísticas
La resolución para notebooks y computadores de escritorio es más compleja que para mobile o tablet, ya que considera un rango más amplio de alternativas para crear plantillas. Por esta razón, se hace aún más necesario establecer lineamientos precisos para el diseño y composición de éstas. De los más de 16 tipos de plantillas que teníamos para este rango de breakpoint, logramos reducirlo a un total de 9.
No me detendré en los 9 tipos de Layout que creamos, ya que me extendería mucho, pero lo importante es que a cada uno de ellos le asignamos un nombre, una plantilla en Figma y ejemplos de pantallas y productos que coincidían con esta disposición y uso de columnas. Este set de 9 disposiciones en el uso de columnas, agrupan toda la diversidad de estructuras presentes en los productos de LATAM.
De esta forma, cuando un equipo comience a crear wireframes o a diseñar podrá consultar la documentación y los ejemplos de pantallas, y así determinar cuál es el layout más apropiado para su contexto, según el tipo de componentes y elementos que utilizarán y la audiencia a la que se dirigen.
Con las definiciones de las disposiciones y combinaciones en el uso de columnas, ajustamos las pantallas para comparar como se visualizaba cada caso en los distintos puntos de quiebre. Así, pudimos corroborar que nuestra propuesta de plantilla era escalable, y que no se perdía el foco o la acción principal de cada interfaz. Además, el traspaso entre una resolución y otra era coherente, manteniendo los elementos prioritarios de la interfaz haciendo predecible hacia los usuarios, el paso siguiente.
Probamos diversos casos, y uno de ellos fue la pantalla de login o ingreso a la cuenta privada. Probamos 8 puntos de quiebre con la nueva disposición de columnas y en todos ellos corroboramos la escalabilidad, legibilidad y comprensión de la caja de acceso. Además, en el caso de resoluciones más pequeñas, priorizamos el contenido y no se utilizó una ilustración de fondo. El motivo de esta decisión, es mantener el foco visual en la acción y no en elementos que pudiesen ser un distractor de la atención de los usuarios.
Pantallas con zonas laterales — construir el balance
Otro caso clave a definir, es cómo se configura una pantalla cuando existe una zona de sidebar o barra lateral. Usualmente, este tipo de pantallas se utilizan para resumir, consolidar o evidenciar los resultados de una acción que se ejerce en la zona principal. Entonces, a medida que el usuario realiza ciertas tareas, la zona lateral se actualiza tomando un rol de recordatorio amigable de las acciones previamente realizadas.
El desafío al enfrentar el diseño de pantallas con zonas laterales, es lograr un balance entre ambas áreas, independiente de que una sea más prioritaria o focal que otra. Por esta razón, es importante la definición de uso de columnas y establecer un layout que sea consistente y sostenible.
Para lograr un equilibrio visual entre ambas áreas, establecimos el uso de 7 columnas para la zona principal y 4 columnas para la zona del sidebar. En tamaños de pantalla que se sitúan en este rango, se utiliza de forma estandarizada las 12 columnas, y habitualmente en una relación de 8/4. Nosotros optamos por una combinación de 7/4 con el fin de dejar una columna libre para crear aire entre ambas zonas de contenidos, y hacer un mayor énfasis en la división. Así la interfaz en su totalidad se percibe más limpia y con márgenes más notorios.
Tablet y la oportunidad de trabajar el espacio negativo
Una de mis resoluciones favoritas para diseñar es la de tablet. Siempre he sentido que esta dimensión logra un equilibrio perfecto entre diseño y legibilidad, quizá por la similitud que tiene en cuanto a tamaño y verticalidad con el libro como objeto.
Visualizar los diseños en una pantalla más alta y menos extensa y sin las restricciones de espacio que consideran las resoluciones de celulares, facilita jugar con los márgenes y reforzar el blanco como atributo.
Si bien los diseños adaptados a la resolución de tablet, mantienen una consistencia desde el punto de quiebre anterior, que corresponde al de celulares, aún así es posible crear un layout enfocado en esta resolución. De esta forma, no es solo un diseño de móvil extendido, sino que existe un propósito en la organización y uso de columnas que aporta en el resultado final de la interfaz.
Consideraciones para crear un Layout consistente
Para comenzar un trabajo de definición y creación de plantillas, es necesario comprender el panorama completo del producto o servicio que se requiere diseñar. Puede que al momento de sentar las bases de estas decisiones en tu sistema de diseño, no cuentes con el total de pantallas que utilizarán los usuarios. No te preocupes, ya que es un proceso en constante evolución y puede ir variando con el tiempo.
Al comienzo puede parecer una tarea enorme o épica, por eso es clave dividir la tarea completa en trozos que sean abordables, para establecer avances y toma de decisiones semanales. Además, es necesario organizar instancias de trabajo colaborativo, ya que para sentar estas bases, no existe una única forma de trabajo, por lo que la discusión y los acuerdos son un requisito fundamental.
Si tienes claridad de algunas pantallas, comienza por mapearlas e identificar cómo se estructuran. Esto se puede hacer transformando todos los elementos a formas básicas y en escala de gris para ubicar su posición y destacar el espacio negativo. Con esto, podrás identificar las zonas y darles jerarquías visuales según los objetivos a comunicar.
Luego de esto, puedes revisar data sobre qué resoluciones son las más utilizadas para acceder a tu producto, y ver si esta información conversa con lo que se ha diseñado. También puedes revisar el ranking general de visitas y ordenarlo por dispositivo o resolución, para así consolidar una revisión más profunda.
Define breakpoints primarios, que serán las bases para el diseño de pantallas. No significa que solo crearás interfaces para estas resoluciones, sino que comenzarás por esta línea base y luego probarás cómo se adaptan a los tamaños intermedios entre cada punto de quiebre. A medida que generes comparativas, realices pruebas en monitores, tablets y celulares, podrás establecer qué uso de columnas y disposición refuerza y suma más a tus diseños.
Lo más importante es entender que las plantillas no deben considerarse como una limitante al diseñar, sino que facilita un marco y estructura para crear un diseño de pantalla equilibrado, que mantenga consistencia en los distintos flujos de navegación. Es necesario dejar de lado la visión de restricción, y considerar este set de disposiciones como la demarcación de las zonas seguras para diseñar.
Agradecimientos al equipo
Este trabajo de revisión en detalle y propuesta de plantillas, no hubiese sido posible sin el equipo de excelentes diseñadores que formaron parte de todas las sesiones de trabajo colaborativo, y de la toma de decisiones. Junto a Misael y Juan logramos crear un flujo de trabajo continuo, con checkpoints semanales y sesiones de trabajo para mapear la mayor cantidad de casos.
Constantemente nos vemos saturados de fechas límites, entregas, pruebas y testeos, pero es importante al enfrentarse a decisiones fundacionales en un sistema de diseño, tomarse una pausa para profundizar y conversar sobre alternativas que puedan ser sostenibles en el tiempo, y no desechables en un par de meses.
Este trabajo en conjunto, facilitó profundizar en la construcción del set de plantillas y nos ayudó a elaborar un discurso de fundamento robusto, que transmitiera consistencia a todo el equipo. Gracias Juan y Misa por la excelente y completa documentación que crearon para ejemplificar estas definiciones.