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

Инфодизайн

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

Тысячи бесплатных копий брошюры были распространены среди торговцев. Авторы предполагают заработать на продаже брошюры людям, не входящим в основную целевую аудиторию: вы можете заказать брошюру в печатном виде за $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)

Поделиться:

Anymails – визуализация электронной почты

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

Anymails is a visualization of my received emails.
The metaphor of microbes is used.

How an animal looks and moves depends on the condition of the represented email. The age of an email (when it was received) is shown by the size and opacity of the animal. For instance, a new email is big and opaque, an old email small and transparent. The status of an email (unread, read, responded) is shown by two animal attributes: the number of hair/feet and velocity. An unread email is hairy and swims fast; a read email has less hair and does not swim so fast anymore; a responded email is hairless and barely moves.

Anymails – это система визуализации электронной почты. Использована метафора микробов.
Состояние письма влияет на то, как микроорганизм выглядит и ведет себя. Возраст письма (когда оно было получено) показан размером и прозрачностью микроорганизма. Например, новое письмо большое и непрозрачное, а старое – маленькое и прозрачное. Статус письма (прочитанное, непрочитанное, отвеченное) показан при помощи двух атрибутов: набор ворсинок /ножек и скорость. Непрочитанное письмо ворсистое и плавает быстро, а у прочитанного ворсинок меньше и оно больше не плавает быстро; отвеченное письмо вообще не имеет ворсинок и еле двигается.

Anymails – Visualization of my email inbox

Поделиться: