¿Que es el Mobile First?
El enfoque de “móvil primero” o Mobile first es un principio de mejora progresiva. Es la ideología de que el diseño para móviles, como el más difícil, debe hacerse primero. Una vez que las preguntas sobre el diseño de móviles sean respondidas, el diseño para otros dispositivos será más fácil. Lo que se reduce a que, el más pequeño de los diseños tendrá sólo las características esenciales, por lo que de inmediato se habrá diseñado el corazón de su
UX o experiencia de usuario.
El enfoque opuesto es partir del diseño de desktop. Esto incorpora todas las complejidades desde el principio, y luego las elimina más tarde para los dispositivos más pequeños. El problema con esta degradación gradual es que cuando se construye el diseño con todo incluido desde el principio, el núcleo y los elementos suplementarios se fusionan y se hacen más difíciles de distinguir y separar.
¿Por qué el principio de “Mobile First” es tan importante en el diseño de productos digitales?
Como he mencionado anteriormente, hay razones tangibles para creer que el principio de “primero los móviles” es importante en el diseño de productos. Es decir, la explosión del uso de los móviles.
1. El uso de Internet móvil ha superó el uso del desktop en 2016.
2. La gente pasa cada vez más y más tiempo en internet desde el móvil.
3. A principios de 2012, las ventas de smartphones superaron a las de ordenadores.
La explosión de los móviles insta a los diseñadores a prestar atención extra al móvil y a seguir la regla de “el móvil primero” en el diseño de productos.
El proceso de diseño de Mobile First
Describiremos un proceso que nos ayuda en nuestros diseños.
Como de costumbre, el wireframing es un paso inicial recomendado para estructurar más eficientemente tu diseño. Cuando se realizan prototipos, utilizamos el menú de punto de ruptura o breakpoint que agiliza el proceso de pasar a diferentes tamaños de pantalla, empezando por el más pequeño.
Nuestro procedimiento sigue estos pasos:
1. Inventario de contenidos
Es una hoja de cálculo o un documento equivalente que contiene todos los elementos que quieres incluir.
2. Jerarquía visual
Priorizar los elementos en el inventario de contenidos y determinar cómo mostrar los elementos más importantes de forma prominente.
3. Diseñar con los puntos de ruptura más pequeños y luego escalar
Construir primero la estructura móvil, y luego usarla como modelo para puntos de ruptura más grandes. Amplía la pantalla hasta que haya demasiado espacio en blanco
4. Ampliar los objetivos táctiles
Los dedos son mucho más anchos que los cursores de ratón que tienen precisión de píxeles, y por lo tanto necesitan elementos más grandes en los que clickar. En el momento de escribir este artículo, Apple recomienda 44 píxeles cuadrados para los objetivos táctiles. Dale a los hipervínculos mucho espacio, y agranda ligeramente los botones, asegurandote de que haya suficiente espacio alrededor de todos los elementos interactivos”.
5. No cuentes con los “hovers”
Casi no hace falta decirlo, pero los diseñadores a menudo confían en los efectos “hover” en sus trabajos interactivos. Si estás pensando en un móvil, no lo hagas. Todavía no hay un efecto similar para las yemas de los dedos.
6. Los usuarios de móviles están acostumbrados al movimiento y a un mínimo de control en su experiencia.
Piensa en la navegación fuera de la pantalla, en los widgets expandibles, en las llamadas AJAX o en otros elementos de la pantalla con los que los usuarios pueden interactuar sin necesidad de actualizar la página.
7. Evita los gráficos grandes
Las fotos de paisajes y los gráficos complejos no se muestran bien cuando la pantalla tiene sólo unos pocos centímetros de ancho. Ayuda a los usuarios móviles con imágenes que se puedan leer en las pantallas de los ordenadores portátiles.
8. Pruébalo en un dispositivo real
Nada es mejor que descubrir por tí mismo el nivel de usabilidad de una web. Aléjate de tu ordenador de escritorio o portátil y prueba tu producto en un teléfono o tableta real. ¿Es el fácil de navegar? ¿Se carga de manera óptima? ¿Son el texto y los gráficos fáciles de leer?
Hasta aquí nuestra introducción al Mobile First. Si tienes más dudas o quieres
desarrollar una web que se visualice perfectamente en dispositivos móviles te podemos ayudar.
