AlbertoTiCote -un perfil de twitter que ayuda a remorder la conciencia de todos los del mundillo web- se quejaba de la gran frustración que le supone navegar con móvil y que mayoría de sitios webs impidan hacer zoom sobre sus elementos, como una imagen un texto… y no le falta razón. Quién no se ha enfrentado más de una vez a hacer zoom en mobile sobre una infografía y no ha podido sin tener que: descargarse la imagen, abrirla con la galería del teléfono móvil y un proceso demasiado engorroso por no poder hacer zoom (y le he aumentado el rebote).
Me da mucha rabia que algunas webs responsive no permitan hacer zoom con los dedos sobre el texto y las imágenes
— Pesadilla en la Web (@AlbertoTICote) 14 de septiembre de 2016
Este problema lo podemos considerar también desde la perspectiva de la accesibilidad, pero sin llegar a magnificar el problema lo que se entrevé es la triste tendencia en la que ha caído la maquetación web: se está menospreciando cada vez más, nadie quiere hacerla porque es costosa y de artesanos.
Lo que tengo aprendido en estos más de 10 años de front-end, es que el usuario debe de poder consumir el contenido dónde quiera, cuándo quiera y cómo quiera, al usuario hay que dejarlo que camele. Digo el usuario y no el dispositivo, porque a veces se nos llena la boca con mobile first y no nos importa el usuario para el que diseñamos o desarrollamos -si es que llegamos a diseñar/desarrollar-. Nos quedamos en el screen sin importarnos el contexto, los gestos, las interacciones, las manazas… Por suerte durante esta primavera/verano he podido hacer una inmersión para afinar todos estos detalles en una tienda online que diseñado y maquetado específicamente para móvil que resuelve todos estos problemas y otros como el swip para pasar imágenes de un carrusel. Espero enseñárosla y dedicarle un post cuando esté publicada, porque ha sido el típico curro que me he comido casi sólo. La misma distinción entre encajar la interfaz y facilitar una tarea aparece en el caso de mejora de la conversión en el checkout móvil.
Volviendo al problema del bueno de Alberto, hay una buena noticia: La mala experiencia de uso y frustración que tiene cuando hace el gesto pinch se puede reparar rápidamente con un uso correcto de la meta etiqueta view-port. No sé por qué motivo la mayoría de los themes que compra el personal pueden incluir el parámetro user-scalable=no que le está indicando al dispositivo que no hay escala/zoom posible, bajo mi opinión, un gran error.
Gráfico: un error de usabilidad común en la web móvil por el mal uso de la etiqueta view port
Cómo permitir el zoom con la etiqueta viewport
Parte de una configuración sin restricciones de escala:
<meta name="viewport" content="width=device-width, initial-scale=1">
Evita user-scalable=no y límites como maximum-scale=1. Prueba el gesto de ampliación y comprueba que los controles y el contenido siguen siendo utilizables.
Llegados a este punto, ¿vas a cambiar el viewport de tu sitio web?, ¿crees razonable impedir hacer zoom en el contenido?
Permitir ampliar es una de esas decisiones concretas que conectan con diseñar accesibilidad más allá de un checklist: revisar lo que la persona puede hacer, no sólo cómo se ve la maqueta.
0 comentarios