Blog

Mobile first para mejorar la Experiencia de Usuario UX

13 Mar 2018 | Diseño UX/UI

Mobile first es un concepto que ha estado ganando cada vez más reconocimiento dentro de la comunidad online como una evolución del Responsive Web Design.

En qué consiste

Se trata de comenzar el diseño de la estructura de la web más simple y con la cantidad mínima de contenido, para avanzar progresivamente hacia un sitio versátil con mayores funcionalidades. Empezar a diseñar por la pantalla más pequeña como la de un móvil y luego ir realizando su adaptación gradualmente hacia las más grandes, como tablets y escritorio. Ir de menos a más.

Todo esto, debido al cambio en la forma de navegar por internet de los usuarios, cada vez más “movilizados”, de esta forma, conseguirás centrarte en los contenidos más importantes e imprescindible de acuerdo a los objetivos marcados. Se trata de que el diseño y el contenido sea funcional.

2 enfoques opuestos
A la hora de abordar el diseño de un sitio web tenemos dos posibles enfoques o metodologías, aunque son opuestas ambas ayudan a hacer que la web sea compatible con cualquier navegador y dispositivo.

Graceful Degradation vs Progressive Enhancement

Graceful Degradation (degradación gradual)

Comenzar el diseño de la web desde un extremo avanzado como el escritorio y crear una versión con características completas al principio, después se hace que el diseño sea compatible y adaptado con los dispositivos móviles cortando algunas funciones o contenidos.

Con este enfoque los diseñadores se centran en utilizar el máximo de recursos a su alcance, efectos de desplazamiento, efectos de cursor, gráficos complejos, imágenes de gran tamaño… para crear una completa versión de escritorio, pero al reducir a movíl y tener que abandonar muchas ideas parecerá que la versión móvil está incompleta.

Los elementos básicos y suplementarios se fusionan y se vuelven más difíciles de distinguir y separar de lo realmente importante.

Progressive Enhancement (mejora progresiva)

Al contrario que en el enfoque anterior, cuando diseñamos una web, primero construimos una versión para un navegador relativamente más bajo como en un teléfono móvil, esta versión incluye las funciones y características más básicas y esenciales.Después de eso, tendemos a la versión avanzada para una tablet y escritorio, que se crea agregando interacciones, efectos más complicados, etc.

De esta forma los diseñadores se centran en destacar los puntos fuertes y claves de la web (el corazón) teniendo en cuenta las restricciones que tienen como el tamaño de la pantalla, ancho de banda, imposibilidad de usar ciertos efectos…, de esta forma cuando la plataforma se expanda a escritorio podrán fortalecer esos puntos clave con las posibilidades que da el diseño orientado a pantallas de mayor tamaño.

El contenido

Mobile-first=Content-first.

Diseñar dentro de unas restricciones te obliga a priorizar el contenido implacablemente. El enfoque mobile-first conduce a un diseño más centrado en el contenido y, por lo tanto, centrado en el usuario, el “contenido es el rey”. El contenido junto con el usuario son la base de de la experiencia de usuario (UX).

Agregamos información a cada diseño progresivamente más grande en lugar de cortar a medida que diseñamos pensando en pantallas más pequeñas. Pensar en dispositivos móviles no significa eliminar información sino clasificar la información en contenido primario, secundario y terciario.

Mapa web

A la hora de montar la estructura de la web tenemos que tener bien definido el mapa web, qué es un elemento fundamental a la hora de definir la estrategia de contenidos.

  • Representación de la arquitectura de la información (IA)
  • Conjunto de contenidos que tenemos en la web.
  • Definir qué tipo de contenido.
  • Definir el ciclo de vida de cada contenido.
  • Categorización y prioridad.
  • Objetivos a conseguir con cada contenido.

Estrategia de contenidos

Gestión y planificación de los contenidos de la web siguiendo unas pautas.

  • Audiencia a la que me dirijo.
  • Mensaje que se quiere transmitir.
  • Tono del mensaje.
  • Objetivo que cumple ese contenido.
  • Fuentes de contenido.
  • Navegación clara.

Asier López

.ninja{
display: none;
visibility: hidden; }

Asier López

Web & Creative Designer

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *