Cómo diseñar con alta densidad de información

Cuando estamos diseñando un nuevo producto muchas veces es inevitablemente complejo y le tenemos que añadir muchas funcionalidades. Esto puede resultar en que nos alejemos del clásico método KISS (keep it simple and stupid), pero no podemos eliminar dichas funcionalidades y utilidades para simplificarlo, sino que tenemos que buscar otras soluciones.

Tenemos que conseguir equilibrar toda la información que necesitamos integrar en el producto con una interfaz de usuario suficientemente simple como para que sea fácil de utilizar. 

Primeros pasos antes de empezar a diseñar con alta densidad de información

Antes de comenzar la tarea de diseño hay ciertos puntos que tenemos que tener muy claros para encontrar la mejor forma de presentar la información. Tenemos que conocer:

• Los objetivos de los usuarios. Como en cualquier otro proceso de diseño UX, tenemos que entender cuáles son las necesidades de los usuarios. Debemos ordenar las prioridades de los usuarios para poder ordenar la información de la forma y que sea entendible.
• Qué datos tenemos que incluir. También tenemos que saber la cantidad exacta de datos con los que estamos trabajando para poder decidir cuál es la mejor forma de plantear su visualización. 
• Cuál es el objetivo del diseño. Para que los diseños sean eficientes y eficaces y podamos diseñar la arquitectura de la información, tenemos que saber cuáles son los objetivos del diseño.
• Cómo se va a implementar el producto. También tenemos que saber cómo se va a implementar el producto para poder incorporar funciones en el futuro, asegurando la escalabilidad.

Patrones de UI que podemos utilizar con alta densidad de información

No existe una fórmula mágica para presentar los diseños con alta densidad de información, pero hemos recopilado este listado con elementos que podemos utilizar para diseñar la interfaz de usuario.

• Acordeones
• Menús desplegables
• Pestañas
• Contenido truncado

Los acordeones acortan la longitud de las páginas reduciendo el desplazamiento. Si utilizamos esta técnica tenemos que pensar cuidadosamente cuáles van a ser los encabezados del acordeón, ya que cumplen el papel de la arquitectura de la información de la página y permite a los usuarios crear un esquema de lo que están viendo.

Sin embargo, hay que tener en cuenta que estamos obligando a los usuarios a hacer clic en los encabezados, lo que aumenta el coste de interacción. Esto puede suponer un problema si los usuarios consideran que el lugar en el que han clicado no les ofrece información relevante para lo que estaban buscando.

Otra forma habitual para agrupar la información es utilizar los menús desplegables, ya que son un patrón habitual y conocido. De esta forma podemos ocultar las acciones o las secciones que se utilizan con menos frecuencia, lo que reduce la carga cognitiva de las acciones principales.

Si el volumen de información es muy grande también podemos utilizar mega menús, que son una versión avanzada con elecciones más específicas. 

También podemos utilizar pestañas para separar significativamente el contenido de diferentes secciones. Las pestañas pueden ser horizontales o verticales, dependiendo de la cantidad de información necesaria. Si hay muchas secciones la opción más recomendable es la de las pestañas verticales.

Si el problema es que tenemos mucho texto podemos utilizar la técnica del contenido truncado con un botón de «leer más». Esta opción es adecuada para presentar aquella información que normalmente no se lee o simplemente nos encontramos en una sección de vistas previas.

Para que cualquiera de estas opciones funcione tenemos que asegurarnos de que los encabezados sean cortos y claros, además de que estén ordenados correctamente según su importancia. Para asegurar una buena experiencia de usuario y el éxito de los proyectos tendremos que conocer perfectamente para qué y por qué estamos diseñando para encontrar la mejor opción.