{"id":13758,"url":"\/distributions\/13758\/click?bit=1&hash=2e8fbaa3bf90573ffccd5ba50e92f317e1b2150766c409b747f9bc25b4cf1eb8","title":"\u041c\u0430\u0440\u043a\u0435\u0442\u043f\u043b\u0435\u0439\u0441 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0443\u0441\u043b\u0443\u0433 ","buttonText":"\u042d\u0442\u043e \u043a\u0430\u043a?","imageUuid":"06dd1ba1-1f1b-50d7-87e0-bba4328182c5","isPaidAndBannersEnabled":false}

Как дизайн помогает принимать решения бизнесу и государству: делаем дашборды, которыми будут пользоваться

«Атвинта» на примерах показывает, как и какие данные размещать на аналитических панелях.

Зачем и кому нужны дашборды

Люди обожают цифры — оцифрованные данные помогают держать ситуацию под контролем, анализировать и строить планы. Особенно удобно, когда кто-то позаботился о вас и собрал много полезных цифр в одном месте. А еще дополнил их графиками, которые наглядно показывают изменения.

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

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

Дашборд госслужащих для контроля системы досудебного обжалования

Дашборд губернатора Кемеровской области

Дашборд кураторов онлайн-школы

*Числа на изображениях в статье придуманы для разработки макетов и не являются реальными данными

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

Компаниям дашборды нужны для анализа бизнес-показателей, бюджетной сфере — для контроля работы госорганов. В B2C-сервисах они помогают решать частные задачи пользователя, например, отслеживать прогресс в приложении для изучения английского.

Задачи дашбордов

Аккумулируют информацию в одном месте

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

Автоматизируют аналитику

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

Ускоряют процесс принятия решений

Изучение сырой документации занимает целые часы, в то время как на дашборде собрано все необходимое. Ключевые данные всегда находятся под рукой, и их просмотр занимает не больше 10 минут.

Отражают ситуацию и подсвечивают проблемные места

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

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

Как мыслят пользователи

Важный момент в разработке дашборда — масштаб видения пользователя. В зависимости от задач ему могут быть интересны более общие или частные показатели.

Лучше всего это видно на примере иерархии в госорганах. Когда мы делали дашборды для системы досудебного обжалования, нам предстояло разработать экраны для госслужащих трех уровней:

  • вице-премьер — оценивает эффективность системы в масштабах государства
  • министр — оценивает работу системы в части ведения отдельного министерства
  • инспектор — работает на уровне региона, в том числе с конкретными жалобами граждан

Для каждой роли мы создали дашборды с разными данными.

Дашборд министра

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

А для инспектора мы создали планировщик задач с частными жалобами жителей региона, так как он работает с ними напрямую.

Дашборд инспектора

Мелкие детали не интересны министру, но нужны инспектору — даже 10 незакрытых жалоб будут для него поводом провести проверку. А у министра показатели исчисляются тысячами, и это не сыграет значительной роли при принятии решений на таком уровне.

Или пример из бизнеса. Один из наших кейсов — разработка ERP-системы для завода по производству кормов. Мы писали о нем на VC:

Владелец обратился к нам с задачей вывести в системе сводные показатели по производству, закупкам и продажам. Он хотел видеть понятные и прозрачные отчеты, которые сделают бизнес управляемым. Такому пользователю нужны данные в крупных мазках — ему важно видеть общую картину для принятия управленческих решений.

Отчет в ERP-системе

В то же время в ERP-системе реализован функционал для технолога, который создает формулы замеса кормов. Для его работы не нужны финансовые отчеты — он оперирует объемом ингредиентов, их соотношением, плановым и фактическим выпуском продукции. Это более узкие и специализированные данные.

Учитывайте картину мира и потребности пользователя при разработке дашборда.

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

Что должно быть на дашборде

Перед тем, как делать дашборд, нужно понять, какие данные на нем будут отражены.

В идеальном мире заказчик знает, какие цифры нужны его сотрудникам. А еще готов сгруппировать их по приоритету и важности. Тогда агентству можно проскочить этап аналитики и сразу начать разработку экранов.

Однако чаще бывает так:

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

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

Глубинные интервью

Глубинные интервью (Customer Development, CustDev) помогают напрямую у пользователя узнать, какая информация пригодится в его работе и какие показатели наиболее важны.

Мы перерабатывали интерфейс сервиса QMT — системы контроля качества в контакт-центре. Одной из задач проекта была модификация имеющихся дашбордов супервайзеров. Эти сотрудники отвечают за отдельные проекты и отслеживают эффективность командной работы по ним.

Аналитики провели CustDev с сотрудниками заказчика и узнали:

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

Дашборд супервайзера для оценки эффективности проектов в контакт-центре

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

Поговорите с теми, кто будет использовать дашборд.

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

Полевые исследования

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

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

Так мы подробнее разобрались с задачами, приоритетами и этапами работы супервайзеров. Например, главный показатель, на который они ориентируются — средняя оценка качества звонка. А одна из задач сотрудника — контроль работы операторов и проверка их рейтинга.

Попросите пользователя провести обычный рабочий день и узнайте, что происходит в его рутине.

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

Изучение процесса принятия решений

В проекте по досудебному обжалованию мы плотно взаимодействовали с командой клиента. В распоряжении было более 50 показателей, и в процессе совместной работы мы корректировали наполнение дашбордов.

Привлекайте в работу знающих консультантов.

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

Сколько экранов делать

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

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

Группировка показателей зависит от задач и процессов отдельного пользователя.

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

Мы разработали панель для губернатора Кемеровской области, где представлены оба варианта.

Пример визуализации показателей на плашке (данные системы для взаимодействия с горожанами).
Пример отдельного дашборда по группе показателей (данные по вакцинации). Так как нужно представить не только общую сводку, но и информацию по каждому населенному пункту, данным понадобилось пространство целого экрана.

Идеальная структура многоуровневого дашборда выглядит так:

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

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

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

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

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

Обратный пример — образовательная платформа SMITUP, где для задач ученика достаточно одного экрана. На нем мы отразили дедлайны и даты по урокам и заданиям, чтобы обеспечить тайм-менеджмент учебного процесса. Подробно о проекте писали в статье на VC:

Дашборд ученика онлайн-школы по подготовке к ЕГЭ

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

Правила размещения данных в интерфейсе

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

Собирать данные на плашках

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

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

Выделять значимое крупным

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

Без таких акцентов взгляду будет не за что зацепиться, и пользователь потратит больше времени на изучение дашборда, просматривая всю панель.

Оставлять воздух

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

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

Экономить пространство

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

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

До
После

Общаться с пользователем цветом

Дашборды должны помогать в анализе, и цвет — отличный инструмент для взаимодействия с пользователем.

У людей сформированы цветовые паттерны, например, зеленый автоматически воспринимается как нечто с положительными или утвердительным посылом: ок/подтвердить/система работает исправно. Красный сигнализирует — что-то пошло не так.

Визуальные подсказки помогают анализировать и принимать решения.

В досудебном обжаловании рост срока принятия решения оценивают негативно, потому что система должна рассматривать жалобы быстрее. Такое изменение мы подсвечиваем красным. Снижение срока, наоборот — положительный сигнал, который отмечается зеленым.

Маленькие стрелки выполняют аналитику за пользователя и подсказывают, как изменился показатель.

Использовать яркие контрастные цвета

Дополнительно разделить типы информации помогают цвета. В дизайне лучше использовать яркие оттенки — это выделяет цифры и графики в интерфейсе. Так пользователь быстро находит данные в рабочем пространстве.

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

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

Как работает графический визуал

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

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

Просто попробуйте в уме оценить динамику ряда чисел: 23, 46, 15, 48, 32, 14, 18, 56, 118, 16, 20, 25. Не самая простая задача для среднестатистического человека.

В структурных диаграммах видны преобладающие доли. Обычно в них нет абсолютных величин, однако визуально пользователь понимает, адекватна ли такая структура для его процессов. Если что-то не так — можно углубиться в частные показатели, если все в порядке — перейти к следующим данным.

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

Без карты пришлось бы изучать список по регионам и вручную искать проблемные субъекты, что заняло бы намного больше времени.

Визуализация экономит время и помогает быстрее разобраться с цифрами.

Где брать диаграммы и графики

В разработке визуализации данных есть два основных подхода.

Библиотеки и плагины

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

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

Список проверенных библиотек, которые мы использовали в своих проектах:

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

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

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

Создание с нуля

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

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

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

Плюсы собственных наработок: нет ограничений по типам данных и сложности визуализации.

