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

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

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

Основы

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

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

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

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

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

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

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

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

Текст

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

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

Фокусирование внимания

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

Огромные буквы на веб-сайте Fajne Chlopaki

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

Музыкальная группа The Autumn Film

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

увлекательный фокус

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

Разноцветные заголовки на сайте Flash Gaming Summit 2011

Иллюстрация

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

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

WPCoder

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

главная страница сайта Bet Your Followers

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

Aka-Acid

Кнопки

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

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

Fatburgr

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

SolidShops

Пробелы

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

Использование пробелов

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

Ask

Декор

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

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

Использование простого декора

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

цветовой контраст

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

облака тегов

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

Сайт Dan Viveiros

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

Post Typography

Вывод

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

автор - Mohammad Moradi

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

Оставить комментарий

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