Mobile First

El enfoque de Mobile First es exactamente como suena: diseñar para las pantallas de móvil y luego plasmar la versión de desktop. Es una de las mejores estrategias para crear un diseño responsive o adaptative.
mobile first

¿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.

Comparte este concepto digital

Share on facebook
Share on linkedin
Share on twitter
Share on email
Share on whatsapp

Otros conceptos digitales

¿Qué debo hacer ahora?

Si tienes más dudas y quieres saber cómo trabajamos completa el formulario de contacto y uno de nuestros consultores se pondrá en contacto contigo para asesorarte.

Para seguirte informando sobre este tema y muchos más puedes consultar otros artículos en nuestro blog de actualidad donde encontrarás referencias sobre este tema y muchos más.

Si te ha gustado este artículo lo puedes compartir en LinkedIn, Facebook o Twitter, seguro que tienes conocidos que les gustará tanto como a ti.

Curso gratuito de términos digitales

Apúntate y recibe un nuevo concepto digital cada semana.

¿Quieres impulsar tu negocio?

Hecha un vistazo a nuestros servicios digitales

small_c_popup.png

¿En qué te podemos ayudar?

Rellena el formulario o llámanos al (+34) 622 035 910.

Uno de nuestros amables consultores te guiará para que puedas conseguir tus objetivos de negocio.

small_c_popup.png

Ebook los básicos del CRO

Descargate gratis nuestra guía simple para aprender a optimizar la tasa de conversión con CRO.

Guia-simple-cro-cronuts-digital