Минусы: более трудозатратный подход, возможны технические сложности при внедрении.

Как выбрать визуал для показателя

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

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

Перегруженный информацией график. Источник: highcharts.com

Перегруженный информацией график. Источник: highcharts.com

Неочевидная визуализация. Источник: highcharts.com

Актуально для тематических площадок, но неуместно для бизнеса. Источник: amcharts.com

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

Работа со сложными показателями

С простыми диаграммами намудрить сложно, а вот с многокомпонентными приходится разбираться.

Рассмотрим пример. В дашбордах досудебного обжалования на одном визуале нужно было отобразить вложенную структуру:

  • значение Х, которое всегда занимает 100%
  • доля Y в структуре X
  • доля Z в структуре X и Y

На практике такие диаграммы встречаются редко, и мы долго не могли найти подходящий вариант для этого случая. В итоге мы создали более 20 тестовых визуалов, чтобы выбрать наиболее удачный из них.

Финальный вариант:

Нам будет интересно почитать в комментариях, какое решение вам понравилось больше остальных.

Примеряйте несколько визуалов, чтобы выбрать наиболее очевидный для пользователя вариант.

В некоторых случаях усложняются и простые на первый взгляд формы.

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

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

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

Как улучшить дашборд

Основы разобраны, теперь перейдем к нюансам, которые помогут докрутить дашборд по стилю и функциональности.

Анимация

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

Темная тема

Разработка темной темы актуальна для дашбордов, которые будут транслироваться на совещаниях. По отзывам наших клиентов, именно темная тема лучше смотрится на больших экранах.

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

Обучение

Полезно подружить пользователя с новым инструментом и провести обучение по основным элементам панели.

Советы

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

Всплывающие цифры

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

Основные ошибки

Подведем итоги списком частых ошибок при создании дашборда.

  • Игнорировать потребности пользователя. Этап аналитики обязателен — без него невозможно понять, что вообще должно быть на дашборде. В результате можно потратиться на модный инструмент, и обнаружить, что им никто не пользуется.
  • Размещать слишком много данных. Дайте пользователю только те цифры, которые ему действительно нужны, чтобы не отнимать время лишними данными. Дробите дашборд на несколько экранов, если информации много.
  • Использовать сложные графики и диаграммы. Пользователь должен быстро считывать визуал, поэтому ориентируйтесь на стандартные паттерны, чтобы не путать пользователя.
  • Размещать данные вплотную друг к другу. Не стремитесь заполнить каждый пиксель, иначе вместо структурированного экрана выйдет полотно информации, в котором сложно ориентироваться.
  • Делать дашборд монотонным. Без акцентов в виде цвета, размера элементов и шрифтов взгляду будет не за что зацепиться, и пользователь потратит больше времени на изучение данных.
  • Использовать однообразную палитру. Близкие цвета и оттенки сольются воедино, так вы потеряете дополнительный инструмент для коммуникации пользователя с интерфейсом.

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

0
81 комментарий
Написать комментарий...
Айдар Зарипов

Очень мощная статья по теме. Редко такое в последнее время на VC. Хорошие примеры.

Ответить
Развернуть ветку
Digital-агентство Атвинта
Автор

Спасибо! Накопилась экспертиза, решили выдать все секреты )

Ответить
Развернуть ветку
Dmitriy Filippov
Основной «грех» — это забыть про главную цель дашборда. Он должен помогать в принятии решений и ускорять процесс аналитики.

так-то да, но ускоряют принятие решений только сравнение текущих показателей со средними/медианными и динамика показателей - а у вас этого нет, просто ведро цифр и графиков, которые можно подвести под любое решение

Ответить
Развернуть ветку
Илья Горбаров

Вообще, если человек, не зная изначальной задачи, пытается делать какие-то выводы по картинкам. Это говорит о двух вещах.

1) Статью не читал или не понял, о чём она.
2) Ну и более тяжкий грех — фантазирует, а какая задача ставилась изначально. Ведь результат можно оценить только по степени довольности клиента, выполнению KPI, которые ставились перед решением и/или постпродакшн аналитика.

Раз это неочевидно и комментарий подсобрал немношк лайков, разверну мысль чуть подробнее.

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

Если с этим всё ок, то можно переходить дальше.

"ускоряют принятие решений только сравнение текущих показателей со средними/медианными и динамика показателей"

