Как стать автором
Обновить

Как улучшить восприятие столбиковых диаграмм?

Время на прочтение3 мин
Количество просмотров4.5K
Проблема: чтобы «прочитать» обычную столбиковую диаграмму, приходится дополнительно искать ключ её пониманию — читать подпись навроде «меньше значит лучше».

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

Дополнительная трудность состоит в том, что если диаграмм собралось в одном месте много, становится трудно переключаться между противоположными полаганиями: «чем меньше, тем лучше» и «чем больше, тем лучше».

The problem
(копия изображения)

Задача: на символическом уровне показать кто выигрывает, а кто проигрывает (в какой стороне хорошо, а в какой плохо).


Ввожу символ «выигрыша»


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

Солюшен
(копия изображения)

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

Использовать одновременно два символа для обозначения разных полюсов («выигрыш» и «проигрыш») я бы не стал, так как пользователю придётся идентифицировать каждый из них и затем выбирать между ними — на это, по моим представлениям, уходят драгоценные наносекунды. А выбирать между «что-то есть» и «нет ничего» будет проще. Одного полюса достаточно. (Впрочем, других доказателсьтв, кроме этих, не приведу.)

Синтетические диаграммы


Такие диаграммы соединяют результаты многих тестов, так что однозначного победителя (в общем случае) не будет. Попробую переместить символ победы на ось, визуально объединив с максимальным значением на шкале:


(копия изображения)

Градиент


В данном случае я использую метафора неба (бóльшие значения уходят ввысь, в голубые небеса). Дополнительно, везде на диаграмме пусто, и только у одного из краёв что-то постепенно появляется, значит пустота — это ноль, насыщенность — максимум. Вообщем градиент по яркости это ж и есть плавное перетекание от минимума к максимуму и наоборот; достаточно наглядно по-идее:


(копия изображения)

Хотя иногда градиенты используют просто «для красоты» — это может помешать.

(Впрочем, мои слова выше лишь пытаются постфактум оправдать существование градиента. Как он работает на самом деле, мне достоверно не известно; есть сомнения.)

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


(копия изображения)

Стрелки


Интересно, что они вам говорят — я уже не в состоянии глянуть на них свежо…


(копия изображения)


(копия изображения)

Выделение цветом


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

— А что сказать-то хотели?!


Вообще, диаграммы не просто так существуют — они призваны выражать какую-то определённую мысль. Бывают наверно и холодные беспристрастные особи, но всё же, рисуя диаграммку, стоит спросить себя, «а не хочу ли я через это выразить какую-то конкретную мысль?», пусть, может быть, и слабо это понимая. Например, «Хабр нынче не тот» или «Убунта всё ***е и ***е с каждым релизом». Тогда есть шанс что снизойдёт Великая Сила Контекста, и мысль можно будет выразить не общим, а наиболее эффективным и подобающим образом. И станет возможно, для примера, наградить победителя (если «победитель») виртуальной медалькой.

* * *


Если вы видели примеры удачно решённых в этом отношении диаграмм или есть что сказать по теме — прошу в комментарии. Только чур больно не пинать — это всего-лишь мой шестнадцатый пост на Хабре.

UPDATES


Ещё версия, для ситуации «меньше значит лучше»:


(копия изображения)

Как минимальный фикс, можно преобразовать фразы «меньше — лучше» в такое:


(копия изображения)

Просто, а думать надо будет сильно меньше.

В комментах ещё много идей и мыслей.

Преобразуем всё в «больше значит лучше»


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

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

Но не всегда это возможно, и тогда нарисуем столбцы не слева, а справа! Сначала понять мне было довольно сложно, но возможно — ось Х, и метки на ней остались как были:



Further reading


Оффлайн-книга Gene Zelazny «Говори на языке диаграмм» (спасибо Zagrebelion)
Теги:
Хабы:
+32
Комментарии112

Публикации