Поиск:

Визуальные рассказы: что такое визуальная организация

Сколько сломано копий: Art vs. engineering, Aesthetics vs. usability, Usability experts are from Mars, graphic designers are from Venus. А споры между дизайнерами (визуального типа) и дизайнерами (технического типа) не прекращаются ни на минуту. Но ведь веб-сайт не может быть однобоким: он должен быть одинаково хорош и с визуальной и с технической точки зрения.

"Интерактивный дизайн - это тесное переплетение графики, технологии и психологии." - Брэд Винерс (Brad Wieners) журнал Wired 2002.

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

Ну, а что делает другая группа? Программисты и психологи закопались в книги по теории цвета или гештальту? Разумеется в их распоряжении есть вспомогательные инструменты - они которые облегчают им работу с изображениями, цветами и шрифтами (всевозможных видов и размеров). Но с мощью этих инструментов приходит и большая ответственность. И в данном случае разработчики просто обязаны знать, какое влияние визуальная составляющая информации оказывает на аудиторию.

"Мы обнаружили, что люди часто оценивают сайт лишь по одному только его внешнему виду" - Stanford Guidelines for Web Credibility, 2002

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

Как мы видим: визуальные отношения

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

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

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

Рис.1: Принципы восприятия: близость, схожесть, протяженность, законченность

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

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

Рис. 2: Визуальные различия между объектами

Изложение сюжета: Визуальная иерархия

"Дизайнеры призваны привнести порядок в хаос; они позволяют яснее передавать идеи путем организации и манипуляции словами и изображениями" - Джеффри Вин (Jeffery Veen), The Art and Science of Web Design

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

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

Рис.3: Три объекта с различными визуальным весом, созданным вариациями цвета, формы и фактуры.

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

Рис.4: Самыми тяжелыми (визуально доминирующими) элементами в рекламном плакате цирка являются изображения артистов и заголовок. Они создают общую картину: в город приехал цирк. Более легкие элементы (менее доминирующие) - это цена билета и список участников представления. Если бы иерархия была иной, мало кто понял бы, что в город приехал цирк. Вместо этого люди бы увидели странный плакат, рекламирующий что-то за $5.50.

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

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

Применение на практике

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

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

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

Контент
- Заголовок страницы
- Заголовок подраздела
- Ссылки в тексте
- Дополнительная информация (подписи под картинками и т.д.)

Навигация
- Текущее местоположение
- Верхний уровень навигации
- Второй уровень навигации
- Путь от начала к текущей странице (ссылки-цепочки)

Сопутствующая информация
- Отличительные элементы сайта
- Инструменты работы с сайтом (корзинка, карта сайта и т.д.)
- "Подвальная" информация (контактная информация, политика сайта и т.д.)

Рис.7: Визуальная иерархия общей веб-страницы

Разумеется существуют ситуации, когда от выведенной формулы можно отклониться. Примером могут служить страница навигации, главная страница сайта). Иерархия зависит от содержимого данной страницы, ее аудитории и цели. Тем не менее визуальное представление каждого элемента на странице должно:

- Соответствовать функции данного элемента
- Быть одинаковым на всем сайте
- Занимать положенное место в визуальной иерархии страницы

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

Рис.8: На данной форме с помощью визуальной иерархии посетителю сообщается, что ему сейчас надо делать. Особо выделяется мысль, что первый шаг ("Ordering from...") и последний (кнопка "Sign-In"). При этом сопутствующая информация визуально приглушена (ей придан меньший визуальный вес), и потому она не мешает выполнению главной функции формы.

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

Из-за огромного количества веб-сайтов в Сети пользователи очень часто (особенно на первых секундах) полагаются на зрение при оценке качества веб-сайта. Следовательно, хорошо продуманная визуальная организация элементов на странице позволит улучшить юзабилити сайта. Такие сайты строятся на знании того, как люди используют визуальные отношения для анализа объектов, и что эти отношения (путем иерархии и визуального веса) им сообщают. Но не забывайте, что визуальная организация это лишь часть процесса зрительного восприятия. Другая часть - личностная окраска (look and feel) - это уже совсем другая история...

Luke Wroblewski

Luke Wroblewski - автор замечательной книги "Site-Seeing: A Visual Approach to Web Usability". Он работает в LukeW Interface Designs, и ведет курсы дизайна интерфейсов в Университете шт.Иллинойс в Urbana-Champaign.

« назад к списку статей

Самые популярные статьи:

• Элементы разработки веб-сайтов
• Анализ популярных решений в web-дизайне
• Шаблонные решения для web-сайтов
• 10 главных ошибок веб-дизайна 2003 года
• К черту плохие броузеры