Informationstäthet i B2B SaaS: Designa instrumentpaneler för avancerade användare och nybörjare
Hur man designar täta B2B-instrumentpaneler och tabeller som experter kan skanna snabbt utan att överväldigande nya användare: täthetslägen, hierarki, progressiv avslöjande.
Core Takeaway
Täta gränssnitt är inte problemet; oorganiserade sådana är. Experter vill ha mer information per skärm, så ge dem den med stark hierarki, konsekvent justering och diagram som använder position och längd. Skydda nybörjare med förnuftiga standardinställningar och progressiv avslöjande, och låt människor välja en densitetsnivå, som designsystem som Carbon gör för bord.
Densitet är en funktion för experter
Människor som använder ett B2B-verktyg hela dagen, som analytiker, supportagenter och operatörer, föredrar ofta att se mer på en gång, eftersom det kostar tid att rulla och byta flik. Att göra allt rymligt för en ren skärmdump kan göra deras arbete långsammare. Målet är information som är tät men lätt att skanna.
Låt människor välja täthet
Designsystem bygger nu in densitet i komponenter. IBMs Carbon-datatabell erbjuder till exempel fem radhöjder, från extra liten (24px) för mycket täta layouter till extra stor (64px) för enklare skanning, med medium (40px) som standard.
- Erbjud två eller tre densitetsinställningar, ihågkomna per användare.
- Ändra avstånd och radhöjd, inte teckenstorlek eller kontrast.
- Håll beröringsobjekt tillräckligt stora på pekenheter oavsett densitet.
Hierarki gör densitet läsbar
Nielsen Norman Group definierar instrumentpaneler som visualiseringar som ger en snabb information som människor snabbt kan agera på, och rekommenderar kodning av kvantiteter med längd och 2D-position, som människor läser snabbast. I praktiken: placera de få siffrorna som driver beslut överst, justera allt till ett rutnät, använd färg endast för betydelse (status, varningar) och högerjustera siffror så att de kan jämföras.
Skydda nybörjare utan att sakta ner experter
Progressiv avslöjande håller avancerade alternativ tillgängliga men ur vägen. Starta nya användare med en fokuserad standardvy, låt dem lägga till kolumner, filter och widgets när de behöver dem och spara vyer så att experter kan återgå till sina täta inställningar direkt.
Rörelse i täta gränssnitt
På datatunga skärmar bör rörelse förklara förändring, inte dekorera: markera ett värde som just har uppdaterats, animera en rad till dess nya sorterade position eller visa en diagramövergång så att människor kan följa vad som rörde sig. Håll det kort och undvik kontinuerlig animering som konkurrerar med data.
Nyckel Principles att komma ihåg
- Experter drar nytta av täta skärmar; desorganisation är det verkliga problemet
- Erbjud densitetsinställningar genom att ändra mellanrum, inte typstorlek eller kontrast
- Använd längd och position för siffror; färg endast för mening
- Progressiv avslöjande skyddar nybörjare
- Använd rörelse för att förklara förändringar i data, inte för att dekorera
Vanliga frågor
Källor
- Data table usage — Carbon Design System (IBM)
- Dashboards: Making Charts and Graphs Easier to Understand — Nielsen Norman Group
- Progressive Disclosure — Nielsen Norman Group