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

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

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

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

Даже популярные буквенные сокращения (помните, были такие как LOL, OMG и другие) постепенно вытесняются иконками. У пользователей нет времени набирать буквы.

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

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

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

Если к этим иконками добавить фирменный стиль бренда, то вы получите маркетинговые пиктограммы для поддержки веб-сайта компании и ее материалов.

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

Обычно, люди работают с интерфейсом в спешке, поэтому интерактивные иконки должны быть простыми (часто чёрно-белыми). Это ускоряет взаимодействие и облегчает работу глаз.

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

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

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

Центр инфографики и визуализации данных ООО «Газпромнефть-Региональные продажи» помогает сотрудникам и руководителям эффективно коммуницировать с помощью презентаций и визуализации данных. Данный кейс реален, однако в нём скрыты персональные данные. Задача данного лонгрида — рассказать о процессе редизайна дэшборда с акцентом на структурирование входящей информации и работу со смыслами.

Заказчик обратился с задачей сделать в PowerPoint прототип дэшборда для Qlik со статистикой по внутреннему обучению управлению данными.

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

Какой бы подробный бриф не присылали в первоначальном письме, рекомендуем добиваться личной встречи с будущим пользователем, а не с его представителями, иначе, скорее всего, придётся делать несколько раундов правок.

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

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

В этой работе мы обошлись без скетчей от руки и сразу отрисовывали прототип в PowerPoint.

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

Затем, нужно было вынести вверх KPI. Мы предложили дополнить их динамикой от прошлого периода, например, года.

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

Из исходной таблицы получился рейтинг слушателей по подразделениям и рейтинг по должностям

А вот круговая диаграмма превратилась горизонтальный барчарт, который наглядно демонстрирует рейтинг Топ-10 самых активных студентов

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

Благодаря подробному расспросу заказчика и его готовности довериться нашему видению, нам удалось с первого раза попасть в точку и избежать кардинальных корректировок. Всего на работу со всеми встречами и внесением правок у нас ушло 10 часов.

В итоге заказчик получил прототип дэшборда, который отвечал его первоначальным требованиям, был дополнен аналитикой, чётко структурирован и прост для понимания. Впоследствии прототип был реализован в QlikView уже силами заказчика, и используется по прямому назначению уже 2 года.

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

Приходите в телеграм-чат делиться своими вариантами выполнения заданий и задавать вопросы!