Рассмотрим визуализацию ошибок в ответах на экзамене по ПДД:

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

На этой визуализации нет осей как таковых. Квадратики‑вопросы объединены в прямоугольники‑билеты, которые «разложены» на плоскости экрана как на экзаменационном столе. Это пример использования естественной метафоры на макро‑уровне. Каждый квадратик‑вопрос окрашен в зависимости от доли ошибок среди ответов. В качестве цветового кодирования использован так называемый «светофорный» градиент: зелёным цветом показаны вопросы попроще, жёлтым посложнее, красным — самые сложные. Это пример использования естественной метафоры на микро‑уровне, мы присваиваем правильному ответу зелёный цвет, неправильному — красный, а для совокупности ответов получаем «средний» цвет. При наведении на вопрос мы видим его содержание с картинкой, если она есть, с вариантами ответов, где курсивом выделен правильный ответ, и расшифровкой цветового кодирования.

Благодаря делению ответов по номеру попытки мы видим, что тренажёр работает! Уже со второй попытки правильных ответов становится в среднем значительно больше, диаграмма зеленеет:

То, что билет как сущность присутствует на визуализации в виде прямоугольника даёт нам возможность показать какую‑то важную информацию о нём, привязав её к этому графическому объекту. Так со второй попытки примерно половину билетов пользователи сдали (✓), то есть допустили в них в среднем меньше двух ошибок, а другую половину не сдали (×), то есть допустили две и более ошибок. Это показывают галочки и крестики в нижнем правом углу прямоугольников.

Мы также оцениваем сложность отдельных вопросов. Обратите внимание, что даже на десятой попытке 17‑й вопрос 11‑го билета и 13‑й вопрос 38‑го билета остаются оранжевыми:

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

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

Покажу ещё один пример — инструмент для принятия решений о покупке и продаже ценных бумаг:

В сердце сервиса график разброса, на котором показаны облигации. Одна облигация = одна фигурка, кружок или треугольник. На осях проявлены два самых важных свойства облигации, срок (duration) и доходность (yield). И ещё целых четыре свойства проявлены за счёт свойств графического объекта. Формой показано есть ли эта бумага в портфеле, если есть — треугольник, если нет — кружок. Цветом показан рейтинг бумаги от C до AAA, который отражает надёжность эмитента. Размером показана ликвидность, то есть востребованность ценной бумаги на рынке. Степеней ликвидности всего несколько, поэтому размер меняется не линейно, а шагами. В этом случае мы можем настроить размер кружков и треугольников попарно так, чтобы они считывались как бумаги с одинаковой ликвидность. Если бы параметр, отвечающий за размер, менялся непрерывно, мы бы не использовали кодирование формой. И последнее проявленной свойство бумаги — это тип. Он появляется не у всех бумаг и показан на графике символом поверх фигуры. На примере выше видны бумаги типа «S» — сберегательные облигации (savings bonds), и типа «~» — флоатеры, бумаги с плавающей ставкой (floating rate note).

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