Упрощение дизайна отчетов по стандарту IBCS

в 9:59, , рубрики: IBCS, usability, дизайн, интерфейсы, упрощение

IBCS — это не integrated battlefield control system (комплексная система управления боевыми действиями) как кто-то мог подумать, IBCS — это International Business Communication Standards, что переводится как Международный Стандарт Делового Общения, или язык стандартизации представления информации в графическом и текстовом виде в панелях, графиках и таблицах, призванный достигнуть одинакового понимания предоставленной информации разными пользователями.

IBCS это стандарт включающий концепции и правила визуального дизайна понятных отчетов и презентаций, основанный на тех же принципах, которые используются в схемотехнике, нотной грамоте, или понятных всем знаках дорожной разметки.

Стандарт включает в себя ряд практик, в данной статье рассматривается практика под названием «Упростить и избежать помех» (SIMPLIFY avoid clutter).

Нам часто нам приходится сталкиваться с пользовательским дизайном представления бизнес информации в очень неоднозначном виде. Например, как на рисунке ниже.

image

С одной стороны, на такой информационной панели представлены данные, призывающие сделать выводы о состоянии бизнеса, а с другой стороны, подача этой информации на столько перегружена ненужными атрибутами, что теряется сама суть сообщения.

Стандарт IBCS призывает идти путем упрощения подачи данных и сосредотачиваться в максимальном приоритете на сути представленной информации, а не на ее визуальном оформлении.

Поэтому, данное представление будет подвергнуть линчеванию. Первое, что бросается в глаза, это обилие цветов, обилие фреймов и общая перегруженность информационной панели.

Зададимся вопросом: какой бизнес смысл несет задний фон?

image

Есть ли в заднем фоне какое-то сообщение, посыл, информация, на основании которых мы могли бы сделать значимый вывод? Нет! А может он есть в красных рамках? Тоже нет! => Убираем!

image

Есть ли какая-то то смысловая нагрузка фоне под текстом? Тоже нет!

image

=> Убираем!

image

Лого, в правом верхнем углу — какой в нем смысл?

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

=> Убираем!

image

Следующий объект анализа — это 3D представление фреймов. Для того, чтобы работать с цифрами, нам оно не нужно!

image

=> Убираем!

image

Рамки вокруг графиков тоже не несут никакой смысловой нагрузки.

=> Убираем!

image

Следующий объект анализа — это трехмерные графики в представлении столбцов, которые были популярны в начале 90-х. Давайте посмотрим внимательно, можно ли по внешнему виду этих графиков понять на сколько та или иная величина отличается от соседней и какое реальное значение столбца, если его спроектировать на вертикальную ось? Очень трудно т.к. 3D график имеет верхнюю границу, которая выше реального значения столбца. Такое визуальное представление не несет никакой смысловой нагрузки и только утяжеляет восприятие информации.

=> Убираем!

image

Теперь посмотрим внимательно на шрифты. Шрифты разные и более того, в них используется выделение, т.е. они жирные. Возникает логичный вопрос, что делать в случае, если в тексте вам действительно потребуется что-то выделить для акцентирования внимания? Ответ очевиден: удаляем жирность для всех шрифтов, отказываемся от использования Sherif шрифтов и используем простые шрифты вида Arial, Colibry и т.п.

Кроме того, нет никакого смысла в том, чтобы давать в заголовке пояснение того, что данный отчет — это графическое представление данных о продажах. Это и так является очевидным фактом.

=> Убираем!

image

Оставшуюся информативную часть переносим в заголовок отчета

image

Следующим объектом анализа является цветовая легенда которая дополнительно к заголовку над каждым графиком поясняет отнесение того или иного цвета к стране. В данном отчете каждая страна располагается в своем отдельном фрейме, нет областей пересечения данных и смешанных графиков. Поэтому цветовая легенда не несет никакого смысловой нагрузки.

image

=> Убираем!

image

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

Также возле каждого фрейма есть дублируются информация о валюте и размерности, которая уже представлена в заголовке и ее нет смысла дублировать.

=> Удаляем!

image

Нам не нужны цифры на вертикальных шкал ах т.к. они дублируются над каждым столбцом в графике.

=> Удаляем!

image

Следующий объект анализа — детальность представленная в цифрах, а именно количество знаков после запятой. Кардинальность больше одной цифры визуально на графике не будет никак различима для глаза, поэтому она не несет никакой сопоставимой с визуализацией полезной информации.

=> Убираем!

image

Уже выглядит лучше, но это еще не предел…

image

Цветовая расскраска графиков — тоже является лишним атрибутом, т.к. в названии каждого фрейма уже представлено название страны, к которой он относится.

=> Убираем!

image

В результате упрощения мы пришли к совершенно иному представлению информации.

image

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

Приведенные выше упрощения, в своей конечной цели призваны упростить подачу информации и сделать её более понятной, особенно если есть необходимость обратить внимание пользователя на какой-то отдельный элемент, требующий особого внимания и анализа, как на примере ниже: 2015 год.

image

Такая подача информации сразу акцентирует и обращает внимание на объект, требующий пристального внимания.

Сравните, с чего мы начинали и что было получено в результате применения одной из практик стандарта IBCS, которая называется “упрощение”.

image

Удачи всем! Ваш дядька Nucl

Автор: Nucl

Источник


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js