Что разберём
- Подпись: что именно посчитанотренажёр
- Период рядом с числомдо и после
- График под данныетренажёр
- Круговая на семи доляхпереключатель
- Оси и ноль на шкалеживая шкала
- Найдите ошибки на экране «Сводка»поиск
1Подпись: что именно посчитано
Число на экране ничего не значит, пока не ясно, что посчитано. Подпись отвечает на этот вопрос — словами того, кто смотрит на экран.
Так выглядела первая версия «Сводки»: четыре плитки, у каждой слово и число.
Управляющая смотрит на экран и не может ответить ни на один вопрос:
- Заказы — все оформленные или только оплаченные? Отменённые считаются?
- Выручка — в рублях? С доставкой или без? Возвраты уже вычли?
- Конверсия — доля кого среди кого: посетителей, которые купили, или тех, кто положил товар в корзину и дошёл до оплаты?
- Пользователи — посетители сайта, покупатели или зарегистрированные аккаунты?
Разработчик, который собирал экран, знает ответы: он писал запросы к базе. Управляющая — нет.
Если она решит, что «Выручка» — это деньги после возвратов, она ошибётся в каждом расчёте, где возьмёт это число.
| Было | Стало | Что уточнили |
|---|---|---|
| Заказы | Оплаченные заказы | Какие заказы: без неоплаченных и отменённых |
| Выручка | Выручка, ₽ · оплаченные заказы, без доставки | Единицы и что входит в сумму |
| Конверсия | Купили · доля посетителей сайта | Кто среди кого: из посетителей — те, кто оплатил заказ |
| Пользователи | Посетители сайта | Кто это: не покупатели и не аккаунты |
Единицы
Единицы — тоже часть подписи. «38 400» без них можно прочитать как рубли, граммы и просмотры страниц.
Короче всего — после названия: «Выручка, ₽», «Продажи, пачек».
Проверьте себя
Шесть плиток «Сводки». Понятно ли по подписи, что посчитано?
«Средний чек, ₽ — сумма оплаченных заказов, делённая на их число».
ПонятноСказано, какие заказы взяли, как посчитали и в чём.
«Активность».
УточнитьЧья и в чём? Покупателей, посетителей, сотрудников? Например: «Покупатели, у которых был заказ за 30 дней».
«Отказы».
УточнитьВ магазине так говорят об отменённых заказах, в веб-аналитике — о посетителях, которые сразу ушли с сайта. Два разных числа под одним словом: «Отменённые заказы» или «Ушли с первой страницы».
«Новые покупатели — первый оплаченный заказ в магазине».
ПонятноЯсно, кого считают новым: того, кто впервые заплатил, а не того, кто впервые зашёл.
«Трафик».
УточнитьПосетители, визиты или просмотры страниц — три разных числа, и они различаются в разы. Например: «Визиты на сайт».
«Возвраты, пачек — вернули покупатели».
ПонятноЧто считают, в чём и кто вернул. Не хватает только периода — о нём в следующем разделе.
2Период рядом с числом
Число без периода не с чем сравнить. 41 заказ за день и 41 заказ за месяц — это два разных магазина.
Подписи уже понятные, а периода у чисел нет. Переключите и сравните.
Без периода
С периодом
На дашбордах встречаются три вида периодов, и ведут они себя по-разному:
| Период | Как ведёт себя число | Для чего годится |
|---|---|---|
| За сегодня | Растёт в течение дня, с утра почти ноль | Следить за днём: всё ли идёт как обычно |
| За последние 30 дней | Каждый день сдвигается на день вперёд, меняется плавно | Видеть, куда идут дела, без шума отдельных дней |
| За всё время | Только растёт | Почти ни для чего: по нему не видно, стало ли хуже |
Неполный день
С ним связана частая ошибка. Например:
В 14:20 заказов 41, а вчера за весь день было 86. Плитка показывает «−52 % к вчера» — и управляющая думает, что продажи упали вдвое.
На деле это полдня против целого дня. Честное сравнение — с тем же часом вчера: тогда было 38, и сегодня даже чуть лучше.
3График под данные
График выбирают по тому, что надо увидеть в данных: как число менялось, что больше или какую часть целого оно составляет.
| Что надо увидеть | График | Пример из «Сводки» |
|---|---|---|
| Как менялось во времени | Линия. Если точек меньше десятка и числа складываются — заказы, выручка, — можно столбцы. Средний чек, цену и долю — линией | Заказы по дням за 30 дней |
| Что больше, что меньше | Столбцы. При длинных названиях — горизонтальные, по убыванию | Продажи по сортам |
| Какую часть целого | Если частей две–три — полоса из частей или одно число | Доставка и самовывоз |
| Одно число | Число с подписью и периодом, без графика | Заказы сегодня |
Почему столбцы, а не круги
Почему столбцы, а не круги и пузыри разного размера?
В 1984 году статистики Уильям Кливленд и Роберт Макгилл расставили способы показать число по тому, насколько точно их читают.
На первом месте — положение на общей шкале: так читаются верхушки столбцов от одной оси и точки линии. Длина и угол делят третье место, площадь — четвёртое, насыщенность цвета — последнее.
Сами авторы назвали этот порядок гипотезой, но на нём с тех пор стоят многие советы о выборе графика.
В Nielsen Norman Group объясняют выбор тем же восприятием: длину и положение глаз сравнивает быстро и точно, угол и площадь — плохо.
Поэтому круговые диаграммы там советуют избегать почти всегда — кроме случая, когда одна доля намного больше остальных. В другой статье там же правило короче: изменение во времени — линией, сравнение — столбцами.
Проверьте себя
Шесть вопросов к данным магазина. Какой график подойдёт?
Как менялся средний чек за полгода.
ЛинияДвадцать шесть недель подряд — это изменение во времени. Линия покажет, рос чек или падал.
Какой из двенадцати сортов продаётся лучше.
СтолбцыСравнение категорий. Названия длинные — горизонтальные столбцы, по убыванию, с числом у каждого.
Сколько заказов оплачено сегодня.
ЧислоОдно значение. График из одного столбца или спидометр с одной стрелкой не скажут больше, чем само число с подписью и периодом.
В какие города чаще всего возят заказы — восемь городов.
СтолбцыВосемь частей круга уже не сравнить. Столбцы по убыванию сразу покажут порядок.
Какая доля покупателей заказывает повторно.
ЧислоДоля из двух частей — «повторно» и «один раз». Хватит одного числа: «Повторно заказывают 38 %». Можно добавить полосу из двух частей.
Сколько посетителей было на сайте в каждый час сегодня.
ЛинияЧасы идут подряд — это время. Линия покажет, когда приходят покупатели.
4Круговая на семи долях
Круговую диаграмму читают по углам и площадям долей. На двух–трёх долях это работает, на семи — уже нет: соседние доли не сравнить, а цвета приходится сверять с подписями.
Продажи по сортам за 30 дней.
Попробуйте ответить по кругу: что продаётся лучше — Колумбия или Бразилия? Какой сорт на четвёртом месте? Потом переключите на столбцы.
Круговая
Продажи по сортам за 30 дней Эфиопия ИргачеффеКолумбия СупремоБразилия СантосКения ААГватемала АнтигуаКоста-Рика ТарразуСуматра МандхелингСтолбцы по убыванию
Продажи по сортам, пачек за 30 днейКруг часто подписывают процентами у каждой доли. Тогда его можно прочитать — но читают уже числа, а не круг. Это таблица, которая занимает больше места.
Когда круг уместен
Когда долей мало и важно, что вместе они — целое. Например: «доставка и самовывоз», «новые и повторные покупатели».
Насколько мало — источники расходятся. В Datawrapper советуют не больше четырёх долей, британская государственная служба аналитики — не больше пяти и чтобы одна была явно крупнее остальных.
Урок осторожнее: на двух–трёх долях угадывать не приходится вовсе. А полоса из частей или одно число обычно читаются ещё быстрее.
5Оси и ноль на шкале
Высоту столбца глаз читает как величину. Если шкала начинается не с нуля, столбец обманывает: разница в 10 % выглядит как разница в разы.
В первой версии «Сводки» был график «Заказы за неделю»: на прошлой неделе 400, на этой 440. Шкалу начали с 380, чтобы «было видно рост».
Подвиньте начало шкалы и посмотрите, что происходит со столбцами.
Такой график разбирал ещё Даррелл Хафф в 1954 году в книге «Как лгать при помощи статистики». Обрезанная шкала не всегда умысел: часто так получается само, когда начало шкалы никто не проверил. Но управляющая увидит «рост в три раза» в любом случае.
Если от нуля разницы не видно
Если разница важна, шкалу всё равно не обрезают — меняют график. В Datawrapper предлагают три выхода:
- точки вместо столбцов;
- линию;
- столбцы самой разницы — «+40 заказов к прошлой неделе».
Подписи осей
У каждого графика с осями есть ещё две подписи:
- что по вертикали и в чём — «заказы, шт.», «выручка, тыс. ₽»;
- что по горизонтали — дни, недели, месяцы.
Единицы можно перенести в заголовок графика, как выше. Главное, чтобы они были.
Линия — другое дело
Её читают по наклону, а не по высоте. Поэтому шкала может начинаться не с нуля — если начало подписано и видно.
Так считают и в Datawrapper, и в британской государственной службе аналитики: шкалу столбцов обрезать нельзя, шкалу линии — можно, когда без этого не видно изменения.
Если же линия подходит близко к нулю, ноль на шкале лучше оставить.
Например, средний чек за полгода колеблется между 908 и 951 рублями. От нуля линия выйдет почти плоской, и изменение в 4–5 % пропадёт.
Шкала от нуля
Средний чек, ₽ по неделям, апрель — сентябрь 0 500 1 000 апрельсентябрьШкала от 880
Средний чек, ₽ по неделям, апрель — сентябрь · шкала от 880 880 920 960 апрельсентябрь6Найдите ошибки на экране «Сводка»
Вторая версия «Сводки», которую дизайнер принёс на обсуждение. Пять мест в ней мешают управляющей понять, как идут дела.
Нажимайте на плитки и графики, которые вы бы переделали. В разборе будет, что с ними не так. Нормальные тоже можно нажать.
- Плитка «Оплаченные заказы» за сегодня до 14:20.Оставить. Понятно, какие заказы, за какое время и с чем сравнить: вчера к этому же часу.
- Плитка «Пользователи».Переписать. Непонятно, кто это — посетители, покупатели или аккаунты, — и за какое время. Например: «Посетители сайта · сегодня, до 14:20».
- «−55 % к вчера» у выручки.Переделать. Неполный день сравнили с полным: выручка до 14:20 против выручки за весь вчерашний день. Сравнивать надо с тем же часом: вчера к 14:20 было 35 100, это +9 %.
- Плитка «Средний чек» за 30 дней.Оставить. Подпись, единицы и период на месте. Месяц для чека правильнее дня: за день он скачет от одного крупного заказа.
- Линия «Оплаченные заказы по дням».Оставить. Время — линией, шкала подписана и начинается с нуля, даты по краям, единицы в заголовке.
- Столбцы «Заказы за неделю» со шкалой от 380.Переделать. Столбцы обязаны начинаться с нуля. От 380 столбец «Эта» втрое выше, хотя заказов больше на 10 %.
- Круговая «Продажи по сортам» на семь долей.Переделать. Семь долей не сравнить по углам, а цвета приходится сверять с подписями. Горизонтальные столбцы по убыванию с числом у каждого.
- Горизонтальные столбцы «Города доставки».Оставить. Сравнение — столбцами от нуля, по убыванию, названия слева, число у каждого.
- Линия «Выручка» без шкалы и дат.Дописать. Видна форма, но не видно ни величины, ни времени: рубли это или тысячи, неделя или месяц. Нужны единицы в заголовке, шкала слева и даты под линией.
- Полоса «Как получают заказ».Оставить. Две доли целого — полосой и числами. Круг здесь тоже сработал бы, но полоса короче.
Все пять найдены. Подпись без смысла, неполный день против полного, столбцы не от нуля, круг на семь долей и линия без шкалы. Каждое из этих мест управляющая встречает каждый день, когда открывает «Сводку».
7Задание
Соберите экран с четырьмя показателями своего продукта. Подпишите каждый и укажите период.
Часть 1 · Выбрать и описать, 20 минут
- Выберите четыре показателя, на которые смотрят каждый день или каждую неделю: заказы, заявки, оплаты, обращения в поддержку. Если своего продукта нет, возьмите «Сводку» «Лесной обжарки» из урока.
- Для каждого запишите, что именно считается и что не считается: какие заказы, какие деньги, какие люди.
- Выберите период и решите, с чем число сравнивать: со вчера к тому же часу, с прошлой неделей.
- Решите, нужен ли график. Если нужен — какой и почему.
ЭКРАН: ______________________ Дата: __.__.____ КТО СМОТРИТ: ______________________ КАК ЧАСТО: ______________________ ПОКАЗАТЕЛЬ 1: ______________________ считаем: ______________________ не считаем: ______________________ единицы: ________ период: ________ сравниваем с: ________ график: нет / линия / столбцы / полоса — почему: ______________ ПОКАЗАТЕЛЬ 2: ______________________ считаем: ______________________ не считаем: ______________________ единицы: ________ период: ________ сравниваем с: ________ график: нет / линия / столбцы / полоса — почему: ______________ ПОКАЗАТЕЛЬ 3: ______________________ считаем: ______________________ не считаем: ______________________ единицы: ________ период: ________ сравниваем с: ________ график: нет / линия / столбцы / полоса — почему: ______________ ПОКАЗАТЕЛЬ 4: ______________________ считаем: ______________________ не считаем: ______________________ единицы: ________ период: ________ сравниваем с: ________ график: нет / линия / столбцы / полоса — почему: ______________
Часть 2 · Нарисовать, 40 минут
- Соберите экран: четыре плитки сверху, под ними — графики, если они нужны.
- У каждой плитки — подпись с единицами, число, период и сравнение.
- У каждого графика — заголовок с единицами, подписанная шкала и даты. Столбцы — от нуля.
- Проверьте на телефоне: плитки встают одна под другой, подписи не обрезаются.
Часть 3 · Проверить, 10 минут
- Покажите экран человеку, который видит его впервые, и попросите объяснить каждое число своими словами.
- Запишите, где он ошибся или сказал «наверное». Там подпись или период надо уточнить.
Что должно получиться
- Экран с четырьмя подписанными показателями и периодами.
- Описание показателей: что считается, что нет, с чем сравнивается.
- Заметки с проверки: какие числа поняли не так и что вы поправили.
План работы: 20 минут на описание, 40 на макет, 10 на проверку. Всего — чуть больше часа.
Частые сложности
- «Не знаю, что именно считает система». Спросите разработчика или аналитика, какой запрос стоит за числом. Ответ «все заказы» — повод уточнить, входят ли отменённые и тестовые.
- «Подпись получается длинной». Короткое название — крупно, уточнение — мелко под ним: «Выручка, ₽» и ниже «оплаченные заказы, без доставки».
- «Хочется показать все числа, которые есть». Четыре — это ограничение задания, а не случайность. Выбирайте те, по которым что-то решают каждый день.
- «График выглядит скучно». Скучный график, который читается за секунду, лучше красивого, который надо разгадывать. Объём, тени и градиенты числа не добавляют.
8Чек-лист и ошибки
Экран готов, если
- У каждого числа есть подпись, которую нельзя понять двумя способами
- Единицы указаны: рубли, штуки, пачки, проценты
- У каждого числа виден период — у плитки или в шапке экрана
- Неполный период сравнивается с таким же неполным
- Время показано линией, сравнение — столбцами
- Круговая — не больше чем на три доли
- Столбцы начинаются с нуля
- У графиков подписаны шкала, единицы и даты
Что мешает
- Слово вместо подписи. «Пользователи», «Трафик», «Активность» каждый понимает по-своему.
- Число без периода. Не с чем сравнить.
- Полдня против целого дня. Плитка показывает падение, которого нет.
- Круг на семь долей. Доли не сравнить, цвета не запомнить.
- Шкала столбцов не от нуля. Разница в 10 % выглядит как разница в разы.
9Три ступени темы
В этом уроке учимся собирать экран, на котором понятно каждое число. На следующих ступенях — делать дашборд, по которому видно, что делать дальше, а потом вместе с продуктом решать, какие показатели вообще нужны.
| Ступень | Что нужно уметь | Как проверить результат |
|---|---|---|
| Junior — этот урок | Подписывать показатель так, чтобы было ясно, что посчитано; указывать период; выбирать простой график под данные; не рисовать круг на семи долях; подписывать оси и начинать столбцы с нуля | Человек, впервые увидевший экран, объясняет каждое число своими словами |
| Middle | Давать числу базу сравнения; выбирать график под вопрос; показывать отклонение заметно, а норму спокойно; убирать показатели, на которые не смотрят; ставить главное наверх | По каждому показателю можно назвать решение, которое по нему принимают |
| Senior | Вести с продуктом разговор о решении за каждым показателем; отличать показатели влияния от показателей наблюдения; убирать мёртвые показатели; видеть, где показатель толкает к вредному | Хотя бы один показатель убран, и причина записана |
Что почитать дальше
- ПравдивостьКороткий текст о том, почему размер фигуры должен быть пропорционален числу: столбец, обрезанный снизу, круги в газете «Правда», опасная настройка Tableau. Автор строже урока: обрезанный столбец считает враньём, даже если умысла не было.
- Конструируем каркасы. Линейный графикРазбор линейного графика на примере цены яиц: как усреднение стирает ступеньки, почему цену и среднее не рисуют столбиками, а количество и деньги — рисуют. Автор строже урока: столбцы во времени — только для того, что складывается.
- Почему важно давать точное определение метрикКак одно слово «конверсия» дало Spotify 45 % вместо примерно 15 %: делили платящих на всех активных, а не на новых. В конце — четыре разных значения «конверсии в платящего». Середина с расчётами удержания — уровень выше урока.
- Вот такие пироги… Почему нам врут круговые диаграммыКороткая статья о том, почему сектора не сравнить на глаз и как объём искажает и круг, и столбцы. Автор строже урока: сначала предлагает не использовать круг нигде, в конце допускает несколько заметно разных долей. «Гистограммой» там названа столбчатая диаграмма.
- Dashboards: Making Charts and Graphs Easier to UnderstandПочему столбцы и линии читаются быстрее кругов, спидометров и тримапов: глаз точно сравнивает длину и положение и плохо — угол и площадь. Отдельно про объём и цвет. Строже урока: круг советуют избегать почти всегда, кроме одной доли, которая сильно больше остальных.
- Why our column and bar charts start at zero (or below)Справка Datawrapper о том, почему инструмент не даёт начать столбцы выше нуля: исследование 2015 года о том, как обрезанная ось преувеличивает разницу, и три выхода, если от нуля разница не видна: точки, линия, столбцы разницы.