У деяких SaaS-продуктах даних небагато. В аналітичних платформах, торгових інструментах, дашбордах моніторингу та корпоративних адмін-панелях їх величезна кількість. Проєктування для них є окремою дисципліною, бо звичні поради (робіть простіше, додайте повітря, показуйте менше) не працюють, коли користувачу справді потрібна сотня показників на одному екрані.
Завдання тут: зробити реальну складність зручною. Ось патерни, які це забезпечують, з опорою на основи з нашого ширшого гайду Дизайн дашборду SaaS.
Головна суперечність
Кожен дашборд зі щільними даними живе з однією суперечністю: користувачу потрібно мати під рукою багато інформації, а мозок здатен обробити лише малу її частину за раз. Приберіть забагато, і досвідчені користувачі не зможуть виконувати свою роботу. Надайте всьому однакової ваги, і ніхто нічого не знайде. Кожен патерн нижче пропонує свій спосіб тримати щільність високою, а екран зручним для навігації.
Патерн 1: безжальна візуальна ієрархія
У щільному інтерфейсі ієрархія стає вашим найважливішим інструментом. Коли все має однакову візуальну вагу, щільність перетворюється на шум. Визначте, які дві-три речі найважливіші на цьому екрані, і виділіть їх розміром, накресленням, розташуванням чи кольором. Усе інше відступає у фон, доступний для сканування, і не змагається за увагу.
Коли на екрані важливе все, користувач не може знайти нічого.
Патерн 2: поступове розкриття
Не кожен показник має бути видимим постійно. Показуйте базовий рівень за замовчуванням і дайте користувачам заглиблюватися в деталі, коли це потрібно. Рядок показує зведення й розгортається в записи, що за ним стоять. Огляд показує загальну картину даних і кліком веде до конкретики.
Майстерність полягає у виборі цього рівня за замовчуванням: досить інформації, щоб бути корисним з першого погляду, і досить мало, щоб ніхто не потонув, ще нічого не клікнувши.
Патерн 3: свідома щільність
Найкращі щільні дашборди варіюють щільність навмисно. Деякі зони заповнені впритул, бо саме їх користувач сканує цілий день. Інші мають простір, щоб дати оку опору й відокремити одне завдання від наступного. Сприймайте повітря як інструмент групування й розділення. Однакову щільність на всьому екрані виснажливо читати.
Патерн 4: послідовні патерни, які легко засвоїти
У складному дашборді саме послідовність робить щільність засвоюваною. Якщо той самий тип даних завжди виглядає й поводиться однаково, користувачі один раз будують ментальну модель і застосовують її на кожному екрані. Якщо схожі речі в різних місцях виглядають по-різному, кожен екран вимагає нових зусиль. Когнітивний бік цього розібрано в статті Психологія UX.
Патерн 5: розумні налаштування за замовчуванням і збережені види
Різні користувачі дивляться на ті самі дані з різних причин. Фінансовий керівник, операційний менеджер і аналітик відкривають той самий дашборд із трьома різними питаннями. Дайте їм розумне налаштування за замовчуванням для типового сценарію й дозвольте зберігати види під власний робочий процес. Кожен бачить ту частину даних, яка важлива саме йому, і продукт може лишатися щільним, нікого не перевантажуючи.
Патерн 6: колір як сигнал
На насиченому екрані колір є дефіцитним ресурсом. Використаний для декору, він додає шуму. Використаний, щоб нести зміст (статус, аномалії, групування, зміни), він стає для ока найшвидшим способом знайти важливе. Тримайте палітру невеликою й давайте кожному кольору одну роль. Якщо барвисте все, нічого не вирізняється.
Де це перетинається з брендом
Дашборд зі щільними даними все одно лишається поверхнею бренду, і для багатьох SaaS-продуктів саме ним клієнти користуються найбільше. Добре спроєктований щільний дашборд показує клієнту, що компанія тримає власну складність під контролем, а саме такої довіри й потребує продукт із великою кількістю даних. Тому дизайн дашборду належить до тієї самої розмови, що й айдентика B2B SaaS. Коли в продукті важко орієнтуватися, відшліфований маркетинговий сайт мало що виправляє у враженні. Для дашборду, що розрісся шар за шаром, правильним першим кроком зазвичай є UX-аудит.
Часті запитання
Як спроєктувати дашборд із великою кількістю даних і не перевантажити користувачів?
За допомогою ієрархії й поступового розкриття. Зробіть дві-три найважливіші речі помітними, решту відсуньте на другий план і дайте користувачам заглиблюватися в деталі, коли це потрібно.
Хіба правило не в тому, щоб завжди спрощувати?
Для багатьох споживчих продуктів так. Професійні інструменти для роботи з даними влаштовані інакше: досвідченим користувачам потрібно бачити багато одночасно. Там мета в тому, щоб так структурувати складність, аби вона лишалася зручною.
Як використовувати колір у дашборді зі щільними даними?
Ощадливо й лише для передачі змісту: статус, аномалії, групування. Невелика палітра, де кожен колір має одну роль, допомагає оку знайти важливе.
Яка найбільша помилка в дизайні дашбордів зі щільними даними?
Надавати всьому однакової візуальної ваги. Рішення: визначити, що найважливіше на кожному екрані, і будувати дизайн навколо цього рішення.
Висновок
Дашборди зі щільними даними лишаються зручними завдяки безжальній ієрархії, поступовому розкриттю, навмисно різній щільності, послідовним патернам, збереженим видам і кольору, що несе зміст. Якщо зробити це добре, дашборд стає одним із найсильніших сигналів довіри, які має продукт. Якщо дашборд вашого продукту переріс свій перший дизайн, розкажіть нам, що у вас попереду.
