MS Pivot — новый способ путешествия по Сети

Видео, Инфодизайн, Экранные интерфейсы

Гэри Флейк из Microsoft Live Labs выступил на конференции TED 2010 с рассказом о Pivot — средстве просмотра больших массивов данных, позволяющем удобно сортировать, фильтровать и просматривать в духе zoom-интерфейсов исследовать большое количество графической и текстовой информации.

Вы можете скачать Pivot на официальном сайте приложения и попробовать его в действии, если у Вас установлена Windows Vista или более новая ОС с поддержкой технологии Aero.

Microsoft Live Labs Pivot

Как попасть на самолет? Дизайн посадочных талонов

Инфодизайн

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

Изначальный дизайн:

Один из вариантов, предложенных автором:

Boarding pass/fail

Юзабилисты на диете

Инфодизайн

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

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

Design in the Wild: Mod Market receipt w/ Nutritional Info

Инфодизайн на защите прав граждан

Инфодизайн

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

Тысячи бесплатных копий брошюры были распространены среди торговцев. Авторы предполагают заработать на продаже брошюры людям, не входящим в основную целевую аудиторию: вы можете заказать брошюру в печатном виде за $6.

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

Street vendor guide: accessible city regulations
Плакат с классификацией торговцев и способами улучшить их жизнь [PDF, 2.01MB]

5 лет истории инфографики

Инфодизайн

Блог infosthetics.com уже 5 лет радует нас свежими новостями из мира информационного дизайна.

В честь юбилея издания дизайнер Мориц Стефанер создал интересный интерфейс для фильтрации и просмотра всех вышедших за эти 5 лет заметок на основе разработанной им идиомы «эластичных списков».

5 years of infosthetics («эластичное» оглавление к заметкам блога, вышедшим за 5 лет)
Five Elastic Years of infosthetics.com (заметка о нововведении)
Elastic lists: A fluid, rich interface for facet browsing (страница об эластичных списках на сайте автора)

Когда визуализация лжет

Инфодизайн

Буквально вчера читатели Хабра восхищались красивым графиком Майкла ВанДаникера (Michael VanDaniker), на котором показано распространение браузера Mozilla Firefox:

А сегодня известный ИТ-мыслитель Скотт Беркун (Sctott Berkun) разбирает этот график по косточкам и приходит к неприятному выводу.

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

Исходная статья Майкла ВанДаникера
Статья на Хабре
Статья Скотта Беркуна с критикой графика

Сказ о том, как инфоарх газету редизайнил

Инфодизайн, Остальное

Японская компания с незамысловатым названием iA, имеющая офис в Цюрихе, разработала новый дизайн как электронной, так и бумажной версии швейцарской газеты Tages-Anzeiger.

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

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

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

Links in Print: The Story of a Beautiful Failure
Презентация дизайна [PDF, 84 MB]

Аудио-интервью с Эдвардом Тафти

Инфодизайн, Подкасты

Издание Vizworld опубликовало аудио-интервью с легендарным Едвардом Тафти (Edward Tufte) — исследователем и практиком в области инфодизайна, профессором Йельского университета.

Вводная статья к аудио-интервью

Ресурсы по инфодизайну

Инфодизайн

Издание Smashing Magazine подготовило подборку из 25 сайтов, посвященных инфодизайну — дисциплине создания графических изображений, которые помогают понять, осознать и выявить зависимости внутри наборов данных.

Визуализация данных и ресурсы для инфографиков (данная статья)
Визуализация данных и ресурсы для инфографиков (прошлый подобный обзор)
Современные подоходы к визуализации данных (первый обзор)

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

Инфодизайн, Экранные интерфейсы

Джошуа Портер (Joshua Porter) пишет о силе микротекстов — кратких текстов, которые встречаются внутри интерфейсов. Оказывается, иногда достаточно написать такой текст в правильном месте, чтобы решить серьезную проблему. Например добавление строки «Проверьте, что адрес списания средств совпадает с адресом, к которому привязана Ваша кредитная карта» полностью решает проблему с неправильными почтовыми адресами, которые вводят пользователи интернет магазинов.

Далее Джошуа дает еще два примера эффективного использования микротекстов.

Writing Microcopy

Иконки это не просто картинки

Инфодизайн, Экранные интерфейсы

Йон Хикс (Jon Hicks) выложил слайды презентации посвященной иконками, которые он рассматривает как инструмент проектирования взаимодействия.

В своей презентации Йон рассказывает:

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

Презентация в PDF формате [PDF, 18 Мб]
Сообщение Йона с анонсом презентации

Книга от Smashing Magazine

Инфодизайн, Книги, Экранные интерфейсы

Интернет-журнал Smashing Magazine давно радует нас качественными статьями о дизайне и, в частности, о дизайне интерфейсов. Скоро в продажу поступит книга «The Smashing Book», и на нее уже принимаются предварительные заказы. По заявлениям Smashing magazine, книга будет продаваться только на сайте самого журнала. Доставка осуществляется по всему миру.

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

Вот содержание книги:

• Jacob Gube & Kayla Knight. Наука и искусство CSS-верстки
• Dmitry Fadeyev. Дизайн пользовательских интерфейсов в современных приложениях
• Alessandro Cattaneo. Веб-типографика: правила, рекомендации и частые ошибки
• Andrew Maier & David Leggett. Принципы юзабилити для современных веб-сайтов
• Darius A. Monsef IV. Руководство по грамотному использованию цветов в веб-дизайне и юзабилити
• Rene Schmidt. Оптимизация работы веб-сайтов
• Dmitry Fadeyev. Проектирование, ориентированное на продажи: повышаем конверсию
• Chris Spooner. Как сделать из сайта выдающийся бренд
• Steven Snell. Учимся у экспертов: вдохновляющие интервью
• История Smashing Magazine

The Smashing Book: Pre-Order Now And Save 20%

Эксперименты с паролями

Инфодизайн, Экранные интерфейсы

Вышедшая месяц назад статья Якоба Нильсена с призывом прекратить маскировать пароли породила не только активные обсуждения в сети, но и различные идеи. Например, Крис Дэйри (Chris Dary) из arc90.lab предлагает не отказываться от маски, но дать пользователям возможность по автоматически создаваемому уникальному визуальному коду определять, правильно ли введен пароль.

Позднее Mattt Thompson (именно так он пишет свое имя) предложил еще более элегантное решение: отображать при вводе пароля специальный трехцветный «флажок». Причем он не просто предложил концепцию, а выложил в открытый доступ работающий JavaScript-код.

Stop Password Masking (статья Якоба Нильсена)
HashMask — Another (More Secure!) Experiment in Password Masking
Chroma-Hash: A Belated Introduction
Демонстрация технологии Chroma-Hash
Отличная идея: цветовая индикация ввода пароля (Обсуждение на Habrahabr.ru)

Сказка про экономику

Видео, Инфодизайн

Сегодня на фреше день информационного дизайна — вот ещё один пример наглядного описания сложной проблемы с помощью инфографики:

The Economic Fairy Tale

Результаты Евровидения 2009

Инфодизайн, Остальное

Чтобы посмотреть какие участники голосовали за ту или иную страну, а также сколько баллов они ей отдали, наведите мышкой на соответствующий кружок.

Eurovision 2009 Results Visualized

Визуализация текстовой информации

Инструментарий, Инфодизайн

Компания Juice Analytics опубликовала обзор инструментов, которые можно использовать для визуализации связей между словами в тексте. Отдельное внимание в обзоре уделяется такому типу визуализации, как «Wordtree». «Словесное дерево» представляет собой граф, на котором наглядно отображены наиболее частые логические связи между словами.

Инструменты для создания словесных деревьев и других вариантов визуализации текстовой информации вы можете найти на популярном сервисе Many Eyes.

Guesses vs. Data as Basis for Design Recommendations

Эдвард Тафти об iPhone

Видео, Инфодизайн, Экранные интерфейсы

Знаменитый информационный дизайнер Эдвард Тафти высказал свое мнение о телефонах Apple iPhone

iPhone interface design

Что это: визуализация данных или искусство?

Инновации и идеи, Инфодизайн

Заметка посвещена проекту визуализации хореографической информации. Автор задаётся вопросом: «Что же это: визуализация данных или искусство?»

Synchronous Objects: Visualizing Choreographic Information in New Ways

Визуализация данных: классификация, процесс, примеры из практики

Инструментарий, Инфодизайн, Экранные интерфейсы

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

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

Правила информационного дизайна

Инструментарий, Инфодизайн

Хотите узнать, что такой информационный дизайн и с чем его едят? Тогда читайте статью профессора института информационного дизайна Руне Петерссона. В материале описано множество правил и принципов представления информации (в том числе и на дисплее), которые будут полезны любому юзабилити-специалисту и дизайнеру.

It Depends: Information Design Principles and Guidelines (PDF, 1.36Mb)