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

Ниже представлены виды визуального восприятия веб-дизайна и некоторые принципы, которые стоит применить для оптимального UX.

Сильные визуальные иерархии обеспечивают четкое восприятие

Когда клиент приходит на сайт, ваша задача – отправить его в путешествие, которое в конечном итоге приведет к конверсии. Чтобы этого достичь, необходимо создать визуальную иерархию. 52 Weeks of UX предлагает отличное описание этого процесса:

Существует порядок, который максимально вовлекает пользователя… какой-то контент следует представить первым, другой — вторым, или третьим, а какой-то – самым последним.
Самый важный контент находится вверху иерархии. Этот визуальный элемент, на который вы смотрите в самом начале, и он направляет клиента к следующему.
Визуальную подачу можно сравнить с увлекательной книгой, где писатель с самого начала закручивает интригу, которая заставляет читать абзац за абзацем, затаив дыхание. Грамотный дизайнер будет также эффективно перемещать зрителя от одного фрагмента контента к другому.

52 Weeks of UX также представили пример сайта с сильными и слабыми визуальными иерархиями:

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

Цель дизайнера — ранжировать различные элементы сайта с точки зрения важности, поскольку это связано с достижением бизнес-целей.
Например, фокусом главной страницы может быть большое изображение, чтобы мгновенно привлечь внимание посетителя. За этим может последовать заголовок, в котором обозначается о чем идет речь, а затем правильно размещенная кнопка призыва к действию (CTA) для посетителей.
Ниже приведен пример домашней страницы TOMS, которая следует этой формуле.

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

F-образный рисунок

Одно из наиболее известных исследований, проведенных по этому вопросу, было опубликовано Nielsen Norman Group еще в 2006 году:

Первый рисунок слева — это раздел «о нас» на веб-сайте. Средний рисунок — это страница продукта на сайте электронной торговли. Третий рисунок справа — это страница результатов поиска (SERP). Как видите, у всех трех типов страниц прослеживается общий рисунок.

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

Белое пространство играет большую роль

Белое пространство или «отрицательное пространство» — это область между объектами. Это пустое пространство, разделяющее графику, текст, заголовки, столбцы и т. д.

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

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

Вот примеры сайтов, в которых минимализм смотрится выигрышно:

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

Контрастом можно привлечь взгляд пользователя

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

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

Другие гештальт-принципы: близость, сходство, мультистабильность, непрерывность и закрытие.

Принципы гештальта. БЛИЗОСТЬ: когда разные элементы расположены близко друг к другу, они воспринимаются как принадлежащие к одной и той же группе. ЗАКРЫТИЕ: овеществление или закрытие означает привнесение чего-то в реальность, создание чего-то реального. НЕПРЕРЫВНОСТЬ: элементы, которые выровнены друг с другом, воспринимаются как визуально связанные. СХОДСТВО: объекты с общими визуальными характеристиками автоматически воспринимаются как связанные. МУЛЬТИСТАБИЛЬНОСТЬ: способность наших глаз видеть две разные вещи в пределах одного изображения или дизайна.

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

Сходство поможет усвоить контент

Сходство — еще один принцип гештальт теории, который говорит: «Элементы, которые имеют схожие характеристики, воспринимаются как более связанные, чем элементы, которые не имеют схожие характеристики». Проще говоря, организация различных элементов в группы позволяет пользователям быстро отличать их от остальной части вашего сайта.
Вот простой пример с главной страницы Harvard Business Review, где они размещают информационные бюллетени в одну группу:

Близость также полезна

Близость – еще один принцип гештальт теории. «Объекты, которые находятся ближе друг к другу, воспринимаются как более связанные, чем объекты, которые находятся дальше друг от друга». Просто взгляните на эти группы точек.

Мы склонны рассматривать точки слева как единый объект. Однако мы воспринимаем точки справа как два отдельных объекта.  Закон близости позволяет нам лучше понимать содержимое веб-сайта и разбивать различные элементы на разные категории. Например:

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

Золотое сечение может оптимизировать общую эстетику сайта

Концепцию золотого сечения изучали все — от Платона и Евклида до современных математиков. Если в двух словах, золотое сечение составляет 1,618.

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

Интересно, что золотое сечение вполне применимо к веб-дизайну. Пример:

Обратите внимание, как расположение элементов идеально сочетаются с золотым сечением. Это научно доказанный способ максимизировать привлекательность сайта.
Чтобы узнать, как применить идеальные пропорции к вашему сайту, ознакомьтесь с руководством от Tuts +.

Заключение

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

Оригинал статьи тут.