Mobile-first, que es y porqué es clave en tu negocio

El 51% de la población mundial accede a Internet solo desde sus smartphones. Para 2025, se espera que ese número suba al 72.5%. Entonces, si tu producto/servicio no está diseñado para dispositivos móviles, tú y tus usuarios tenéis un problema.

¿Qué es el diseño Mobile-first?
El diseño Mobile-first es una filosofía de diseño que tiene como objetivo crear mejores experiencias para los usuarios iniciando el proceso de diseño desde la pantalla más pequeña: el móvil. Diseñar y crear prototipos de tus sitios web para dispositivos móviles te ayuda a garantizar que la experiencia de tus usuarios sea perfecta.

Por ejemplo, si un diseñador Mobile-first se dispone a hacer un prototipo o esbozar el diseño de un sitio web, no empezará a dibujar un diseño de escritorio, en cambio, imaginará cómo se vería en un dispositivo móvil y luego pasará a pantallas cada vez más grandes.

El razonamiento detrás de esto es simple: el diseño móvil es más limitado. Al final, estás diseñando para una pantalla más pequeña y solo podrás incluir x elementos en ella. Eso significa que debes elegir sólo lo más importante, lo que más necesitan tus usuarios, mientras que descartarás todo lo demás. Como siempre es cuestión de priorizar.

¿Por qué es importante el diseño Mobile-first?
Es una cuestión de números: se espera que habrá más de 3.5 mil millones de usuarios móviles en 2020 en todo el planeta. Eso significa que la mayoría de las personas estarán usando sus teléfonos para encontrar el contenido que necesitan.

Google lo sabe.
Desde el 2018 Google tiene en cuenta las versiones de una página web para dispositivos móviles a la hora de indexar, rastrear y determinar las clasificaciones con el fin de mostrar los mejores resultados posibles y más optimizados.

Ahora las arañas o bots de Google que más pasarán por tu web serán los de Smartphone. (Smartphone GoogleBots). Esto no significa que solo exista un índice para móviles. Google seguirá contando con el índice de escritorio, simplemente se centrará de forma prioritaria en la versión móvil, con lo que optimizar esta versión se convierte en obligatorio si se desea mantener un buen posicionamiento web.

3 consejos para un buen diseño mobile-first

1: Mobile-first = Content-first
Cuando se trata del diseño Mobile-first, tienes que recordar una cosa: el contenido es clave. Debes proporcionar a tus usuarios todo el contenido que están buscando y nada más. Cualquier otra cosa puede saturar y distraer la experiencia de tus usuarios.

2: Facilita la navegación
Condensa los elementos secundarios en botones de navegación de fácil acceso. Un ejemplo es usar un menú hamburguesa.

Píldora histórica
El menú hamburguesa fue creado por el diseñador de interacción Norm Cox para Xerox Star en 1981 como una forma fácil de comunicar a los usuarios que el botón contenía una lista de elementos.

Sin embargo, después de Xerox Star, el menú hamburguesa permaneció en el olvido. Fue solo cuando los diseñadores de UX tuvieron que encontrar una manera de ajustar una multitud de botones en las pequeñas pantallas de nuestros teléfonos, que el menú comenzó a reaparecer en todas partes.

Los menús hamburguesas son formas reconocibles para que tus usuarios obtengan acceso a elementos secundarios.

Ventajas del menú hamburguesa:

1: Reconocible
Es omnipresente: se encuentra en todas partes, desde apps, sitios web, hasta software y videojuegos.

2: Limpio
¿Hay algo peor que una página web desordenada?
Este menú es la forma más limpia de añadir contenido sin saturar la pantalla.

3: Acceso secundario
El menú hamburguesa puede ser un excelente elementos para situar los links que no son tan importantes para el objetivo principal de tu negocio.

Desventaja: según un estudio realizado por Nielsen / Norman Group, los botones de navegación ocultos como los menús hamburguesa disminuyen la capacidad de detección de contenido en un 21%. No solo eso, sino que también aumenta el tiempo que lleva usar la navegación en un promedio de dos segundos.

En conclusión, es recomendable usar la navegación combinada (combo navigation).

“La navegación combinada permite al usuario ver las opciones que más necesita y hace que el resto sea accesible en un menú hamburguesa o algo similar. “ (cit. Joe Toscano)

3: KISS (Keep it simple, stupid)
El buen diseño móvil es simple.

Nunca querrás distraer a tus usuarios con elementos extraños como anuncios, ventanas emergentes y otro contenido que no quieren ver, sobretodo en dispositivos móviles. Con un limitado espacio visual es fundamental limitar el contenido. ¡Prioriza y olvídate del resto!

Píldora de sabiduría
“El móvil se está convirtiendo no solo en el nuevo centro digital, sino también en el puente hacia el mundo físico. Es por eso que los dispositivos móviles no afectarán solo tus operaciones digitales: transformarán todo tu negocio “. Thomas Husson (Forrester Research)

En definitiva, ¡movilízate!

Artículo inspirado en What does mobile-first design mean for digital designers?Inside design by Invision