Нет, это не так. На приборной панели автомобиля 98% показателей — это текущие показатели системы. Ладно, авто слишком просто, возьмите самолёт. Там вообще нет исторических сведений, это тоже дашборд, служит ли он для принятия решений — вопрос риторический.

Так вот не зная изначальной задачи, только очень недалёкий человек может рассказывать про "ведро с цифрами" и какие-то медианные показатели.

Есть разные уровни абстракций в управлении: стратегический, тактический, операционный. Есть разные виды деятельности, ну планирование, управление и контроль, хотя бы.

В подавляющем большинстве случаев управление и контроль — это 90% времени, а стратегия 10%, а то и меньше. Инструменты чаще всего делают удобными те, которыми пользуются чаще и большее количество людей.

А если условный Филипп привык со школьной скамьи смотреть на конверсии в Директе, анализировать, что-то решать и управлять только своим желанием спать. То нельзя это всё в теории экстраполировать на организацию в 1000 человек.

При сколь-нибудь более сложном объекте управления, чем ты сам, необходимость в нужных данных, в нужное время, в удобном виде — кратно возрастает.

И пользуется этим больше людей, чем аналитикой, потому что успех — это упорная работа сотен людей. Вот для этих людей мы нервные окончания и сохраняем, делая удобные инструменты, экономя их время.

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

Ответить
Развернуть ветку
2 комментария
Илья Горбаров

Иллюстрации подбирали, которые нам больше понравились. Возможно, экраны со сравнением показателей тоже стоило добавить в статью, но мы выбрали эти.

Хотите увидеть все экраны — устраивайтесь в одну из компаний, где используются наши решения )))

Ответить
Развернуть ветку
Alex Dem

Статья очень полезная и развернутая, нетипично для VC. Предмет не для статьи, а для отдельного web-сайта или даже курса по теме.

Ответить
Развернуть ветку
Digital-агентство Атвинта
Автор

Крутая идея) у нас есть опыт создания курсов, правда, пока не самостоятельный, а в коллаборации с одной крупной образовательной платформой.

Ответить
Развернуть ветку
3 комментария
Pavel Voronkov

Это информация именно для начального VC, а не в то что он превратился после 24 февраля.
Ранее такие материалы тут выходили раз в месяц.

Ответить
Развернуть ветку
2 комментария
Олег Масленников

качественно написанная статья, спасибо за отличный материал )

Ответить
Развернуть ветку
Шаповалов Анатолий

Шикарная статья по данной теме. Очень полезная информация без воды.

Ответить
Развернуть ветку
Digital-агентство Атвинта
Автор

спасибо, рады делиться полезным )

Ответить
Развернуть ветку
LNdex

Красивенько, но пользоваться этим розово-салатовым винегретом не хочется.

Ответить
Развернуть ветку
Digital-агентство Атвинта
Автор

Пользователям сервисов заходит )

Ответить
Развернуть ветку
1 комментарий
Слегка Придурковатый

Красиво. Хотя не читал.

Ответить
Развернуть ветку
Zloy Marketolog

Красивое

Ответить
Развернуть ветку
Артур Снегов

Статья крутая, но название ассоциировалось у меня немного с другим)) "Ну-ка от винта" Простите, если что

Ответить
Развернуть ветку
Digital-агентство Атвинта
Автор

мы привыкли :)

Ответить
Развернуть ветку
Полина Лааксо

у меня был еще вариант:

Ответить
Развернуть ветку
Ольга Макарова

Спасибо за полезную информацию! Действительно, на миникурс тянет.

Ответить
Развернуть ветку
Pavel Voronkov

Очень здорово, хорошо раскрыта тема, а детали это уже к заказчикам.

Ответить
Развернуть ветку
Digital-агентство Атвинта
Автор

очень рады, что статью читают и оценивают. Немного переживали, что такой формат уже не подходит VC )

Ответить
Развернуть ветку
2 комментария
Извинись

Сохранил в закладки. Как раз на работе делаю понадобится. Спасибо

Ответить
Развернуть ветку
Digital-агентство Атвинта
Автор

Здорово, что вам пригодилось ) пожалуйста

Ответить
Развернуть ветку
CasualCode

А какая платформа используется? Spotfire? Power bi?

Ответить
Развернуть ветку
Илья Горбаров

