П’ять китів створення ефективної інформаційної панелі

Перше знайомство з будь-якою системою відбувається через панель інструментів . Тому переоцінити важливість її дизайну дуже складно. Адже з побаченої картинки користувач робить відразу кілька висновків :

– Наскільки інформативна подача ;

Як швидко він зможе досягти потрібних цілей ;

– Чи під силу йому розібратися з усіма даними.

Дашборд по суті має дати візуальний огляд всього продукту , надавши анонс усіх можливих його функцій .

Маючи досвід UX/UI дизайну більше 13 років , KLONA готова поділитися своїми секретами та правилами створення ідеального dаshboаrd.

Визначення типу дашборду

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

Залежно від поставлених завдань розрізняють три типи :

Аналітичні панелі

Допомагають відповісти на запитання: Чому так сталося? і « Чого чекати у різних випадках?». Їх характерні великі обсяги даних і можливість виявлення тенденцій . Складаються із складних таблиць, діаграм, графіків.

Прекрасно підходять для відстеження змін певного значення під час тривалого періоду , а також прогнозування ситуації в майбутньому.

Рішення для керівників та аналітичних відділів .

Мета: дозволить побачити поточні проблеми , визначити тенденції та зрозуміти завдання покращення ключових процесів.

Приклад аналітичної панелі
Приклад аналітичної панелі

Оперативні дашборди

Дають картинку стану процесу у реальному часі . Дозволяють моніторити поточні дані . Зазвичай включають прості графіки та мітки.

Варіант для менеджерів, управління технікою, ігор та програм онлайн.

Мета: оцінка щоденних показників .

Стратегічні приладові дошки

Відстежують ключові показники та впливають на прийняття довгострокових рішень . Такі дашборди часто мають часові рамки – місячні, квартальні, річні шкали продуктивності.

Вибір для керівників .

Мета: моніторинг ключових показників роботи , відстеження продуктивності за зазначений період , аналіз ефективності .

Приклад стратегічної панелі
Приклад стратегічної панелі

Вивчення аудиторії

Визначити користувачів допоможе й попередній крок. Але це у глобальному розумінні.

Більш конкретно перед розробкою дизайну дашборду потрібно дізнатися всю інформацію про аудиторію , – хто безпосередньо працюватиме з усіма показниками.

І в цьому випадку поверхневим аналізом не обійтись. Потрібно добре вивчити наступні аспекти :

хто працюватиме з панеллю?

яку інформацію будуть використовувати для різних цілей та завдань;

який є досвід взаємодії з метриками та даними;

які є пріоритети у візуалі та кольорі.

Вивчення цільової аудиторії

Головне – зрозуміти мету пошуку користувача та вивчити його шлях до неї . Це і є основний орієнтир у всій схемі проектування UX/UI дизайну dashboаrd.

Аналіз цілей та очікувань

Ефективні панелі інформації – це комплексний збір даних для ухвалення обґрунтованого рішення . Тому для розробки дизайну приладової дошки необхідно розуміти, які рішення повинні в результаті прийматися і які дані повинні бути в метриці.

Опитування аудиторії , яка працюватиме з установкою, покаже існуючий досвід та допоможе впровадити його в нові метрики та графіки дашборду. Тільки так можна визначити спектр потрібних даних та задати їх динамічність.

Вибір виду відображення даних

Елементи дизайну панелі приладів

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

– Для акцентування уваги на найважливішому показнику краще застосовувати діаграму з одним значенням ;

– Для відображення динаміки його зміни підійде діаграма з індикатором на одне значення;

– провести порівняння фактичних даних з метою дозволити кульову діаграму;

– продемонструвати кілька наборів даних варто у табличному форматі , при цьому кількість рядків не повинна перевищувати 10 ;

безперервні дані краще моніторити за допомогою лінійної діаграми ;

діаграма стовпчаста покаже зміни в часі для даних з однієї категорії ; – кругова діаграма найбільш швидко і зрозуміло передає картинку порівняння секторів . Інформативнішою їй допоможе бути деталізація даних сегмента при наведенні курсору або активації певного фрагмента;

-Оригінальніше виглядає точкова діаграма для порівняння змінних , але при цьому розуміння даних займе більше часу і вимагатиме більше зусиль .

При виборі будь-якого типу метрики варто відштовхуватися від головних вимог до дизайну панелі приладів – вона повинна бути інформативною, зрозумілою і корисною користувачеві.

Важливі поради щодо розробки корисної інформаційної панелі можна переглянути у відео:

Організація приладової панелі

Завершальним етапом у розробці дизайну дашборду є створення проекту (малюнок, прототипу) на основі певних цілей та підібраних графічних елементів.

Для початку варто створити саму структуру панелі , використовуючи сітку, в яку і будуть вноситися згруповані метрики.

Існують спеціальні правила оформлення дашборду:

важливі параметри повинні розташовуватись у верхньому лівому кутку (за правилом читання);

