Una solución adaptable y orientada al diseño esencial de sitios web ha llegado para quedarse. Así como los negocios online se están moviendo hacia un universo cada vez más móvil, si vos no tenés desarrollado tu website desde una modalidad Mobile First, estarás dejando afuera un gran porcentaje de usuarios y potenciales clientes que usan cada vez menos el entorno escritorio y más su teléfono al momento de decidir una compra.
Hasta hace no mucho tiempo se creía que los que usaban la tecnología móvil eran solo los jóvenes disruptivos, dando por seguro que la población adulta accedía a la web desde la computadora, o peor aún, que establecía contacto con la empresa solo telefónicamente. Sin embargo, es asombroso analizar los números respecto al crecimiento exponencial que el móvil ha tenido en todo el mundo.
En este marco, ha cobrado vuelo el concepto de Mobile First, acuñado originalmente en 2009 por expertos diseñadores como Luke Wroblewski, y desde entonces ha estado ganando cada vez más reconocimiento dentro de la comunidad online como una evolución del diseño responsivo.
Si tu firma todavía no tiene desarrollado un sitio web o sí pero quiere estar alineada con las nuevas tendencias visuales y los patrones de consumo, es hora de enfocar esfuerzos, optimizar experiencias y sacar provecho de esta usabilidad móvil. En los siguientes párrafos te mostramos los beneficios de este enfoque y algunos consejos para que lo lleves adelante siguiendo las buenas prácticas.
Mobile First: La omnipresencia de los dispositivos móviles
Basta analizar el contexto y el espacio para entender las razones por las que algo ocurre. Así como los ordenadores de escritorio se colocan sobre una mesa (ya sea en el trabajo o en la casa) estando el usuario sentado en una silla, con una conexión eléctrica, acceso a internet y en un espacio de relativa privacidad, la principal ventaja diferencial de los móviles o tabletas es que pueden ser usados en cualquier lado, incluso estando en movimiento e interactuando con una gran cantidad de gente.
Por poner solo algunos ejemplos, basta observar a una persona en la fila del supermercado sujetando con una mano el changuito lleno de alimentos y con la otra viendo las fotos del bar al que irá esa noche con sus amigos; caminar por la calle intentando no chocar con esa mujer que está realizando una reserva en el spa del fin de semana, o viajar parado en el colectivo e ir revisando los mails del trabajo y que un call to action lleve a una landing page para registrarse a un evento corporativo.
Esto demuestra el hecho de que, al llevarlo siempre con él, el smartphone amplía profundamente el lugar y el momento del día en que el consumidor puede interactuar con una marca. Sin duda, este contexto tiene un gran impacto en el diseño web, debiendo el equipo creativo desarrollar un sitio que pueda ser usado en instancias tan disímiles como dinámicas.
Luke Worblewski tenía razón describiendo simplemente a los usuarios móviles como “un ojo y un pulgar”. Un pulgar porque normalmente sujetan y manejan el móvil con una mano, usando el dedo para una única acción que es navegar; y un ojo, porque en muchas situaciones solo se presta parte de la atención a esta navegación mientras en paralelo se realizan un montón de otras acciones.
Sí. Mal que nos pese a algunos amantes del contenido de largo aliento y la comunicación visual llena de pliegues y recovecos, pensar en el usuario como “un pulgar y un ojo” obliga a los creativos a simplificar el diseño para que pueda ser entendido y fácil de usar en cualquier situación. Incluso, en páginas donde las distracciones no existan, una experiencia fácil e intuitiva siempre conseguirá que las personas se sientan relajadas y reconfortadas.
Consejos para que la web cumpla con el diseño Mobile First
Lo primero que tenés que saber es que Mobile First no significa ausencia de contenido, sino más bien… ¡todo lo contrario! Simplemente, se trata de comenzar con la estructura más simple y con la cantidad mínima de caracteres para avanzar progresivamente hacia un sitio versátil que responda a las exigencias tecnológicas.
Si en tu caso estás por desarrollar un proyecto de diseño desde cero, el consejo de Fuego Yámana es que empieces por la pantalla más pequeña y luego vayas realizando su adaptación hacia las más grandes. De esta forma, conseguirás centrarte en lo más importante e imprescindible de acuerdo a los objetivos que tengas. Y así, al diseñar la web para el resto de los dispositivos, no tendrás más dificultad que aumentar el tamaño de los elementos e incorporar otros en caso de que sean necesarios.
Ahora bien, ¿siempre es factible? Lamentablemente, no. Es cierto que sería lo ideal y lo más aconsejado; de hecho, hoy en día es vital que se piense en todos los equipos posibles a través de los cuales los usuarios pueden entrar en el sitio web, ya que no es posible predecir con cual lo van a hacer. Además, como cada vez hay más dispositivos y tamaños de pantallas que complejizan esta adaptación, utilizar la técnica de Mobile First es la mejor opción para optimizarlos.
Sin embargo, suele ser más común que suceda lo contrario: tener una web ya desarrollada para desktop y querer adaptarla a la versión móvil. Para ello, estos 5 consejos te ayudarán a trabajar sobre la adaptabilidad, legibilidad, usabilidad y cantidad de elementos necesarios.
1. Centrate en la funcionalidad y en el contenido principal
En primer lugar, se deben presentar aquellos contenidos que son realmente importantes y vitales para el usuario y eliminar todo lo demás de la interfaz; algo que sin duda mejorará la experiencia de usuario porque encontrará solo la información relevante. Por poner un ejemplo muy práctico, la aplicación de PayPal es tremendamente minimalista y funcional, logrando que su uso sea realmente rápido y sencillo. En versión tableta, su diseño aporta algunos elementos adicionales, mientras que en desktop tiene una amplia gama de opciones. ¿La moraleja? Detectar, sintetizar, priorizar y organizar.
2. Dale fluidez al layout para un diseño multipantalla
Por más intento que se haga, nadie tiene la capacidad de adaptar un sitio web al tamaño de cada nuevo dispositivo que sale al mercado; razón por la cual, el diseño Mobile First debe ser fluido y no adaptable. ¿Cómo conseguir esta fluidez? Mediante un layout que use selectores CSS como “mini-width” en lugar de “max-width” para darle facilidad y soltura a la comunicación en cualquier tamaño de pantalla.
Ya sea que el usuario esté navegando en un iPhone con un ancho de 320px o con otro teléfono de 180px, con esta capacidad de versatilidad desde el diseño, el sitio web se verá hermoso en cada dispositivo sin necesidad de que el diseñador maneje más de 100 entornos de pantalla. Los contenidos deben ser fácilmente leíbles, proponer una ergonomía muy bien pensada y contener el mensaje central visible a primera vista, mientras que el diseño debe captar inmediatamente la atención del usuario y las funcionalidades estar limitadas.
3. Utilizá las Media Queries para cambiar la apariencia de la web
Este concepto es propio del CSS3 y extiende su punto de partida que son los Media Types, una serie de expresiones relacionadas con las características del dispositivo desde el cual se accede a la web. Las Media Queries dan como resultado verdadero o falso a las reglas CSS permitiendo cambiar totalmente la vista y distribución de los elementos de la maqueta en función del ancho del dispositivo, mostrar u ocultar etiquetas y configurar la cantidad de columnas que se mostrarán según cumplan o no las reglas, además de ajustar el alto, el ancho, la relación de aspecto, el número de colores y hasta el background.
4. Aprovechá las capacidades de la usabilidad móvil
Si has diseñado o interactuado con un diseño web basado en el entorno escritorio, seguramente hayas sufrido y maldecido a los viejos navegadores o hardware por no soportar las nuevas tecnologías y bloquear las experiencias emocionantes. Sin embargo, con los dispositivos móviles ¡existen enormes posibilidades de utilizar estos avances! Algunas de las tantas cosas que podés incluir o experimentar son:
- Información de ubicación desde un GPS.
- Interacción multi-touch y respuestas desde los gestos o la voz.
- Conexión del dispositivo desde Bluetooth para manos libres.
- Simulación de inclinación y movimiento desde un acelerómetro.
- Entrada de audio y video, micrófono y cámara para transmisión en vivo.
5. Aferrate al trabajo con mejoras progresivas
La principal razón por la que una marca tiene un sitio web es para dar a conocer una propuesta increíble a sus usuarios mediante una comunicación tan valiosa como asombrosa. En el diseño Mobile First, aplicar la técnica de mejora progresiva implica aumentar, modernizar y renovar primero el contenido, luego los estilos y esquemas de presentación, y finalmente el scripting y animación.
Este enfoque conocido como “Progressive enhancement” implica pensar todo el tiempo en un público diverso y para nada homogéneo y satisfacer a todos sus integrantes. Pero, ¡no te confundas! Abrazar esta filosofía Mobile First y empezar por la versión móvil de una página web no quiere decir confundir simplicidad con una propuesta insípida, insustancial o banal.
Plantear el diseño para diferentes entornos no es reducirlo a la mínima expresión ni agrandarlo a la máxima potencia. No te conformes simplemente con añadir columnas o contenidos, cambiar a imágenes más grandes o dejar todo centrado. Aprovechá las capacidades de los diferentes dispositivos y pantallas para ofrecer una extraordinaria experiencia de uso. Una vez tengas la parte móvil solventada, estaremos para ayudarte en el clásico frente del combate, ¡el de las computadoras!
La clave está en probar, añadir, quitar, optimiza, empatizar, eliminar lo no intuitivo, y no quedarte solo en la idea si la forma de ejecución no es la apropiada. Lo fundamental es asegurar que todos los pasos que des en tu diseño acaben siendo entendidos por los usuarios. Pensá en las experiencias sensoriales y el poder del tacto: tus consumidores deben conseguir lo que buscan por medio de sus dedos y tu marca debe procurar que los enlaces, botones, formularios y desplegables cumplan con ese prometido. ¡No olvides que la decisión es una potestad que ellos tienen en sus manos!
Melina Diaz
Últimas entradas deMelina Diaz (ver todo)
- Certificado SSL: Qué es, para qué sirve y por qué instalarlo en tu web - 2 de octubre de 2018
- Las mejores pasarelas y formas de pago online para un eCommerce omnicanal - 30 de julio de 2018
- 10 aspectos para alcanzar una fuerte identidad visual de la empresa - 25 de junio de 2018