Упс! Не вдала спроба:(
Будь ласка, спробуйте ще раз.

Дизайн дашбордів та візуалізація даних. Наш досвід в LeverageUX: UX/UI дизайн

Roman Leshchyk
Roman Leshchyk Засновник та CEO в LeverageUX
7 серпня 2023 6 хвилин читання

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

Dashboard UX Design for Shopify analytics by LeverageUX  Dashboard UX Design for Shopify analytics by LeverageUX 

Дослідження та стратегія при створенні дашбордів

Спочатку нам потрібно зрозуміти, для чого і для кого ми створюємо дашборд. Критично важливо розуміти потреби наших клієнтів (кінцевих користувачів), зрозуміти проблеми, з якими вони стикаються зараз і які вони хочуть вирішити, а також виявити перешкоди та виклики, з якими вони стикаються при їх вирішенні. Крім того, обов’язково потрібно враховувати бізнес-цілі та цілі, які потрібні для розвитку продукту.

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

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

Підписуйтеся на наші соцмережі

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

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

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

Візуальний дизайн дашборду

Dashboard UX Design for logistics by LeverageUX  Dashboard UX Design for logistics by LeverageUX 

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

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

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

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

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

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

Dashboard UX Design for Digital Bank by LeverageUX  Dashboard UX Design for Digital Bank by LeverageUX 

Передача дизайнів у розробку і підтримка розробки

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

Таким чином ми можемо впевнитися, що продукт, який ми створили підходить клієнтові і відповідатиме усім його вимогам. Що, власне, і вимагається від якісного продукту.

Підписуйтеся на наші соцмережі

Якщо ви хочете поділитися з читачами SPEKA власним досвідом, розповісти свою історію чи опублікувати колонку на важливу для вас тему, долучайтеся. Відтепер ви можете зареєструватися на сайті SPEKA і самостійно опублікувати свій пост.
50 UAH 150 UAH 500 UAH 1000 UAH 3000 UAH 5000 UAH
0
Прокоментувати
Інші матеріали

Коли замовники не платять за ІТ-контрактами

Максим Носарев 22 години тому

Kharkiv IT Cluster: бронювання, критичність та «Дія.Сіті» — як айтівцям працювати у 2024-му?

Olga Sukhorukova 23 липня 2024 07:36

Як німецький уряд підштовхнув крипторинок до відновлення: огляд

Павло Осадчук 22 липня 2024 08:51

Дизайн дитячого простору: середовище, яке виховує та надихає

Алеся Карнаухова 18 липня 2024 12:28

Інклюзивність в iOS: як забезпечити доступність для користувачів з обмеженими можливостями

Vladyslav Khambir 17 липня 2024 16:40