Дизайн дашборду: метрики, графіки й ієрархія

Крок 1

Для кого дашборд і яке рішення він підтримує

Nielsen Norman Group визначає дашборд як набір візуалізацій даних на одному екрані, які дають інформацію з першого погляду, щоб людина могла швидко діяти. Метафора — приладова панель автомобіля: чи не перевищую я швидкість, чи не закінчується пальне. NN/g розрізняє два типи:

• •операційні — для задач, де важить час: моніторинг серверів, дзвінки в підтримку. Дані постійно оновлюються, а відхилення треба помітити одразу;
• •аналітичні — для аналізу й рішень без такого поспіху: наприклад, дашборд продажів, що оновлюється раз на день;
• •перед малюванням запишіть: хто дивиться на дашборд, як часто, і на які ключові питання він має відповісти («Чи виросли продажі цього тижня?», «Які замовлення застрягли?»).

💡 Якщо показник не відповідає на жодне з цих питань, йому, найімовірніше, не місце на головному екрані. Його можна винести в деталізацію чи звіт.

Крок 2

Ієрархія: головне — вгорі й великим

Дашборд читають за секунди, тому порядок важить більше, ніж у будь-якому іншому інтерфейсі. Розкладіть показники за важливістю:

• •вгорі — кілька ключових чисел картками: назва показника, значення, порівняння з минулим періодом або ціллю. Число без порівняння мало що каже;
• •нижче — графіки, що пояснюють зміни ключових чисел: динаміка, розподіл, порівняння;
• •ще нижче або на окремому екрані — таблиці з деталями;
• •групуйте пов'язане: NN/g нагадує принцип гештальту — елементи, близькі за розташуванням або схожі за кольором і формою, сприймаються як пов'язані.

💡 Однакові показники мають однаковий формат усюди: ті самі одиниці, кількість знаків після коми, підписи періодів. Інакше людина витрачає час на «перекладання».

Крок 3

Оберіть правильний графік

NN/g пояснює: люди дуже точно порівнюють довжину й положення на площині, тому стовпчикові діаграми, лінійні графіки й діаграми розсіювання зчитуються найшвидше. Площу й кут ми помічаємо, але погано оцінюємо, наскільки одне більше за інше.

• •порівняння категорій — стовпчики, бажано впорядковані за значенням;
• •зміна в часі — лінійний графік;
• •кругові й «бублики» NN/g радить здебільшого уникати: вони годяться хіба що показати, що одна частка значно переважає решту;
• •«спідометри» займають багато місця й читаються гірше за лінійні шкали, а 3D-графіки спотворюють значення;
• •колір використовуйте для категорій, а не для величин: люди не сприймають кольори як упорядковану шкалу. І колір не має бути єдиним носієм змісту — так вимагає WCAG, тож додавайте підписи, форми чи позначки.

Крок 4

Таблиці, фільтри й стани

Графіки дають загальну картину, а працюють люди часто з таблицями. NN/g виділяє чотири основні задачі з таблицями: знайти записи за критеріями, порівняти дані, переглянути чи змінити один рядок і виконати дію над записами. Продумайте кожну:

• •фільтри й пошук над таблицею, з видимим списком активних фільтрів і способом швидко їх скинути;
• •сортування за колонками, вирівнювання чисел праворуч, щоб їх легше порівнювати;
• •завантаження: скелетон або індикатор. NN/g окремо застерігає від повідомлення «Немає записів» під час завантаження, яке потім змінюється даними, — це вводить в оману;
• •порожньо: «За обраний період даних немає» і підказка, що змінити, замість порожньої рамки;
• •помилка: що не завантажилося і як повторити. Перша евристика Нільсена — видимість стану системи.

Крок 5

Реалістичні дані й перевірка

Дашборд з ідеальними круглими числами виглядає чудово до першої зустрічі з реальністю. Наповнюйте макет правдоподібними даними і перевіряйте крайні випадки:

• •довгі назви, семизначні суми, нуль, від'ємні значення, дуже короткий і дуже довгий період;
• •графік, де одна категорія в десятки разів більша за інші;
• •лінії й елементи графіків мають контрастувати з фоном: для важливих графічних елементів WCAG задає щонайменше 3:1;
• •перевірка на людині: покажіть дашборд і спитайте «Чи все гаразд із продажами цього тижня?» — і засічіть, скільки часу знадобилося на відповідь.

💡 Вправа: спроєктуйте дашборд для вигаданої кав'ярні — виторг за день, кількість замовлень, популярні напої, години пік. Дані вигадайте самі й позначте це в кейсі. Покажіть результат у спільноті й попросіть людей відповісти на ваші ключові питання лише за дашбордом.