По NDA мы не можем говорить в каком конкретном случае какая, но я просто могу перечислить. В одном кейсе — это внутренняя BI система для которой мы создали интерфейсы, а команда, поддерживающая систему всё аккуратно интегрировала. В другом кейсе — это самописная система, которая собирает данные из десятка внутренних систем заказчика.

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

Ответить
Развернуть ветку
Михаил Шевченко

Очень достойная статья! Ещё бы пару ссылок для начинающих, на конструкторы дашбордов, было бы идеально!

Ответить
Развернуть ветку
Илья Горбаров

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

Ответить
Развернуть ветку
Henke Thunder

Очень полезное чтиво, спасибо

Ответить
Развернуть ветку
GR

Интересная статья, спасибо. Кстати, а данные на скриншетах реальные или это демо?

Ответить
Развернуть ветку
Digital-агентство Атвинта
Автор

Нет, цифры для макетов придуманы. Дисклеймер в статье оставляли про это)

Ответить
Развернуть ветку
Twinby

Очень подробная, а главное клевая статья. Сделать понятный мозгу и приятный глазу дашборд — не самая простая задача. Знаем по себе 🤓

Ответить
Развернуть ветку
Digital-агентство Атвинта
Автор

такой отзыв особенно ценен от тех, кто погружен в тему!) спасибо

Ответить
Развернуть ветку
Landau Interactive

Ребят, вы проделали титаническую работу. Держите 🖐!

Ответить
Развернуть ветку
Илья Горбаров

Держимся, спасибо. )

Ответить
Развернуть ветку
Антон Подгорнов

Очень приятная статья. Хотел уточнить пару вопросов:

1. Какие сервисы можете порекомендовать? Сходу внедрять дорогой дашборд может быть не целесообразно. На чем можно попробовать? Ну и бонус для себя - может какие-то сервисы для жизненных ситуаций знаете?
2. Откуда чаще всего тянете информацию? Можно живой пример? Сомневаюсь, что у всех лежит готовая база и ждет, когда вы ее заберете. Нужно ли с клиентом прорабатывать создание такой базы?
3. Какие возникают сложности в разработке?

Ответить
Развернуть ветку
Wladimir Feldman

Кстати, самое простое для "попробовать", это Таблицы Гугл. Они хорошо автоматизируются, используют стандартный JavaScript и могут подтягивать данные через любое API. Несложные дашборды собираются буквально за час. А уже потом когда есть понимание что нужно, можно и более серьёзные вещи смотреть.

Ответить
Развернуть ветку
1 комментарий
Илья Горбаров

1. Power BI, Google DataStudio, Yandex DataLens - можно попробовать, можно поработать, можно создать монструозную систему и жить с ней. У всех задачи разные.
Кастомный дашборд с дизайном интерфейсов — это не для всех. Чаще всего он нужен, когда уже есть чёткое понимание что нужно или требования к внешнему виду продиктованы человекочасами, проводимыми за работой с ним. Тогда не грех и про эстетику подумать.

2. Смотрите, тут всё максимально индивидуально. У нас рекорд — 9 источников. Это и система электронного документооборота и 1с, да всё что угодно. Были кейсы, когда данные из гуглтаблиц брались.
Но в 99% случаев информация есть. Она всё-таки первична, нельзя сделать дашборд, чтобы следить за показателями, которых ещё не придумали.
Не так важно откуда, гораздо важнее, чтобы она была.
А прорабатывать с клиентом надо всё, потому что как говорил доктор Хаус: "Клиенты врут", нужно смотреть что за данные, как лежат, как часто обновляются и тд. Иначе не получится сделать инструмент, который кому-то помогает, максимум будет лежать в портфолио.

3. Как и в любой разработке. Обещали данные — данных нет, не пустили пообщаться к первому лицу, а по-факту оказалось, что его мысли, идеи и чаяния не были донесены до нас или по дороге до неузнаваемости поменялись.
"Да у нас 1С спец занимается, он все выгрузки сделает", как только слышит наш проджект у него в голове срабатывает пароходная сирена. Можно даже гул услышать, больше похожий на подвывание, если рядом с ним находиться в этот момент.
Ну и далее по списку. Для каждого проекта у нас оцениваются риски возникновения тех или иных событий и пути решения этих проблем.

Ответить
Развернуть ветку
CasualCode

Самописная система это конечно круто. Имеет смысл , если отрезали от всего остального. А так, возможности спотфайра неограниченны, с учётом ironpython и JavaScript визуализации.

