Diseño de Web para Móviles

El tráfico de los dispositivos mobile empieza a ser un factor decisivo a la hora de replantearte el diseño de tu web. En este post no vamos a entrar en si es mejor un diseño adaptative o crear uno especial para este tipo de dispositivos, vamos a ver cuales son los factores decisivos que deciden entre el éxito y fracaso de un sitio mobile.

Los usuarios esperan que su experiencia mobile sea al menos tan buena como la de escritorio. Es muy fácil perder clientes y muy difícil ganarlos, sin embargo, no tener sitio mobile ayuda a tu competencia, así que parece claro que la opción es adaptarse, pero hacerlo bien.

Uno de los últimos estudios creados por Google, relacionados con los usos mobile, reflejaba los siguientes datos: el 81% de los usuarios prefería consultar los precios en web mobile frente a App.

Cuando me planteo el diseño de una web mobile, el principal problema con el que me encuentro es dejar de lado todo lo que sé sobre diseño web de escritorio y empezar a pensar en mobile. Tenemos menos espacio, la arquitectura es deferente, no hay sitio para mostrar continuamente el menú, por lo tanto habrá que hacerlo plegable, pero tendrá que ser de fácil acceso y sobre todo hay que tener en cuenta el hecho de que mi usuario no va a disponer del mismo tiempo de consulta que si estuviese sentado cómodamente en su casa. Lo más probable es que acceda a mi web para hacer una rápida consulta, así que no podemos defraudarle.

Estos son los conceptos básicos que debemos tener siempre en cuenta a la hora de diseñar una web mobile.

RAPIDEZ

Como decía, seguramente mi usuario haya entrado para hacer una consulta rápida, para ello tenemos que conseguir que nuestra página cargue rápido y sea muy fácil de leer. Debemos ser muy concisos y desarrollar nuestra información con la mayor brevedad posible. Es decir, la rapidez será dirigida tanto al proceso de creación de la página (código e imágenes) como a la creación de contenidos.

• Priorizar el contenido dirigido a este tipo de usuario.
• Reducir los grandes bloques de texto.
• Optimizar al máximo nuestras imágenes y código para que carguen rápidamente.

USABILIDAD

Independientemente del contenido de tu sitio, tus usuarios tienen ser capaces de utilizarlo con la mayor facilidad posible. Ten en cuenta que su ratón es el dedo, un error muy común en sitios mobile es ver botones de tamaño tan pequeño que hace prácticamente imposible accionarlos.

• A la hora de colocar un botón, pensemos en el usuario. El tamaño mínimo ha de ser de unos 40x40px. Dejar suficiente aire al rededor del botón para poder accionarlo. En caso de utilizar enlaces de texto, mejor utilizar una frase que no una pequeña palabra difícil de accionar.
• El tiempo es oro, reduzcamos al máximo los campos de los formularios. Existen multitud de ayudas para hacer más fácil el uso de este tipo de formularios, listas de desplazamiento, casillas de verificación… jQuery Mobile te ofrece muchas posibilidades en este aspecto.
• Permitir que el usuario pueda guardar sus búsquedas para una posterior consulta.

La navegación ha de ser clara  en sitios grandes y complejos, las funciones de búsqueda ayudarán a tus clientes a encontrar fácilmente lo que necesitan.

• No abuses del desplazamiento y sobre todo no abuses del desplazamiento horizontal.
• Utiliza una jerarquía de menú que sea reconocible gráficamente, utilizando siempre botones como «anterior» o «home»
• Intenta en la medida de lo posible utilizar el mínimo de páginas para llegar a un contenido.
• La navegación ha de ser igual en todas las pantallas de la web.
• Un dispositivo mobile, puede ser utilizado en cualquier lugar, con poca luz, con sol,… Procuremos utilizar un buen tamaño de fuente, una tipografía fácil de leer y buenos contrastes de color.
• El tamaño si importa. El usuario no debería de hacer zoom para poder leer o visualizar cualquier contenido de nuestra web. El uso de sombreado para los botones suele funcionar muy bien.
• En mi opinión, todos lo sitios web mobile, deberían tener un acceso para ver la web en formato escritorio, y por supuesto retornar. Existen multitud de dispositivos mobile y cada vez con pantallas más grandes que permiten navegar sin problema una web de escritorio. En muchas ocasiones, conocemos bien la web en su versión de escritorio y preferimos seguir navegándola así, por lo que no debería ser excluyente no poder verla por disponer en ese momento de un móvil.
• Nada de flash. El flash no es accesible desde cualquier terminal, por lo tanto, no se usa. Cualquier interacción o animación podemos hacerla con HTML5
• Adapta tu sitio tanto a orientación horizontal como vertical y en la medida de lo posible, no desplazar de su ubicación al usuario, al hacer un cambio de orientación.

USO LOCAL

En algún caso, se nos planteará el diseño de un tipo de comercio en el que sea necesario ubicar al usuario (tiendas, restaurantes, bares,…). Los usuarios de smartphone, utilizamos continuamente la geolocalización para encontrar aquellas necesidades que nos surgen. Tenemos pues que ayudar al máximo al usuario para que pueda ponerse en contacto con nosotros y encontrarnos. El uso de botón o enlace para activar el teléfono, funciona ya en todos los terminales, basta un clic para llamar.

• Uso de botones para ponerse en contacto con nosotros telefónicamente.
• Incluir mapas y direcciones utilizando el GPS del terminal
• Sería muy interesante que el usuario pudiese comprobar stock en la tienda más cercana a su ubicación, y en caso de no encontrarlo, mostrarle dónde encontrarlo y cómo llegar.

Como en todo lo relacionado con el diseño online, existen multitud de sitios y de recursos a nuestro alcance, unos previo pago y muchos otros gratuitos. En sitios como por ejemplo Mobile Design Pattern Gallery, podéis ver un montón de ejemplos de todo tipo de formularios, menús de navegación, gráficos, etc.. Otro sitio que a mi particularmente me gusta, es Css iPhone, en el que podéis ver las últimas tendencias en diseño mobile y donde podéis sacar muchas ideas.

En este blog de diseño web también podéis encontrar más información en todos los post relacionados con Mobile, jQuery Mobile o Diseño para móviles.