Estamos haciendo un estudio en profundidad para explicar a los interesados acerca de la creación de sitios web optimizados para móviles. En el presente artículo vamos a hablar de la usabilidad en la web móvil, es decir, todas esas buenas costumbres que debemos seguir para poder diseñar sitios web que sean fáciles de usar en dispositivos en movilidad.

En el artículo anterior explicamos que los hábitos de consumo de Internet en móvil son diferentes que en ordenadores personales y ofrecimos una lista de características del uso de Internet móvil. Así que a continuación vamos a mostrar ya cómo debería ser un sitio web optimizado para móviles en la práctica.

La regla fundamental: Menos es más

Debemos comenzar comentando la regla fundamental para el diseño web móvil y aunque pueda parecer un tópico, el dicho que "Menos es más" se ajusta perfectamente a la realidad. Cuando diseñamos para móviles nos sobra cualquier tipo de floritura, contenido superfluo o cualquier accesorio prescindible.

Como venimos diciendo, el usuario que se conecta a nuestro sitio web desde un móvil no lo suele hacer por entretenimiento, sino porque quiere obtener alguna información o servicio. Lo quiere rápido, y ligero, así que debemos satisfacerle en la medida de lo posible. Cuanto menos distracciones, mejor para el usuario y por añadidura, mejor para nosotros.

Consejos del W3C

Antes que nada quiero nombrar una fuente totalmente reconocida y recomendaros su consulta. Se trata, nada más y nada menos que el propio Consorcio de las Tres Uves Dobles, W3C para los amigos. Una organización que a día de hoy no necesita más presentación y que nos ofrece una lista bastante interesante de consejos que nos ayudarán a crear webs más usables cuando se acceden desde dispositivos.

El informe está en inglés y se llama Mobile Best Practices. Cabe señalar que, por contra de lo que muchas veces nos tienen acostumbrados desde la W3C, en este caso el texto es bastante sencillo de leer y de entender.

Decálogo de consejos de usabilidad para la web móvil

A continuación voy a listar hasta 10 consejos que nos pueden ayudar a construir sitios web más usables en dispositivos móviles. Algunos son más prácticos que otros, algunos también más obvios que otros.

1.- Ten en cuenta la diversidad de pantallas
Como primer punto, lo más fundamental en torno de los dispositivos móviles, las sensibles diferencias de tamaños de pantallas y de resolución. Ten en cuenta que estás diseñando para pantallas por lo general pequeñas, pero además que existen distintos tipos de definiciones. Si en ordenadores de escritorio ya debíamos tener en cuenta este detalle, al desarrollar para móviles todavía cobra mayor importancia.

2.- El foco no es tu sitio
Lo dicho anteriormente, quizás los usuarios están accediendo a tu sitio mientras llevan a cabo otras tareas, así que no vas a pretender que el visitante tenga los 5 sentidos dedicados a tu web. Analiza qué es lo que quieres mostrar, sintetiza, llama la atención sobre los puntos que consideres más importantes y descarta aquellos que no merezcan la pena. En la medida de lo posible, reduce la cantidad de contenido que estás distribuyendo en tu página para móviles.

3.- El layout debe estar pensado para móviles
En la web de escritorio utilizamos rejillas que tienen 12 o 16 columnas, sin embargo, en la web para móviles quizás con una columna tienes más que suficiente. En cualquier caso, ten en cuenta que funcionan mejor los layouts fluidos, que se adaptan a la anchura de cada tipo de pantalla. Si vas a utilizar varias columnas, considera 2 o 3 a lo sumo. Sin embargo, también es cierto que algunos dispositivos como los tablets pueden soportar perfectamente layouts más complejos, por lo que no existe una regla fija. Lo mejor sería tener varios layouts y utilizar uno u otro dependiendo de las dimensiones de la pantalla. Más adelante veremos cómo hacer eso.

