Diseño responsivo y tips para mejorarlo

Por casi una década los diseñadores se han concentrado en hacer que los sitios web tengan un diseño más responsivo, pero muchos han fallado en tomar en cuenta el rápido crecimiento de las pantallas de móviles al tratar de mejorarlo.

De 2007 a 2011 el tamaño sólo cambió media pulgada (1.27 centímetros), pero a finales de 2011 comenzó a verse una tendencia diferente. En los pasados 3 años el tamaño promedio de los smartphones creció dramáticamente, pasando de 3.5 pulgadas a 5 pulgadas en diagonal (8.89 centímetros a 12.7 centímetros).

El smartphone más grande es el Asus FonePad 8, el cual tiene un tamaño de 8 pulgadas (20 centímetros). Sin embargo, el mayor tamaño es también una desventaja, pues hay más espacio para desplegar contenido pero también hay espacios ‘muertos’.

La pantalla sí importa

Cuando Apple lanzó su iPhone original y modelos subsecuentes, hasta el iPhone 5, sus diseñadores deliberadamente eligieron el tamaño de la pantalla por una razón: era cómodo. En esos modelos el pulgar del usuario promedio puede llegar de la esquina inferior de un teléfono hasta la esquina más lejana con el dispositivo en la palma de su mano.  Es decir, un usuario puede, con los modelos anteriores, realizar todas las acciones con una sola mano sin esforzarse o usar la otra mano.

Conforme los fabricantes de smartphones incrementan el tamaño de las pantallas, los consumidores no pueden tocar de forma cómoda más de 10 por ciento de la pantalla con una mano, y esto es un problema para los diseñadores y desarrolladores.

La zona ‘muerta’

Empresas como Facebook y Microsoft ya comenzaron a identificar el problema del espacio muerto de la pantalla en sus apps. Para Facebook, las funciones más comúnmente usadas como NewsFeed, Notificaciones, Mensajes e incluso la navegación principal ahora aparecen en la parte baja de la pantalla en el iPhone y Android.

Microsoft, con su Windows Phone, hizo algo que otras plataformas no están haciendo aún: movió los controles del navegador a la parte baja de la pantalla en lugar de dejarlos arriba de un sitio web.

Esto lleva a la conclusión de que un buen diseño responsivo se adapta al dispositivo desde el que se está visitando el sitio web, e idealmente muestra sólo el contenido y recursos que son necesarios para una experiencia óptima en ese dispositivo. Por ello, hay que considerar cómo se diseña la navegación y qué tiene sentido para los usuarios.

Tips para mejorar la experiencia del usuario en sitios responsivos

• Coloca funciones comunes en áreas fáciles de alcanzar. Es decir, hay que alejarse de la parte superior izquierda y las esquinas inferiores derechas de una pantalla. En esas áreas es mejor poner el botón para entrar al carrito o el logo del sitio para ir al Home. Además, esto evita que los usuarios salgan sin querer del proceso de compra al presionar un botón que no querían.
• No despliegues navegación y distracciones cuando alguien ya está comprando. Hay que construir el carrito de compras separadamente del sitio web si es necesario. También hay que quitar todos los distractores, como anuncios, otros productos y ligas a Social Media.
• Prueba, optimiza, prueba, optimiza y repite.

En conclusión, las pantallas grandes están cambiando el web responsivo, pero es posible encarar este reto.

Hay que enfocarse en priorizar el contenido para que sea posible desplegarlo y navegar eficientemente en los teléfonos. Un sitio web responsivo pobremente diseñado puede no sólo dañar la experiencia del usuario, sino los rankings en los buscadores, especialmente pensando en la reciente actualización de Google, que pondrá a sitios amigables al usuario más alto en los resultados de búsquedas que se realicen desde dispositivos móviles.