Actual Web

 
 
Подписаться на RSS канал Добавить в друзья в Живом Журнале
 

Проект компании
АйПартнер
iPartner — интернет-компания
Adverkka.ru

 
 

 

Страницы

 

В Живом Журнале

 
 
 
 

Архивы

 
 
 
 
 
22 Ноя 2010

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

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

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

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

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

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

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

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

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

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

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

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

eye-movement-001

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

eye-movement-002

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

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

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

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

eye-movement-003

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

eye-movement-004

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

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

eye-movement-005

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

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

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

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

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

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

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

Перевод от coolwebmasters|com
Оригинал: Eye Movement Patterns in Web Design

Be Sociable, Share!

Вас может заинтересовать и:

  1. Иллюстрации в веб-дизайне: 10 восхитительных примеров!
  2. 31 пример использования типографики в веб-дизайне
  3. Где пользователи ожидают увидеть наиболее часто используемые веб-объекты?
  4. Мобильный туристический веб-сайт города Канзас
  5. 15 примеров хорошего мобильного веб-сайта
  6. Комикс: Как веб-дизайн катится прямо в ад
  7. Caffeine – новая система индексирования веб-сайтов от Google

Метки: , , , , , , ,

 

Статья на сайте айпартнер: Шаблоны перемещения внимания в веб-дизайне

 

Комментариев нет.

RSS-лента комментариев к этой записи. TrackBack URL

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