Юрий Ветров об интерфейсах
  • Главная
  • Статьи
  • Дайджест
  • Конференции
  • Дизайн-менеджмент
  • Дизайн-системы
  • Заметки
  • О блоге
Юрий Ветров об интерфейсах
Юрий Ветров об интерфейсах
  • Главная
  • Статьи
  • Дайджест
  • Конференции
  • Дизайн-менеджмент
  • Дизайн-системы
  • Заметки
  • О блоге

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

  • 13 марта 2009

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

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

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

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

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

Картография

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

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

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

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

Выбор помещения для проведения мероприятия в планировщике BOOC Выбор помещения для проведения мероприятия в планировщике BOOC. Показывает в виде матрицы доступность комнат и залов в конкретный день недели. Также является элементом управления.
График загруженности дантиста в сервисе онлайн-рекрутинга GapZap График загруженности дантиста в сервисе онлайн-рекрутинга 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. Примеры из практики
Юрий Ветров

Директор по бренду и дизайну (ex-Muse Group (Ultimate Guitar, MuseScore, Audacity и другие), Райффайзен Банк и Mail.ru Group). Я руковожу командами, которые отвечают за дизайн, исследования и редактуру бренда и интерфейсов, а также дизайн-систему в коде. Автор книги и курса «Паттерны дизайн-менеджмента» и «Дайджеста продуктового дизайна». Со-организовывал Fintech Design Conf, Mail Design Conf и московский Dribbble Meetup, а также Russian Design Cup. Читал лекции в Британке, курировал курс Future London Academy в Лондоне. Мои публикации есть на Smashing Magazine, UXmatters и UX Collective. Подробнее обо мне.

Другие статьи по теме
View Post
  • Дизайн-системы

Тёмная тема оформления

  • Юрий Ветров
  • 17 мая 2020
View Post
  • Дизайн-менеджмент
  • Статьи
  • Тренды

DesignOps, стремительно ворвавшийся в тренд

  • Юрий Ветров
  • 23 июля 2018
View Post
  • Дизайн-системы
  • Рецензии

Книги о дизайн-системах

  • Юрий Ветров
  • 26 апреля 2018
View Post
  • Дизайн-менеджмент
  • Статьи

UX-стратегия. Часть 6 — Внедрение

  • Юрий Ветров
  • 30 мая 2017
View Post
  • Дизайн-менеджмент
  • Статьи

UX-стратегия. Часть 5 — Дизайн с выхлопом

  • Юрий Ветров
  • 12 апреля 2017
View Post
  • Статьи
  • Тренды

Куда идёт UX в 2016 году

  • Юрий Ветров
  • 14 сентября 2016
View Post
  • Дизайн-менеджмент
  • Статьи

UX-стратегия на практике. Часть 4 —
От дизайн-команды к дизайн-культуре

  • Юрий Ветров
  • 12 сентября 2016
View Post
  • Методы и практики
  • Статьи
  • Тренды

Алгоритмический дизайн

  • Юрий Ветров
  • 27 июня 2016
8 comments
  1. Уведомление: Визуализация данных. Наглядный и компактный способ отображения инфо
  2. Уведомление: Визуализация данных. Наглядный и компактный способ отображения инфо
  3. Уведомление: Визуализация данных. Наглядный и компактный способ отображения инфо
  4. Уведомление: Визуализация данных. Наглядный и компактный способ отображения инфо
  5. Уведомление: Визуализация данных. Наглядный и компактный способ отображения инфо
  6. Уведомление: Визуализация данных. Наглядный и компактный способ отображения инфо
  7. Baksht:
    23 июля 2010 в 15:39

    Юрий, а ДатаПульт не применяли для визуализаций? http://www.datapult.info/ru
    Я недавно его для себя открыл. Очень понравилось. Фактически конкурентов у них и нет. разве что виджет в гугл доках. Но он убогий по сравнению с этим сервисом.

    Ответить
  8. Juras Vetrau:
    9 августа 2010 в 17:42

    @Baksht
    Пока не смотрел, но добавил в коллекцию инструментов.

    Ответить

Добавить комментарий Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Юрий Ветров об интерфейсах
Дизайн-менеджмент цифровых продуктов, © 2007-2018

Input your search keywords and press Enter.