4.- La navegación en la parte de arriba no suele funcionar
En la web para escritorio es habitual tener un navegador en la parte de arriba de la página, con un listado de las secciones principales de un sitio web. Pero debemos tener en cuenta que en dispositivos de movilidad, con pantallas pequeñas, ese listado de links puede ocupar todo el espacio disponible, lo que obligaría al usuario a hacer scroll para ver el contenido de la página. Algo que no es deseable. En la portada del sitio web puede ser una buena idea mantener la navegación en la parte de arriba del documento, pero en el resto de páginas queda mejor si la situamos abajo.

5.- Uso responsable de las imágenes
Esa imagen que en las pantallas de los ordenadores queda tan bien, posiblemente tenga un tamaño excesivo para visualizarse en una pantalla pequeña de un teléfono. Posiblemente la definición de la foto sea superior a la de la pantalla de tu dispositivo, con lo que estás desperdiciando espacio y ancho de banda para su transferencia. Usa imágenes con tamaños adaptados a móviles y elimina determinados usos de imágenes que aportan poco o nada a la utilidad de tu documento, como imágenes de fondo, que pueden molestar la lectura más que otra cosa.

6.- Se trabaja con los dedos y no con el ratón
Este punto es de vital importancia, puesto que la pantalla táctil utiliza el dedo como señalador y tiene muchas diferencias con respecto al puntero del ratón de nuestro ordenador personal. Ten en cuenta detalles como que el espacio para hacer un tap (tap es como se llama al clic realizado con el dedo sobre una pantalla táctil) es mayor que el que señalaríamos con el puntero del ratón (se supone que un dedo en la pantalla ocupa entre 40 y 80 píxeles de ancho). Dicho de otro modo, no se puede comparar la precisión de un clic con el ratón y con el dedo, que puede cambiar mucho de una persona a otra y también la forma de posicionarlo en la pantalla. En general tu sitio web funcionará mejor cuando pongas botones o enlaces con tamaño mayor. Así mismo, sería recomendable dejar un mayor espacio en blanco entre los botones o enlaces de tu sitio web.

7.- Entrada de texto en teclados virtuales
En el ordenador personal utilizamos un teclado para introducir texto, sin embargo, en dispositivos móviles se suele usar un teclado virtual que a menudo resulta mucho más incómodo. Este detalle y varios otros que tienen que ver con la entrada de datos en general lo veremos en el siguiente artículo sobre usabilidad en formularios optimizados para móviles.

8.- No se dispone de plugins
Flash es el ejemplo más claro de plugin que no disponemos en todos los dispositivos y que por tanto no deberíamos usar en páginas que queremos que se vean bien en móviles. Pero hay otros, como los Applets de Java, Shockwave, etc. Sin olvidar que no todos tienen compatibilidad con ciertas capacidades de scripting. Sugerir la actualización del navegador, o la instalación de otro cliente web, no es la solución en muchos de los casos, pues no siempre el usuario tiene oportunidad de actualizar su sistema operativo o instalar otro software para la navegación web.

9.- Los tipos de eventos cambian
El clic en pantallas táctiles se llama Tap. Realmente es un nuevo modo de llamar a la misma cosa, pero existen otros eventos que sí tienen cambios importantes, o que no están disponibles en las pantallas táctiles. Por ejemplo, el hover no existe al trabajar con los dedos. Además, hay otra serie de eventos que sólo existen en móviles como deslizamiento de los dedos, zoom, girar la pantalla etc.

10.- Existen diversas utilidades específicas que se pueden aprovechar Los dispositivos móviles a menudo integran algunas habilidades que no se disponen en los ordenadores de escritorio, como localización geográfica, cámaras, grabación, orientación, etc. En la mayorá de los casos estos mecanismos sólo se disponen en aplicaciones nativas, pero gracias a HTML 5, algunos ya están disponibles en sitios web. En el futuro la tendencia es integrar aun más estas capacidades en la web.

Conclusión

Este resumen de consejos de usabilidad deben mejorar en general la experiencia del usuario que visita el sitio web. Muchos de ellos requieren técnicas específicas para ponerlos en marcha en una web, que veremos en el transcurso de este manual en DesarrolloWeb.com.

De momento vamos a continuar en el próximo artículo con una lista de consejos para crear formularios más usables.