Recomendaciones de diseño en gub.uy para dispositivos móviles
Guías
La última actualización del producto gub.uy promueve el diseño Mobile First, una nueva manera de pensar el diseño centrado en quienes usan los sitios y una oportunidad de optimizar la comunicación a través del lenguaje visual.
Para perfeccionar el diseño de la home y subhomes de cada organismo y garantizar una buena experiencia de las personas en los sitios, compartimos una serie de recomendaciones de diseño en gub.uy para dispositivos móviles.
Repensar la jerarquía visual
Trabajar en la versión móvil supone repensar el posicionamiento de los elementos de nuestra subhome. Ya no es relevante la ubicación de un contenedor a la izquierda o a la derecha, dado que todo el diseño se centrará en una sola columna. Con Mobile First debemos pensar nuestro diseño con relación al posicionamiento superior o inferior.
Cuando navegamos en una home o subhome debemos considerar que los accesos y botones de interacción más importantes deberán posicionarse arriba, para que la persona usuaria tenga acceso a lo más relevante sin necesidad de navegar por la página.
Adecuar dimensiones y tamaños de las imágenes
Uno de los objetivos de Mobile First es hacer nuestras páginas web más accesibles y, para ello, es vital contar con imágenes livianas que se carguen más rápidamente. Debemos tener presente que desde los dispositivos móviles puede haber limitación de datos, las imágenes que no cargan pueden afectar negativamente la experiencia de quien navega.
Además del tamaño de las imágenes, debemos considerar la adecuación de las dimensiones. En las resoluciones de pantalla de los móviles la orientación es vertical y todo es más pequeño, por ello nuestros íconos e imágenes deben ser seleccionados pensando primero en esa visualización. Lo que vemos correctamente en la versión escritorio, no siempre queda igual de bien en la móvil.
Coherencia con el uso de las imágenes
En su versión Mobile First, gub.uy ofrece la posibilidad de utilizar distintas imágenes para la versión móvil y la versión escritorio en el contenedor Hero. Si usamos diferentes imágenes, estas tienen que ser coherentes entre sí.
En comunicación visual es clave que las imágenes y los textos trabajen como una única pieza, para que el mensaje pueda ser comprendido correctamente. La coherencia no solo debe existir en cada contenido y contenedor, sino en todo el diseño.
Además, Mobile First permite en el Destacado 2 posicionar la imagen y la adecua a la longitud del texto. El peso visual se verá reducido en beneficio de un diseño más minimalista. Debemos analizar este cambio para evaluar si la imagen se adapta al diseño.
Diseñar para tocar
El diseño móvil debe ser creado pensando en los dedos. Este es uno de los cambios más importantes en cuanto al diseño y se relaciona especialmente con la experiencia de los usuarios. Ya no creamos diseños para “hacer clic”, sino para “tocar”, "presionar", “deslizar” y “arrastrar”.
El estándar del producto ya está creado con las proporciones necesarias para que las personas usuarias pueden tocar los botones y acceder sin problema a cualquier home, subhome o contenido.
Debemos considerar cuestiones que tienen que ver directamente con el diseño industrial: al tocar, los dedos de la persona pueden estar cubriendo accesos que, si no tienen el espacio suficiente alrededor, pueden perderse de vista. Es vital dejar espacio alrededor de cada objetivo táctil para asegurarse de que las personas puedan verlos.
Hacer pruebas en diferentes pantallas
Si bien la mayoría de los accesos a nuestra página son a través de móviles, quienes gestionamos contenidos y subhomes de gub.uy hacemos nuestro trabajo desde el escritorio. Por ello, una de las claves para saber si nuestros diseños funcionan, es hacer pruebas en diferentes resoluciones de pantalla.
Un diseño que puede funcionar a la perfección en una computadora de escritorio, puede no funcionar tan bien en un dispositivo móvil. Antes de publicar cualquier home o subhome, recomendamos navegar el diseño a través del celular. Lo ideal es probar desde varios dispositivos y navegadores para ver cómo funciona en diferentes resoluciones. También pueden utilizarse las diferentes extensiones gratuitas que simulan la resolución de varios celulares, como Mobile simulator.