Desde hace un tiempo que llevo haciendo análisis y estudio sobre la integración web en dispositivos móviles. Vamos a decir que tenemos nuestra web con todos los estandares de diseño y maquetción web óptimos para los navegadores sobre pc u ordenadores de escritorio o portátiles, vamos que está bien maquetada y no descuadra en ningún navegador, y ahora queremos que nuestra web sea lo mas «movil-friendly» posible. Que podamos ver nuestra web en dispositivos móviles, pero no están sencillo como escalar nuestro diseño y punto, son una nueva plataforma con una configuración y limitaciones especificas. En el siguiente artículo comentaré las limitaciones que he ido recopilando de otros blogs, foros, así como de mi propia experiencia a la hora de desarrollar e integrar un web en un dispositivo móvil.
No hay estados «hover»
Esto es algo muy simple, pero que en la gran mayoría de web, hay acciones hover sobre los botones o enlaces, los cuales se activan o desactivan.
En los dispositivos móviles no hay estado hover. Como gran parte de los móviles son táctiles un enlace o botón sólo puede ser pulsado por lo que no podemos poner el cursor encima como haríamos con un ratón cuando vemos una web desde un ordenador. Desde móvil la información o funcionalidad solo puede ser accesible de 2 maneras:
- Visible – el contenido o característica es accesible de modo visual . Se pueden anidar en las sub-secciones o páginas secundarias, pero al contenido se accede desde los elementos visibles de navegación como los botones o enlaces.
- Convention – basándose en las convenciones de diseño móvil que puede ocultar el contenido y sólo se mostrará cuando el usuario emplea ciertos gestos ya sea moviendolo o agitándolo, o cuando el usuario arrastra contenido en torno a un area tal como pull-to-refresh, esto es como lo que tienen las aplicaciones de twitter o gmail de arrastrar en una zona y soltar para actualizar la lista de tweets o emails respectivamente.
Este último enfoque de mostrar el contenido por convención, puede ayudar a simplificar el interface pero también se corre el riesgo de que el usuario no conozca esta funcionalidad o no la entienda y no pueda actualizar o mostrar cierto contenido con mucha facilidad ofreciendo una mala experiencia de usuario o incluso perdiéndolo. He de decir que en la aplicación oficial de twitter para Android que uso en mi móvil tiene varias implementaciones para mostrar el contenido de esta manera y he tardado un tiempo en descubrirlas.
Lentitud y errores a la hora de escribir
Escribir en un teclado táctil es un ejercicio lento y propenso a errores, así que asegúrate de mantener los campos de formulario a un mínimo absoluto y pre-seleccionar valores por defecto, en todo lo que sea posible.
Aunque desde luego hay que hacer frente a los datos erróneos en los diseños web normales, tales como email o nombres mal introducidos, habrá aún más los errores en los formularios rellenados en los dispositivos táctiles, debido al teclado táctil y el menor tamaño de pantalla. Incluir alguna página o sección donde el usuario pueda revisar sus datos posteriormente siempre es una buena idea.
También puede considerar la auto-completado, el uso de geo-datos, la validación en línea, los validadores de direcciones, y otros métodos para sugerir y corregir las entradas del usuario a medida que se escriben.
Menos contenido
Como es obvio, ante una pantalla más pequeña en los dispositivos móviles, se podrá ver menos contenido al mismo tiempo. Esto tiende a hacer más difícil para el usuario tener una visión general de la página, comparar las diversas opciones, y recordar el contenido anterior.
Si tenemos largos formularios donde el usuario va haciendo scroll y donde no puede ver el titulo o el contenido inicial junto con los datos previamente introducidos, complicará mucho la experiencia del usuario. Lo ideal es realizar pequeños formularios lo más sencillo posible, así como insertar una página o sección donde el usuario pueda revisar sus datos, tal como comenté en el punto anterior.
Problemas al hacer click en los enlaces
En los dispositivos táctiles los usuarios utilizamos los dedos para hacer clic los enlaces y botones en la pantalla, lo que disminuye significativamente la exactitud de los clics. Cuantas veces nos ha pasado de querer pulsar en un enlace y pinchamos en el de al lado, el que está arriba pero no el que queremos.
En la práctica, esto significa que debemos considerar el tamaño y la proximidad de todos los elementos seleccionables, teniendo en cuenta de que son lo suficientemente grandes como para tocar de forma fiable con el dedo y que por casualidad no pulsaremos sobre otro enlace próximo. Hay que tener especial atención a las barras de navegación y menús principales, ya que no queremos que el usuario esté navegando sin sentido por secciones que no desea ver por culpa de pulsar un enlace que no pretendía. Recomendación, botones más grandes y un margen alrededor de los enlaces mínimo de 15px.
Conectividad
La velocidad de las conexiones 3G, cada vez son mejores, ya sea porque son ligeramente más rápidas o porque hay mejor cobertura. Sin embargo y por lo menos en España con muchas de las compañías tenemos un límite de datos para navegar y el uso de la conexión 3G, lo cual no podemos tener una web móvil que cargue muchos elementos, y sea muy pesada, ya que estar 5-10 minutos navegando en una web muy sobrecargada de elementos podremos fácilmente consumir un cuarto o la mitad de nuestra cuota mensual. Optimicemos al máximo la carga de imágenes, css, js.
Cuidado con Flash o JavaScript
No todos los teléfonos y dispositivos móviles son compatibles con Flash o JavaScript. Corremos el riesgo de que algunos visitantes no puedan ver el contenido. El ejemplo más típico de esto es iOS que no permite Flash en iPhone o iPad.
No uses pop-ups o «Abrir en nuevua ventana»
Salvo que sea necesario, claro. Este es un punto para mejorar la navegación del usuario, ya que en un navegador web de escritorio, si se abre una nueva ventana o popup, podemos rápidamente cambiar entre ventanas con el ratón, sin embargo en móvil, tendremos que acceder al menu de selección de ventanas e ir cambiando entre ventanas con varios clicks con el dedo, con lo que si estamos navegando dentro de una web donde se abren algunas ventanas se puede hacer un poco «pesado» para el usuario.