Информационна плътност в B2B SaaS: Проектиране на табла за управление за опитни потребители и начинаещи
Как да проектираме плътни B2B табла и таблици, които експертите могат да сканират бързо, без да претоварват новите потребители: режими на плътност, йерархия, прогресивно разкриване.
Ядро за вкъщи
Плътните интерфейси не са проблемът; неорганизираните са. Експертите искат повече информация на екран, така че им я дайте със силна йерархия, последователно подравняване и диаграми, които използват позиция и дължина. Защитете начинаещите с разумни настройки по подразбиране и прогресивно разкриване и позволете на хората да избират ниво на плътност, както системите за проектиране като Carbon правят за таблици.
Плътността е функция за експерти
Хората, които използват B2B инструмент през целия ден, като анализатори, агенти по поддръжката и оператори, често предпочитат да виждат повече наведнъж, защото превъртането и превключването на раздели им коства време. Правенето на всичко просторно в името на чиста екранна снимка може да забави работата им. Целта е информация, която е плътна, но лесна за сканиране.
Нека хората избират плътността
Системите за проектиране сега вграждат плътност в компоненти. Таблицата с данни на IBM Carbon, например, предлага пет височини на редове, от изключително малки (24px) за много плътни оформления до изключително големи (64px) за по-лесно сканиране, със средна (40px) по подразбиране.
- Предлага две или три настройки за плътност, запомнени за всеки потребител.
- Променете разстоянието и височината на реда, а не размера на шрифта или контраста.
- Поддържайте сензорните обекти достатъчно големи на сензорни устройства, независимо от плътността.
Йерархията прави плътността четлива
Nielsen Norman Group дефинира таблата за управление като визуализации, които дават информация с един поглед, върху която хората могат да действат бързо, и препоръчва кодиране на количества с дължина и 2D позиция, които хората четат най-бързо. На практика: поставете малкото числа, които ръководят решенията, най-отгоре, подравнете всичко към мрежа, използвайте цвят само за значение (статус, предупреждения) и подравнете числата вдясно, за да могат да се сравняват.
Защитете новаците, без да забавяте експертите
Прогресивното разкриване поддържа разширените опции налични, но не пречи. Започнете нови потребители с фокусиран изглед по подразбиране, позволете им да добавят колони, филтри и приспособления, когато имат нужда от тях, и запазете изгледи, така че експертите да могат незабавно да се върнат към плътната си настройка.
Движение в плътни интерфейси
В екрани с много данни движението трябва да обяснява промяната, а не да украсява: маркирайте току-що актуализирана стойност, анимирайте ред в неговата нова сортирана позиция или покажете преход на диаграма, така че хората да могат да следват какво се е преместило. Бъдете кратки и избягвайте непрекъсната анимация, която се конкурира с данните.
Ключове Principle, които трябва да запомните
- Експертите се възползват от плътните екрани; дезорганизацията е истинският проблем
- Предлагайте настройки за плътност, като променяте разстоянието, а не размера на шрифта или контраста
- Използвайте дължина и позиция за числата; цвят само за смисъл
- Прогресивното разкриване защитава новаците
- Използвайте движение, за да обясните промените в данните, а не за украса
Често задавани въпроси
Източници
- Data table usage — Carbon Design System (IBM)
- Dashboards: Making Charts and Graphs Easier to Understand — Nielsen Norman Group
- Progressive Disclosure — Nielsen Norman Group