Diseñar para varias plataformas

Tendencias de navegación web

La “gran guerra” para el desarrollador web ha sido hasta ahora conseguir la compatibilidad entre toda la enorme variedad y versiones de navegadores web disponibles en el mercado.

Hoy en día, y como tendencia creciente, se añaden otras complicaciones. La tecnología avanza con mucha rapidez y vamos hacia un futuro absolutamente móvil en todos los sentidos, de modo que el desarrollador web no solo tendrá que batallar con los diferentes navegadores sino también con los diferentes dispositivos que se utilizan para navegar por Internet.

Font: BradFrostWeb.com
Font: BradFrostWeb.com

La variedad de dispositivos, marcas, versiones, funcionalidades, tamaños y prestaciones evoluciona a una velocidad vertiginosa, hecho que hace del todo imposible plantear una versión web para cada caso y a la vez nos imposibilita plantear las aplicaciones web estándares y que sean usables y visibles en todos los dispositivos, sin excepción.

Podéis ver un vídeo resumen de estadísticas de uso de dispositivos móviles:

https://youtu.be/IZA9qjt2A48

Experiencia de usuario

A continuación citamos algunos criterios para diseñar una buena experiencia de usuario entre diferentes plataformas, de acuerdo con Jakob Nielsen:

  • Continuidad visual: las interfaces de usuario (UI) pueden variar para adaptarse a las guías de la plataforma, pero el diseño tiene que parecerse lo suficiente para que el usuario lo reconozca al instante y no se sienta perdido.
  • Continuidad en las funciones: por muy pequeño que sea el dispositivo para el que diseñemos, el usuario ha de tener la sensación de que las funciones principales de nuestra aplicación están igual de disponibles que en sus “hermanos mayores”.
  • Continuidad en los contenidos: deberemos usar el mismo tono y lenguaje en todas las plataformas, de modo que el usuario “nos reconozca” en todas ellas.
  • Continuidad en los datos: la información proporcionada por el usuario ha de estar disponible y actualizada al instante en todas las plataformas y dispositivos, sin necesidad de que este tenga que hacer nada para que la información se sincronice.

Cómo aprovechar mejor el espacio

Cuando diseñamos interfaces interactivas, el espacio limitado que nos ofrece un dispositivo móvil supone todo un desafío, sobre todo cuando trabajamos un mismo diseño para varias plataformas. Una de las maneras de resolver esta falta de espacio es diseñando “en profundidad”, es decir, superponiendo diferentes capas de interacción que podemos mostrar u ocultar según necesitemos. De esta manera, a los conocidos ejes x e y añadimos un tercer eje, z, que aporta profundidad a nuestro diseño. El estilo Material Design del sistema operativo Android es un buen ejemplo.
Para utilizar este recurso correctamente hemos de tener en cuenta dos elementos:

  • Capas: son el elemento básico cuando diseñamos “en profundidad”. Podemos usar capas para mostrar el menú de navegación, botones o incluso cuando recurrimos a efectos como el parallax (ver parallax scroll).
  • Transiciones: deberemos animar las capas para que el usuario entienda la jerarquía entre las diferentes capas utilizadas. Las transiciones más habituales son el deslizamiento (por ejemplo, para mostrar un menú oculto en una capa inferior) y el zoom, aunque podemos utilizar otras.

Fuente: The Z-Axis: Designing for the Future