—»     —»   Шаблоны перемещения внимания в веб-дизайне
  Раздел: Подсказки   Комментариев: 2  

Шаблоны перемещения внимания в веб-дизайне



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

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

Шаблоны перемещения внимания в веб-дизайне

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

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

Шаблоны перемещения внимания пользователей

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

Какова роль вашей веб-страницы? Каким образом посетители перемещают взгляд из точки А к точке Б? Предположим, что вы разрабатываете страницу, на которой вы (ваша компания) предлагаете посетителям какой-либо продукт? Каким образом вы можете добиться успеха? Изначально, нужно дать посетителю понять, что если у него существует какая-то проблема или потребность, то вы (ваша компания) – это именно те люди, которые помогут найти решение. Далее вы предоставляете немного информации о решении проблемы, о том, кто решает эти проблемы (название вашей компании, логотип или бренд), а затем предложение начать решать проблему. Как все это можно сделать? Проще говоря, мы можем немного контролировать то, как пользователи будут просматривать наши страницы. Здесь почти всё зависит от «горячих точек».

Горячие точки на веб-странице

Что такое горячие точки? Это области на странице, на которые взгляд посетителей задерживается дольше всего. Давайте ознакомимся с результатами исследования траектории движения взгляда посетителей веб-сайта с предложением каких-либо услуг или товара. Ниже вы можете видеть результат исследования траектории движения взгляда на странице предложения мобильного устройства - Credo Mobil.

Шаблоны перемещения внимания в веб-дизайне

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

Шаблоны перемещения внимания в веб-дизайне

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

Каково решение данной проблемы? Давайте рассмотрим намерения разработчиков Credo Mobil:

1. Показать посетителям отличный телефон, в котором они заинтересованы.
2. Немного намекнуть на название компании
3. Провести посетителя к кнопке действия, посредством которой производится покупка лота.

После изучения результатов исследования траектории перемещения взгляда, Credo Mobil решили изменить дизайн страниц. В результате получилось нечто вроде этого:

Шаблоны перемещения внимания в веб-дизайне

А вот и новые результаты исследования траектории:

Шаблоны перемещения внимания в веб-дизайне

F-образная траектория

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

Шаблоны перемещения внимания в веб-дизайне

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

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

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

Руководство по управлению траекторией движения взгляда посетителей

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

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

Стоит отметить, что разработка коммерческих страниц с продвижением товаров является одной из сложнейших задач в веб-дизайне. Почему это так? Просто здесь гораздо сложнее создать траекторию движения внимания, нежели на страницах, где нам требуется помнить о букве F. К счастью, пользователи интернет уже давно привыкли видеть нестандартные дизайны коммерческих страниц. Поэтому вам лишь остается подкорректировать некоторые элементы в целях достижения точной траектории движения внимания, и поэтому, если ваша страница профессионально оформлена, то она точно будет успешной.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: визуализация
Опубликовал Mysterious Master   Прочитано (раз): 10150   |   Оставлено комментариев: 2
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 20 ноября 2010 @ 21:07
Написал: sokos — группа: Читатели  
На сайте с: 16.05.2010   |   Публикаций: 0   |   Комментариев: 22
ICQ: --- не указано ---
информативно. спасибо!
Комментарий #2: 18 июня 2011 @ 22:56
Написал: Download — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Thanks for the helpful information
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930