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

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

При выборе стратегии перепроектирования, автор обращается к книге Эдварда Тафти The Visual Display of Quantitative Information, в частности к идее о соотношении объема данных и количества использованных чернил. Не смотря на то, что предложенные Тафти принципы относились к инфографике, автор статьи находит им применение и в веб-дизайне. Итак, вот 4 принципа, которые призваны помочь в перепроектировании:

1. Акцент на информацию. В центре внимания каждой страницы сайта должна быть первостепенная задача, которую решает пользователь с помощью представленной информации.
2. Избавьтесь от «лишних пикселей». Разобравшись с тем, на что должен быть сделан акцент на странице, необходимо убрать все лишнее, что отвлекает пользователей от достижения их первостепенных задач. Цвет, шрифт, иллюстрации, расположение компонентов — все, что привлекает к себе внимания, не заслуживая его, должно быть изменено.
3. Избавьтесь от избыточных элементов. В данном случае подразумеваются элементы, которые повторяются на странице без веских на то причин: избыточные диалоговые окна для простых задач («Вы уверены, что хотите добавить продукт в корзину?»), анимация для выделения элементов, ряды одинаковых кнопок (кнопки «Добавить в корзину» рядом с каждым товаром в длинном списке).
4. После того, как вы очистили свой дизайн, добавьте «чернила» там, где этого требуют задачи пользователей. Также на этом этапе нужно уделить внимание эстетичности вашего продукта.
5. Проверьте достигнутые результаты, внесите требующиеся правки. При необходимости повторите все пункты сначала.

В качестве одного из примеров перепроектирования в соответствии с этими принципами Райан приводит изменение шапки сайта Kalahari (слева — до, справа — после).

The Data-Pixel Approach To Improving User Experience

Компания Obscura Digital представила на проводившейся компанией Facebook конференции F8 интересную разработку. Система определяет людей при помощи встроенных в бейджи RFID-чипов и проецирует на пол визуализацию связей между их друзьями, интересами, местами работы и учебы, языками и т. д.

Connections for Facebook: Mapping physical social graph data

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

Такой же прием использовали в iPad-приложении для рисования Procreate. Ползунок, задающий, например, толщину кисти более тонко регулирует ее на нижнем конце и более резко — на верхнем.

Logarithmic Sliders

Почему «цепочка» — это ссылка? А глобус вообще может обозначать массу различных вещей. Таким образом, если вы ориентируетесь только на гиков, то вполне можете пользоваться распространенными иконками, однако при работе с более массовой аудиторией надо понимать, что большинство людей знакомо с гораздо меньшим количеством программ и сервисов, чем вы. В большинстве случаев лучшей заменой иконке будет простая надпись: «Ссылка». Если же вам все-таки очень нужно уместить кнопку в небольшом пространстве или сделать так, чтобы кнопку было проще найти беглым взглядом, изобразите на иконке что-то более напоминающее нужный объект.

На основании своего исследования Петер Стеен предлагает использовать надпись WWW, но в комментариях к заметке предлагают более удачный вариант — синяя подчеркнутая буква (например, так: А).

Usability in Icons

Так, например, все пять сервисов в той или иной форме поддерживают обновление статусов, личные сообщения и ленту новостей. Кроме Tumblr все из сравниваемых социальных сетей позволяют настраивать свою френдленту, но реализовано это по-разному. У всех есть кнопки для сторонних сайтов и возможность «поделиться с друзьями». В то же время создать страничку мероприятия можно лишь в LinkedIn и Facebook, а пообщаться в обычном или видео чате в Facebook и Google+. Последний поддерживает и видеоконференцию.

Social Network Wars: How The Five Major Platforms Stack Up [INFOGRAPHIC]

Золтан Гоча — венгерский UX-специалист и один из авторов блога UX Myths призывает нас присоединиться к рядам повстанцев против империи зла, делающей тексты малоконтрастными. Если во время Великой октябрьской революции первым делом надо было захватить почту и телеграф, то теперь главное — интернет. И чтобы контрастная революция преуспела, для начала сделайте текст на своем сайте хорошо читаемым.

Советуем посмотреть сайт Contrast Rebellion хотя бы потому что он сам сделан красиво и интересно: видимо, на контрасте со многими другими.

