<< Back

Tableau para dispositivos móviles

Si yo te dijera que la versión móvil de tu dashboard es tan importante como la de escritorio, ¿me creerías? Haces bien en dudar, porque, hasta hace bien poco, el ordenador era el líder indiscutible de los dispositivos. Sin embargo, eso está cambiando y te lo voy a demostrar como nos gusta a nosotros, los visualizadores: con datitos. Por ejemplo, en 2019, se registró que el 98% de los hogares españoles tienen al menos un teléfono móvil, frente al 81% del ordenador. Y un 91.5% de los usuarios asegura que el smartphone es su dispositivo favorito para navegar por Internet. Que no son cuatro gatos, vaya. Si no pensamos también en quienes accederán a nuestro dashboard a través del móvil, nos estamos descalificando sistemáticamente para un buen porcentaje de usuarios. Otros cuantos fun-facts que ilustran el nivel de dependencia que tenemos al teléfono móvil:

Imagina que ya tienes tu dashboard, precioso, para una pantalla estándar de ordenador. Entonces te da por ir a la esquina superior izquierda y seleccionar Phone en lugar de Default. Lo que verás no te va a gustar. Y si eres un perfeccionista y has invertido horas y horas en que cada container quede exactamente donde tú quieres, menos todavía. Eso se debe a que los dispositivos móviles son un mundo aparte, muy diferente del ordenador, y nos obliga a jugar con sus propias reglas.

Partiendo de ese hipotético dashboard ya creado, os voy a contar paso por paso, como suelo yo plantear la “mudanza” de Desktop a Phone Layout:

  • Cada dispositivo tiene sus worksheets creadas desde el principio pensando en ese formato. Nada de duplicar e ir modificando. Si va a ser ‘mobile first’, que lo sea de verdad. La principal diferencia que encontrarás entre los diferentes dispositivos es el espacio útil disponible y la relación de aspecto de la pantalla. Es muy importante tener en mente desde el principio el área del que dispones y cómo quieres que el usuario navegue e interaccione con el dashboard. Mi recomendación es que empieces yendo a Device Preview y eliminando el Phone Layout creado por defecto por Tableau.
  • Todas las hojas que vayan a aparecer en los dispositivos deben estar en el ‘default’, pero nosotros hemos dicho que no queremos utilizar las mismas. Recurrimos a la funcionalidad de hide/show container para tener en el mismo dashboard la versión de escritorio y la móvil, pero oculta. Una vez añadidas las diferentes worksheets pensando en la UX de un smartphone, creamos un contenedor invisible, vertical y las arrastramos todas ahí, junto con todos los filtros, highlighters y leyendas que queramos incluir. Comprobarás que inmediatamente aparecen entre las opciones de hojas para arrastrar dentro de nuestro Phone Layout.
  • Vamos a construirlos. Comenzamos por Desktop, aunque vaya a ser igual que Default, utilizamos el layout ‘Custom’ para así poder borrar los contenedores invisibles. El tamaño se queda en Default. Para el móvil también seleccionamos Custom y, en esta ocasión, eliminamos todo lo relacionado con la versión de escritorio y lo sustituímos por nuestras páginas específicamente diseñadas para ser ‘mobile friendly’.
  • Para el tamaño del dashboard, recomiendo seleccionar Fit Width, ya que el ancho del teléfono no va a cambiar, no así su altura, que se desplazará al hacer scroll con el dedo.
  • ¡Probar y probar y probar! Aprovecha la herramienta Device Preview para cerciorarte de que todo queda a tu gusto.

Ahora bien, te puedes preguntar para qué has tenido que hacer todo este jaleo de crear diferentes versiones de las páginas para cada dispositivo, ocultarlas dentro de Default y demás, si al final no van a ser tan distintas, pudiendo simplemente apilarlas verticalmente en lugar de una composición más apaisada como es el escritorio. Pues, señores, porque la UX es mucho más que ponerlo todo en vertical. Hay que tener en cuenta muchos otros factores conocidos en la industria y que, en adelante, seguro que identificarás en las páginas web, plataformas de online shopping y redes sociales más conocidas.

Cosas a tener en cuenta:

  • Los dedos son más grandes que el puntero. Aunque tus dedos sean delgaditos como los míos, hay que tener en cuenta que hay gente que tiene las manos muy grandes. Hay algunas actividades que esas personas tienden a evitar, como hacer sushi casero o el punto de cruz. ¡No dejes que navegar por tu dashboard sea una de ellas! Aunque Tableau aumenta automáticamente el tamaño de nuestros filtros y parámetros al pasar a móvil, hay que repasar cada una de las interacciones (click en un gráfico que filtra otro, marcas demasiado pequeñas o juntas, etc).
El CTA principal en tu versión móvil debería ser fijo en scroll?
  • Los tooltips van a ser enormes, ocupando el ancho de la pantalla. Esto puede tapar información relevante para el usuario. Tenemos varias alternativas: reducir la cantidad de datos que se despliegan, ocultar los botones de la parte inferior quitando el check de Include Command Buttons o, directamente, considerar prescindir del tooltip para Mobile.
  • Los dispositivos móviles no distinguen entre click y hover. Esta es otra razón para olvidarnos del tooltip. Puede ser que la acción al clicar sea mostrar el tooltip, puede ser realizar algún otro tipo de interacción, por ejemplo, un filtro; pero no ambas o el usuario se va a volver loco.
  • Los mapas pueden fastidiarte el scroll-down. Al usar los dedos sobre un mapa, te vas a mover POR EL MAPA, en vez del dashboard, así que el usuario se queda literalmente atrapado en esa sección. Yo recomiendo asegurarse de que el mapa es más pequeño en altura que la pantalla, para que siempre haya algún espacio desde el que el usuario pueda usar el dedo. Otra solución, tan sólo si tu mapa es estático, es quitar la opción de Zoom/Pan y colocar un contenedor flotante y transparente encima del mapa para que no pueda ser tocado.
Fully Responsive Map - Ultimate WordPress Plugins by Supsystic
  • Aparte de la previsualización de Tableau, también contamos con las Herramientas para Desarrolladores de Google Chrome, que nos permiten ir probando cómo se vería en diferentes dispositivos (con modelo y todo). De modo que, si tu jefe tiene un IPhone 8, asegúrate de que, al menos para él, quede niquelado.
Cómo Utilizar Las Herramientas Para Desarrolladores De Chrome | Blog de  data center, cloud | Blog de data center, cloud

Bueno, espero que hayáis encontrado estos consejos de utilidad y os animen a explorar por vuestra cuenta. ¡Así es cómo mejor se aprende, probándolo todo como un niño en la noche de Reyes! Tened presente que estos “pasos” son bastante subjetivos, puedes no estar de acuerdo con algunos y estará bien, porque tienes que encontrar tu propia manera de trabajar. Una última recomendación: estad atentos a los informes más recientes sobre el uso de dispositivos que van sacando algunos organismos públicos y privados, te darán pistas de cómo se comporta nuestro target a fin de crear dashboards que le dejen alucinado.

Webgrafía: https://www2.deloitte.com/es/es/pages/technology-media-and-telecommunications/articles/consumo-movil-espana.html , https://public.tableau.com/es-es/s/blog/2019/01/making-mobile-friendly-data-visualizations-tableau-20191 , https://help.tableau.com/current/pro/desktop/es-es/dashboards_dsd_create.htm

Leave a Reply

Your email address will not be published. Required fields are marked *