{
    "version": "https:\/\/jsonfeed.org\/version\/1",
    "title": "Блог об аналитике, визуализации данных, data science и BI, заметки с тегом: дашборд Tableau",
    "home_page_url": "http:\/\/test.leftjoin.ru\/tags\/dashbord-tableau\/",
    "feed_url": "http:\/\/test.leftjoin.ru\/tags\/dashbord-tableau\/json\/",
    "icon": "http:\/\/test.leftjoin.ru\/user\/userpic@2x.jpg",
    "author": {
        "name": "Николай Валиотти",
        "url": "http:\/\/test.leftjoin.ru\/",
        "avatar": "http:\/\/test.leftjoin.ru\/user\/userpic@2x.jpg"
    },
    "items": [
        {
            "id": "147",
            "url": "http:\/\/test.leftjoin.ru\/all\/kak-pereverstka-pomogaet-prevratit-horoshiy-dashbord-v-otlichny\/",
            "title": "Как переверстка помогает превратить хороший дашборд в отличный",
            "content_html": "<p><img src=http:\/\/test.leftjoin.ru\/pictures\/0oblogka.png  border=“0” width=100% height=100%><\/p>\n<p>В кастомных системах сквозной аналитики конечный продукт, с которым взаимодействует пользователь — дашборды. Он не видит хранилище, витрины данных, скрипты, а дашборды видит каждый день, поэтому важно сделать их не только функциональными, но и понятными. Не всегда удается сразу нащупать оптимальный вариант, и полезно вести работу поэтапно.<\/p>\n<p>Дело в том, что в современных BI-тулах, которые мы используем — в частности, в популярном Tableau — возможности кастомизации гораздо шире, чем может себе представить сотрудник, мигрирующий с excel-таблиц. Часто пользователь просто не знает, каким вообще может быть дашборд и как составить ТЗ.<\/p>\n<p>В итоге дашборд содержит огромное количество данных, но возможность их продуктивно использовать спрятана за фильтрами, визуальной сложностью, долгой загрузкой.<\/p>\n<p>Именно такая ситуация сложилась у нас в процессе работы с образовательным стартапом Refocus.<\/p>\n<p>Один из главных их дашбордов — обзор <b>SLA (Service Level Agreement).<\/b> Его пользователи — руководители отдела продаж и сейлз-менеджеры. Именно здесь их интересует прежде всего скорость обработки входящих лидов в зависимости от ряда факторов, от источника лида до региона.<\/p>\n<p>Нормативное значение этого показателя для Refocus — 15 минут, значит, там, где он выше, есть потенциал для оптимизации процессов и роста выручки.<\/p>\n<p>Мы работаем над дашбордами <b>итеративно:<\/b> интервью с пользователем — прототип — фидбэк — следующая версия — фидбэк, и так далее. Но в случае с SLA после утверждения финальной версии остались нерешенные аналитиками функциональные проблемы.<\/p>\n<p>У заказчика было желание оптимизировать дашборды и бюджет на это, так что мы предложили общую переверстку и подключили к проекту датавиз-эксперта.<\/p>\n<h2>Версия 1: с чем мы работаем<\/h2>\n<p>Первая версия SLA-дашборда, которой некоторое время пользовался клиент, выглядела так:<\/p>\n<p><img src=http:\/\/test.leftjoin.ru\/pictures\/1-32.png  border=“0” width=100% height=100%><\/p>\n<p>В фокусе три графика:<\/p>\n<ol start=\"1\">\n<li>Скаттерплот по <b>времени ответа<\/b> с момента получения лида.<\/li>\n<li>Гистограмма по <b>медианному времени ответа.<\/b><\/li>\n<li>Гистограмма по <b>средней длительности первого звонка<\/b> с лидом.<\/li>\n<\/ol>\n<p>Справа — 15 фильтров, от региона и гранулярности до имени сотрудника, работавшего с лидом.<\/p>\n<p>Сверху — много текста, поясняющего тонкости работы с фильтрами по времени.<\/p>\n<h2>Задача<\/h2>\n<p>Представьте, что ваш технический бэкграунд испарился, и вы на месте пользователя: о чем вам говорят эти графики? Сколько кликов вам нужно совершить, чтобы оценить перформанс подчиненных в вашем отделе? Чтобы сравнить SLA для лидов из разных источников? Ясен ли текст-легенда?<\/p>\n<p>А главное — есть ли у вас понимание, как сделать понятнее и что сказать исполнителю проекта?<\/p>\n<p>У аналитиков в этой области может быть слепая зона — нам-то на картине выше все понятно. А в прямые задачи датавиз-спеца входит проинтерпретировать запрос пользователя в контексте существующего функционала и создать визуализацию на стыке предпочтений заказчика и здравого смысла.<\/p>\n<p>Важно определить и причины этих проблем. Иногда ошибки — просто неудачная попытка выполнить запрос заказчика. Конечно, всегда можно отмести «плохой» запрос и сделать, как правильно — но тогда можно потерять важные для заказчика функции.<\/p>\n<p><b>Проблемы этого дашборда:<\/b><\/p>\n<ul>\n<li>Основной график — скаттерплот с SLA для всех лидов — выстроен на логарифмической шкале по оси Y без возможности переключиться на линейную. Есть сомнения, что все сейлз-менеджеры, глядя на дашборд, понимают, как работает логарифмическая шкала.<\/li>\n<li>При выборе гранулярности по неделям масштаб позволяет показать распределение точек на оси X по дням — но они распределены случайно с помощью функции RANDOM().<\/li>\n<li>Ось Y не синхронизирована между графиками, поэтому сложно оценить связь всех трех значений.<\/li>\n<li>Невозможно сравнить медианный SLA по следующим параметрам: курс, источник лида, команда, сейлз-менеджер — все они расположены в фильтрах. Сравнение требует скриншотов разных отображений или нескольких вкладок с одним дашбордом.<\/li>\n<\/ul>\n<p><b>Установленные причины:<\/b><\/p>\n<ul>\n<li>Логарифмическая шкала: заказчик, который являлся только одним из юзеров дашборда, попросил реализовать логарифмическую шкалу, чтобы смотреть на значения SLA, близкие к нулю. Видимо, это было релевантно для целей именно его отдела.<\/li>\n<li>Рандомное распределение по оси X: попытка сделать график проще и красивее, потому что скаттерплот уже перегружен информацией, и оценить распределение значений внутри недели — не приоритет.<\/li>\n<li>Неэффективные фильтры: до ввода дашборда заказчик не знал, какие именно сравнения окажутся ему полезны.<\/li>\n<\/ul>\n<p>Итог — невозможно оценить общую картину SLA в компании в отдельно взятый период, а значит и корректировать процессы и стратегии продаж.<\/p>\n<h2>Решение<\/h2>\n<p>Наш датавиз-специалист рисовал макеты карандашом на бумаге, а после утверждения переносил в Tableau: аналитический функционал и UX-дизайн для готового дашборда можно оптимизировать и без специальных тулов. Здесь хорошо ориентироваться на заказчика: если ему приятнее смотреть на файл в Figma — замечательно. Все понятно и на бумаге — отлично.<\/p>\n<p><b>Предложенные изменения:<\/b><\/p>\n<ul>\n<li>Фильтры справа сделать бар-чартами вместо выпадающих меню, чтобы разбивку по категориям было сразу видно.<\/li>\n<li>Реорганизовать дашборд в соответствии с принципами дизайна, учитывающими движение глаз человека слева-направо, сверху-вниз.<\/li>\n<li>Добавить линейную ось на скаттерплот, сделать именно ее форматом по умолчанию. Оставить возможность переключиться на логарифмическую ось.<\/li>\n<li>Нормализовать шкалу X, убрав рандомное распределение точек.<\/li>\n<\/ul>\n<h2>Версия 2: рабочая версия после переверстки<\/h2>\n<p><img src=http:\/\/test.leftjoin.ru\/pictures\/2-31.png  border=“0” width=100% height=100%><\/p>\n<p><b>Что поменялось:<\/b><\/p>\n<ul>\n<li>В левой части дашборда появилась таблица-фильтр по командам и сейлз-менеджерам. По ней можно оценить показатели работы отдельных сотрудников и отделов и получить общее представление о том, как обстоят дела с SLA в компании — а именно это изначальное назначение дашборда.<\/li>\n<li>В центральной части дашборда остался скаттерплот с SLA по всем лидам, только теперь формат отображения оси (линейная или логарифмическая) можно переключить.<\/li>\n<li>Фильтры курсов, источников лидов и категорий превратились в кликабельные бар-чарты в правой части экрана. Они позволяют сразу визуально оценить медианный SLA по этим параметрам.<\/li>\n<li>Все глобальные фильтры по категориям, которые нет необходимости сравнивать между собой, оказались в верхней части дашборда, там же — фильтр по дате. Теперь пространство экрана организовано эффективнее.<\/li>\n<\/ul>\n<p><b>Фидбэк:<\/b><\/p>\n<ul>\n<li>Потерялся график по средней длительности первого звонка.<\/li>\n<li>На центральном графике исчезли отсечки с медианным SLA.<\/li>\n<li>Не подписаны столбцы в таблице слева.<\/li>\n<li>Центральный скаттерплот очень долго загружается при первом открытии дашборда, так как Tableau пытается вывести все лиды из датасета — по умолчанию ни один фильтр не применяется и никак не ограничивает количество информации для отображения.<\/li>\n<li>Необходимы мелкие правки по оформлению и тултипам.<\/li>\n<\/ul>\n<h2>Версия 3: доработки и брендирование<\/h2>\n<p><img src=http:\/\/test.leftjoin.ru\/pictures\/3-27.png  border=“0” width=100% height=100%><\/p>\n<p><b>Что поменялось:<\/b><\/p>\n<ul>\n<li>В таблице слева появились подписи столбцов — теперь половина информации о работе отделов понятна при первом взгляде на дашборд.<\/li>\n<li>Центральный скаттерплот теперь отображается только после выбора фильтра по команде или конкретному сейлзу — это снижает нагрузку на хранилище и сильно ускоряет загрузку графика.<\/li>\n<li>Добавились отсечки с медианным SLA за конкретный период (месяц, неделю или день в зависимости от выбранной гранулярности).<\/li>\n<li>Вернулся график с длительностью первого звонка.<\/li>\n<li>Ось времени всех трех графиков теперь синхронизирована — не нужно сверять единицы измерения, чтобы выявить общие тренды.<\/li>\n<\/ul>\n<p>Когда функционал доработан и утвержден, вводится <b>брендирование<\/b> по корпоративным гайдлайнам. Они у Refocus выглядели так:<\/p>\n<p><img src=http:\/\/test.leftjoin.ru\/pictures\/image-1.png  border=“0” width=100% height=100%><\/p>\n<h2>Обзор функционала<\/h2>\n<p>Итоговый дашборд стал гораздо проще в использовании и настройке, а функционал стал интуитивно понятен.<\/p>\n<p>Так выглядит финальный дашборд при открытии, пока не выбран ни один фильтр:<\/p>\n<p><img src=http:\/\/test.leftjoin.ru\/pictures\/final.png  border=“0” width=100% height=100%><\/p>\n<p>А так, если выбрать сейлз-менеджера из таблицы слева:<\/p>\n<p><img src=http:\/\/test.leftjoin.ru\/pictures\/leads.png  border=“0” width=100% height=100%><\/p>\n<p>Использование фильтров справа (например, отобразить только лидов, пришедших с вебинаров):<\/p>\n<p><img src=http:\/\/test.leftjoin.ru\/pictures\/web.png  border=“0” width=100% height=100%><\/p>\n<p>Тултипы со ссылкой на первоисточник на скаттерплоте с лидами (время в них отображается в минутах при выборе любой шкалы):<\/p>\n<p><img src=http:\/\/test.leftjoin.ru\/pictures\/tip.png  border=“0” width=100% height=100%><\/p>\n<p>Наконец, переключение между линейной и логарифмической шкалами:<\/p>\n<p><img src=http:\/\/test.leftjoin.ru\/pictures\/log.png.jpg  border=“0” width=100% height=100%><\/p>\n<p>Этот кейс отлично демонстрирует важность чуткой работы с заказчиком. Всегда важен баланс между экспертностью и ориентацией на пользователя. Конечно, стоит показывать ему разные возможности и предлагать оптимальные с технической точки зрения решения. Но не менее важно доверять клиенту и разбираться в причинах его запросов, чтобы сделать по-настоящему полезно и красиво. Скажем, вдруг он просит логарифмическую шкалу не потому, что не подумал о других, а потому, что без нее в его отделе не обойтись? Внимание к таким моментам — огромный плюс к компетенциям аналитика.<\/p>\n",
            "date_published": "2024-09-04T15:44:06+03:00",
            "date_modified": "2024-09-04T15:43:37+03:00",
            "image": "http:\/\/test.leftjoin.ru\/pictures\/1-32.png",
            "_date_published_rfc2822": "Wed, 04 Sep 2024 15:44:06 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "147",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "http:\/\/test.leftjoin.ru\/pictures\/1-32.png",
                    "http:\/\/test.leftjoin.ru\/pictures\/2-31.png",
                    "http:\/\/test.leftjoin.ru\/pictures\/3-27.png",
                    "http:\/\/test.leftjoin.ru\/pictures\/image-1.png",
                    "http:\/\/test.leftjoin.ru\/pictures\/0oblogka.png",
                    "http:\/\/test.leftjoin.ru\/pictures\/final.png",
                    "http:\/\/test.leftjoin.ru\/pictures\/leads.png",
                    "http:\/\/test.leftjoin.ru\/pictures\/web.png",
                    "http:\/\/test.leftjoin.ru\/pictures\/tip.png",
                    "http:\/\/test.leftjoin.ru\/pictures\/log.png.jpg"
                ]
            }
        }
    ],
    "_e2_version": 3365,
    "_e2_ua_string": "E2 (v3365; Aegea)"
}