Проектування дашбордов для веб-аналітики e-commerce сайту. Частина 1: Зручний інтерфейс

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


Дашборд для автомобіліста

Цикл публікацій буде складатися з статей з описом змісту дашбордів для веб-аналітики e-commerce сайтів. Поговоримо про створення зручного інтерфейсу дашборда.

Зробіть смачним вміст звіту!

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

  • Для кого створюється дашборд? Буде ним користуватися директор з маркетингу або директолог? Як часто замовник буде відкривати цей звіт? Від кінцевого користувача дашборда залежить рівень відображення інформації та часові періоди для динаміки показників.Розрізняють три види дашбордів: операційний, аналітичний і стратегічний. Операційні панелі служать для відображення швидко змінюється з часом інформації. Аналітичний дашборд використовується для проведення дослідження поточних тенденцій, оцінки ситуації та прийняття висновків для коригування негативних трендів. Стратегічний дашборд, як правило, використовують як інструкція для визначення напрямку діяльності компанії, виявлення проблем у структурних одиницях та постановки завдань по їх виправленню.

    Приклад. Маркетолог бачить, що трафік з Контекстної реклами генерує занадто дорогі ліди (стратегічний дашборд), ставить завдання на директолога по виправленню ситуації. Директолог в аналітичному звіті знаходить зниження позицій за конверсійними ключовими словами через подорожчання вартості кліка і підвищує ставки на ключові слова. Ставить завдання аккаунт-менеджерам по контролю за тим, які позиції стануть займати ключові слова після зміни вартості кліка не перевищить вартість звернення цільове значення. Аккаунт-менеджери “тримають руку на пульсі” за допомогою операційного дашборду.


    Стратегічний, аналітичний та операційний дашборд без висновків і рекомендацій

  • Яке рішення потрібно прийняти? Згадаймо принципи піраміди прийняття рішення. Йдемо від загального до приватного: спершу вибираємо яке рішення потрібно, потім які показники ефективності допоможуть оцінити прийняте рішення і, нарешті, які показники можуть вплинути на KPI. І ті й інші показники потрібно відобразити на дашборде зверху вниз.Приклад. Замовник дашборда хоче зрозуміти, як збільшити число замовлень і знизити їх вартість. На початку листа ми відобразимо основні KPI, наприклад, кількість замовлень і їх вартість. Далі виведемо допоміжні KPI, такі як показник відмов і глибина перегляду, для оцінки якості трафіку. Ще нижче розташуємо сегментовані дані, наприклад, показники кількості замовлень та вартість звернення в розрізі міст, типів пристроїв, днів тижня і часу доби.

    Цільові показники ефективності повинні відповідати принципам ACTA:

    • Actionable — назва метрики повинна відображати її зміст. Наприклад, % замовлень, доставлених вчасно.
    • Common interpretation — всі користувачі звіту повинні трактувати показники однаково.
    • Transparent — всі повинні розуміти, як розраховується метрика.
    • Accessible, credible data — джерело даних повинен бути надійним.

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

    Не забудемо про зовнішньому вигляді дашборду

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


    Візуалізація за типом інформації

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

    Хедер

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

    Футер

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

    Структурування інформації

    Розташування блоків з інформацією має дотримуватися певних правил. Розташування елементів на дашборде від сторінки до сторінки краще не змінювати і використовувати сітку. Між елементами повинно бути досить вільного простору. Графіки слід підписувати, дотримуючись єдиного форматування. Використовувати 2-3 шрифту. Важливу інформацію виділяти кольором, розміром.

    Зручна навігація

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

    Колірна гамма

    Обрана вами колірна палітра повинна відповідати колірній палітрі сайту-замовника. Немає необхідності у творі своєї палітри.


    Дашборд від Кевіна Джексона


    Дашборд від Крістофера Едді

    Прототип дашборда з зручним інтерфейсом

    Всі наступні дашборды для статей на Хабре будуть створені в Power BI, тому наведу начерк прототипу в цій же програмі.

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


    Прототип мого дашборда

Читайте також  7 сервісів для створення презентацій, крім Power Point.

Степан Лютий

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

You may also like...

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *