Зрительно воспринимаемое направление в веб-дизайне

Зрительно воспринимаемое направление в веб-дизайне

От автора: один из больших секретов дизайна – понять, как управлять направлением взгляда пользователя; этот принцип часто упускается из виду даже самыми опытными дизайнерами, поэтому сегодня мы собираемся тщательно изучить его работу. Зрительное направление контролирует движение взгляда пользователя, достичь этого можно путем тщательного отбора изображений и правильного расположения и выравнивания элементов дизайна.

Общепринято, что по умолчанию движение взгляда по странице (в разметке LTR – Left to Right – слева направо) происходит сверху слева книзу вправо, как показано на изображении:

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

1. Управление направлениями с помощью изображений

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

Конечно, вполне понятно, в каком направлении указывают эти изображения, хотя изображения могут оказаться не такими явными, взгляните на другие примеры:

2. Ведение взгляда

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

Взгляните на примеры, взятые с вебсайтов CNN и BBC:

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

1. Вы начинаете сверху слева, с обычного места по умолчанию

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

3. Ваши глаза возвращаются обратно к центру страницы

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

5. Наконец ваши глаза начинают двигаться к центру страницы, однако здесь имеется большое «слепое пятно», созданное размещением и направлением изображения, отмеченное “?”

Теперь сравните следующую «исправленную» версию домашней страницы BBC с вышеприведенной исходной:

Глядя на эту версию, вы заметите, что взгляд не выходит за пределы страницы, человеческие лица смотрят внутрь и помогают смотреть в том же направлении в центр страницы.

3. Формы

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

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

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

4. Направление дизайна

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

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

Во второй группе внизу диагональное размещение элементов усиливает ощущение движения и действия.

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

На этих трех фотографиях видно то же изменение характера. Предмет на них один и тот же, изменение ударения в направлении создает на каждом изображении другую атмосферу.

Ударение на вертикаль первого изображения создает ощущение упорядоченного формализма, второе горизонтальное ударение – чувство спокойствия и стабильности, в то время, как третье диагональное – чувство активности и оживленности.

Заключение

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

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

Автор: Ahmed Hussam

Источник: http://webdesign.tutsplus.com/

Редакция: Команда webformyself.

Хотите научиться создавать шикарные дизайны сайтов?

Получите бесплатную пошаговую обучающую систему по веб-дизайну

Получить

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (2)

  1. Ольга Абрамова

    Даже в наших граватарх у большинства (и у меня) фотка смотрит от центра. Как-будто мы затылком говорим :)

  2. Павел

    Я использую этот прием для увеличения кликабельности рекламных объявлений от Гугл Адсенс и тем самым повышаю свою ежедневную прибыль

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree