Cómo diseñar para dispositivos móviles

Desde niños que apenas saben hablar hasta personas de la tercera edad, los dispositivos móviles tienen audiencia en cualquier parte. No importa la edad, no importa el sexo o la zona geográfica, simplemente tienen que ser fáciles de entender y usar: deben seguir los parámetros de usabilidad y explotar al máximo la experiencia de usuario.

Pero la gran cantidad de tamaños de pantalla, los diferentes tipos de dispositivos y sistemas operativos hacen complicado hacer un buen diseño para dispositivos móviles.

Aunque se ha extendido rápidamente el mantra de ‘mobile-first’, de diseñar y desarrollar primero en móvil, quizás no sea esto lo óptimo tampoco. Los datos nos cuentan que, aunque el móvil va ganando terreno, la mayoría de visitas a negocios se hacen desde el ‘desktop’. Por eso lo esencial es tener una versión web optimizada y a partir de ahí trabajar en una versión accesible desde el móvil.

Pero antes de volvernos locos y agobiarnos empecemos por lo fácil, lo básico.

1. Diseño ‘responsive’ como punto de partida

En muchos casos partimos de que ya tenemos una web y unos contenidos. La opción fácil es convertir ese contenido en ‘responsive’. En este caso el diseño se basa simplemente en ajustar el contenido de la web a los tamaños de ventana más pequeños para una correcta visualización.
Un excelente ejemplo de web ‘responsive’ podría ser la revista digital Smashing Magazine. Aquí tienes algunas imagen para que veas cómo cambia el diseño web:

Debemos tener en cuenta sobre todo los tres tipos base de pantalla ‘responsive’:
- Grandes pantallas, son aquellas dónde nuestra web cabe y sobra incluso espacio para visualizarla.
- Pequeñas o antiguas pantallas, En estos casos, nos referimos a cuándo nuestra web no cabe para el ancho definido y aparece la una barra inferior para terminar de ver el contenido.
- Pantallas móviles, especialmente para smartphones, donde el espacio es tan pequeño y la información es más difícil de leer correctamente en comparación con el diseño global
Si conseguimos que nuestra web se visible en estos tres tamaños base tendremos mucho camino ganado con aquellos usuarios que acceden desde dispositivos móviles.

2. Centrarnos en un diseño que nos ayude a conducir al cliente

En cualquier web vamos a tener unos objetivos que cumplir. Ya sea conseguir firmas, retener al usuario para que lea nuestro contenido, que nos de su contacto, o cualquier otro objetivo de marketing, el diseño siempre juega un papel importante. Por eso si queremos conseguirlos, debemos diseñar teniendo en cuenta estas directrices:
- Captar la atención del usuario: ya sea en web o en móvil lo primero que tienes que hacer es enganchar al usuario llamando su atención. En móviles tienes poco espacio para lograrlo y recuerda que también tendrás que incluir tu mensaje.

- Llamadas a la acción: En una web o aplicación móvil (otra opción para llevar tu web o negocio al móvil) cada pantalla de tu web debe conducir a otra, no debe ser un camino cerrado. Si quieres que el usuario se registre, díselo, como hacen en la página de Evernote.

- Coherencia del mensaje: No tiene ningún sentido que en cada página de tu web des un mensaje distinto. Unifica y simplifica el mensaje que transmite tu diseño. Para conseguirlo tienes que conocer a tu audiencia, sus gustos, su edad, sexo, etc. En móviles esto se vuelve más importante que nunca, con poco espacio la simplicidad magnifica el mensaje. Y éste, cuanto más directo, mejor. No hay nada más incómodo que ponerse a leer 10 líneas de texto en Smartphone para saber qué hacen en ese negocio digital. Sé directo.

- Experiencia del usuario: No consiste en llenar toda tu página de llamadas a la acción, así solo conseguirás asustar a tu posible cliente. Ante todo tiene que primar una buena experiencia de usuario si queremos retener esa visita y convencerles de que se queden. En pantallas pequeñas es todavía más importante que el diseño haga la navegación fluida, ya que el usuario tendrá que interactuar con uno solo dedo. Además, aunque los movimientos que podemos hacer en la pantalla del móvil son bastantes— swipe, tap, scroll, press, pich/spread y drag— en la realidad nos limitamos a dos o tres que son los más comunes. Intenta ajustar la interacción de tu diseño a los más utilizados por los usuarios.

3. Diseñar para apps: Un universo distinto
Crear y diseñar una app a raíz de una web sin que se haya pasado por el ejemplo anterior puede ser ‘risky business’, o lo que es lo mismo: muy poco recomendable. No obstante existen webs que se unieron al ‘responsive’ hace siglos y que su tráfico móvil o su volumen de negocio es tan alto que el siguiente paso es el de las aplicaciones móviles.
Las reglas del juego en diseño de aplicaciones cambia un poco en relación con las páginas web. Hay otras cosas a las que también debemos prestar atención como simplificar los procesos de registro (en caso de que la app lo necesite) o el diseño del icono. Especialmente la tipografía, tanto en forma como tamaño, cobra importancia para conseguir una mejor legibilidad y comprensión.
Un ejemplo de aplicación que apuesta por una buena experiencia de usuario es el juego TwoDots, que incluso cuenta con una versión diseñada para personas daltónicas.

 
En cualquier caso, el desarrollo de una app será una decisión de mercado bien meditada. Por eso siempre tendrá que ir acompañada de una estrategia de negocio completamente distinta a la de una página web. 

Columnista:
Ana Mocholí 
Periodista especializada en nuevas tecnologías y marketing 2.0. 
www.yeeply.com 
www.anamocholi.com

Escribe habitualmente sobre aplicaciones móviles, diseño, marketing digital y también sobre desarrollo. Actualmente es la responsable de Marketing de Yeeply, marketplace de desarrollo de apps y webs, start-up afincada en Valencia (España) pero presente a nivel internacional. También escribe en su web personal.