Перепост статьи Кости Варика, с его на ресурса www.VMETHODS.ru

Когда автор популярного блога Visual Complexity Мануэль Лима общался  со Стюартом Экклес из  лондонского агентства Made by Many в августе 2009 года, ему в голову пришла идея сделать список соображений или требований к проектам визуализации информации, которые быстро приняли форму манифеста. Манифест проводит более чёткую границу между проектами визуализации информации и информационного искусства, у которых разные цели и аудитория (я писал об этом разделении в предыдущей статье).

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


1. Форма следует из функциональности
Форма не вытекает логически из данных. Данные непоследовательны по своей природе. Форма вытекает из цели, и в случае визуализации информации Форма следует из Открытия. Возьмите простейшую аналогию с деревянным стулом. Данные представляют собой все те различные деревянные детали (сиденье, спинка, ножки), которые затем собираются в соответствии с конечной целью «сидеть» в случае со стулом либо «обнаружить и раскрыть» в случае с визуализацией. Форма в обоих случаях возникает из сочетания различных структурных элементов, но никогда не соответствует им. Мы можем выяснить лишь из проблемной области, может ли одна компоновка быть более подходящей и легкой для понимания, чем другие. Независимо от предмета цель всегда должна фокусироваться на пояснении и раскрытии истинной сущности, что, в свою очередь, приводит к открытию и проникновению в суть.

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

3. Разгадка  в интерактивности
Как обозначили это  Бен Шнайдерман, Стюарт К. Кард и  Джок Д. Маккинли, «визуализация информации — это использование интерактивных  визуальных представлений абстрактных  данных с использованием компьютера для расширения познания». Это широко известное высказывание подчеркивает, каким образом интерактивность является неотъемлемой частью сферы информационного и численного анализа. Любой проект по визуализации информации должен упрощать не только понимание, но и анализ данных в соответствии с конкретными примерами использования и обозначенными целями. Применяя интерактивные технологии, пользователи могут тщательно исследовать и переделать структуру, чтобы найти соответствующие ответы на свои вопросы. Эта возможность становится необходимой по мере возрастания степени сложности изображаемой системы. Визуализацию следует понимать как инструмент для открытий.

4. Цитируйте источник
Визуализация информации как любой другой способ передачи информации может обмануть,  пропустить или быть намеренно необъективной. Чтобы избежать неверного понимания, всегда следует цитировать источник. Если Ваш исходный материал представляет собой общедоступные данные, результаты научного исследования или даже Ваши личные данные, всегда следует раскрывать, откуда они взяты, предоставлять ссылку на них и, если возможно, пояснять, что именно использовалось и как это было отобрано. Делая так, Вы позволите людям обратиться к первоначальному источнику и должным образом проверить его достоверность. Это также придаст убедительность и целостность Вашей работе. Этот принцип уже давно пропагандируется Эдвардом Тафти и должен широко применяться к любому проекту, в котором наглядно представляются сторонние данные.

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

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

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

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

9. Стремитесь к знаниям
Основная возможность визуализации информации — переводить информацию в знания. Она также нужна для упрощения понимания и содействия познанию. Каждый проект должен стремиться к тому, чтобы сделать систему более понятной и прозрачной либо найти в ней явно новое понимание или модель. Он всегда должен предоставлять собой отполированную жемчужину знаний. Как Жак Бертин красноречиво заметил в своем труде «Графическая семиология», впервые опубликованном в 1967 г., «своеобразная черта качественной графической расшифровки в том, что она сама по себе позволяет нам в полной мере оценить качество содержания информации».

10. Избегайте неоправданных визуализаций
«Информация аккуратно, но неустанно моросит невидимым, неощутимым электрическим дождем». Именно так физик Ханс Кристиан фон Бейер начинает свою книгу «Информация: новый язык науки». Визуализации информации вынуждена отвечать на растущие объемы общедоступных данных как когнитивный фильтр, как увеличительная линза понимания, и она никогда не должна добавлять еще шума к потоку. Не всякую визуализацию следует считать положительным шагом вперед. В контексте визуализации информации простая передача данных в визуальной форме, не проливающая свет на изображаемый предмет, или — что даже хуже — усложняющая его, может считаться только провалом.

