Тема: инструменты визуализации 20
Инфограферы за работой. DensityDesign для Greenpeace
В конце ноября Greenpeace UK обратилось за помощью к студии Density Design для визуализации их океанического проекта. Гринпис борется с индустриальным видом ловли рыб с помощью сонара, т.к. этот прибор наносит большие разрушения. Задачей дизайнеров было визуализировать данные исследований и превратить их в четкую коммуникацию и побуждение к изменениям.
Я даю краткий перевод статьи. В оригинале читайте на сайте DensityDesign
Как идет работа над проектом:
Сначала происходит процесс «вынимания» истории из головы клиента и переработка фактов в последовательные визуальные образы. Здесь задействовано все — и исследовательская работа, и умение вести дискуссию и навыки иллюстрации.
О схеме работы проектной группы: клиентом был предоставлен 10 страничный бриф, который решили изучать раздельно, плюс дополнительные открытые источники. Один на чтение, следующий — на скетчи (визуальное отображение всего прочитанного).
Далее выработали 1 общий скетч и отправили клиенту с запросом:
- проставить рейтинг от 1 до 5 какие элементы более важны, что менее важно, чтобы верно расставить акценты
- откорректировать последовательность элементов
- внести фактологические уточнение и дополнения
И вот она, схематическая стадия, когда вся информация запроектирована на листе бумаги (надо сказать что мы на такой же стадии получаем первое одобрение клиента — стиль, красоты, визуальные метафоры — все это идет потом. На этом этапе часто в ч\б мы хотим утвердить всю информационную составляющую, дизайн будет позднее):
Нестандартные графики стандартными средствами
За что мы любим MS Excel? — он позволяет строить графики, и обладает широкими возможностями его настройки. За что мы не любим Numbers form Mac? — за то что его возможности кастомизации ограничены настолько, что данную программу инфограферам использовать просто запрещено. Только ради простых графиков в современном «мак-стиле»:)
В Экселе стандартный график мы можем «довести до ума», выстроив правильные акценты, цвета, оптимизировав соотношение чернил/данных. Не составляет труда за несколько минут сделать превращение (не идеальное, но всё же). Взяли обычную статистику с Википедии (население СССР). В вики предлагается вот такой график:
Численность населения в СССР - исходный график для анализа (источник)
Но мы же понимаем, что его можно улучшить. Есть несколько важных моментов
- В исходном графике не видно, растёт или падает сельское население
- В исходном графике никак не отображена статистика за прошлые года (есть даже до-революционная статистика.
Вот что получилось в итоге (да, огрехов ещё очень много, но это уже гораздо понятнее, за 5 минут было сделано, исползованы только стандартные настройки графиков, возможные в Excel).
Численность населения в СССР - корректный график
Хотите посоревноваться? Берите график, и делайте свои варианты!
А теперь наконец-то обратимся к теме поста.Составим несколько типов графиков вместе, и получим.. термометр! Иногда его ещё называют индикатором «батарейки». Применяется чаще всего в дэшбордах, для индикации уровня нормальности/проблемности определённого KPI-показателя.
Как сделать "термометр" в экселе
В несколько простых шагов можно легко научиться его делать. Он состоит из 2 (4) частей:
- Непосредственно сам индикатор
- Рамка
- // Основание (если нужен, как в настящем термометре)
- // Контейнер для подписей
Как такое делается?
- Выделите два числа: индикатор и рамку и постройте график по строкам
- На оси Х уберите подписи и линии
- Отформатируйте ось Y — поставьте значения min и max вручную
- Первое число — заливка, отформатируйте соответствующе цветом
- Второе число — пустое пространство между «ртутью» и максимальным значением.
- Для оси Y поправьте параметр отображения засечек
- ..всё!
Прикладываю экселевский файл с описаниями и двух других вариантов графика. Скачайте шаблон xls «термометров», там все стадии очень подробно постарался описать. Можете убедиться — работает. И это ещё не все термометры, которые можно делать при помощи лишь стандартных средств экселя:)
Ну как вам? чуть позже расскажу про «спидометры». Stay tuned!
Ваш собственный дэшборд
Короткий но занимательный пост для любителей дэшбордови информационных панелей. Дэшборды, дэшборды.. Все мы знаем, что дэшборду нужны данные. А как научиться их проектировать, если данные брать неоткуда? Даю наводку: вы сейчас смотрите прямо в источник этих данных! Да:)
Итак, это ваш компьютер. Как многокомпонентное устройство, он мониторит огромное количество параметров — частота работы процессора, температуры процессора винчестера видеокарт и так далее, скорости вращения вентиляторов, и даже электрическое напряжение. В дополнение к этому — есть интернет с прогнозами погоды, камерами дорожного движения, курсами валют, и так далее.
Как из компьютера вытащить «данные»? Как их уложить на рабочем столе? Всё это помогут сделать специализированные программы (Samurize для windows, GeekTool для макинтоша). Описывать процесс настройки не имею никакой возможности — возможностей столько, что есть очень подробные хелп-справочники.
Для вдохновения — несколько наиболее чумовых визуализаций (в конце поста — ещё ссылки):
Собственный дэшборд - даже видеокамера дорожного трафика
Очень стильная визуализация дэшборда - включая санкей-диаграмму, пусть и лишь в статическом виде
Очень стильная визуализация dashboard с намёком на старые компьютерные игры
Юзабилити против пользователя. Кто победил?
Сегодняшний пост будет полезен в первую очередь веб-разработчикам и дизайнерам, задейстовованым в создании интерфейсов сайтов и приложений.
Как измерить «юзабилити»? Особо креативные команды частенько бросаются фразами «у этого сайта хороший юзабилити», и всякое такое в этом роде. Так вот, умные программисты придумали всем нам инструменты, чтобы «пощупать» это самое юзабилити. Называется это — heatmat, или «карта зон внимания». Пример ниже сразу даст вам понимание, что это такое.
Heatmap - карта нажатий вашего сайта
Всё просто: специальный скрипт запоминает все нажатия мышки на вашем сайте / в вашем интерфейсе, и строит зональную карту мест, где чаще всего нажимают.
Ответы на какие вопросы дают такие карты?
- Какие меню наиболее популярны, какая кнопка на сайте привлекает больше всего внимания
- Какие элементы интерфейса не пользуются популярностью?
Вы даже можете осознать, что посетители вашего сайта всю время нажимают в одно и то же место (например, картинку), ожидая, что там ссылка — а там у вас (на самом деле) ‘никакой ссылки не предполагалось, и посетители ошибаются в нажатии. Что в таком случае надо делать? Правильно — срочно исправлять интерфейс, и либо поставить в месте нажатия ссылку — либо совсем убрать «спорный» элемент интерфейса.
Heatmap скрипт - карта горячих мест вашего сайта
И всё это — РЕАЛЬНЫЙ материал для ваших дальнейших размышлений.
По секрету скажу — на infographer.ru такая карта тоже установлена:)
Пользуйтесь на здоровье!
Делитесь находками из своих карт!
Ссылки на самые хорошие сервисы
- Clickdensity — красивый, но не очень удобный
- Crazy Egg — самый красивый, удобный
- Clickheat — бесплатный. Нужно немного поковыряться с настройками — но всё отлично работает.
И ещё несколько менее интересных, но стоящих внимания, ссылок на сервисы:
Many eyes — волшебная палочка
Сейчас я отдам в руки читателей самый полезный из известных мне он-лайн инструментов — Many Eyes
Сервис действительно сделан профессионалами — команда занимается вопросами информационного дизайна с 2003 года: Fernanda создала сервис по визуализации почтовых архивов, Martin сделал программку для визуализации популярных детских имен.
Прелесть работы в том, что можно загрузить свои данные, сервис их очень хорошо распознает — что есть текст, что есть процент, цифра.
А дальше визуализируйте как хотите. Из используемого мною (опять же, чего нет в экселе).
1. Вариации с баблами
2. Работа с текстом — просто потрясающие возможности сделать красивые облака тэгов и связки
3. Карты — тут я просто приведу картинки и вы все поймете: можно ставить несколько карт рядом, накладывать баблы, подсвечивать нужное и приближать регион.
только вот у меня Java периодически глючит и не хочет генерить нужные мне вещи ((
Prezi — начинаю работать
Один из выходных провела за переводом своей презентации из Power Point в Prezi. Необходимо некоторое время чтобы привыкнуть, результат буду опробывать на аудитории в четверг.
Радуют несколько вещей:
1. Зебра трансформации.
Кликая на объект, видишь вот такой полосатый круг. если нажать на центр, то объект можно двигать вправо — влево. Среднее кольцо — это зум, изменение размеров объекта. Внешний радиус — поворот объекта. В общем быстро, легко, не нужно заходить в разные разделы меню. Начинаешь пользоваться на интуитивном уровне.
2. Изменение порядка слайдов.
Можно накидать идеи на одном большом листе, а потом выстроить порядок презентации. Причем можно показывать как большими страницами, так и отдельными фразами\объектами
3. Нестандартное пузырьковое меню.
Висит в левом верхнем углу. Буквально10 кнопок, но их достаточно!
А пока — ролик о том, как ребенок может создать свою презентацию о любви к мороженому
Нано-чарты и Микро-графики
На конференции DD4D Mark Palmer (VizMetrics Inc.) рассказывал, как ловко они перерабатывают стопки бизнес отчетов
В концентрированный DashBoard из одной страницы.
Меня в его презентации зацепили мини-графики, аккуратно встроенные прямо в ячейки экселя и я начала поиски.
Так вот, господа, продолжайте изучать Excel. Меня раздражают экселевские шаблоны графиков (тем более что на работе у меня версия 2003!!! Такое чувство что графики в ней топором делали). Но до этого момента я не знала об опции мини-чартов, в ячейках таблицы. Продолжить чтение →
Prezi — альтернатива Power Point
Эдвард Тафти (Edward Tafte) в своей книге «Cognitive Style of PowerPoint» критикует программу, которую мы чаще всего используем для презентаций.
Суть критики в том, что cтруктура презентации, диктуемая Power Point не соответствует логике человеческого восприятия. Пытаясь разобраться в вопросе, человек никогда не движется по информации линейно (от одного слайда к следующему), ему свойственно возвращаться, сравнивать, смотреть на картину целиком, а не по кусочкам.
После прочтения этой книги у меня остался один вопрос — а что же тогда можно использовать взамен??? Ответ пришел чуть позже от Olga Stelter — www.prezi.com.
На форуме Ольги есть 2 готовых презентации, сделанные при помощи этого инструмента, так же кликнув на картинку вы перейдете к одной из демо-презентаций. На сайте Prezi выложено еще несколько примеров
Я в восторге. Можно уменьшить масштаб и показать всю логику, можно рассматривать конкретные детали. Можно менять порядок движения и легко возвращаться к нужному. Экспериментирую
Конкурс бумажной 3D визуализации
FlowingData проводил забавный конкурс этой зимой — на лучший бумажный график. Материалы: бумага, клей, чернила. Урок труда.
Есть очень забавные результаты. Простота материала обеспечила простоту формы.
Все работы на FlowingData, ниже концентрация лучшего:
BeGraphic: Софт по визуализации данных
Одной из моих целей на конференции DD4D было найти разработчиков софта, помогающего облегчить работу над визуализацией статистики.
Вот одни ребята BeGraphic (консалтинговое агентство ALDECIS, Париж, на сайте вполне подробно показаны возможности продукта).
Они смогли объединить Excel (ясный и понятный каждому в наши дни) с красотой и возможностями Иллюстратора (были написаны макросы и созданы графики\карты\dash boards в иллюстраторе).
Итого, на выходе: простота и привычность внесения данных + радующие глаз изображения.
И, что не маловажно, все это легко копируется в Power Point и прочие приложения
Сейчас они занимаются обкаткой инструмента на своих первых клиентах. В основном предполагается, что эта информация будет использована во внутренней коммуникации компаний, для презентаций совету директоров.
Следующий их шаг — создание библиотеки графиков, способной удовлетворить запросы клиентов из любых отраслей.
Софт пока еще бесплатен, деньги берутся за консультации аналитиков, помогающих выбрать нужные показатели и подобрать к ним наилучшее отображение.
Демо версия на сайтах BeGraphic и YouTube