Lecciones UI para creativos

¡Tanto 5G y tecnología punta en nuestro móvil para nada! Un simple botón, eso es todo lo que yo pedía.

Hace unas semanas intenté  desde el móvil revisar un pedido que había hecho en una conocida tienda online.

Resulta que si accedía a través del ordenador, había un botón para abrir todos los detalles de cada pedido. Pero si accedía desde el móvil, no había ni la sombra del botón.

Por suerte, llegué a mi despacho justo a tiempo para cancelar el pedido al comprobar en los detalles que había un error grave. 

El tema es para felicitar a quien tomó la decisión de basar la adaptación al móvil de la web en esconder un elemento que lleva a información clave.

Si con algo tan sencillo como una página web suceden estas cosas, imagínate cómo se complica el tema con las visualizaciones de datos, llenas de números, etiquetas, etc. con información útil. 

Si quieres un ABC básico pero muy útil para aprender a adaptar las visualizaciones e infografías a diferentes dispositivos móviles, aquí está el episodio de esta semana.

¿Empezamos?

Últimamente me han llegado diferentes proyectos con un patrón común: el diseñador o equipo de diseñadores que lo hicieron, tenían perfil de diseñador gráfico, pero no eran diseñadores web ni app.

Así pues, el diseño podría haber estado muy bien en cada caso si hubiera sido para una revista o para una presentación de diapositivas. Pero como diseño para navegadores, tenía graves problemas de usabilidad y de adaptabilidad. 

El caso era especialmente crítico en los casos en los que se trataba de proyectos de visualización de datos. Al analizarlos enseguida me di cuenta que aquellos gráficos en el móvil iban a ser un problema porque se iban a ver muy pequeños. En otras palabras, iban a quedar ininteligibles. 

Si optaba por una opción basada en permitir un scroll horizontal, tampoco avanzaba mucho. La gracia de los gráficos es permitir comparar valores. Si sólo puedo ver una pequeña parte del gráfico por mucho scroll horizontal que haga, tenemos un problema porque para el usuario es difícil poder comparar así lo que desee. 

Los clientes realmente quieren responsive design/visualizaciones responsive

Al detectarlo, se lo comenté al cliente para avisarle de que aquel diseño en pantallas pequeñas no funcionaría, es más, ¡Estaba pensado para pantallas de más de 1600px de ancho! Su respuesta fue: “No importa si en móvil no se ve bien, porque lo usaremos sólo en ordenador”. 

Ya! – Pensé yo – me juego la facturación de medio año a que antes de que acabemos el proyecto ya se te ha olvidado lo que has dicho, y vienes para decirnos que el proyecto no está yendo bien porque en móvil no se bien, o en ipad, o en tu portátil…

Al explicárselo con más detalle al cliente, y bien explicado, no se puede explicar de la manera que auno se le pasa primero por la mente, él mismo se dio cuenta de que en pantallas pequeñas de 1600px de ancho sí lo iban a usar.

En los otros proyectos con este mismo problema pasó similar. 

En fin, viendo que este es un patrón que se está repitiendo en diferentes diseños, decidí crear este podcast para tratar el tema del diseño responsive para webs y apps con gráficos, o para visualizaciones online. 

Contenidos del episodio

Para hablar del tema he dividido el episodio en 2 secciones:

1. En la primera, veremos precisamente el tipo de historia que podemos crear. 
2. En la segunda parte, veremos 2 aspectos que no puedes dejar pasar por alto para crear el storytelling en tus proyectos de visualizaciones. 

La importancia del responsive design

Con mi equipo, diseñamos y programamos webs y apps en algunos casos. En otros, programamos las webs o apps diseñadas por el diseñador o equipo de diseñadores del cliente. 

Y la verdad es que para mí ha sido toda una sorpresa comprobar en los últimos meses que todavía hay tantos diseñadores para los que el responsive design sigue siendo un desconocido. 

Y digo que para mí es toda una sorpresa porque ya hace tiempo que se habla de que cada vez el acceso a las webs y aplicaciones online es más relevante. Más de la mitad del tráfico web ya es dede móviles.  Más de la mitad de los usuarios ven visualizaciones e infografías desde su móvil también. 

!De ahí que yo no me creyera lo que el cliente sugería¡

Mobile first design

Si este es tu caso, te doy una sugerencia para empezar: Mobile first design. Es decir: empieza tus diseños por las pantallas en móvil. Dicho de otra manera, diseña para móvil primero, y luego diseñas cómo se adaptará ese diseño a pantallas más grandes.  

Si te es muy complicado, hay otra opción: empieza por una pantalla de ordenador de 1200px de ancho por ejemplo. Así no trabajas con una pantalla enorme  en la que todo cabe fácilmente, pero tampoco estás en un entorno tan pequeño y complicado como puede ser el móvil. 

