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

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

Примеры из практики

Есть несколько категорий инфографики, которые мы регулярно применяем при создании проектов. В каких-то сложнее интересно и симпатично визуально оформить картинку, где-то нужно долго корпеть над изначальным продумыванием и категоризацией информации. Некоторые делаются в более-менее стандартном режиме, хотя это не отнимает их полезности. Часть представленных проектов делалась до прихода в UI Modeling Company, но от этого не менее интересны:

Статистика и отслеживание метрик

	Динамика котировок в деловом портале BFM.ru. Показывает в виде линейного графика и столбиковой диаграммы изменение стоимости акции, индекса, валюты или товара, а также объем торгов ими.
	Эффективность рекламы одной из услуг (проект в стадии разработки). Показывает в виде линейного графика соотношение затрат на продвижение услуги и отдачу от него.
	Мониторинг стабильности работы хостинг-провайдеров (проект закрыт, работал в 2003 году). Показывает в виде столбиковой диаграммы процент успешно прошедших запросов к размещенным на площадках хостера сайтам.
	Динамика рейтинга пользователя в социальном медиа (проект в стадии разработки). Показывает в виде столбиковой диаграммы изменение значения рейтинга пользователя.
	Динамика показателей качества проекта в системе проект-менеджмента EPAM PMC. Показывает в виде линейного графика количество новых и закрытых в проекте багов.
	Статус прохождения компанией опросников в специализированном продукте биржи London Stock Exchange. Показывает в виде комбинированного индикатора выполнения процент уже отвеченных вопросов, а также то сколько останется неотвечено после ответа на указанный опросник.

Картография

	Карта городов страны для туристического портала (проект в стадии разработки). Показывает расположение городов в виде маркеров на географической карте страны. Для облегчения поиска на маркерах стоят первые буквы в названии города.
	Карта мест развлечения в городе для туристического портала (проект в стадии разработки). Показывает расположение баров, кафе, ресторанов и клубов в виде маркеров на дорожной карте города. Для облегчения поиска на маркерах стоят цветовое кодирование и пиктограмма, типизирующие объект.
	Выбор и индикатор основных направлений для туристического портала (проект в стадии разработки). Позволяет выбрать направление с помощью схематической карты мира, а также показывает где находится текущая страна или город.
	Выбор станции метро в портале по недвижимости (проект в стадии разработки). Позволяет выбрать подходящие станции метро с помощью вспомогательной карты маршрутов общественного транспорта.
	Выбор и индикатор мест проведения событий на сайте XI Петербургского Международного Экономического Форума (сейчас доступна другая версия сайта). Позволяет выбрать нужный зал проведения мероприятий, а также показывает где проводится мероприятие.

Отображение процесса

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

Отображение времени

	Выбор помещения для проведения мероприятия в планировщике BOOC. Показывает в виде матрицы доступность комнат и залов в конкретный день недели. Также является элементом управления.
	График загруженности дантиста в сервисе онлайн-рекрутинга GapZap. Показывает в виде календаря необходимость в привлечении ассистентов, а также наличие договоренностей с ними.

Часть вещей не попала в список или лишена конкретики из-за того что многие проекты находятся в стадии разработки. Хотя и того что описано должно хватить для общего представления о местах, где применима инфографика.

Использование в веб-сервисах

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

