Mejores prácticas para diseñar visualizaciones

Despejar sus apps

El exceso de información en una app hace que sea difícil ver lo que es importante. El estilo moderno para una buena interfaz de usuario hoy es un estilo limpio, sencillo, con un diseño más plano. Un diseño simplificado guía de una forma sutil al lector y le permite mantener la concentración.

Menos es más

Los usuarios a menudo intentan incluir demasiada información en una app. Los gráficos de líneas con varias medidas pueden resultar confusos y difíciles de interpretar. Pruebe a crear varias visualizaciones más pequeñas para mostrar esta información en la página. Esto también permite al lector comparar y contrastar de manera eficaz las visualizaciones que están una al lado de la otra. También puede usar dimensiones y medidas alternativas para permitir al lector cambiar rápidamente entre medidas sin sobrecargar una visualización. Para más información, vea Cambiar los datos de una visualización.

Existen varias maneras de mejorar la estética y la funcionalidad de su app. Dependiendo de su audiencia y de los datos que desee resaltar, la forma en que diseñe su visualización puede tener un gran impacto en la interpretación de los datos por parte del lector.

Conozca sus límites

Los consumidores de sus visualizaciones pueden estar trabajando con un espacio de pantalla o resolución limitados. Qlik Sense utiliza un diseño sensible (responsivo o adaptable) para abordar estas limitaciones. No obstante, si el espacio de la pantalla o la resolución son demasiado limitados, se requieren ciertas adaptaciones de diseño. Estas pueden incluir:

• Un subconjunto de datos que se muestran en gráficos de barras y gráficos de líneas. Cuando el número de valores de dimensión supera el ancho de visualización, aparece un pequeño gráfico con una barra de desplazamiento.
• Menús contraídos para seleccionar filtros de datos. Cuando el número de valores de dimensión supera el espacio disponible para el panel de filtrado, el menú se contrae. Los consumidores de apps deben hacer clic en el nombre de la dimensión en el título del panel de filtrado para abrir un nuevo panel. A continuación ya pueden hacer sus selecciones en el nuevo panel. Además, cuando hay un espacio limitado, los nombres de dimensión pueden aparecer como puntos suspensivos en los títulos del panel de filtrado. Los consumidores de apps deben hacer clic en las elipses para ver el nombre del panel de filtrado.
• Nombres truncados en las leyendas de los gráficos. Los nombres que son demasiado largos para el espacio disponible para las dimensiones y medidas se truncan. Se añaden puntos suspensivos al final del nombre truncado. Los consumidores de la app pueden colocar el puntero del ratón sobre el nombre truncado para verlo completo.
• Faltan leyendas, etiquetas y títulos.

Los consumidores de apps pueden expandir las visualizaciones para abordar algunos de estos problemas. Sin embargo, le recomendamos que pruebe sus apps en dispositivos en los que puedan consumirse las apps. También puede usar varias herramientas para probarlas, como por ejemplo el modo de diseño responsivo (sensible o adaptable) en Firefox (Ctrl + Mayús + M). Si lo necesita puede mover las visualizaciones a nuevas hojas, reducir la cantidad de datos que se muestran en las visualizaciones, etc.

Accesibilidad del color

El espectro de colores es más reducido para las personas con discapacidad visual basada en el color. Pueden interpretar su visualización de forma diferente a lo que se pretendía.

Por ejemplo, algunas personas ven los colores rojo y verde más bien como amarillo o marrón. Este tipo de deficiencia en la percepción de los colores rojo-verde es la más común. Esto es digno de mención porque el rojo a menudo tiene una connotación negativa en las visualizaciones de datos, especialmente en los gráficos de tipo financiero.

Un status de KPI rojo o verde podría resultar confuso. Puede utilizar formas con colores como indicadores de rendimiento para hacer que sus diseños sean más accesibles. Por ejemplo, utilice un círculo rojo vacío para denotar algo malo, un círculo completo verde para algo bueno y un triángulo como símbolo de advertencia que solo aparezca cuando el estado de un KPI esté en un nivel inaceptable.

