Diseñar con datos difíciles
Por Steven Garrity. Original en inglés, traducción al español por Mariana Ramírez
Te han pedido que diseñes una pantalla de perfil para móvil o una aplicación web. Necesitarás incluir un avatar, un nombre, un cargo y una ubicación. Abres Sketch o Figma. Tal vez saques tu lápiz para bocetar o vayas directamente al markup y al CSS.
¿Cuál es tu nombre falso?
Independientemente de tu selección de herramientas, probablemente vas a terminar con algunos datos simulados. ¿Eres del tipo que usa su propio nombre, o invocas a tu viejo amigo, el Sr. Lorem Ipsum? Tal vez tengas un nombre falso, como Sophia J. Placeholder.
Para mí es Nuno Bettencourt. O Nuno Duarte Gil Mendes Bettencourt, más formalmente. Nuno tocaba la guitarra en la banda sutilmente llamada Extreme a principios de los 90. Para los más jóvenes, era un músico de gira con Rihanna. Nada de eso importa para nuestros propósitos aquí, excepto que tiene un nombre bastante largo.
Puede parecer que no importa lo que pongas en un campo de nombre simulado. No terminará en el producto final — es sólo una variable. Bueno, sí importa. El texto con el que inicies influenciará sutilmente tu enfoque de maquetación y estilo. Puede limitar la gama de opciones que te permitirás considerar, o más peligrosamente, ocultar límites reales con los que te encontrarás después.
Algunas soluciones obvias pueden venir a la mente: usar un nombre simulado largo; usar datos reales en tu diseño. Si bien son un buen inicio, vale la pena explorar más profundamente cómo estas y otras prácticas pueden mejorar tus procesos de diseño y ayudar a crear productos más duraderos.
Es más que sólo nombres falsos
Esto es más que sólo nombres falsos. ¡Son también direcciones falsas! ¡Titulares falsos! ¡Fotos falsas! Cuando diseñamos basados en datos limitados, las limitaciones de esparcen en nuestros diseños.
La incapacidad de lidiar con largas cadenas de texto es la forma más básica y quizá la más común en que los componentes pueden fallar cuando entran en contacto con los datos reales. ¿Pensaste que la pestaña se llamaría “Ajustes”? Bueno, ahora se llama “Preferencias de la Aplicación”. Ah, y el producto se lanza mañana.
La longitud es sólo una de las muchas maneras en que el texto y los datos reales pueden forzar un diseño débil. Puedes encontrar también saltos de línea imprevistos o incluso texto que es demasiado corto. Ten cuidado en las siguientes áreas donde tendemos a hacer trampa con datos simulados fáciles.
Fotos del perfil de la cuenta
No esperes que la gente tenga un autorretrato con calidad de estudio, de fondo blanco sólido (¡y desconfía de los que lo tienen!). Muchas personas pueden no estar ni siquiera interesadas en subir una foto para su cuenta. Otras pueden intentar introducir el logotipo de su empresa, que es demasiado ancho, en esa pequeña área cuadrada o circular. No puedes contabilizar todos los datos posibles, pero si incorporas algunos de estos casos poco ideales al inicio del proceso de diseño, el resultado será mucho más resistente.
Miniaturas para videos y fotos
No todas las miniaturas tendrán la relación de aspecto que habías previsto. Algunas pueden incluir texto o imágenes que chocan inesperadamente con la página circundante. Un problema común que he visto es una página de inicio bien diseñada con un logotipo de la empresa destacado en la parte superior. A continuación, viene el video y la imagen predeterminada para el video también incluye el logo de la empresa. Ahora tu hermoso diseño de la página de inicio parece una ensalada de logotipos.
Variaciones salvajes en las cantidades
Presta atención a los elementos que contengan listas donde la cantidad de elementos en esas listas pueda variar significativamente. Imagina un diseño con tarjetas donde cada tarjeta incluye un conjunto de etiquetas. Una tarjeta puede tener tres etiquetas mientras que otra puede tener veinticinco. Los datos tabulares también pueden sufrir tanto estéticamente como en legibilidad cuando una celda en particular varía mucho en longitud con respecto a las otras.
Elementos faltantes
Puedes crear un diseño agradable para el encabezado de tu sitio que escala maravillosamente desde tu teléfono hasta tu pantalla de 27”. Luego descubres que necesita un elemento “Soporte” en el menú — ¡pero no hay espacio! A menudo comienzo un wireframe compilando dos listas. La primera contiene los objetivos que debe alcanzar quien visita esta pantalla. La segunda contiene los elementos que necesitan vivir en esta pantalla. Asegúrate de incluir todos los elementos — desde el contenido principal hasta los anuncios, pasando por un enlace de privacidad en el pie de página. Es particularmente fácil detectar un sitio que fue diseñado sin tener en cuenta los anuncios que incluye.
Tamaño de los puertos de visualización
Más allá de los datos simulados, tenemos una tendencia a presentar nuestros diseños en los tamaños de visualización más halagadores. O mejor dicho, diagramamos nuestros diseños para que luzcan mejor en las medidas que seleccionamos para nuestras maquetas — particularmente cuando diseñamos con herramientas construidas alrededor de tamaños de marcos fijos. En las profundidades descuidadas del diseño adaptativo, encontramos dos trampas comunes: la disposición estirada en móvil y el diseño aplastado en escritorio.
El diseño flexible puede ser un diseño más accesible
No podemos gastar interminables cantidades de nuestro tiempo (y el dinero de nuestros clientes) en cada caso límite imaginable. Podemos ser más conscientes de la influencia del lienzo en el que creamos, las herramientas que usamos, y de los datos en torno a los que diseñamos.
Es necesario centrar la atención y las pruebas en las formas en las que se accederá a nuestro sitio más comúnmente. Las cosas no tienen que ser, y nunca serán, perfectas en cada tamaño de pantalla. Soltar el control y abrazar esta fluidez es parte de diseñar para la web.
Diseñar con flexibilidad también puede hacer que tu diseño sea más accesible. Aquellos con problemas de visión (que somos la mayoría de nosotros en algún momento de nuestras vidas) pueden navegar con un tamaño mínimo de letra personalizado. Otros pueden navegar a un nivel de zoom que desencadena los diseños adaptativos destinados a dispositivos móviles incluso en un gran navegador de escritorio.
Evita la revelación decepcionante
Existen suficientes factores que pueden contribuir a que los clientes y las partes interesadas tengan expectativas poco realistas y se sientan decepcionadas por la implementación final. No añadas a este posible desajuste de expectativas mostrando diseños que lucen impecables, sólo para que el cliente los revise a la luz de los datos reales.
Si bien es posible que tengas que convencer a la gente de los méritos de tu diseño, sólo te prepararás para el fracaso si eliges mostrar un diseño poco realista. En lugar de eso, date el gusto inicialmente mostrando un diseño con datos ideales. Luego muestra cuán duradero y flexible es el diseño presentando variaciones con datos difíciles. Esto no sólo ayuda a que la gente entienda tu diseño, sino que también añade valor a tu proceso y experiencia.
Cuando era niño, recuerdo claramente un vendedor puerta a puerta saltando sobre una aspiradora para demostrar la durabilidad de su producto. No necesitábamos una nueva aspiradora (la falla inmediata en todo el modelo puerta a puerta), pero la imagen se me quedó. ¡Salta sobre tus diseños! ¡Tíralos contra la pared! Llénalos de basura y muestra lo bien que resisten.
Por ejemplo, cuando muestres un diseño a un cliente, muéstrale cómo se adapta a varios anchos de pantalla y tamaños de fuente predeterminados. Mostrarle a los clientes cómo responde su sitio a los tamaños de los navegadores puede ayudarles a dejar de lado la necesidad de pulir los diseños únicamente para el dispositivo y tamaño en particular que ellos utilizan. Si tienes una manera robusta de lidiar con los nombres largos en una página de perfil, ¡muéstrala! Esto puede ayudar a tu cliente a entender que hay otra dimensión de trabajo (y tiempo, y dinero) más allá de lo que es visible en una captura de pantalla estática.
¿Adentro la basura, afuera el oro?
El viejo refrán de la informática dice, “adentro la basura, afuera el oro”. En lugar de eso, apunta por “adentro la basura, mmm… no está mal”. Un mejor refrán en el que apoyarse puede ser la ley de Postel, también conocida como el Principio de Robustez: “Sé conservador en lo que haces, sé liberal en lo que aceptas de los demás.” Si imaginas a tu gemelo malvado tratando de destrozar tu diseño, ¿cómo lo rompería? Tal vez aplastando el navegador a un tamaño estrecho, e ingresando algunos titulares inusualmente largos (basura adentro). Tu diseño debería responder bien a un ancho estrecho, y reducir con gracia el tamaño de fuente de los titulares particularmente largos (oro afuera).
Con la práctica, puedes interiorizar algunos de estos procesos. Llegarás a conocer instintivamente qué trampas implica un diseño visual determinado. De la misma manera, los expertos en accesibilidad o internacionalización aprenden a detectar rápidamente las trampas comunes que limitan la universalidad de los diseños. Aunque nuestra intuición puede ayudarnos, también puede engañarnos — asegúrate de probar, y ver cómo trabaja la gente real con tu producto.
Incluso mientras perfeccionas tu habilidad para anticipar y evitar errores comunes, tu mente estará tirando constantemente hacia el camino del menor esfuerzo. Al igual que los atletas de fondo que entrenan a grandes alturas, ejercitándose con pesas en los tobillos, o el jugador de béisbol profesional que practica golpes con un bate de peso, debemos continuar aumentando artificialmente la tensión en nuestro trabajo.
Los datos reales no son suficientes
Mucho se ha escrito sobre los beneficios de diseñar con datos reales. Mi colega Daniel Burka escribe:
Intenta no pasar por alto la complejidad. El trabajo de diseño en el mundo real es bastante difícil. Si diseñas un gráfico falso, usa datos realistas. Si finges rediseñar un sitio, … no elimines mágicamente una unidad de pauta publicitaria. Si creas una pantalla de inicio de sesión falsa, no olvides incluir la forma de recuperar contraseñas o nombres de usuario olvidados… Escribe texto real. Lorem ipsum es para aficionados.
Daniel tiene razón — especialmente cuando se trata de elementos de interfaz en los que el significado del texto es inextricable de la función. Cuando se trata de diseñar elementos que pueden mostrar contenidos muy variables (fotos de perfil o nombres, por ejemplo), puedes hacer algo mejor que usar datos reales. Ve más allá de los datos realistas. Obtén datos difíciles.
Si eres capaz de obtener datos reales, busca en ellos el peor de los casos. Si puedes manejar el peor, los casos comunes serán muy sencillos.
Al rediseñar una pantalla existente, aprovecha los datos actuales e históricos que estén disponibles. Extrae los datos extremos, encuentra los títulos más largos y los más cortos. Si estás diseñando miniaturas de fotos o videos, toma un conjunto aleatorio de miniaturas reales y descarta las que sabes que son fáciles de diseñar.
Cuando no tengas datos existentes, e incluso cuando los tengas, crea ejemplos difíciles. Escribe titulares que vayan más allá de los límites de lo que la pantalla puede acomodar. Crea miniaturas de imágenes que tengan sus propios bordes o sombras incorporados, y ve cómo chocan con lo que tienes en su lugar.
A veces los datos difíciles pueden (y deben) ser corregidos
Aunque tu diseño debe ser lo más robusto posible, a veces puedes encontrar casos extremos que no tienen porqué serlo. Al diseñar una página de lista con un cliente, miramos su archivo completo de datos para ver cómo variaba la longitud de los títulos. El título más corto era de 8 caracteres, y el más largo tenía más de 320, pero sólo un puñado tenía más de 80.
Trabajamos con el cliente para crear un diseño que soportara títulos de máximo 80 caracteres. Luego se realizó alguna cirugía editorial en esos pocos de valores atípicos para que quedaran debajo del límite. Como resultado, terminaron siendo mejores títulos.
Cuando se trata de contenido que es gestionado por tu compañía, equipo, o cliente, también vale la pena codificar las prácticas en una guía de estilo. No es necesario malgastar toda tu energía diseñando con datos difíciles que vienen del final del pasillo.
Internacionalización
He tenido el privilegio de trabajar con equipos en Mozilla, donde las páginas son traducidas a más de ochenta idiomas. Con esfuerzos tan amplios de localización, aprendimos a crear maquetas y diseños de páginas que soporten tanto conjuntos de caracteres no-latinos como idiomas que se leen de derecha a izquierda.
La compatibilidad con idiomas que se leen tanto de izquierda a derecha, como de derecha a izquierda, requiere algo más que permitir que las cadenas de texto se inviertan. Toda la estructura visual de tu maqueta y diseño debe ser capaz de voltearse horizontalmente. En lugar de ser una limitación frustrante, encontrarás que estas y otras restricciones similares te ayudarán a desarrollar superpoderes de diseño.
Anticipándose a las cadenas más largas de texto en idiomas como el alemán, algunos diseñadores desarrollaron un proceso donde el texto Latino se genera al doble de la longitud del texto de origen. El W3C tiene un artículo útil sobre las relaciones de longitud comunes entre distintos idiomas.
El uso de mayúsculas también puede ser problemático en algunas localidades — especialmente cuando es forzado con CSS. Si tu diseño realmente depende del text-transform: uppercase o text-transform: lowercase, revisa nuevamente el diseño para que sea más flexible, o maneja el uso de mayúsculas en el texto de origen (en lugar de hacerlo a través de CSS) para que el equipo de localización pueda mantener el control sobre el uso de mayúsculas.
MDN es un gran recurso para obtener más información sobre el diseño para la localización.
Ten cuidado con tu propia ceguera cultural cuando se trata de datos simulados durante el proceso de diseño. Las trampas en diseño a menudo afectan a los que menos se parecen a ti.
Siempre que sea posible, diseña con datos difíciles
Mucho se ha escrito (y debería leerse) sobre cómo nuestras herramientas pueden ayudarnos a diseñar con datos reales. Con las herramientas modernas de diseño y prototipado, prototipos de HTML/CSS/JS, e incluso maquetas estáticas, sólo nos engañamos a nosotros mismos si no estamos empujando nuestros diseños al punto de quiebre.
Siempre hay un equilibrio entre hacer algo rápido y construir demasiado. Como con todas las cosas en diseño y en la web, depende. Depende de los datos, la audiencia, el proyecto, y los objetivos.
El cronograma y el presupuesto son las excusas comunes para no entregar componentes de diseño más robustos. Sin embargo, especialmente en proyectos grandes, aprender a incorporar datos más difíciles al inicio del proceso de diseño puede ahorrarte tiempo a largo plazo.
Al igual que ese atleta de fondo que mejora entrenando a grandes alturas, construyendo con datos difíciles desde el principio, te convertirás en un diseñador más fuerte. Serás más consciente de dónde y cómo se puede romper tu diseño, y serás capaz de comunicar tus procesos y decisiones.