Y para cada sección que diseñes, piensa automáticamente cómo será en móvil. Si la adaptación en móvil de cada sección es un diseño completamente diferente al que has hecho para la pantalla de 1200px, algo está fallando porque programar ese diseño va a ser carísimo.

Por ejemplo, si una sección en desktop es un banner compuesto por 3 columnas, en tablet es un diseño basado en pestañas, y en móvil es un acordeón, se trata de 3 maquetaciones e incluso programaciones internas distintas. Pero si además, la mayoría de las secciones son tan diferentes para cada dispositivo, es cuando el precio y el tiempo del proyecto se dispara. 

Puede pasar que una sección en concreto difiera mucho en móvil y en ordenador o tableta. Pero deberían ser casos aislados  y debe haber  un argumento sólido para ello. Si sólo es una sección o dos no debería encarecer el proyecto como para duplicarlo o triplicarlo.

Pero si haces un diseño completamente diferente para móvil, otro para tableta, otro para ordenadores de hasta 1400px y otro para ordenadores con una pantalla más ancha, estarás pidiendo al equipo técnico que maquete 4 diseños diferentes.  Eso no es una adaptación, sino que estás pidiendo que hagan 4 webs diferentes, o 4 aplicaciones.

Checklist para crear diseños responsive design

En fin, esto es sólo la recomendación con la que empezar. Si necesitas más detalle de cómo conseguir crear diseños responsive, puedes escuchar el episodio 8, titulado “La checklist para crear diseños responsive design de verdad”.  

Con la información que hallarás allí podrás crear webs que tus usuarios podrán ver sin importar si están haciéndolo desde su móvil, tablet o desde la pantalla más grande del mercado en ese momento. 

Recomendaciones para infografías y visualizaciones responsive

(ahora que ya hemos visto claro por qué es crucial tener en cuenta en vuestros diseños la visualización responsive, veamos cómo conseguirla. Para eso,) aquí os presento una serie de recomendaciones a seguir para conseguir infografías y visualizaciones responsive:

1. Diseña la visualización para diferentes dispositivos

Crea el mockup de la visualización o infografía para diferentes pantallas, sobretodo para los peores casos. Estos serían, para empezar, el móvil y la tablet. 

Pero también podrían serlo las pantallas de portátil muy panorámicas. POr ejemplo, si la infografía crece mucho verticalmente, asegúrate que en la pantalla cabe la suficiente información como para que tenga sentido para el usuario. 

Por ejemplo, imaginemos un caso muy simple pero muy claro: un gráfico de barras que por el motivo que sea es muy alto. Miras las estadísticas de pantallas del mercado y descubres que una de las más comunes ahora mismo es una pantalla muy apaisada que permite ver sólo la parte superior de tu gráfico diseñado, o la parte inferior.

 Ahora piensa en el gráfico que has hecho: es un gráfico de barras. Si sólo muestras la parte superior, no puedes ver la etiqueta inferior, por lo tanto no sabes a qué corresponde cada barra. Cuando se ven las etiquetas del eje de las x, no se ve hasta dónde llega cada barra. Así que no puedes ver su valor, ni cuál es la barra más alta o la más baja. Por tanto, no puedes leer el gráfico. 

Posibles opciones para visualizaciones responsive

Una opción sería hacer el gráfico simplemente más bajo para que pudiera caber. Pero esto no siempre es posible. Puede ser porque los datos sean muy dispares. Mientras una barra tenga valores del orden de millares, la otra la tenga de unas pocas decenas. Si no tiene una mínima altura, los valores de decenas aparecen todos como cero prácticamente. 

Otra opción es que las etiquetas del eje de las x estén tanto en la base como en la parte superior.

Otra opción aún más interesante es permitir filtrar. Por ejemplo, que hubiera unos desplegables, checkboes o radiobuttons para poder seleccionar por grupos. 

Veamos un caso concreto: tenemos un gráfico con el número de casos de coronavirus en cada país. Normalmente, los usuarios buscan información concreta en las visualizaciones como por ejemplo: los 10 países más afectados, o los 10 países menos afectados. O ver qué posición ocupa mí país en el total, o en una selección de países concreta. etc.

De esta manera, al hacer los 10 más o los 10 menos afectados, el orden de valores ya es más similar y aportas una información útil y visible para el usuario en su dispositivo. 

En fin, depende del caso, del público objetivo y del uso que debe tener la infografía o visualización, se tendrá que buscar por la opción más conveniente.

2. Mantén el diseño simple

Esta norma te puede ayudar muchísimo. Si estás pensando en un gráfico o visualización plagada de etiquetas con datos, porcentajes, notas, etc… seguramente vas a sudar tinta china para conseguir que se vea en móvil o en tablet, ¡si es que lo consigues!

