Informatiedichtheid in B2B SaaS: dashboards ontwerpen voor hoofdgebruikers en beginners
Hoe u compacte B2B-dashboards en -tabellen ontwerpt die experts snel kunnen scannen zonder nieuwe gebruikers te overweldigen: dichtheidsmodi, hiërarchie, progressieve openbaarmaking.
Kern afhaalmaaltijd
Dichte interfaces zijn niet het probleem; ongeorganiseerde zijn. Experts willen meer informatie per scherm, dus geef ze die met een sterke hiërarchie, consistente uitlijning en grafieken die gebruik maken van positie en lengte. Bescherm beginners met verstandige standaardinstellingen en progressieve openbaarmaking, en laat mensen een dichtheidsniveau kiezen, zoals ontwerpsystemen zoals Carbon doen voor tafels.
Dichtheid is een functie voor experts
Mensen die de hele dag een B2B-tool gebruiken, zoals analisten, supportmedewerkers en operators, zien vaak liever meer in één keer, omdat scrollen en wisselen tussen tabbladen hen tijd kost. Alles ruim maken omwille van een schoon screenshot kan hun werk langzamer maken. Het doel is informatie die compact is, maar gemakkelijk te scannen.
Laat mensen kiezen voor dichtheid
Ontwerpsystemen bouwen nu dichtheid in componenten. IBM's Carbon-gegevenstabel biedt bijvoorbeeld vijf rijhoogten, van extra klein (24px) voor zeer compacte lay-outs tot extra groot (64px) voor eenvoudiger scannen, met medium (40px) als standaard.
- Bied twee of drie dichtheidsinstellingen aan, onthouden per gebruiker.
- Wijzig de afstand en rijhoogte, niet de lettergrootte of het contrast.
- Houd aanraakdoelen groot genoeg op aanraakapparaten, ongeacht de dichtheid.
Hiërarchie maakt dichtheid leesbaar
Nielsen Norman Group definieert dashboards als visualisaties die in één oogopslag informatie geven waar mensen snel op kunnen reageren, en beveelt aan hoeveelheden te coderen met lengte en 2D-positie, die mensen het snelst lezen. In de praktijk: zet de paar cijfers die beslissingen aansturen bovenaan, lijn alles uit in een raster, gebruik kleur alleen voor de betekenis (status, waarschuwingen) en lijn de cijfers rechts uit zodat ze kunnen worden vergeleken.
Bescherm beginners zonder experts te vertragen
Progressieve openbaarmaking houdt geavanceerde opties beschikbaar, maar uit de weg. Start nieuwe gebruikers met een gerichte standaardweergave, laat ze kolommen, filters en widgets toevoegen wanneer ze die nodig hebben, en sla weergaven op zodat experts onmiddellijk kunnen terugkeren naar hun compacte configuratie.
Beweging in dichte grensvlakken
Op schermen met veel gegevens moet beweging de verandering verklaren en niet verfraaien: markeer een waarde die zojuist is bijgewerkt, animeer een rij naar de nieuwe gesorteerde positie of toon een diagramovergang zodat mensen kunnen volgen wat er beweegt. Houd het kort en vermijd continue animaties die met de gegevens concurreren.
Toets Principles in om te onthouden
- Experts profiteren van dichte schermen; desorganisatie is het echte probleem
- Bied dichtheidsinstellingen aan door de afstand te wijzigen, niet de lettergrootte of het contrast
- Gebruik lengte en positie voor cijfers; kleur alleen voor betekenis
- Progressieve openbaarmaking beschermt nieuwelingen
- Gebruik beweging om veranderingen in gegevens uit te leggen, niet om te versieren
Veelgestelde vragen
Bronnen
- Data table usage — Koolstofontwerpsysteem (IBM)
- Dashboards: Making Charts and Graphs Easier to Understand — Nielsen Norman Group
- Progressive Disclosure — Nielsen Norman Group