Пояснения Мануэля Лима

О форме

Форма относится к конечному визуальному результату проекта: структуре, изображениям, тексту, цветам, но также вариантам и средствам управления интерфейсом. Данные — самая мелкая единица информации, и для простоты мы можем считать данные полями базы данных. По отдельности большинство полей базы данных (например, 4538) непонятны и несвязны. И только когда множество таких полей объединены с определенным намерением, может быть сформирована визуализация. Простой запрос в базу данных уже указывает на намерение. Поэтому мы можем сказать, что форма возникает из данных (как ее ключевой структурный элемент), но окончательный результат формирует цель или функция компонента. Это также единственный способ, при помощи которого мы можем оценить успешность проекта — рассматривая его намерение, его «проблемную область».
Данные принимают множество форм и размеров — от одного поля базы данных до огромных взаимозависимых массивов. Приведенный пример одного поля предназначался для повторного акцентирования внимания на его непонятной природе. Рассмотрите такую альтернативную аналогию. Я думаю о данных как о разворачивании недавно приобретенного предмета мебели IKEA. Глядя на все детали, разбросанные по полу, Вы не можете избавиться от чувства некоторого замешательства по поводу того, что делать дальше. Вы можете либо посмотреть в инструкцию, либо применить свою креативность по максимуму и создать альтернативный предмет. Но в обоих случаях внешний вид/форма/компоновка конечного предмета будут определяться Вашим намерением. Поэтому из этой точки зрения можно получить много производных: «Форма следует из намерения», «Форма следует из цели» и т.д. Я просто решил взять самое заезженное, но явное высказывание: «Форма следует из функциональности».

Об эстетике

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

Мне нравятся несколько технических находок, например срок президентства отражен в высоте шрифта в имени президента.

И как изящно оформлена легенда

Как легко прошла победа — смена президентов показана в деталях, с рейтингами остальных кандидатов и голосами штатов

Вот эта история не работает, во всяком случае я не догоняю что хотели сказать:

И теперь целиком, кликайте, чтобы перейти на оригинал:

А между тем, Infographer упаковал чемоданы и уехал в Лондон на Information Visualization 2010 — скоро будут репортажи.

Hans Rosling умудряется из стат данных сделать рассказ, простой, доходчивы и интересный. И не надо сложных визуализаций — возьмите пластиковые ящики из Ikea и с их помощью постройте модель мира ))

Видео 10 мин, есть субтитры на русском.

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

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

• Мы уже публиковали интерактивный календарь
• Мы видели Dash Boards результативности всех сборных
• Рассматривали постеры с историческими фактами проведения ЧМ

Сегодня добавлю еще 2:

1. Интерактивная шкала упоминаний футболистов в Facebook
2. Использование диаграмм Sankey — Макс писал о них буквально пару постов назад. К ЧМ их тоже можно приспособить

Кликайте на картинку чтобы перейти на оригинал и увидеть интерактив

И санкей — где, в каких клубах играют члены национальных сборных. Новостной сайт www.estadao.com.br регулярно поставляет очень качественные вещи. Красиво, плюс, если перейдете на сайт, сможете рассмотреть каждую страну в отдельности (остальные затемняются чтобы не сбивать массовостью).

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

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

Этот эпиграф — отрывок из статьи Андрея Скворцова. Ну а в понедельник мы были на его семинаре в Московской Школе Компьютерной Графики ScreamSchool, существующей в рамках БВШД. Андрея мы уже упоминали ранее на страницах нашего блога, а для тех кто недавно с нами, позвольте представить: генеральный директор компании Меркатор.

Трехчасовой семинар Андрея был составлен из тем двух его отдельных, больших семинаров: «Инфографика: как научить ваши цифры говорить» и «Визуальные аллегории: как визуализировать идеи». Была огромная масса интересной информации по инфографике в целом, и  видео-инфографике в частности.

Мы смогли, прежде всего, посмотреть на результаты труда основной компании на российском рынке ТВ-инфографики. В частности, Меркатор производит «под ключ» для канала «Вести-24» 50-секундные ролики, напичканные статистикой. Сами придумывают тему, сами ищут информацию, сами реализуют.

