Что разберём
- База сравнения: с чем сравнить числопереключатель
- График под вопрос, а не под красотутренажёр
- Отклонение заметно, норма спокойнопорог
- Показатель без решениятренажёр
- Главное — сверхудо и после
- Найдите ошибки на экране «Продажи и склад»поиск
1База сравнения: с чем сравнить число
Само число не говорит, хорошо это или плохо. Хорошо или плохо становится рядом с другим числом — с прошлой неделей, с планом, с обычным уровнем.
Выручка за прошлую неделю — 489 600 ₽.
Переключите базу сравнения и посмотрите, какой вывод сделает управляющая в каждом случае.
Без базы
К прошлой неделе
К плану
К обычной неделе
Базу выбирают по вопросу, ради которого человек смотрит на число:
| База | На какой вопрос отвечает | Где ловушка |
|---|---|---|
| Прошлый период | Стало лучше или хуже? | В прошлом периоде мог быть праздник или акция. Дни сравнивают с тем же днём недели: понедельник — с понедельником |
| План или цель | Успеваем? | План, поставленный на глаз. Тогда «91 % плана» говорит о плане, а не о продажах |
| Обычный уровень | Это нормально или что-то случилось? | Одно среднее прячет разброс. Лучше показать обычный диапазон: «обычно 452–505 тыс.» |
| Тот же период год назад | Это сезон или что-то новое? | Нужна история: магазину меньше года — базы нет |
Проценты на маленьких числах
Это отдельная ловушка. Например:
Возвратов на прошлой неделе было 2, на этой 4 — плитка пишет «+100 %» и краснеет.
Но четыре возврата в неделю для «Лесной обжарки» — обычное дело: за последние два месяца бывало от 2 до 7.
Когда число маленькое, показывают само число и обычный диапазон, а не процент.
В Nielsen Norman Group пишут, что число без контекста ничего не значит. Его сравнивают с прошлым — с прошлым годом, с версией до редизайна — или с похожим: с конкурентом, с другой задачей, с другой группой пользователей.
У Стивена Фью «недостаточный контекст для данных» — одна из тринадцати типичных ошибок дашбордов. Контекстом он называет цель или историю показателя и быструю оценку «хорошо, норма, плохо».
2График под вопрос, а не под красоту
Одни и те же данные отвечают на разные вопросы. Под каждый вопрос нужен свой график, и один график на все вопросы не отвечает ни на один.
Данные — продажи семи сортов за восемь недель. В первой версии экрана их показывали одним графиком: семь цветных линий.
Переключите вопросы и посмотрите, какой график отвечает на каждый.
Как было: семь линий
Продажи по сортам, пачек в неделю 0 80 160 10 авг4 окт ЭфиопияКолумбияБразилияКенияГватемалаКоста-РикаСуматраЧто продаётся лучше — столбцы по убыванию
Продажи по сортам, пачек 28 сентября — 4 октября; черта — прошлая неделяЧто с Кенией — одна линия выделена
Продажи Кении АА, пачек в неделю остальные сорта — серым, для сравнения 0 80 160 Кения АА · 60 10 авг4 октЧто изменилось за неделю — разница от нуля
Продажи к прошлой неделе, % 28 сентября — 4 октября против 21–27 сентябряОдин ряд цветом
Приём из второго графика помогает, когда рядов много: один ряд выделить цветом, а остальные оставить серыми.
Серые линии дают фон для сравнения и не спорят за внимание.
В блоге Datawrapper советуют начинать с вопроса «что читатель должен увидеть первым» и красить только это.
Когда нужна таблица
Иногда лучший ответ — не график, а таблица.
Когда по числу что-то делают руками — вписывают в заказ, сверяют с выпиской, — нужны точные значения, а не форма. Сколько пачек Кении заказать у обжарщика, по столбцу не прочитать.
Проверьте себя
Шесть вопросов управляющей. Чем на каждый лучше ответить?
Растёт ли доля покупателей, которые заказывают повторно, за полгода.
ЛинияВопрос про направление во времени. Линия покажет, растёт доля или стоит на месте.
Сколько пачек каждого сорта заказать у обжарщика на следующую неделю.
ТаблицаЧисла вписывают в заказ. Нужны точные значения по каждому сорту: остаток, продажи за неделю, сколько заказать.
В какие дни недели заказов больше — чтобы решить, когда выводить второго сборщика.
СтолбцыСемь дней сравнивают между собой. Столбцы в порядке дней недели сразу покажут пики.
Падают ли продажи Кении последние два месяца.
ЛинияОдна линия Кении, выделенная цветом, на фоне серых остальных. Видно и падение, и то, что другие сорта стоят ровно.
Совпадает ли сумма возвратов за месяц с выпиской из банка.
ТаблицаСверка — это точные суммы по строкам. График тут только мешает.
Какой сорт продался лучше всего на прошлой неделе.
СтолбцыСравнение семи сортов: горизонтальные столбцы по убыванию, названия слева.
3Отклонение заметно, норма спокойно
Когда на экране всё цветное, не выделено ничего. Цвет достаётся только тому, что вышло за обычные пределы и требует внимания.
В первой версии экрана каждая плитка была покрашена: рост — зелёным, падение — красным. Сравните с версией, где цвет есть только у выхода за порог.
Светофор везде
Цвет у выхода за порог
Откуда взять пределы
Чтобы красить только выход за пределы, нужны сами пределы.
Самый простой способ — обычный диапазон за последние недели. Тоньше — порог: на сколько процентов число может отойти от обычного, прежде чем это станет поводом спросить «что случилось».
Порог — это решение
А не настройка по умолчанию.
Слишком маленький — и тревога каждый день: через неделю её перестанут замечать. Слишком большой — и настоящий сбой пройдёт тихо.
Подвиньте порог и посмотрите, сколько дней за месяц он выделит.
Сравнение с обычным для этого дня недели, а не с прошлым днём, убирает шум.
Заказов в субботу всегда меньше, чем в пятницу, и это не повод для тревоги.
В GoPractice смотрят на спокойный экран с другой стороны. Если дашборд всё время отвечает «всё как обычно», это повод насторожиться: возможно, данные сгладили, и скачки пропали.
Поэтому на графике выше дни, а не недели: шум остаётся виден, просто серым, а цвет получает только выход за порог. Для исследования продукта интересен каждый скачок. Для экрана, по которому действуют каждый понедельник, — те, что требуют действия.
Полоса плана и спарклайн
Ещё два приёма из классики:
- Полоса плана — bullet graph. Её придумал Стивен Фью вместо спидометров: короткая полоса, где столбец — факт, черта — цель, а оттенки серого — диапазоны вроде «плохо» и «норма». Она умещается в плитку.
- Спарклайн придумал Эдвард Тафти. Это линия размером со слово, без осей, которая показывает форму ряда рядом с числом.
Не только цветом
Отклонение показывают не только цветом. Знак «−», стрелка или слово «мало» нужны тем, кто плохо различает красный и зелёный.
По данным Colour Blind Awareness, это примерно один мужчина из двенадцати и одна женщина из двухсот.
Требование доступности WCAG 1.4.1 о том же: цвет не может быть единственным способом что-то сообщить.
4Показатель без решения
Каждый лишний график отнимает внимание у нужных. Показатель остаётся на экране, только если по нему что-то решают.
Про каждый показатель экрана задайте один вопрос тому, кто на него смотрит:
«Что вы сделаете, если это число завтра вырастет вдвое? А если упадёт?»
Если ответ «ничего» или «ну, порадуюсь», показатель на этом экране не нужен.
Иногда показатель нужен, но редко: раз в квартал, когда планируют смены, или когда что-то пошло не так. Ему место в отдельном отчёте, куда ведёт ссылка с экрана, а не на главном экране каждый день.
Проверьте себя
Шесть показателей экрана «Продажи и склад». Оставить, убрать или в отчёт?
Остаток каждого сорта на складе — на сколько дней продаж его хватит.
ОставитьПо нему каждый понедельник заказывают зерно у обжарщиков. Меньше десяти дней — заказывать сейчас.
Выручка за всё время работы магазина.
УбратьОна только растёт. По ней не видно, стало ли хуже, и ничего по ней не решают.
Заказы по часам за неделю.
В отчётНужны раз в квартал, когда составляют график смен сборщиков. Каждый понедельник по ним ничего не решают.
Доля заказов, собранных с ошибкой: не тот сорт, не тот помол.
ОставитьВыросла — разбираются со сборкой на этой же неделе, пока покупатели не начали уходить.
Число зарегистрированных аккаунтов.
УбратьРастёт само, а заказать можно и без аккаунта. Управляющая не может назвать решение, которое по нему примет.
Продажи по способам оплаты: карта, СБП, при получении.
В отчётПригодится, когда выбирают платёжный сервис или разбирают сбой оплаты. Не каждую неделю.
Кто смотрит на показатель
Как узнать, что на показатель никто не смотрит? Спросить — и проверить, если инструмент считает просмотры: во многих системах аналитики видно, кто и когда открывал отчёт. Показатель, который не открывали два месяца, — первый кандидат.
После разбора из двенадцати графиков и плиток на экране «Продажи и склад» осталось шесть. Остальные ушли в отчёт «Продажи подробно» или пропали совсем.
С этим спорит Таня Мисютина в «Советах» Бюро Горбунова: если данные помещаются без ущерба для чтения, зачем показывать меньше. В разборе дашборда продаж она добавляет на экран полную таблицу. Разница — в задаче экрана: её дашборд изучают, а экран понедельника нужен, чтобы быстро решить и пойти делать. Там каждая плитка без решения отнимает внимание у тех, что с решением.
5Главное — сверху
Экран читают сверху вниз. Наверху — ответ на главный вопрос экрана, ниже — объяснение, ещё ниже — подробности или ссылка на них.
Главный вопрос понедельника у управляющей: всё ли в порядке и что сделать на этой неделе. Отсюда порядок экрана:
- Наверху — плитки с главными числами недели и базой у каждого. Плитка, которая требует действия, выделена.
- Ниже — графики, которые объясняют: в какие дни что-то пошло не так, какие сорта просели.
- Внизу — ссылка на подробный отчёт для редких вопросов.
Сначала обзор
Это старое правило визуализации. В 1996 году Бен Шнейдерман сформулировал его мантрой: сначала обзор, потом приближение и фильтры, подробности — по запросу.
В дизайн-системе IBM Carbon то же сказано для обзорных дашбордов — тех, что показывают текущее состояние главных показателей:
- самое важное — наверху страницы, с самым высоким контрастом и на самой большой площади;
- число показателей ограничено;
- остальное — по мере надобности.
Стивен Фью настаивал, чтобы дашборд помещался на один экран без прокрутки: всё, что нужно для решения, должно быть видно одновременно. На телефоне это недостижимо, поэтому там важнее порядок: первая плитка — та, что требует действия.
6Найдите ошибки на экране «Продажи и склад»
Вторая версия экрана, которую дизайнер принёс на обсуждение. Пять мест в ней не помогают управляющей решить, что делать на этой неделе.
Нажимайте на плитки и графики, которые вы бы переделали. В разборе будет, что с ними не так. Нормальные тоже можно нажать.
- Плитка «Просмотры страниц» на первом месте.Убрать. Управляющая не может назвать решение, которое примет по просмотрам. Самое заметное место экрана досталось числу, по которому ничего не делают. Если просмотры нужны маркетингу — им место в их отчёте.
- Плитка «Выручка» с полосой плана.Оставить. База — план, и полоса показывает, сколько не хватает. Она занимает одну строку плитки.
- «+100 %» у возвратов, плитка красная.Переделать. Было 2, стало 4 — процент на маленьком числе пугает зря. Обычно бывает от 2 до 7 возвратов в неделю, это норма. Показать «4 · обычно 2–7» серым.
- «Остаток зерна на складе, кг — 186».Переделать. 186 кг — это много или мало? Без базы не понять, а решение — заказывать ли зерно — нужно по каждому сорту. Остаток считают в днях продаж и по сортам: «Кения АА — на 3 дня».
- Плитка «Кения АА — на 3 дня».Оставить. Выход за порог выделен цветом и словом, и написано, что делать. Ей бы ещё стоять первой.
- Спидометр «План месяца».Переделать. Полукруг занимает место, а говорит одно число — его и так видно под стрелкой. Неясно, хорошо ли 64 %: смотря какое сегодня число месяца. Полоса плана с чертой «сколько должно быть к сегодня» ответит на это.
- Столбцы отклонений заказов от обычного.Оставить. База — обычный уровень для дня недели, норма серая, два дня за порогом выделены.
- Семь цветных линий «Продажи по сортам».Переделать. Линии пересекаются, цвета надо сверять с подписями, падение Кении не видно. Для понедельничного вопроса «что просело» хватит столбцов по сортам с чертой прошлой недели — они на этом же экране.
- Столбцы «Продажи по сортам» с чертой прошлой недели.Оставить. По убыванию, с числом, база — черта прошлой недели. Кения сразу видна далеко слева от своей черты.
- Плитка «Средний чек» с обычным диапазоном.Оставить. В пределах нормы — серым, с диапазоном. Спокойно и понятно.
Все пять найдены. Показатель без решения на лучшем месте, процент на маленьком числе, остаток без базы, спидометр и семь линий. После правки экран отвечает на вопрос понедельника: что заказать и что проверить.
7Задание
Пересоберите свой дашборд: к каждому показателю добавьте базу сравнения и уберите то, по чему никто не принимает решений.
Часть 1 · Разобрать показатели, 30 минут
- Выпишите все показатели дашборда, который у вас есть. Если своего нет, возьмите экран «Продажи и склад» из урока в первой версии на двенадцать графиков.
- Для каждого спросите того, кто смотрит на экран: что он сделает, если число вырастет вдвое или упадёт.
- Разложите: оставить, в отдельный отчёт или убрать.
- Для оставшихся выберите базу и порог, после которого показатель выделяется.
ДАШБОРД: ______________________ Дата: __.__.____ КТО СМОТРИТ: ______________________ КАК ЧАСТО: __________ ГЛАВНЫЙ ВОПРОС ЭКРАНА: ______________________ ПОКАЗАТЕЛЬ: ______________________ решение по нему: ______________________ база: прошлый период / план / обычный диапазон / год назад порог: ________ что делать за порогом: ______________ график: число / линия / столбцы / таблица — вопрос: ____________ место: наверху / ниже / в отчёте / убрать ПОКАЗАТЕЛЬ: ______________________ решение по нему: ______________________ база: прошлый период / план / обычный диапазон / год назад порог: ________ что делать за порогом: ______________ график: число / линия / столбцы / таблица — вопрос: ____________ место: наверху / ниже / в отчёте / убрать БЫЛО ПОКАЗАТЕЛЕЙ: ____ НА ЭКРАНЕ: ____ В ОТЧЁТЕ: ____ УБРАНО: ____
Часть 2 · Пересобрать, 40 минут
- Наверх поставьте плитки, отвечающие на главный вопрос экрана. Первой — ту, что требует действия.
- У каждой плитки — число, период и база. Норма серая, выход за порог — цветом и словом.
- Под плитками — графики, которые объясняют. Каждый отвечает на один вопрос; много рядов — один выделен.
- Внизу — ссылка на отчёт с тем, что ушло с экрана.
Часть 3 · Проверить, 15 минут
- Покажите экран тому, кто им пользуется, и попросите назвать по каждому показателю решение.
- Спросите, что на экране он посмотрел бы первым. Если не плитку, которая требует действия, — поменяйте порядок.
Что должно получиться
- Два экрана: до и после, с подписанной базой у каждого числа.
- Таблица показателей: решение, база, порог, место — и сколько показателей ушло.
- Заметки с проверки: какие решения назвал пользователь экрана и что вы поменяли.
План работы: 30 минут на разбор, 40 на макет, 15 на проверку. Всего — около полутора часов.
Частые сложности
- «Показатель завёл руководитель, убрать нельзя». Не убирайте — перенесите в отчёт и спросите через месяц, открывал ли он его. Подробнее о таком разговоре — в уроке следующей ступени.
- «Плана нет». Возьмите обычный диапазон за последние недели. Он есть всегда, если у продукта есть история.
- «Не знаю, какой порог поставить». Посмотрите, сколько раз за последние два месяца показатель вышел бы за порог. Больше раза в неделю — порог мал; ни разу, хотя сбои были, — велик.
- «Без цветных плиток экран выглядит скучно». Спокойный экран, где цвет означает «сделай что-нибудь», работает лучше яркого, где цвет не значит ничего.
8Чек-лист и ошибки
Дашборд готов, если
- У каждого числа есть база: прошлый период, план или обычный диапазон
- База выбрана по вопросу, который человек задаёт экрану
- Маленькие числа сравниваются в штуках, а не в процентах
- У каждого графика один вопрос; много рядов — один выделен
- Где нужны точные числа для действия — таблица
- Норма серая, выход за порог — цветом и словом
- По каждому показателю названо решение
- Наверху — то, что требует действия; подробности — по ссылке
Что мешает
- Число без базы. Непонятно, хорошо это или плохо.
- Светофор на всех плитках. Когда красного много, его перестают замечать.
- Семь линий семью цветами. Видно всё, кроме ответа.
- Спидометр. Много места на одно число и никакой базы.
- Показатель «на всякий случай». Отнимает внимание у тех, по которым решают.
9Три ступени темы
В этом уроке учимся делать дашборд, по которому видно, что делать. На следующей ступени — вместе с продуктом решать, какие показатели вообще нужны и какие вредят.
| Ступень | Что нужно уметь | Как проверить результат |
|---|---|---|
| Junior | Подписывать показатель так, чтобы было ясно, что посчитано; указывать период; выбирать простой график под данные; не рисовать круг на семи долях; начинать столбцы с нуля | Человек, впервые увидевший экран, объясняет каждое число своими словами |
| Middle — этот урок | Давать числу базу сравнения; выбирать график под вопрос; показывать отклонение заметно, а норму спокойно; убирать показатели, на которые не смотрят; ставить главное наверх | По каждому показателю можно назвать решение, которое по нему принимают |
| Senior | Вести с продуктом разговор о решении за каждым показателем; отличать показатели влияния от показателей наблюдения; убирать мёртвые показатели; видеть, где показатель толкает к вредному | Хотя бы один показатель убран, и причина записана |
Что почитать дальше
- Как вы оцените этот дэшборд?Разбор дашборда продаж кассовой системы с переделкой: период рядом с цифрами, крупные спарклайны, связанные графики, таблица «часы × дни». Спорит с разделом о лишних показателях: Мисютина добавляет данные по принципу «показать больше без ущерба для чтения».
- Есть показатели, которые меняются в течение дняКороткий ответ Ильи Бирмана про график энергии и стресса за день: вместо зон «плохо» и «норма» — непрерывные линии и полосы событий, которые объясняют изменения. Спорит с разделом о порогах: Бирман считает зоны скучными, человеку интересны любые значения.
- В поисках пичков. Повышаем эффективность дашбордовКолонка о том, что недельные средние прячут дневные скачки, а скачок — повод искать причину; два случая, где выброс на графике привёл к росту выручки. Спорит с уроком: ответ «всё как обычно» здесь считают пустым, а шум — источником находок.
- Choosing Chart Types: Consider ContextСтатья Кейт Моран о том, почему число без сравнения ничего не значит и с чем его сравнивать: с прошлым или с похожим — конкурентом, задачей, группой. Ниже — когда брать столбцы, линию и точки и почему не составные столбцы. Дашборды статья не разбирает.
- DashboardsПамятка IBM Carbon о двух видах дашбордов: обзорный показывает состояние показателей — главное наверху, крупно и контрастно, лишнее по запросу; исследовательский нужен для фильтров, детализации и связанных графиков. Примеров нет.
- Common Pitfalls in Dashboard DesignБелая книга Стивена Фью 2006 года: 13 типичных ошибок дашбордов на экранах того времени — от прокрутки и чисел без контекста до спидометров и лишнего цвета. Текст Фью — страницы 1–16, дальше реклама спонсора. Полосу плана Фью описал отдельно.