Líneas, barras y secciones de un gráfico de tarta pueden ser difíciles de distinguir cuando los colores están distorsionados.

Para más información, vea Cambiar el aspecto de una visualización.

Colocación de filtros e iconos

Los filtros e iconos son una parte esencial de la visualización de datos, pero puede ser difícil saber dónde colocarlos o cómo ordenarlos. A menudo puede anticipar dónde comenzará a leer el usuario en función de unos cuantos principios de diseño bien establecidos.

Colocación a la izquierda

Varios sitios web populares utilizan fichas y filtros de navegación en el lado izquierdo. Esto se debe a que muchos idiomas se leen de izquierda a derecha. Como resultado, el lado izquierdo de la pantalla es donde estos lectores miran con más frecuencia. Los usuarios que están buscando contenido tienden a mirar al lado izquierdo de la pantalla. Cuanto más a la derecha estén los objetos, menos los mirarán los usuarios. Si todos los filtros y los iconos se apilan verticalmente a la izquierda, se les da la misma relevancia.

Como alternativa, en aquellos lenguajes en los que el texto se escribe de derecha a izquierda, lo contrario también es cierto. Esto debe tenerse en cuenta si sus apps se traducen a estos idiomas.

Colocación en la parte superior

Otra opción de ubicación común para iconos y filtros se encuentra en la parte superior de una app. Al no colocar filtros o iconos a la izquierda, ofrece más espacio para visualizaciones más grandes con menús que distraen. Cuando los filtros e iconos se colocan por encima de las visualizaciones, también se los ve como algo separado del contenido a continuación. Esto también puede ayudar a mostrar al lector que estamos priorizando los filtros o iconos. Si todos sus filtros e iconos están uno al lado del otro en la parte superior, el que está más a la izquierda tiene más peso y el lector lo prioriza.

Para más información, vea Estructurar una app con las hojas.

Jerarquía de información

A veces deseamos que el lector dé prioridad a determinadas visualizaciones sobre otras. Puede mostrar una jerarquía de información utilizando algunas prácticas de diseño clave. Por ejemplo, puede utilizar diferentes tamaños para destacar algunas visualizaciones. La información de mayor tamaño se percibe como más importante, aumentando el tamaño de la letra o el gráfico puede mostrar al lector dónde debe mirar primero.

La colocación y el orden de los contenidos en la página también desempeña un papel importante en la jerarquía de la información. La información en la parte superior de una página se percibe como más importante que la información de la parte inferior de la página, ya que se lee primero. La información situada en la primera página se percibe como más importante que la información de la última página.

Añadir contexto a los KPIs

Los KPI son una excelente forma de comunicar algunas de las grandes ideas en el interior de su app. No obstante, los valores de KPI no proporcionan ningún contexto a los números y cálculos que se ofrecen. Una luz verde junto a un KPI no indica al lector si el objetivo apenas se logró o si lo superó con creces.

Para ayudar a portar contexto a sus KPIs, incluya información de respaldo junto al valor en testo más pequeño. Por ejemplo, puede comparar el valor del KPI actual con el mismo valor del año anterior. También puede agregar un pequeño gráfico de barras sin ejes ni valores para proporcionar información sobre la tendencia actual.

Evite los errores comunes de una pobre visualización

Para experimentar los beneficios de una visualización debe evitar los errores más comunes. Son los siguientes:

Abuso del color

No añada demasiados colores. Tenga en cuenta que un mal uso del color puede confundir en lugar de aclarar. Además, el mismo color puede significar cosas diferentes en distintas partes del mundo.

Un mal uso de los gráficos de tarta

Evite colocar un gráfico de tarta junto a otro para comparar. Trate de no incluir demasiada información en ellos.

Desorden visual

Demasiada información obstaculiza el fin que perseguimos de la claridad. Utilice un máximo de nueve KPI y elimine todo exceso de información.

Dé prioridad al estilo sobre el contenido

Una visualización bonita no es necesariamente la más eficaz. Use las mejores prácticas de diseño en todo momento.

Unos datos deficientes

Localice y corrija errores en los datos antes de presentarlos. No permita que su visualización cargue con la culpa de una mala información.