Informasjonstetthet i B2B SaaS: Designing av dashbord for avanserte brukere og nybegynnere
Hvordan designe tette B2B-dashbord og tabeller som eksperter kan skanne raskt uten å overvelde nye brukere: tetthetsmoduser, hierarki, progressiv avsløring.
Kjerne takeaway
Tette grensesnitt er ikke problemet; uorganiserte er. Eksperter vil ha mer informasjon per skjerm, så gi dem den med sterkt hierarki, konsistent justering og diagrammer som bruker posisjon og lengde. Beskytt nybegynnere med fornuftige standardinnstillinger og progressiv avsløring, og la folk velge et tetthetsnivå, slik designsystemer som Carbon gjør for bord.
Tetthet er en funksjon for eksperter
Folk som bruker et B2B-verktøy hele dagen, for eksempel analytikere, støtteagenter og operatører, foretrekker ofte å se mer på en gang, fordi det å rulle og bytte fane koster dem tid. Å gjøre alt romslig for å få et rent skjermbilde kan gjøre arbeidet deres tregere. Målet er informasjon som er tett, men lett å skanne.
La folk velge tetthet
Designsystemer bygger nå tetthet inn i komponenter. IBMs Carbon-datatabell tilbyr for eksempel fem radhøyder, fra ekstra liten (24px) for svært tette oppsett til ekstra stor (64px) for enklere skanning, med medium (40px) som standard.
- Tilby to eller tre tetthetsinnstillinger, husket per bruker.
- Endre avstand og radhøyde, ikke skriftstørrelse eller kontrast.
- Hold berøringsmål store nok på berøringsenheter uavhengig av tetthet.
Hierarki gjør tetthet lesbar
Nielsen Norman Group definerer dashboards som visualiseringer som gir umiddelbar informasjon folk raskt kan handle på, og anbefaler koding av mengder med lengde og 2D-posisjon, som folk leser raskest. I praksis: sett de få tallene som styrer beslutninger øverst, juster alt til et rutenett, bruk farger kun for mening (status, varsler), og høyrejuster tall slik at de kan sammenlignes.
Beskytt nybegynnere uten å bremse eksperter
Progressiv avsløring holder avanserte alternativer tilgjengelige, men ute av veien. Start nye brukere med en fokusert standardvisning, la dem legge til kolonner, filtre og widgets når de trenger dem, og lagre visninger slik at eksperter kan gå tilbake til det tette oppsettet sitt umiddelbart.
Bevegelse i tette grensesnitt
På datatunge skjermer bør bevegelse forklare endring, ikke dekorere: fremheve en verdi som nettopp er oppdatert, animere en rad til den nye sorterte posisjonen, eller vise en diagramovergang slik at folk kan følge hva som beveget seg. Hold det kort, og unngå kontinuerlig animasjon som konkurrerer med dataene.
Tast Principles å huske
- Eksperter drar nytte av tette skjermer; uorganisering er det virkelige problemet
- Tilby tetthetsinnstillinger ved å endre mellomrom, ikke typestørrelse eller kontrast
- Bruk lengde og plassering for tall; farge kun for mening
- Progressiv avsløring beskytter nybegynnere
- Bruk bevegelse for å forklare endringer i data, ikke for å dekorere
Ofte stilte spørsmål
Kilder
- Data table usage — Carbon Design System (IBM)
- Dashboards: Making Charts and Graphs Easier to Understand — Nielsen Norman Group
- Progressive Disclosure — Nielsen Norman Group