Проектирование дашбордов для веб-аналитики e-commerce сайта. Часть 1: Удобный интерфейс

Дашбордами называют массив данных, представленный в наглядной форме в виде таблиц, графиков, элементов инфографики. Иногда дашборд — это любой красиво оформленный набор цифр. Как, например, изображенная на картинке информационная панель.


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

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

Сделайте вкусным содержимое отчета!


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

  • Для кого создается дашборд? Будет ли им пользоваться директор по маркетингу или директолог? Как часто заказчик будет открывать этот отчет? От конечного пользователя дашборда зависит уровень отображения информации и временные периоды для динамики показателей.

    Различают три вида дашбордов: операционный, аналитический и стратегический. Операционные панели служат для отображения быстро меняющейся со временем информации. Аналитический дашборд используется для проведения исследования текущих тенденций, оценки ситуации и принятия выводов для корректировки негативных трендов. Стратегический дашборд, как правило, используют как руководство для определения направления деятельности компании, выявления проблем в структурных единицах и постановки задач по их исправлению.

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


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

  • Какое решение нужно принять? Вспомним принципы пирамиды принятия решения. Идем от общего к частному: сперва выбираем какое решение нужно, затем какие показатели эффективности помогут оценить принятое решение и, наконец, какие показатели могут оказать влияние на KPI. И те и другие показатели потребуется отразить на дашборде сверху вниз.

    Пример. Заказчик дашборда хочет понять, как увеличить число заказов и снизить их стоимость. В начале листа мы отразим основные KPI, например, количество заказов и их стоимость. Далее выведем вспомогательные KPI, такие как показатель отказов и глубина просмотра, для оценки качества трафика. Еще ниже расположим сегментированные данные, к примеру, показатели числа заказов и стоимости обращения в разрезе городов, типов устройств, дней недели и времени суток.

    Целевые показатели эффективности должны удовлетворять принципам ACTA:

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

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

    Не забудем о внешнем виде дашборда


    Представление информации на дашборде — непростая задача, особенно когда вам нужно отобразить множество неоднородных данных на понятном заказчику языке. Принято использовать следующие визуализации:


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

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

    Хедер

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

    Футер

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

    Структурирование информации

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

    Удобная навигация

    Навигация должна быть понятна и доступна. Если на данном листе дашборда вы не отобразили развернутую информацию о динамике показателей, но заказчик в ней нуждается, то стоит дать ссылку на лист дашборда, на котором эта информация представлена.

    Цветовая гамма

    Выбранная вами цветовая палитра должна соответствовать цветовой палитре сайта-заказчика. Нет необходимости в сочинении своей цветовой палитры.


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


    Дашборд от Кристофера Эдди

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


    Все последующие дашборды для статей на Хабре будут созданы в Power BI, поэтому приведу набросок прототипа в этой же программе.

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


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

    Источники



    Статьи из цикла

AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама

Комментарии 5

    0
    Почему первая иконка на КДПВ оранжевая?
      0
      Это просто картинка. Мы же не думаем всерьез о том, почему в повести известного автора шторки голубые, а не зеленые.
        0
        Ну тут, как бы, статья-то об интерфейсах. В автомобилях, как в любых ответственных интерфейсах, оранжевый/жёлтый знак сообщает пользователю о наличии ситуации, к которой стоит отнестись с особым вниманием. Включение противотуманной фары к таким не относится, потому цвет данного значка вряд ли должен быть оранжевым. В моём автомобиле он голубой. В общем, с юзабилити и цветовой гаммой тут явный промах.
          0
          На самом деле, сложно сразу отличить задние и передние противотуманки по направлению значка. А тут сразу понятно, оранжевые задние, белые передние (правда здесь ошибка, задние должны светить вправо).

          Хороший пример с индикаторами освещения



          PS: И кстати включение задних ПТФ является ситуацией, к которой стоит отнестись с особым вниманием.
            –1
            К этой картинке тоже есть вопросы. В наши дни значок ремня должен быть красным. И заднее противотуманное называется фонарём, а не фарами, если уж занудствовать.

    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

    Самое читаемое