Gęstość informacji w B2B SaaS: projektowanie pulpitów nawigacyjnych dla zaawansowanych użytkowników i nowicjuszy
Jak zaprojektować gęste dashboardy i tabele B2B, które eksperci będą mogli szybko przeglądać, nie przytłaczając nowych użytkowników: tryby gęstości, hierarchia, stopniowe ujawnianie.
Rdzeń na wynos
Gęste interfejsy nie są problemem; są zdezorganizowane. Eksperci chcą więcej informacji na ekranie, więc zapewnij im silną hierarchię, spójne wyrównanie i wykresy wykorzystujące położenie i długość. Chroń nowicjuszy za pomocą rozsądnych ustawień domyślnych i stopniowego ujawniania informacji oraz pozwól ludziom wybierać poziom gęstości, tak jak robią to systemy projektowe takie jak Carbon w przypadku stołów.
Gęstość to cecha dla ekspertów
Osoby korzystające na co dzień z narzędzia B2B, np. analitycy, agenci wsparcia i operatorzy, często wolą widzieć więcej na raz, ponieważ przewijanie i przełączanie zakładek kosztuje ich czas. Przestrzenność wszystkiego w celu uzyskania czystego zrzutu ekranu może spowolnić ich pracę. Celem jest informacja, która jest gęsta, ale łatwa do przeskanowania.
Pozwólmy ludziom wybrać gęstość
Systemy projektowe budują teraz gęstość w komponentach. Na przykład tabela danych IBM Carbon oferuje pięć wysokości wierszy, od bardzo małej (24 piksele) w przypadku układów o dużej gęstości do bardzo dużej (64 piksele) dla łatwiejszego skanowania, przy czym domyślnie średnia (40 pikseli).
- Oferuj dwa lub trzy ustawienia gęstości, zapamiętywane dla każdego użytkownika.
- Zmień odstępy i wysokość wierszy, a nie rozmiar czcionki i kontrast.
- Utrzymuj wystarczająco duże obiekty dotykowe na urządzeniach dotykowych, niezależnie od ich gęstości.
Hierarchia sprawia, że gęstość jest czytelna
Nielsen Norman Group definiuje dashboardy jako wizualizacje, które dają szybki wgląd w informacje, na podstawie których ludzie mogą szybko działać, i zaleca kodowanie ilości na podstawie długości i pozycji 2D, które ludzie czytają najszybciej. W praktyce: umieść na górze kilka liczb, które decydują o podejmowaniu decyzji, wyrównaj wszystko do siatki, używaj kolorów tylko dla znaczenia (stan, alerty) i wyrównaj liczby do prawej, aby można je było porównać.
Chroń nowicjuszy, nie spowalniając ekspertów
Stopniowe ujawnianie zapewnia dostępność zaawansowanych opcji, ale na uboczu. Uruchom nowych użytkowników z ukierunkowanym widokiem domyślnym, pozwól im dodawać kolumny, filtry i widżety według potrzeb, a także zapisuj widoki, aby eksperci mogli natychmiast powrócić do gęstej konfiguracji.
Ruch w gęstych interfejsach
Na ekranach zawierających duże ilości danych ruch powinien wyjaśniać zmiany, a nie ozdabiać: wyróżniać właśnie zaktualizowaną wartość, animować wiersz do nowej posortowanej pozycji lub pokazywać przejście wykresu, aby ludzie mogli śledzić to, co się przesunęło. Niech będzie krótki i unikaj ciągłych animacji, które konkurują z danymi.
Klucz Principles do zapamiętania
- Eksperci korzystają z gęstych ekranów; dezorganizacja jest prawdziwym problemem
- Oferuj ustawienia gęstości, zmieniając odstępy, a nie rozmiar czcionki czy kontrast
- Użyj długości i pozycji dla liczb; kolor tylko dla znaczenia
- Stopniowe ujawnianie chroni nowicjuszy
- Używaj ruchu, aby wyjaśnić zmiany w danych, a nie do dekoracji
Często zadawane pytania
Źródła
- Data table usage — System projektowania węgla (IBM)
- Dashboards: Making Charts and Graphs Easier to Understand — Nielsen Norman Group
- Progressive Disclosure — Nielsen Norman Group