Así con los sitios responsivos!

Hace unos días y producto de un diálogo bastante desagradable con el twitter oficial del sistema de buses de Santiago – Transantiago, producto de una crítica que les hice por esa red social, ya que ellos invitaban a hacer comentarios y reclamos en su sitio web, el cual claramente no está adaptado para dispositivos móviles, su respuesta, la que no tardó en llegar decía:

 

Eso es falso estimado. El sitio es webresponsive y se adapta a cualquier celular. Rogamos ser responsables en las opiniones. Saludos! ( mensaje  de @Transantiago 21:42 – 10 abr. 2017)

 

Lo primero, es que me sorprende es el tono de la respuesta, no es muy ciudadano-céntrico que digamos, me refiero a agradecer el comentario y no ponerse en la postura de defenderse,  y por otro lado, llama la atención que exista desconocimiento respecto del concepto responsivo.  Pero como diría Jack vamos por partes.

Cuando se habla de diseño responsivo, creo que hay que dar un segundo click y para ello, hablé con Juan Carlos Camus, gran experto UX y amigo de la casa, el me prestó estas definiciones de su nuevo libro 100 elementos que debe tener un sitio web, lo que agradezco, ya que creo ayudan a entender mejor el concepto:

 

Uno de los problemas que enfrenta quien diseña interfaces móviles, es la gran variedad de dispositivos utilizados por los usuarios para acceder a los contenidos, lo que genera muchos tamaños distintos a los que se debe poner atención, además de tener que funcionar en modo vertical y horizontal. Por ello se debe preparar un sistema de visualización que lo contemple, para ofrecer un despliegue que aproveche las características del dispositivo que se está empleando o bien, se degrade aceptablemente permitiendo el acceso a la información. Al respecto hay tres posibilidades:

 

  • Diseño Líquido: consiste en que se muestra la misma interfaz, disminuyendo o aumentando los tamaños de los elementos para ocupar todo el espacio posible. Si los elementos no tienen dimensiones proporcionales, no se mostrarán adecuadamente; además, si el espacio del dispositivo es pequeño, el contenido se verá minúsculo y el usuario deberá realizar acciones para agrandarlo y revisarlo.
  • Diseño Adaptable: es un sistema que permite reordenar los elementos de una página, dependiendo del tamaño de la pantalla. Corresponde al término inglés adaptive y consiste en una vista que se decide al inicio de la visita y se mantiene igual independiente de que cambien las condiciones del dispositivo que se esté empleando. 
  • Diseño Adaptativo: es una evolución del anterior y corresponde al término inglés responsive; su principal característica es que el contenido se adapta en forma automática a cualquier cambio de tamaño que haya en el dispositivo desde el que se realice la visita. No hay tamaños previos y por tanto se trata de un diseño que reacciona a los cambios que se produzcan en el dispositivo (ancho y alto de la pantalla) del que se revisa la información.

Fuente: Juan Carlos Camus, 2017

 

Estás definiciones, ayudan a entender de mejor forma los diferentes tipos de diseños de sitios web y su comportamiento en dispositivos móviles.  Si además revisamos lo que está ocurriendo con la conectividad móvil, esto es, el aumento exponencial de su penetración, como lo muestran diversos estudios Cisco Visual Networking Index: Global Mobile Data Traffic Forecast Update, 2016–2021 White Paper y Ericcson con su estudio Ericsson mobility report (june-2015), es que se hace fundamental tener presente este tipo de dispositivos a la hora de diseñar soluciones web.

Dada esta situación, es que no tener claridad frente a los conceptos de usabilidad en dispositivos móviles, y en particular, no entender bien que es un diseño responsivo refleja un grave problema de calidad de servicio.

Producto de este incidente, hice algunas pruebas usando un par de herramientas disponibles en la web, me refiero a mobiReady y Mobiletest.me con varios sitios web de gobierno, ¿adivinen qué ocurrió?

Ahora bien, hay que hacer una salvedad, en muchos de los casos que probé la página principal resultó adaptarse bien a este tipo de dispositivos, pero en la medida que me iba adentrando en el sitio, ese atributo en muchos casos se perdía.  Pensemos por un momento que la prioridad para que un sitio sea responsivo, debe estar asociado a aquellas zonas que son más relevantes a la hora de interactuar con ese servicio desde un dispositivo móvil y no necesariamente a la página principal.

Haciendo un mini encuesta con usuarios de plataformas móviles, que no pretende ser estadísticamente representativa, busqué algunos criterios que pueden orientar el tema de donde poner los cuidados a la hora de diseñar un sitio y que este pueda ser usado adecuadamente desde dispositivos móviles, me atrevo a anunciar algunos:

 

  • Secciones de reclamos y sugerencias
  • Denunciar algún evento, por ejemplo: perdida de documentos
  • Cuando el público objetivo del sitio son principalmente usuarios jóvenes (estudiantes)
  • Servicios públicos cuyos usuarios acceden cuando se encuentra fuera de sus casas/oficinas
  • Ubicaciones geográficas de las oficinas de un determinado servicio ya que es un requerimiento habitual cuando no se está conectado desde un equipo de escritorio
  • entre otras

 

Puede que haya muchas otras, pero me parece que al menos en estas áreas debiera existir especial preocupación por que tengan un adecuado comportamiento a la hora de usarlos con dispositivos móviles.  Estos cuidados, no sólo deben centrarse en la capacidad de adaptación a esos dispositivos, sino que además que desde un punto de vista de la usabilidad estén preparados para conexiones de menor ancho de banda, pantallas más pequeñas y acceso rápido sin tener que pasar por muchas pantallas.

Así se comportaron algunos de los sitios que visité con mi celular.

  1. Transantiago: en su sección reclamos, el nivel de usabilidad en dispositivos móviles es bastante bajo, la pantalla no se adapta y se requiere de mucho scrolling para hacer reclamo (ver imagen).
  2. Sernac, en su sección de reclamos, tiene el mismo problema no se adapta y se requiere de mucho scrolling horizontal y vertical para ingresar formulario de reclamo (ver imagen)
  3. Municipalidad de Providencia, en sistema de atención al vecino, no adapta la página a dispositivos móviles y el formulario de reclamos requiere de navegar bastante (ver imagen).
  4. ChileAtiende, el portal de trámite se adapta a dispositivos móviles dejando una página inicial con el buscador, herramienta más relevante a la hora de buscar información en un móvil (ver imagen).
  5. Servicio de Impuestos Internos, posee una interfaz adaptada al menos en su homepage a dispositivos móviles y además direcciona a aplicaciones diseñadas y adaptadas específicamente para móviles (ver imagen).

 

¿Hay algunas diferencias, cierto?