Scott
График может быть технически верным и при этом оставаться непонятным. Легенда иногда опирается только на цвет, на оси не указаны единицы измерения, а единственное точное значение спрятано во всплывающей подсказке. Люди читают графики с разным зрением, способами ввода, языками, устройствами и опытом работы с данными. Доступная визуализация позволяет выполнить нужное сравнение несколькими способами.
Начните с трёх основ: назовите показатель и охват данных, добавьте признак помимо цвета и сделайте важные значения доступными в виде текста. Ниже эти принципы применяются к подписям графика, работе с клавиатуры и состояниям отсутствующих данных. О выборе типа графика читайте в статье «Дизайн визуализации данных» (на английском).
Начните с решения, которому должен помочь график
Прежде чем выбирать тип графика, сформулируйте решение, которое нужно принять читателю. «Разобраться в выручке» — слишком расплывчато. «Сравнить долю продлений по тарифам и найти самое большое изменение за квартал» — конкретная задача для графика. График без такой задачи часто обрастает подписями, цветами и элементами управления, конкурирующими друг с другом.
Определите аудиторию, временные границы, единицы измерения и допустимую точность. Финансовому аналитику могут понадобиться точные значения и возможность скачать данные, а руководителю — направление изменений и явно обозначенное исключение. Один набор данных может лежать в основе двух разных представлений, но ни одно из них не должно скрывать свои допущения.
Подготовьте краткий бриф графика:
| Поле | Вопрос |
|---|---|
| Решение | Что читатель должен сравнить или решить? |
| Показатель | Что подсчитывается, усредняется или оценивается? |
| Единица измерения | Это количество, процент, денежная сумма, длительность или индекс? |
| Охват | Какие пользователи, временной диапазон и фильтры включены? |
| Неопределённость | Данные поступают с задержкой, основаны на выборке или являются оценкой? |
Бриф связывает визуальный язык со смыслом. Позже он также поможет авторам контента и разработчикам создать текстовые альтернативы.
Не кодируйте информацию только цветом
Цвет удобен для акцентов, но ненадёжен как единственный ключ к категориям, статусам или направлению изменения. Добавьте второй признак, который сохранится при изменении цвета: прямую подпись, форму, стиль линии, положение, узор, значок с текстом или видимое пояснение. Этот признак должен одинаково использоваться в графике и его легенде.
В линейном графике подпись у конца линии может быть понятнее удалённой легенды. В таблице статусов сочетайте название статуса с цветным маркером, а не показывайте только красный, жёлтый и зелёный цвета. На карте дополняйте цветовую шкалу границами, подписями или текстурой.
Не пытайтесь решить все проблемы добавлением узоров. Плотный орнамент может ухудшить читаемость для всех. Сначала используйте положение и прямые подписи, а затем добавляйте сдержанный дополнительный признак для категорий, которые всё ещё трудно различить.
Проверяйте контраст в контексте графика
Возьмите за отправную точку соответствующий порог WCAG. Обычному тексту, как правило, нужен коэффициент контрастности не ниже 4,5:1; тексту, соответствующему критериям крупного, — 3:1. Графическим элементам, необходимым для понимания графика, обычно требуется 3:1 относительно соседних цветов. Применяйте правило к реальному элементу и фону, а не только к образцам палитры. Очень тонкие линии могут оставаться плохо различимыми после сглаживания, даже если исходные цвета проходят проверку.
Проверьте график во всех предусмотренных продуктом состояниях: обычном, с фокусом, с выделением, в тёмной теме и при печати. Прямые подписи или видимые значения могут передавать информацию, которую декоративному элементу с низким контрастом передавать необязательно; задокументируйте эту связь, а не объявляйте доступной всю палитру. Для выделения тоже нужен признак — подпись, маркер или оформление линии, — различимый без цвета.
Требования и исключения описаны в рекомендациях W3C по контрасту текста (на английском) и контрасту нетекстовых элементов (на английском). Помимо проверки цветовых значений, тестируйте отрисованный график в том размере, в котором он будет использоваться.
Обозначьте сравнение, которое должен сделать читатель
Заголовок вроде «Результаты за месяц» не объясняет, о каких результатах идёт речь. Полезный заголовок называет показатель и охват: «Доля продлений по тарифам, январь–июнь 2026 года». В подзаголовке можно указать источник, время обновления или фильтр. Подписи осей должны содержать единицы измерения и понятную шкалу; сокращения требуют расшифровки либо привычного читателю контекста.
Добавляйте пояснения к значимым событиям, а не к каждой точке. Выделяйте изменение или порог, влияющий на решение, и размещайте примечание рядом с соответствующим элементом. Если важное значение можно узнать только при наведении, продублируйте его видимым текстом или в равноценной таблице.
В серии небольших однотипных графиков повторяйте шкалу или ясно укажите, общие ли у них оси. Разные шкалы могут придать небольшому изменению драматичный вид, а одинаковые — скрыть значимое различие. Зафиксируйте выбранный подход в брифе графика.
Спроектируйте доступную таблицу данных или текстовое резюме
Для сложного графика добавьте короткое описание его темы и расположенное рядом текстовое объяснение важного сравнения. Если читателям нужны точные значения, предоставьте структурированную таблицу с теми же рядами данных, единицами, датами и фильтрами. Возможность скачать данные тоже полезна, но она не должна быть единственным способом получить ключевую информацию. Используйте корректные заголовки строк и столбцов и название таблицы: изображение таблицы по-прежнему остаётся изображением.
Текстовое резюме может назвать главное сравнение и исключение:
С апреля по июнь доля продлений выросла на тарифах Team и Business. Самый большой рост был у Business; данные Enterprise за июнь неполны.
Когда важны точные данные, эта фраза не заменяет значения, но даёт читателю содержательную отправную точку. Не называйте тенденцию «хорошей» или «плохой», если в продукте не определён соответствующий порог.
Различайте нулевые, отсутствующие, задержанные и оценочные значения
Состояния пустых и недоступных данных должны различаться. Ноль означает, что измеренное значение равно нулю. Отсутствие данных может означать, что событие ещё не произошло, фильтр не нашёл совпадений или система не собирала этот показатель. Для данных с задержкой нужна временная отметка или пояснение. Оценочное значение следует явно обозначить как оценку и, когда это важно, указать метод или диапазон.
Если фильтр не возвращает строк, сохраняйте оси и подписи на месте, но объясните, как изменился охват. Не рисуйте ровную нулевую линию только ради завершённого вида графика. При сбое источника данных покажите рядом с затронутым графиком статус с возможностью восстановления и сохраните выбранные фильтры.
Примеры UI-дизайна дашбордов полезны для иерархии карточек, но определения состояний должны опираться на контракт данных. Спокойная пустая панель лучше убедительно выглядящего значения, которое продукт не может обосновать.
Обеспечьте взаимодействие без точного наведения указателя
Обеспечьте управление функциями графика с клавиатуры, включая фильтры, переключение рядов и выбор диапазона. Ключевые значения не могут зависеть только от наведения на крошечную точку. Для простого статичного графика подписи значений и доступная таблица могут быть понятнее, чем остановка клавишей Tab на каждом элементе. Для интерактивного графика определите порядок фокуса, перемещение между значениями и выход из графика без клавиатурной ловушки.
Если действие обновляет график, сообщайте новый охват данных или показывайте его текстом. Если пользователь может скрыть ряд, объясните, как вернуть его. Для ползунка просмотра или выбора диапазона показывайте выбранные даты в понятном формате, не полагаясь только на положение бегунка.
На мобильном устройстве важна плотность интерактивных элементов. Используйте карточку с резюме или отдельное подробное представление вместо уменьшения десктопного графика до наложения подписей. Прежде чем задавать минимальную ширину, проверьте длинные подписи и переведённые единицы измерения.
Стройте цветовую систему вокруг смысла
Выбирайте роли цветов, а не отдельные образцы. Категориальной палитре нужны различимые и последовательно используемые цвета рядов; последовательной шкале — упорядоченный смысл; расходящейся шкале — понятная средняя точка. Оставляйте акцентные цвета для выбранного или рекомендуемого ряда, а нейтральные тона — для контекста.
Опишите, что происходит, когда категорий становится больше, чем цветов в палитре. Можно объединять малочисленные категории «длинного хвоста», использовать прямые подписи или переходить к таблице. Не добавляйте едва различимые цвета, превращая легенду в головоломку. Материал о дизайн-токенах и общих значениях (на английском) поможет команде зафиксировать роли цветов в дизайн-системе, но графику всё равно нужны правила отображения новых данных.
Проверьте палитры в оттенках серого, при пониженной непрозрачности и с учётом распространённых особенностей цветового зрения. Автоматические инструменты могут выявить проблемные пары контраста, но человеку всё равно нужно убедиться, что нужное сравнение понятно на графике целиком.
Нарисуйте в Pixso график и сопутствующую таблицу на основе одного небольшого набора данных. Разместите название категории и значение рядом с каждым столбцом, затем повторите их в таблице, чтобы смысл сохранялся без цвета. Используйте общие стили текста и цвета, сравнивая представления на узкой ширине. Прежде чем добавлять состояния наведения или экспортировать дизайн для разработки, проверьте, может ли коллега определить каждую категорию и найти точное значение.
В примере со статусами задач оба представления используют один небольшой набор данных: 6 запланированных задач, 4 в работе и 2 завершённые. Краткое резюме: «Половина из 12 задач запланирована; 2 завершены».
| Статус | Число задач |
|---|---|
| Запланировано | 6 |
| В работе | 4 |
| Завершено | 2 |
Проверяйте графики с реальным содержимым и ограничениями
Составьте матрицу проверки с типом графика, областью просмотра, темой, состоянием данных, состоянием взаимодействия и альтернативным представлением. Включите максимально ожидаемое число категорий, самую длинную подпись, наименьшее значение, пропущенное значение и необычный выброс. Проверьте график при обычном масштабе и с увеличенным текстом.
Попросите участников выполнить задачу, а не просто одобрить снимок экрана:
- Назвать показатель и единицу измерения.
- Найти наибольшее и наименьшее релевантные значения.
- Объяснить, что изменилось в выбранном временном диапазоне.
- Найти пропущенное или оценочное значение.
- Переключить фильтры и вернуть предыдущее представление.
Если участник не справляется без объяснения дизайнера, графику нужны более понятные подписи или другое представление данных.
Держите источник и интерпретацию рядом
Разместите источник, время обновления и пояснение интерпретации рядом с графиком или в панели подробностей, которую можно сразу открыть. Сноску в конце длинного дашборда легко пропустить, особенно если график копируют в презентацию. Пояснение должно сообщать, что представляет собой показатель — количество, долю, выборочные данные или оценку, — и указывать диапазон дат текущего представления.
При экспорте или отправке графика сохраняйте этот охват вместе с изображением или таблицей. Обрезанный снимок без единиц измерения или временного диапазона можно принять за другой результат. Дизайнерам не обязательно предписывать единственный формат экспорта, но сведения, необходимые для интерпретации результата, должны быть доступны в интерфейсе и материалах передачи в разработку. Этот контекст не даст хорошо оформленному графику стать неоднозначным вне продукта.
Передайте в разработку решения о данных и доступности
Рядом с компонентом задокументируйте поля данных, единицы измерения, порядок сортировки, охват фильтров, время обновления и резервное состояние при недоступности данных. Добавьте видимый заголовок, текстовое резюме, подход к таблице и поведение клавиатуры. Объясните, какие цветовые признаки или различия формы дублируют информацию и какие значения намеренно сгруппированы.
Процесс передачи дизайна в разработку подходит для фиксации этих решений, но не прячьте их в снимке экрана. Разработчикам нужны смысловой контракт и правила состояний, чтобы реализовать график, который останется понятным при изменении данных.
Сверьте график с источником
После сортировки, фильтрации и изменения размера сравните каждое видимое значение с исходной таблицей. В примере статусов задач у категории «Запланировано» должно оставаться 6 и в подписи столбца, и в категории, связанной с легендой, и в строке таблицы; резюме по-прежнему должно относиться ко всем 12 задачам. Затем уберите цвет и проверьте график с клавиатуры. Если значение, подпись или действие становится недоступным, исправьте соответствующее представление, прежде чем считать график готовым.
