Una de las preocupaciones más frecuentes en el diseño de aplicaciones y sitios web es cómo verá el usuario final nuestro producto. Eso es obvio. Lo que no es tan obvio es el motivo. Cada fabricante por una variedad de razones ha desarrollado en los últimos 12 años o más diferentes factores de forma, ya sea para desktops, laptops, smartphones, tablets, y modelos hibridos.
Esta complejidad creció más en el momento en que, dependiendo del tamaño del dispositivo y qué tanto pesaba la imagen en la propuesta de valor (en un rango desde los BlackBerry clásicos hasta el iPad con retina display), las resoluciones de pantalla variaban más y más:
- En el caso de Apple, que tiene líneas de producto muy compactas, podíamos hablar de una resolución para MacBooks, otra para iPhones/iPods y una para iPads. Hasta que se alargó el iPhone (5 y 6) y el iPad se encogió (Mini), las proporciones fueron casi siempre parejas versión a versión.
- En el caso de Microsoft, podríamos dejar de lado la línea Windows Phone, porque su adopción nunca fue lo más relevante. Pero sí importa la estandarización de resoluciones a partir de Windows 8. La actualización exigía un mínimo de 1366 por 768 píxeles para aprovechar la función de acople de ventanas, lo que sumado a la estandarización del video HD (1920 por 1080) sirvió para definir proporciones y límites más definidos en el mundo de laptops y desktops.
- El mayor problema de esta pasada década fueron los fabricantes de dispositivos Android. En 2016 se registraban hasta 12 resoluciones diferentes de pantalla solo en teléfonos. Esto, junto a la distribución irregular de actualizaciones llevó al fenomeno llamado fragmentación de Android.
Los lineamientos de diseño para cada sistema operativo (Human Interface Guidelines de Apple, Universal Windows Platform de Microsoft y Material Design de Google) han ayudado mucho a mantener experiencias de uso coherentes dentro de cada sistema. Las semejanzas entre los tres no son accidente: los estilos flat con situaciones de uso de gráficos y texturas mejor definidas, metáforas basadas en contenedores (tarjetas o mosaicos) y fuentes esbeltas facilitan mucho el salto entre una forma de pantalla y otra.
Iphone X y otras pantallas borde-a-borde
Al momento de escribir esta entrada, Apple, Samsung y Xiaomi han presentado dispositivos con pantallas que cubren por completo (o casi) una de las caras de sus dispositivos. De ellos, solo Apple se atrevió por el momento a cubrir toda la superficie, sacrificando un pequeño espacio en la parte superior para la cámara frontal y otros sensores:
El problema que esto supone es: ¿en qué momentos tenemos que considerar diseñar medidas de seguridad para que nuestro diseño no se vea invadido por esta “pestaña” de la cámara? Apple lo ha previsto y tiene publicados algunos lineamientos. WebKit, el motor de navegación detrás de Chrome y Safari, también ha publicado varios consejos y medidas.
Pero hoy en día la participación de mercado global de iOS (Apple) no pasa del 15%. Consideremos el carácter restrictivo del precio del iPhone X, y encontraremos que es demasiado pronto para implementar características en nuestro código que no beneficiarán al 95% de nuestros usuarios.
Qué hacer y no hacer
- Barra de estado y barra del navegador: La mejor noticia de todas es que el espacio superior del iPhone X ya viene ocupado por la barra de estado (batería, señal, hora, notificaciones). Como amortiguación adicional, la mayor parte del tiempo estará la barra de Safari presente, alejándonos de esa zona de peligro.
- Márgenes seguros, sobre todo en horizontal: Una característica común de estas tres pantallas son las esquinas redondeadas. Un logo o botón de menú situado al extremo izquierdo o derecho de la pantalla podría quedar escondido. La única situación “peligrosa” aquí está al girar la pantalla en horizontal. Como explica Stephen Radford, basta con mantener márgenes y darle un color al fondo.
- Abandonar el ajuste exacto, sobre todo en vertical: Una de las situaciones más incómodas de diseño web que he tenido fue un cliente que insistía en que las secciones de su sitio ocuparan siempre toda la pantalla, teniendo como base su computadora de trabajo. Sin embargo, lo que se ve bien en una laptop (horizontal a 15 pulgadas y 1376 por 768 píxeles) no va a funcionar igual en un teléfono (vertical a 5 pulgadas y 720 por 1280 píxeles). Dejemos que el contenido fluya en la dirección más natural (hacia abajo) y no sacrifiquemos su lectura por mantener un layout de Marvel o Sketch.
- Pensar cada vez más en viewport y ems: Las medidas relativas me parecen últimamente más interesantes para trabajar ajustes entre diferentes pantallas. Las referidas a la pantalla o viewport (vh, vw, vmin, vmax) permiten plantearte la distribución de elementos usando porcentajes de la misma. Las medidas referidas a caracteres (em, rem, ex, ch) ayudan a trabajar sobre múltiplos de un tamaño base, con lo que las relaciones entre títulos y cuerpo, márgenes, interlineados, son más armónicas y fáciles de ajustar que en medidas absolutas (píxeles o puntos).
Conclusión
¿Necesitamos apurarnos a trabajar adaptaciones específicas para un dispositivo que ha tenido la audacia de salirse de la norma? Lo más probable es que no. Pero sí nos conviene tener un lenguaje visual a prueba de todo, que funcione más allá de las aprobaciones del cliente y las condiciones actuales de la tecnología. Cada vez más, debemos pensar en el diseño digital lejos de las reglas del diseño gráfico tradicional.
El mockup en Photoshop no es la mejor herramienta para planificar nuestros proyectos, o por lo menos tiene que plantearse en dos o tres condiciones de uso (teléfono, tablet y monitor) para demostrar que la redistribución del contenido siga reglas lógicas. Es decir, programables.
Also published on Medium.