Introducción:
Este artículo busca resumir y opinar sobre 3 design languages promovidos por grandes empresas. Apple apostando por «Human Interface Guidelines«; Google creando «Material Design»; Microsoft con Fluent Design.
Los apartados que se tendrán en cuenta son:
- Accesibilidad
- Disposición
- Tipografía
Accesibilidad
Human Interface Guidelines
Se recomienda que cada página tenga un título único para ayudar a los usuarios de VoiceOver a identificar con mayor facilidad la estructura del proyecto; también se recomienda evitar que las imágenes puramente decorativas puedan ser detectadas por esta tecnología. Asegúrate de que la navegación pueda hacerse únicamente utilizando el teclado, verifica que toda la información sea accesible de forma visual y no visual, por ejemplo, al poner etiquetas para explicar imágenes, se recomienda que la relación entre la imágen y el texto sea explícita en lugar de depender de la cercanía visual. Asegurarse de que los estados de los componentes tienen algún tipo de etiqueta, para que los usuarios con daltonismo u otros problemas de visión puedan tener igual acceso a la información. Se recomienda evitar animaciones pues en algunos casos pueden causar malestar, o de implementarse, diseñar una versión para quienes prefieren el movimiento reducido (reduced motion). Recomienda que los elementos a los que se puede hacer clic sean de al menos 44 x 44 dp.
Material Design
Menciona los 8 roles de puntos de referencia según las guías de W3C ARIA. Navegación, búsqueda, principal, banner(principalmente headers), complementos, información del contenido (principalmente footers), regiones, formularios . Los componentes deberían tener etiquetas que ayuden a diferenciar la información, las etiquetas deben explicar el contenido o propósito, no el rol del elemento. Se recomienda que el H1 sea único y mantener un órden en los headings, no deberían haber saltos de un H2 a un H4, estos elementos son para para definir la estructura de la información, no para definir la estética de la página. Recomienda que los elementos a los que se puede hacer clic sean de al menos 48 x 48 dp. Recomienda hacer que la navegación sea accesible mediante el teclado, propone utilizar el tabulador, flechas de dirección, o en general otras teclas típicas de navegación. Recomienda establecer un componente con focus inicial. Los lectores de pantalla automáticamente asignan el tipo de componente al final de la etiqueta, por eso hacen bastante enfásis en no describir el tipo de elemento ni su apariencia, sino su propósito.
Fluent Design
Recomienda que la navegación dentro de una página se haga en forma de z para que se comporte según el estándar. Recomienda utilziar imágenes para ayudar a personas con problemas cognitivos o de aprendizaje, así como alternativas para quienes tienen dificultades de visión. Hablando sobre mínimos de contraste: el texto regular debe tener 4.5:1 respecto al fondo; para el texto grande (18.5 px en negrita, o 24 px en regular) se recomienda contraste de 3:1, igual que para componentes interactivos o no textuales (como los íconos) respecto a los colores adyacentes.
Disposición
Human Interface Guidelines
Recomienda diseñar teniendo en mente las áreas seguras, para evitar que nuestra aplicación pueda interferir o verse afectada con funciones del sistema como la isla dinámica, la barra de gestos, o en general otras superficies de control que puedan sobreponerse. Los controles y otras secciones críticas deberían evitar estar en la parte inferior de la pantalla pues muchos usuarios dejan esta región por debajo del límite de la pantalla haciéndola inaccesible. Usa espaciado negativo para indicar que los elementos están relacionados entre sí.
Material Design
Reconoce 3 tipos de disposiciones fundamentales: feed para mostrar grandes cantidades de contenido, como la página de bienvenida de Microsoft Edge para mostar diferentes noticias; lista-detalle para mostrar elementos explorables con grandes cantidades de información, por ejemplo los chats de Whatsapp; panel de soporte dividiendo la pantalla en región principal que típicamente ocupa cerca de 2/3 del espacio, y región secundaria que tiene el espacio restante para mostrar otros contenidos, por ejemplo Youtube.
Fluent Design
Propone optimizar la jerarquía de los componentes utilizando espacio en blanco, también menciona diferentes técnicas para que los diseños sean responsivos, y ofrece diversos break-points para estos. Los diseños se hacen mediante diferentes tipos de cuadrículas (grids) para que sea más fácil definir la organización de las páginas. Separa las disposiciones en responsives que alteran su tamaño según la disponibilidad de la pantalla donde se muestran; y adaptativo donde la estrucura cambia según el tamaño de la pantalla. Es decir, en un diseño responsive el contenido podría estar organizado en una sola columna que crece según el tamaño de la pantalla, mientras que uno adaptativo podría dividirse en más o menos columnas según la cantidad de espacio que tenga disponible.
Tipografía
Human Interface Guidelines:
Recomienda evitar las fuentes con poco peso, usar la regular con moderación, y en general preferir las fuentes medias, con seminegrita, o con negrita. No todo el texto es igual de importante, por eso el texto principal debe variar de tamaño según las preferencias del usuario, mientras que el texto no primordial puede manterse pequeño para evitar saturar la pantalla. Apple utiliza las familias tipográficas San Francisco y New York, sin embargo, menciona que en caso de querer utilizar alguna familia personalizada, debe garantizarse que estas sean compatibles con los tamaños dinámicos.
Material Design
Asigna 5 roles para el texto, display, headline, title, body, labels. Las propiedades de estos textos se controlan mediante tokens de diseño para faciltiar la personalización. Apuesta por Roboto Flex, Roboto Serif y Noto. Las escalas de la fuente comienzan desde 14 px y se calculan multiplicando el valor previo * 1,125 aproximando a partir de x,5 (en este caso 14*1,125 = 15,75 = 16). Recomienda utililizar valores monoespaciados, es decir, que los elementos tengan una cantidad fija de caracteres en espacios donde estos normalmente cambiarían. Por ejemplo un reloj donde la hora puede ser 8:00 (tres carácteres) o 20:00 (cuatro caracteres) se recomienda que todas sigan el mismo formato, así, 08:00 y 20:00 se mostrarán de la misma manera al ocupar el mismo espacio. Los íconos deben tener el mismo tamaño y peso que el texto que los rodea, sin embargo, es recomendable que su línea base esté 11,5% por debajo de la del texto que lo acompaña. Los enlaces deben estar subrayados y utilizar el color primario o terciario.
Fluent Design
Apuesta por Segoe, separando las fuentes en display, títulos grandes, títulos, subtítulos, cuerpo, texto 1(caption) y texto 2 (caption); muchos de estos tienen variaciones para destacarlos más o menos según las necesidades del diseño. Evita hacer que hayan frases escritas completamente en mayúsculas, en cambio recomienda solo utilizarlas cuando sea gramáticalmente adecuado (inicios de texto y nombres propios). El texto medio debería tener un contraste mínimo de 4,5:1 y el texto más grande uno de 3:1.
Conclusión
Estos design systems se complementan y abordan los apartados de formas muy similares. Sin embargo, en algunas propuestas existen conflictos como el tamaño mínimo de los componentes interactuables que propone Apple contra los que proponen Google y Microsoft.
Personalmente la guía de Apple se convirtió en la favorita, pues aborda muchos más temas y de forma más práctica. La propuesta de Google resulta más fácil de entender pues es bastante más interactiva apoyándose de muchas imágenes y diagramas para ejemplificar; y el enfoque de Microsoft es mucho más corto en todos los apartados, priorizando únicamente la información más vital.
Enlaces de interés:
Human Interface Guidelines: https://developer.apple.com/design/human-interface-guidelines/
Material Design: https://m3.material.io/
Fluent Design: https://fluent2.microsoft.design/