Как сам Андрей оценивает результат этих экзерсисов: отведенные 50 секунд привели к тому, что каждый визуальный образ стал отточен, диаграмма выверена, место для подписи графика всегда неслучайно — всё ради экономии доли мгновений, и для упрощения восприятия зрителем основного посыла. «Рюшечек» в таких работах нет — все максимально функционально.

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

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

Например, поразбирали бизнес-работы для РЖД, Brunswick, Магнезит'а. Эти видео вы можете посмотреть на их сайте.

И самое восхитительное — у Андрея есть команда видео-инфограферов, которой нет больше ни у кого.

Что же касается инфографики, то её Андрей делит на следующие виды:

1. Инфографика как развлечение (то, что мы для себя называем «журналистская инфографика»);
2. Инфографика как доказательство (тут мы подразумеваем «бизнес инфографику»).

Ну и много советов от мэтра:

• Цвет имеет значение;
• Грамотно пользуйтесь аллегорией и метафорой (какие они должны быть — читайте в его статье);
• Выбирайте диаграммы соответственно задачам — тут не забуду напомнить об удобном инструменте. Андрей пользуется аналогом такой же таблички;
• Остальное читайте в статьях на его сайте.

Справка:

Андрей Скворцов — эксперт в области корпоративной и индустриальной рекламы. Автор маркетинговых и инвестиционных фильмов и презентаций для сотен российских и западных компаний, генеральный директор компании «Меркатор» (www.mercator.ru) — ведущего коллектива по производству информационной графики, презентаций и видео.

• обладатель золотой медали NewYorkFestivals-2009
• член жюри NewYorkFestivals-2010
• автор более 100 презентационных фильмов
• выпускник Гарвардской школы бизнеса (OPM)
• MBA (AIBEc)
• выпускник МГУ (географичекий ф-т)
• участник сценарного семинара Роберта Макки
• участник семинара инфодизайна Эдварда Тафти

Автор Kotryna Zukauskaite, серия работ называется «Как играть в статистику»

По-моему информативность тоже не пострадала.

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

Ниже — интерактивный Dash Board сего мероприятия.

Он генерирует те же самые heatmaps — но КАК!

Ему не нужны нажатия. «Скармливаете» ему картинку — и он почти сразу же выдаёт вам «карту зон визуального внимания», и пути перемещения от одной зоны к другой. В основе сервиса заложены алгоритмы, пытающиеся разобрать картинку на отдельные визуально значимые элементы, и  сымитировать перемещение глаза между ними.

Feng-gui для анализа юзабилити и качества дизайна

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

Пользуйтесь на здоровье! И не забывайте, что у сервиса есть бесплатная и платная версии, а в бесплатной ему можно «скармливать» не более одной картинки каждые 12 календарных часов.

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

Heatmap - карта нажатий вашего сайта

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

Ответы на какие вопросы дают такие карты?

• Какие меню наиболее популярны, какая кнопка на сайте привлекает больше всего внимания

• Какие элементы интерфейса не пользуются популярностью?

Вы даже можете осознать, что посетители вашего сайта всю время нажимают в одно и то же место (например, картинку), ожидая, что там ссылка — а там у вас (на самом деле) 'никакой ссылки не предполагалось, и посетители ошибаются в нажатии. Что в таком случае надо делать? Правильно — срочно исправлять интерфейс, и либо поставить в месте нажатия ссылку — либо совсем убрать «спорный» элемент интерфейса.

Heatmap скрипт - карта горячих мест вашего сайта

И всё это — РЕАЛЬНЫЙ материал для ваших дальнейших размышлений.
По секрету скажу — на infographer.ru такая карта тоже установлена:)

Пользуйтесь на здоровье!
Делитесь находками из своих карт!

Ссылки на самые хорошие сервисы

• Clickdensity — красивый, но не очень удобный
• Crazy Egg — самый красивый, удобный
• Clickheat — бесплатный. Нужно немного поковыряться с настройками — но всё отлично работает.

И ещё несколько менее интересных, но стоящих внимания, ссылок на сервисы:

• Fusestats web analytics
• Corunet
• UserFly
• Codynamics
• AttentionWizard
• Clicktale
• А вот это для самоделкиных: http://nevyan.blogspot.com/2006/12/free-website-click-heatmap-diy.html