Фокусирование внимания при создании веб-дизайна

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

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

Основы

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

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

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

Где поместить фокусы

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

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

Как создать фокусы

Вот элементы дизайна, которые Вы можете изменить для установки фокусов. Приведены примеры сайтов для каждого отдельного варианта.

Текст

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

Eduardo de la Rocque использует различные шрифты и размеры, чтобы сделать три уровня видимости.

Огромные буквы на веб-сайте Fajne Chlopaki  бросаются в глаза.

Музыкальная группа The Autumn Film объявляет о специальном предложении с помощью жирного шрифта.

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

Различия в размерах шрифта может помочь, однако именно цвет действительно привлекает внимание. Разноцветные заголовки на сайте Flash Gaming Summit 2011 являются хорошим примером этого метода.

Иллюстрация

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

WPCoder имеет соответствующий описательный фокус. Это красота.

К примеру, главная страница сайта Bet Your Followers имеет несколько фокусов, при этом преобладает иллюстрация гориллы, именно она направляет глаза на другие объекты.

Aka-Acid имеет красивый дизайн, но отсутствие конкретного фокуса является ​недостатком.

Кнопки

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

На Fatburgr две простые кнопки привлекают внимание пользователя. Их размер и цвет являются вполне эффективными.

SolidShops использует четкие и очевидные кнопки для создания фокусов и выше и ниже сгиба.

Пробелы

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

Ask оставил достаточно большие пробелы вокруг поиска.

Декор

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

К примеру, на сайте 3rdM единственное, что сразу привлекает внимание, это синий цвет. После  этого глаз рассматривает другие элементы между синими значками. Просто, но эффективно.

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

Как показали Train-ee, облака тегов - это хороший способ организовать фокусы по размеру.

Основные украшения могут внести определенные элементы в текст. Сайт Dan Viveiros полон минимализма и элементарности, и это работает.

Страницы, подобные этой, на Post Typography, отвлекают пользователей; из-за пестроты глазам трудно сосредоточиться, и, честно говоря, это неудобно.

Вывод

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

автор - Mohammad Moradi

перевод и обработка - Vladwebstudio.ru