Los gráficos simples sin elementos extra funcionan mucho mejor en pantallas pequeñas, además cargarán más fácilmente y mejorarán la experiencia de usuario.

En este punto puede ser una opción que haya información de segundo o tercer nivel que en el gráfico en móvil no se vea, pero que en ordenador sí. 

Por ejemplo, si el gráfico tiene una serie de datos para dar el detalle del valor con decimales, pero no es un valor básico para entender a groso modo los valores y comprender la información y mensaje de la visualización, puedes hacer que en móvil y tablet estas etiquetas extras no se muestren. 

En cualquier caso, para poder mantener el diseño simple deberás tener en cuenta la siguiente recomendación.

3. Define el objetivo de la visualización

Puede ser que el objetivo sea crear una visualización sobre el comportamiento de los clientes, medir el posicionamiento de unos productos en concreto en el mercado según los compradores, etc. Saber esta información será básico para poder determinar cuál es la información básica que debe estar siempre presente y el contexto de uso, y así poder determinar diferentes niveles de información, etc. 

Esta manera permite mantener simplicidad en pantallas pequeñas y dar información extra si se desea cuando el espacio lo requeiras, o jugar con filtros, etc. 

4. Evita las visualizaciones 3D 

Algunas representaciones pueden dar lugar a equivocaciones en la  interpretación de la información. Los gráficos 3d suelen reducir nuestra habilidad para entender los datos porque pueden provocar distorsiones en la imagen. De esta manera, nos hacen más difícil descifrar las relaciones espaciales entre los elementos.

Por todo ello, las visualizaciones 3D pueden alejarnos de la efectivad y belleza que buscamos en nuestras visualizaciones e infografías, tal y como hablamos en el episodio 34, «Cómo conseguir la belleza en las visualizaciones», y el episodio 35, «Espejito, espejito, cuál es la visualización más bella».

Como puedes ver, el 3D ya nos complica la vida lo suficiente en las visualizaciones. Si encima el usuario accede a la visualización desde un móvil con una pantalla tan reducida, lo más probable es que no lo vea mejor, si no que aún le cueste más descifrar esas relaciones y la información de la visualización.

5. Selección de la librería adecuada

Un punto muy importante en el diseño web, app y de visualización de datos es poder considerar la tecnología que habrá detrás.

No se trata de limitarse por qué se puede o no se puede hacer. Pero sí saber qué existe ya y nos puede servir en vez de intentar reinvenvar la rueda. 

Existen una gran cantidad de librerías de gráficos que ya lidian con el hecho de que los gráficos deben ser responsive. Conocer diferentes librerías y ver cuál responde mejor a las necesidades del proyecto puedes sernos muy útiles. 

En otras palabras, se trata de ver qué librería tienes los gráficos que nosotros queremos crear y cómo adapta los gráficos, qué opciones tiene, etc.

No tienes por qué saber programar tú con la librería en cuestión y crear tú mismo los gráficos, pero sí saber que existe y qué puedes pedir al equipo técnico que haga con ella. 

respecto a qué librerías existen y podemos usar, es un tema que puede extenderse mucho. Pero no os preocupéis porque lo trataremos en un futuro episodio.

Conclusiones

Como hemos visto, el contenido móvil se está haciendo cada vez más relevante. 

Los principios de responsive design se pueden aplicar de forma muy eficaz en la visualización responsive de datos. Y para ello te será muy útil la checklist que como os decía antes os presenté en el episodio 8. 

Sin embargo, para la visualización de datos deberemos sumar a esa checklist, los principios que hemos visto hoy. La verdad es que la adaptación de las visualizaciones a móvil no es una tarea fácil. Es especialmente complicado conseguir la interactividad requerida por los dispositivos móviles. 

Además, está el tema de las medidas y resoluciones tan variadas que hay entre los diferentes modelos de dispositivos móviles.  Para ello deberás crear diseños diferentes y considerar la librería de programación de gráficos que lo tenga en cuenta y que mejor se adapte a los requisitos del proyecto. 

Espero que hayas disfrutado y lo puedas poner todo ello en práctica muy pronto. 

Y ahora, sólo decirte que muchas gracias por escucharme. Si te ha gustado y te ha parecido interesante este podcast, puedes subscribirte a mi newsletter en maria-pascual.es para no perderte los próximos capítulos y poder acceder a los materiales exclusivos para los suscriptores. 

Si te ha gustado puedes también compartirlo en tus redes sociales para ayudar así a otros diseñadores a poder seguir con una sonrisa en su trabajo. 

Y con esto me despido. Te espero en el episodio de la semana que viene con más conceptos, herramientas y metodologías para negocios User Interface y data vizualization que te ayuden cada vez a empoderarte más y más, y llegar más y más lejos.