Densidad de información en B2B SaaS: diseño de paneles para usuarios avanzados y principiantes
Cómo diseñar paneles y tablas B2B densos que los expertos puedan escanear rápidamente sin abrumar a los nuevos usuarios: modos de densidad, jerarquía, divulgación progresiva.
Idea clave
Las interfaces densas no son el problema; los desorganizados lo son. Los expertos quieren más información por pantalla, así que proporcióneles una jerarquía sólida, una alineación consistente y gráficos que utilicen la posición y la longitud. Proteja a los principiantes con valores predeterminados sensatos y divulgación progresiva, y permita que las personas elijan un nivel de densidad, como lo hacen los sistemas de diseño como Carbon para las mesas.
La densidad es una característica para expertos.
Las personas que utilizan una herramienta B2B todo el día, como analistas, agentes de soporte y operadores, a menudo prefieren ver más a la vez, porque desplazarse y cambiar de pestaña les cuesta tiempo. Hacer que todo sea espacioso para obtener una captura de pantalla limpia puede hacer que su trabajo sea más lento. El objetivo es obtener información densa pero fácil de escanear.
Deja que la gente elija la densidad
Los sistemas de diseño ahora incorporan densidad a los componentes. La tabla de datos Carbon de IBM, por ejemplo, ofrece cinco alturas de fila, desde extra pequeña (24 px) para diseños muy densos hasta extra grande (64 px) para un escaneo más fácil, con mediana (40 px) como opción predeterminada.
- Ofrezca dos o tres configuraciones de densidad, recordadas por usuario.
- Cambie el espaciado y la altura de las filas, no el tamaño de fuente ni el contraste.
- Mantenga objetivos táctiles lo suficientemente grandes en dispositivos táctiles independientemente de la densidad.
La jerarquía hace que la densidad sea legible
Nielsen Norman Group define los paneles como visualizaciones que brindan información de un vistazo sobre la que las personas pueden actuar rápidamente y recomienda codificar las cantidades con longitud y posición 2D, que las personas leen más rápido. En la práctica: coloque los pocos números que impulsan las decisiones en la parte superior, alinee todo en una cuadrícula, use el color solo para el significado (estado, alertas) y alinee los números a la derecha para que puedan compararse.
Proteja a los principiantes sin ralentizar a los expertos
La divulgación progresiva mantiene las opciones avanzadas disponibles pero fuera del camino. Inicie a los nuevos usuarios con una vista predeterminada enfocada, permítales agregar columnas, filtros y widgets cuando los necesiten, y guarde vistas para que los expertos puedan regresar a su configuración densa al instante.
Movimiento en interfaces densas
En pantallas con muchos datos, el movimiento debe explicar el cambio, no decorar: resaltar un valor que acaba de actualizarse, animar una fila a su nueva posición ordenada o mostrar una transición en el gráfico para que las personas puedan seguir lo que se movió. Sea breve y evite animaciones continuas que compitan con los datos.
Principios clave para recordar
- Los expertos se benefician de las pantallas densas; La desorganización es el verdadero problema.
- Ofrezca configuraciones de densidad cambiando el espaciado, no el tamaño de letra ni el contraste.
- Utilice longitud y posición para los números; color solo por significado
- La divulgación progresiva protege a los novatos
- Utilice el movimiento para explicar cambios en los datos, no para decorar
Preguntas frecuentes
Fuentes
- Data table usage — Sistema de diseño de carbono (IBM)
- Dashboards: Making Charts and Graphs Easier to Understand — Nielsen Norman Group
- Progressive Disclosure — Nielsen Norman Group