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

Analizar la data para que sea una guía

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.

Parte del levantamiento de pantallas que realizamos para obtener un panorama completo de los diseños

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

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.

Ejemplo de disposición de 6 columnas centrales para desktop y tablet, y 4 para mobile

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.

Pruebas de escalabilidad para el diseño de la pantalla de ingreso de cuenta

Pantallas con zonas laterales — construir el balance

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.

Ejemplo de diseño de Layout 7/4 para pantallas con uso de sidebar

Tablet y la oportunidad de trabajar el espacio negativo

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.

Diseño de referencia para página de Mi Cuenta adaptado a resolución de tablet

Consideraciones para crear un Layout consistente

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.

Ejemplo de levantamiento de breakpoints para establecer cuáles se utilizarán

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

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.

--

--

Diseñadora gráfica PUCV, Magíster en Diseño Avanzado PUC, UX Certificate NYU, Senior UX Designer. Profesora agregada PUCV. Visual Design Lead LATAM Airlines

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Paulina Meyer

Diseñadora gráfica PUCV, Magíster en Diseño Avanzado PUC, UX Certificate NYU, Senior UX Designer. Profesora agregada PUCV. Visual Design Lead LATAM Airlines