• Статистика и отчеты. Чаще всего это либо специализированные сервисы анализа статистики посещений и трафика вроде Google Analytics, ClickTale, Alexa, Google Trends или FeedBurner, либо встроенные в обычные веб-сервисы модули отчетности о популярности пользователя и его контента — например, в Flickr, Google Reader, ЖЖ или Free-Lance.ru. Для отображения данных они используют линейные графики, столбиковые и круговые диаграммы, гистограммы. В последнее время все больше таких продуктов применяет тепловые диаграммы для показа наиболее кликабельных мест на странице — например, ClickDensity и CrazyEgg.
• Картография и привязка данных к географии. Обычно это карты городов и стран, показывающие их географию, топографию, дороги и конкретные объекты — например, Яндекс.Карты, Google Maps, Yahoo! Maps или MapQuest. В последнее время многие из таких сервисов предоставляют инструменты для создания собственных тематических карт, благодаря чему есть справочники вроде Cost2Drive и Banki.ru на карте. Сюда же можно отнести недавнюю тенденцию геотегирования контента, когда новости или пользовательские материалы в социальных медиа привязываются к месту где они созданы или которое описывают — примеры такого подхода можно увидеть в специальном режиме просмотра Flickr, карте военного конфликта в Конго, Trulia Snapshot и Dopplr; либо когда географические перемещения самих пользователей отображаются в системе и могут служить поводом для рекомендаций, как это делают BrightKite, Nokia Friend View, Yahoo! FireEagle и Google Latitude. Чуть в стороне стоят карты метро — их можно увидеть в Яндекс.Картах Метро и РусАвтобусе.
• Отслеживание метрик. В основном это упрощенные отчеты — сервисы наглядно показывают изменения ключевых параметров в виде встроенных в обычные страницы изображений. Хотя обычно для этого используется текст или простая инфографика вроде индикаторов выполнения, некоторые продукты применяют графики и диаграммы — например, burndown-диаграммы в инструментах управления agile-проектами вроде Acunote и RallyDev. Также в эту группу можно включить инструменты для работы с биржевой информацией, массовые вроде Yahoo! Finance, Google Finance, BFM.ru или TIKR.ru и специализированные — E*Trade, TradeKing, Quote.ru.
• Привязка событий ко времени. Как правило, это использующие временную шкалу сервисы. Например, пользовательский контент в порядке его появления показывают Plurk, Dipity, This Moment и Flickr Clock. Сюда можно отнести и классические инструменты управления проектами, использующие диаграмму Гантта, такие как KommandCore или МегаПлан (хотя смысл этой диаграммы и шире простой привязки ко времени).
• Отображение процесса. Сервисы, которые используют формализованные и неформализованные блок-схемы для управления неким процессом. Такое представление хорошо подходит для создания различных информационных фильтров, как это делает Yahoo! Pipes и Google Analytics. А может использоваться как навигация по рабочему процессу и его наглядное отображение, как это делают в Target Process. По хорошему сюда нужно отнести и отображение текущего шага в мастерах (wizards) вроде оформления покупки в интернет-магазине, но это не самый яркий пример визуализации.
• Отображение связей. Чаще всего это дерево связей между объектами либо ментальная карта какого-то явления или понятия. Многие из таких сервисов показывают связи между людьми — либо в виде генеалогического древа в Geni, либо внутри другой социальной сети — например, Bacardi B-Live Share. А поисковик Quintura работает, по сути, как ментальная карта, хотя и имеет внешний вид скорее облака тегов.
• Сложные статистические данные. Как правило это специальные проекты газет и журналов, некоммерческих организаций, государственных ведомств, отображающие сложные политические или экономические данные. В них совмещается сразу несколько инструментов визуализации — например, карты и диаграммы. Наиболее известна команда New York Times Visualization Lab, которая регулярно выдает интереснейшие интерактивные приложения к газете. Похожие вещи делают и другие крупные издания — например, Washington Post, USA Today. Среди других проектов по сбору статистики — GapMinder, Akamai Real-Time Web Monitor, Every Moment Now, Daytum.
• Экспериментальная навигация. Практического смысла такая визуализация не несет, зато хорошо запоминается благодаря необычности. Например, в виде дерева показывается портфолио компании OLIN, а рекламное агентство Venables Bell & Partners использует комбинацию временной шкалы и некого подобия площадной диаграммы для отслеживания упоминаний своего рекламного ролика. Интересный вариант отображения связей между страницами в вики-системе предложен Ronald The и Benedikt Gross.

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

Источники информации по теме

В последнее время количество ресурсов, специалистов и проектов на тему визуализации в интернете все больше и больше. Два ключевых сайта, которые стоит просматривать регулярно — Infosthetics и Flowing Data. Первый собирает обширнейшую коллекцию любых примеров визуализации, второй имеет более практическую направленность.

Другие хорошие обзорные сайты и коллекции — Visual Complexity, Infographic News, Cool Infographics, News Page Designer. Много интересного собирается во Flickr-группах, других веб-сервисах и сообществах — Diagram Diaries, Everyday Information Achitecture, dataviz.tumblr.com, ru_infodesign. Некоторые компании и специалисты публикуют подборки своих и чужих работ — например, Density Design, CatalogTree, DataVisualization.ch, Tableau Software, Juice Analytics.

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

P.S. Спасибо за помощь в написании статьи моим коллегам и друзьям — Александру Хмелевскому, Льву Эйдинову, Юрию Шиляеву, Глебу Калинину, а также остальным помогавшим в вычитке, сборе материала и консультациях по теме.

Специально для Эксперимент.ру. В издании материал выйдет в немного другой компоновке.

Все части материала:

• Визуализация данных. Наглядный и компактный способ отображения информации, часть 1. Классификация
• Визуализация данных. Наглядный и компактный способ отображения информации, часть 2. Процесс
• Визуализация данных. Наглядный и компактный способ отображения информации, часть 3. Примеры из практики