Ответить
Развернуть ветку
Илья Горбаров

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

Ответить
Развернуть ветку
4 комментария
Dmitry Gorshkov

Не рассматривали Retool/Appsmith в качестве основы?

Ответить
Развернуть ветку
Илья Горбаров

Это всё-таки немного про другое. Если речь идёт про первичное построение дашбордов, то Power BI, Google DataStudio и Yandex DataLens закрывают все потребности.

Если нужно что-то кастомное и своё, то подойдут ваши решения.

А если нужно уже в готовый продукт, например, внедрить удобное с точки зрения UX/UI решение, то здесь можно сделать кастомный дашборд, когда все процессы уже отлажены и есть понимание какие данные, когда и кому нужны.

Ответить
Развернуть ветку
M-S-R

Дашборд - вражеское слово. И система ваша вражеская значит. Чем вам русские слова не угодили?

Ответить
Развернуть ветку
Илья Горбаров

Какие, например?

Ответить
Развернуть ветку
12 комментариев
Vasek Romanov

Красивые дашики и статья очень полезная. Но я надеюсь в реальности там нет такой дерзкой анимации и темная тема проработана лучше)

Ответить
Развернуть ветку
Artem Petrenkov

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

Ответить
Развернуть ветку
Волков Никита

Подскажите, на каком языке разрабатывались данные дашборды, насколько я понимаю, это не стандартные инструменты аля Power BI и тд?

Ответить
Развернуть ветку
Илья Горбаров

Это PHP Laravel + VUE или React. Потому что это кастомная история, её не получится сделать на Power BI, но и задачи разные.

Условный пульт управления атомной станцией не такой же красивый и интуитивный, как панель приборов автомобиля.

Потому что целевая аудитория разная, юзкейсы разные, задачи разные, всё разное.

Ответить
Развернуть ветку
Дмитрий Рыцев

Спасибо за статью, есть технический вопрос:

1. Дано: собираем данные в формах google, храним их в таблицах и отображаем в datastudio, как в данном тестовом фрагменте https://datastudio.google.com/reporting/a6256f61-6797-4020-9b8b-137065ea6560/page/0A65B

2. Нужно следующее: собирать данные в особым образом форматированных таблицах, где пользователь мог бы вводить разные типы информации на разных листах. Пример одного такого листа показан здесь https://docs.google.com/spreadsheets/d/185SwMiW2j9wPQGKTDr6kQVW4lZbh1AlyvfW_BSQSK4Q/edit#gid=0

3. Вопрос: каким образом и с помощью какой технологии сделать так, чтобы, с одной стороны, пользователь имел возможность вводить свои данные и получать свою индивидуальную визуализацию как в пункте 2, а с другой стороны, эти данные аккумулировались бы, обрабатывались и отображались как некие консолидированные результаты как в пункте 1?

Полагаю, что с помощью гугл таблиц это сделать невозможно, но может быть я чего-то не знаю. Есть ли другие инструменты, желательно lowcode, чтобы можно было сделать подобный инструмент на сайте?

Ответить
Развернуть ветку
Илья Горбаров

Интерсный вопрос, если я правильно понял задачу, то можно из таблиц пункта 2 собирать данные в другую таблицу через importrange, например и строить какие угодно отчёты.

Но сомневаюсь, что вы до этого сами не дошли. Поэтому если задача какая-то более комплексная — напишите личку на VC, обменяемся контактами и обсудим.

Ответить
Развернуть ветку
Дмитрий

Как заполучить себе такой дашбоард?

Ответить
Развернуть ветку
Digital-агентство Атвинта
Автор

заказать у нас разработку. Почта [email protected] для связи, если вам будет интересно )

Ответить
Развернуть ветку
Alexandr Kuznetsov

Можно ссылку на продукт. Или это не SaaS?

Ответить
Развернуть ветку
Digital-агентство Атвинта
Автор

все дашборды из статьи находятся в закрытых системах заказчиков.

Ответить
Развернуть ветку
Eazy Haze

Играли с цветовыми акцентами и чуть-чуть проиграли. Ниже уже писали про винегрет, поддержу коммент.

Моя конечная точка была на экране с показателями вакцинации населения Кузбасса. Там же цветовой акцент на половине страницы, куда смотреть?

Ответить
Развернуть ветку
Читать все 81 комментарий
null