Contrast Rebellion

В отличие от BBC — относительно хорошего с точки зрения юзабилити примера онлайн-СМИ, который мы рассмотрели в другой заметке за сегодня, в качестве эталонного «плохиша» Энди выбрал The New York Times и практически полностью перепроектировал его с учетом высказанных в статье идей.

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

News Redux
Интерактивный прототип нового дизайна

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

Хотя примеров применения слоупграфов немного, дизайнер Чарли Парк собрал несколько из них и подробно рассмотрел преимущества, недостатки и особенности отрисовки таких диаграмм.

Edward Tufte’s «Slopegraphs»

Сама компания Innocent не участвовала в проекте Майка и даже не знала о нем. При принятии дизайнерских решений Майк опирался только на свое восприятие бренда и продукта. Четырехминутное видео иллюстрирует выполненную Майком работу шаг за шагом.

Realigning Innocent drinks (пост в блоге Майка Куса)

«Типографика для адвокатов» — превосходная бесплатная книга Мэттью Баттерика, раскрывающая основы типографского мастерства. В адвокатуру Мэттью пришел из дизайна, а потому он прекрасно знает как законы государственные, так и законы красиво построенного текста.

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

Наверняка, книга понравится людям и других профессий. В ней объясняется, как можно добиться профессионального результата с помощью текстовых процессоров и HTML-редакторов, в которых вы уже работаете. Также даются советы по тому, как оформлять определенные типы документов: резюме, сопроводительную записку, ходатайство. С практической точки зрения разбираются основные типографские понятия, такие как «кегль», а также разъясняются основные типографские правила и традиции: например, в каком случае какие виды «черточек» стоит использовать.

Книга выпущена по материалам сайта Мэттью Typography For Lawyers, и с ней можно ознакомиться онлайн.

Typography for Lawyers — The Book (отзыв)
Typography for Lawyers (сайт Мэттью Баттерика)

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

Shopping list on Pepper Plate Recipe, Menu & Cooking Planner

К текущему моменту на страницах блога накопилось достаточно историй для их издания в виде целой книги. Она доступна бесплатно в формате PDF.

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

• Проектные битвы: что было сделано удачно, что пошло не так;
• Запомнившиеся ситуации во время взаимодействия с заказчиками;
• Почему вы пошли работать в область User Experience или Information Architecture;
• Неожиданные ошибки, случившиеся с вами, или неудачи пользователей.

Блог с UX историями
Бесплатно скачать книгу «UX Storytellers —Connecting the Dots» (PDF – 15,5 Мб)
Отправить авторам блога свою историю

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

Что такое картограмма? Понятие и виды

Анимация давно была мощным средством повышения зрелищности презентаций в умелых руках: посмотрите хотя бы лучшие презентации с prezi.com. С момента выступления Ханса Рослинга на конференции TED 2006 стало популярным и активно развивающимся направлением анимированное представление статистических данных.

Исследователи Microsoft Research решили проверить, насколько анимация действительно помогает в восприятии данных. Они сравнили три варианта представления данных об изменении во времени социально-демографической статистики по различным странам: анимированный в стиле Ханса Рослинга, суммарную диаграмму (Traces) и пострановую табличную диаграмму (Small multiples). При этом они использовали три критерия сравнения (скорость восприятия, точность восприятия и субъективную удовлетворенность) для двух разных ситуаций (презентация данных и анализ данных).

Результаты показали, что скорость восприятия зависит от ситуации: анимированная инфографика быстрее всего воспринималась при презентации, на для анализа данных она оказалась гораздо менее пригодна. Пострановые диаграммы всегда позволяли воспринимать данные наиболее точно. Субъективно наиболее интересным респондентам показался анимированный вариант.

Research: How Effective is Animation in Showing Temporal Trends?
Effectiveness of Animation in Trend Visualization [PDF, 1,59MB]

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

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

Out of the box

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

Useful Junk? The Effects of Visual Embellishment on Comprehension and Memorability of Charts [PDF, 990 KB]

P.S. В блоге Juice Analytics вышла статья по мотивам данного исследования:
Memorable or Actionable or Both

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

Microsoft Live Labs Pivot

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

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

Boarding pass/fail

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

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

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