Пиктограммы
Набираемся опыта в иконках
Сегодняшний день марафона будет посвящён разработке и созданию эффективных визуальных символов. Мы разберём с вами те значки пиктограмм, которые наиболее востребованы в дизайнах дашбордов и информационных отчётов. Подумаем как собрать свой набор и как подстроить стиль значков под дизайн вашего информационного продукта, разберем особенности восприятия и узнаем источники и сервисы для создания своей собственной коллекции.
Заговорить на языке иконок
Когда вы оказываетесь в аэропорту, то сразу замечаете иконки-указатели — они выступают в роли ориентиров. От региона к региону они слегка отличаются, и это может предоставить нам интересную информацию о том, как там люди воспринимают самих себя и как общаются друг с другом. То же можно сказать и об иконках на дашбордах и в интерактивной отчетности. Но давайте разбираться в деталях.
В последнее время наше общение по всем каналам коммуникации становится все более и более кратким. И работает старая пословица — «лучше один раз увидеть, чем…»
В большинстве случаев, иконка понятнее чем слово. Язык пиктограммы универсален и позволяет передать нюансы, которые мы не всегда можем найти в словах.

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

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

Так как передавать информацию, мысли, образы и чувства с помощью визуальных символов в информационных продуктах? Попробуем разобраться какое изображение наилучшим образом подходит для выполнения определенной задачи в дизайне дашбордов, как можно разговаривать с конечным пользователем на удивительно богатом, информативном и красивом языке — языке иконок.
Под иконкой мы понимаем все, что отражает идею, объект, предмет, явление, чувство.
Обычно пользователи не замечают иконок, гармонично вписанных в ландшафт дашборда, воспринимая их как само собой разумеющееся. На самом деле, такие визуальные подсказки помогают ориентироваться в пространстве экрана с высоким содержанием информации. Сигналы, подаваемые иконками, должны быть простыми и понятными носителям любого языка.
Интерактивные иконки должны быть настолько простыми, чтобы оставаться невидимыми для пользователей
Виды иконок
Марина Пайвина
Эксперт по маркетинговым коммуникациям, Qlik Россия и СНГ
Давайте посмотрим на разные виды иконок и поговорим об их стилях и функциональности.
→ Иконки бренда
Такие иконки представляют ценности компании и обычно легко узнаваемы, т.к. построены на основе элементов фирменного стиля. Это логотипы и фирменные пиктограммы компаний, поддерживающие их брендбук.

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

Иконки «Yoga Studio» из коллекции Tilda
Если к этим иконками добавить фирменный стиль бренда, то вы получите маркетинговые пиктограммы для поддержки веб-сайта компании и ее материалов.

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

Самый известный сайт c огромным сообществом кураторов-дизайнеров с огромным каталогом пиктограмм

Простой и бесплатный сервис для поиска иконок и пиктограмм. Есть фильтры по стоимости изображений

Такой же простой и бесплатный сервис для поиска иконок и пиктограмм по тематике


→ Иконки для интерактива
Этот тип иконок строится на использовании уже существующего словаря функций и действий, то есть обычно выбираются те символы, которые уже работают. Например, корзина или тележка указывают на возможность произвести покупки. Любую иконку-действие следует тестировать, чтобы убедиться в ее соответствии функции.

«System icons» из коллекции Tilda
Обычно, люди работают с интерфейсом в спешке, поэтому интерактивные иконки должны быть простыми (часто чёрно-белыми). Это ускоряет взаимодействие и облегчает работу глаз.
Интерактивные иконки должны довести пользователя из точки, А в точку Б за кратчайшие время, чтобы пользователь даже не задумался, благодаря чему он получил нужную информацию.
Стили иконок
Если зайдете на сайт с подборкой иконок, увидите категоризацию пиктограмм по стилю: solid, outline, flat, 3D, isometric, handdrawn — с заливкой или контурные, «плоские» или с тенями и объемом, нарисованные как вручную или изометрический.

Разный стиль иконок может влиять на тональность вашего продукта.

Solid, Outline & Flat иконки
Как менялся стиль логотипа Google за два десятилетия
Набор иконок для вашего дашборда
Графические иконки могут помочь грамотно завершить навигацию на дашборде и упростить пользователям работу с данными. Они помогают во взаимодействии с функциями дашборда.
Все, кто смотрит на иконку, должны понимать ее одинаково. Иначе, ваш продукт ждет провал.
Для дашбордов обычно используются очень минималистичные, лаконичные и одноцветные иконки. Важно, чтобы любые графические образы быстро считывались и не отвлекали пользователей от непосредственной работы с данными, не спорили с диаграммы по цвету и контрасту. В приоритете — стиль иконок без заливки, ведь заливка создает достаточно заметные «пятна цвета» на листе дашборда.
Вот какой функционал иконок может присутствовать в ваших интерактивных отчетах:

  • Открыть страницу в новом окне
  • Переход к дополнительной аналитике
  • Визуализация является интерактивной
  • Визуализация является ссылкой
  • Открыть настройки
  • Открыть фильтры
  • Страница/вкладка дашборда: назад
  • Страница/вкладка дашборда: вперед
  • Перейти по ссылке на внешний ресурс
  • Открыть дополнительную информацию
  • Открыть скрытый, всплывающий блок
  • Закрыть всплывающий блок
  • Справочная информация по дашборду

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

К слову, на тот момент у заказчика уже был дэшборд, но он был сложно читаем, так что необходимость изменений была очевидна. Заказчику хотелось иметь полную картину тренинговых активностей, сделать более очевидное ранжирование тренеров, иметь воронку посещений.
Итак, что мы увидели в исходнике?
1
Самый заметный элемент дэшборда — круговая диаграмма про количество посещений. Дело было не только в некорректном выборе типа визуализации для такого количества данных, не только в обилии цветов, но главное — в том, что эта диаграмма создаёт собой основной акцент дэшборда. При этом рейтинг самых любознательных студентов (назовём его так) — не самая ключевая информация.
2
Второе — ключевые верхнеуровневые цифры вынесены в блок фильтров слева, там они совсем затерялись.
3
Третье — это то, что половину пространства занимает таблица. При таком обилии данных она неинформативна, и мы сразу начали думать над тем, как можно визуализировать её по-другому.
4
Четвёртое — было понятно, что можно улучшить и остальные графики — про динамику и количество обучений по тренерам.
Какой бы подробный бриф не присылали в первоначальном письме, рекомендуем добиваться личной встречи с будущим пользователем, а не с его представителями, иначе, скорее всего, придётся делать несколько раундов правок.
Какой бы подробный бриф не присылали в первоначальном письме, рекомендуем добиваться личной встречи с будущим пользователем, а не с его представителями, иначе, скорее всего, придётся делать несколько раундов правок.

Подготовьтесь ко встрече: изучите исходник, отметьте те места, где вы видите нарушение логики, пробелы в структуре, перебор с показателями или, наоборот, недостаточную детализацию.
Не бойтесь казаться непонятливым, задавайте больше вопросов. Помните: какой бриф, такой и креатив.
Вот примерный список вопросов, которые мы задаём на встрече с заказчиком:
  1. Кто целевая аудитория дэшборда?
  2. Зачем нужен этот дэшборд? Чем он должен быть полезен?
  3. Какие данные обязательны, а какие — желательны?
  4. Какие данные более важные, а какие второстепенны?
  5. Чего сейчас нет в исходнике, но хотелось бы иметь?
  6. Какие пожелания по стилю оформления, цветам и т. д.
Мы не спрашиваем: «Какой график вы хотите?» Ответ на этот вопрос — задача не заказчика, а эксперта по визуализации. Мы анализируем пожелания заказчика, выстраиваем логику повествования и предлагаем те типы визуализации, которые будут решать поставленную задачу.
Помимо того, что озвучил заказчик, мы предложили обогатить статистику не только по посещаемости, но и по тренерам. Так, к количеству проведённых тренингов мы предложили добавить среднюю оценку каждого преподавателя.
Рабочий процесс
В этой работе мы обошлись без скетчей от руки и сразу отрисовывали прототип в PowerPoint.

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

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

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

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

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

В итоге заказчик получил прототип дэшборда, который отвечал его первоначальным требованиям, был дополнен аналитикой, чётко структурирован и прост для понимания. Впоследствии прототип был реализован в QlikView уже силами заказчика, и используется по прямому назначению уже 2 года.
Задание: составьте свой набор иконок
О чем задание
Самый большой вызов, с которым вы можете столкнуться при работе с пиктограммами — их неоднозначное понимание. Если иконку воспринимают без соответствия с функцией, которую она выполняет — любой digital-продукт ждет провал.
Еще раз напомним про предлагаемый набор функций для иконок дашбордов (у вас может быть свой набор!)

  1. Открыть страницу в новом окне
  2. Переход к дополнительной аналитике
  3. Визуализация является интерактивной
  4. Визуализация является ссылкой
  5. Открыть настройки
  6. Открыть фильтры
  7. Страница/вкладка дашборда: назад
  8. Страница/вкладка дашборда: вперед
  9. Перейти по ссылке на внешний ресурс
  10. Открыть дополнительную информацию
  11. Открыть скрытый, всплывающий блок
  12. Закрыть всплывающий блок
  13. Справочная информация по дашборду

Что нужно сделать
  1. Попробуйте зайти на любой из сайтов с коллекцией иконок и подобрать набор пиктограмм под функции дашборда. Можете найти свой сервис с пиктограммами, воспользоваться нашей подборкой или даже нарисовать свои.
  2. Если искать и рисовать сложно — попробуйте соединить приведенные нами функции с пиктограммами, которые могут за эти функции отвечать. Список и сами иконки — выше.

Самый известный сайт c огромным сообществом кураторов-дизайнеров с огромным каталогом пиктограмм

Простой и бесплатный сервис для поиска иконок и пиктограмм. Есть фильтры по стоимости изображений

Такой же простой и бесплатный сервис для поиска иконок и пиктограмм по тематике

Приходите в телеграм-чат делиться своими вариантами выполнения заданий и задавать вопросы!
Присоединяйтесь к чату Марафона
Все общение по ходу Марафона будем вести в телеграм-чате @datapomodoro, присоединяйтесь, чтобы не пропускать ничего важного.