Дизайн дашбордів та візуалізація даних. Наш досвід в LeverageUX: UX/UI дизайн
Одним з основних напрямів діяльності LeverageUX є дизайн дашбордів та візуалізація даних. Працюючи з даними, завжди важливо враховувати всі фактори, які можуть вплинути на користувацький досвід. У цій статті я хотів би поділитися з вами нашим підходом щодо UX-дизайну дашбордів та візуалізації даних.

Дослідження та стратегія при створенні дашбордів
Спочатку нам потрібно зрозуміти, для чого і для кого ми створюємо дашборд. Критично важливо розуміти потреби наших клієнтів (кінцевих користувачів), зрозуміти проблеми, з якими вони стикаються зараз і які вони хочуть вирішити, а також виявити перешкоди та виклики, з якими вони стикаються при їх вирішенні. Крім того, обов’язково потрібно враховувати бізнес-цілі та цілі, які потрібні для розвитку продукту.
Таким чином ми переконаємося, що наш підхід узгоджений із загальною стратегією бізнесу та продукту. Наша задача спонукати користувача приймати ті рішення та виконувати ті дії, які будуть максимально ефективними для вирішення його власних потреб та досягнення бізнес-цілей на основі інформації, яку він отримує з дашборду.
Визначення продукту
Підписуйтеся на наші соцмережі
Наступним кроком є визначення продукту та планування того, як користувач буде з ним взаємодіяти. На основі отриманої інформації нам потрібно створити правильну інформаційну архітектуру (структуру), щоб переконатися, що користувач буде переглядати дашборд, дотримуючись необхідних пріоритетів дій крок за кроком. Для досягнення цієї мети, ми дотримуємось наступних кроків:
-
1
Зберігаємо інформаційну архітектуру (структуру) зрозумілою та простою для сприйняття та чітко показуємо пріоритети на сторінці. Для цього “граємося” зі шрифтами, іконками та кольорами, візуальними блоками та компонентами для відображення правильних пріоритетів та акцентів.
Таким чином, ми робимо ієрархію сторінки зрозумілою, починаючи з загальних даних, і плавно переміщуючи увагу користувача до деталей і специфічних даних, від глобального до локального. Отримавши необхідні інсайти, наша задача допомогти клієнту їх ефективно використати. Для цього, ми можемо запропонувати певні дії, які допоможуть користувачу здійснити наступний крок на основі отриманої інформації. -
2
На початку дашборда ми зазвичай надаємо контекст. Показуємо загальний звіт, показуємо тренди та динаміку за допомогою кольору, стрілок, тексту, тощо. Користувач повинен мати можливість побачити загальну інформацію, а потім визначити, в які деталі йому потрібно заглибитись.
-
3
Важливо правильно визначити візуальні компоненти для наших цілей. На основі ключових висновків, які ми збираємося показати користувачеві, ми створюємо найпростіші візуалізації даних. Це допомагає користувачу краще зрозуміти дані. Правильне візуальне відображення завжди допомагає спростити сприйняття даних. Існує багато способів візуалізації даних: таблиці, лінійні графіки, площинні діаграми, стовпчикові графіки, діаграми розсіювання, графіки “пироги” та “пончики”, деревовидні карті, теплові карти тощо.
-
4
І, нарешті, ми допомагаємо їм зрозуміти, що робити далі. Ми використовуємо дієві висновки, прогнози, поради та інші дії, щоб допомогти користувачам використовувати ці дані максимально ефективно та з користю.
Візуальний дизайн дашборду

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

Передача дизайнів у розробку і підтримка розробки
Ми надаємо всі необхідні матеріали та інструкції команді розробників щодо роботи з дизайнами, щоб бути впевненими, що вони мають усе необхідне та вірно втілюють дизайни у життя. Після завершення фронт-енд розробки ми зазвичай проводимо сесії Q&A для перевірки, чи були дизайни правильно імплементовані.
Таким чином ми можемо впевнитися, що продукт, який ми створили підходить клієнтові і відповідатиме усім його вимогам. Що, власне, і вимагається від якісного продукту.