Фокус-покус: важность фокальных точек и полезные советы для веб-дизайнера

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

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

Полезные советы касательно фокальных точек

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

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

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

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

Расположение

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

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

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

Частота

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

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

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

Элементы

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

Текст и его написание

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

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

Графика, изображения и иллюстрации

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

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

Пустое место

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

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

«Выставка» вебсайтов с отлично расположенными фокальными центрами

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

Koa Water

iPolecat

Ride Four Ever

Wrist

Grind Spaces

The Pete Design

Mosne

Jeremy Levine

Caramel Budgie

FK Agency

Заключение

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