пов’язані індикатори обов’язково групуються разом , запобігаючи тривалим пошукам користувачем потрібного наступного показника;

для поділу груп потрібно використовувати порожній простір , що також додасть дизайну дошки легкості та зручності;

для кращого розуміння та сприйняття даних можна повторно застосовувати окремі елементи дизайну діаграм, досягаючи цілісності та однаковості подачі.

Диявол у деталях – основні правила розробки дизайну дашборду

Створення панелі приладів – це завдання зробити показники максимально зрозумілими , що забезпечить ефективність досягнення цілей. А ось для цього потрібно приділити максимальну увагу всім аспектам та деталям , гармонійно поєднуючи простоту сприйняття та стильність подачі.

Зручно, як тільки можливо

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

Порівнювані елементи повинні візуально групуватися ;

пов’язана інформація розташовується в безпосередній близькості ;

візуальний баланс досягається шляхом вирівнювання елементів дашборду, поданням у вигляді інформаційної сітки;

розділити різні аспекти моніторингу дозволить додатковий порожній простір між секціями, групами;

швидко прочитати дані без перевантаження візуалу можна за допомогою відомих скорочень або інформативних міток .

Ускладнювати просто, спрощувати складно

Найбільш зрозуміла панель повинна забезпечувати простоту подачі максимально складних показників. Іншими словами, потрібно уявити складні поняття у простій і зрозумілій формі:

обмежте обсяг інформації , не перевантажуючи сприйняття;

використовуйте менше стовпчиків , складних для прочитання, вибираючи в якості альтернативи яскраві та зрозумілі акцентні діаграми та графіки ;

– залиште лише потрібні показники , погодивши їх кількість з користувачами;

– відображайте числа у зручному форматі , округляючи їх по можливості і не плутаючи користувача довгим хвостом, що не несе важливої інформації.

Пріоритети насамперед

Просте подання складних даних на інформаційній панелі

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

Визначте головні показники та створіть своєрідну ієрархію подачі інформації на панелі:

на першому місці розміщуються найважливіші дані;

на другому йдуть тенденції , що розкривають попередні показники;

Далі – інформація, яка допомагає розібратися в проблемі.

Важливі елементи потрібно візуально виділити, зробивши це за допомогою розміру шрифту, кольору, анімації і т.д.

Розмір та форма має значення

Йдеться про такий елемент дизайну як шрифти та мітки . Текст та підписи даних повинні добре читатися та гармонійно вписуватись у малюнок діаграм.

Виберіть оптимальний шрифт , використовуючи для виділення ваги шрифту, заголовки. Можна взяти кілька стилів, застосовуючи їх до різних груп.

Правильно розміщуйте легенду графічного об’єкта : на великому екрані – під діаграмою, мініатюрному пристрої – над діаграмою. Головний критерій – легенда має бути у полі зору під час роботи з даними.

Для зручності читання графіків та діаграм також використовуються мітки . При цьому їхнє написання має бути лише горизонтальним – максимально зручним для користувача.

У разі використання складних метрик краще доповнити їх формулами чи описами, що полегшить інтерпретацію та зробить сприйняття комфортнішим.

Палітра сприйняття

Колір – це та область, де наш розум стикається з Всесвітом. Пауль Клеє

Використання кольору в оформленні панелі приладів

За допомогою кольору можна надати дизайну дашборду характеру , зробивши його унікальним і ефективним. Для цього варто ретельно продумати та вибрати колірну схему, використовуючи не більше шести відтінків . Така палітра повинна використовуватися для всіх метрик на дошці , що допоможе швидше орієнтуватися в показниках.

Для створення розмаїття чи виділення основних елементів застосовуються колірні акценти , залишаючи для другорядних даних нейтральні тони.

Для передачі динаміки безперервних даних можна використовувати один колір, граючи з його насиченістю.

ВАЖЛИВО! Не варто скидати з рахунків існуючі стійкі асоціації , перекручування яких може завести користувача в оману ( червоний попереджає про проблему , зелений показує позитивний результат і т.д.).

Побажання на шляху до ідеальної панелі

Створивши ефективну панель інформації (навіть з урахуванням усіх рекомендацій), слід постійно відстежувати її користь для цільової аудиторії. Дуже часто дизайн може вимагати змін. Щоб бути впевненим у бездоганній роботі програми, потрібно періодично проводити опитування користувачів , аналізувати зворотний зв’язок , тестувати функціональність приладу. Завжди варто прагнути до покращення та розвитку, завжди є, куди рости .

І на завершення, якщо ви сумніваєтеся в успішному власному шляху до ідеального дашборду, ви завжди можете розраховувати на команду KLONA, в активі якої сотні реалізованих проектів з розробки UX/UI design dashboard.

Зв’яжіться з нами , і наші фахівці відобразять ваші складні показники у зручному та корисному форматі.

Ми – не найкращі, ми просто робимо КРАЩЕ!