Борьба за внимание потребителей в интернете обостряется. Если владельцы сайтов хотят не отставать от конкурентов и опережать их, они должны следить за новыми тенденциями и исследованиями в области веб-дизайна и поведения пользователей.

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

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

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

Специалисты digital-агентства Single Grain и сервиса для создания теплокарт сайтов Crazy Egg подготовили инфографику об айтрекинге с результатами исследований и полезными советами по оптимизации дизайна сайта. Внимательно изучите инфографику, чтобы узнать все цифры исследований и рекомендации; ниже я изложил главные из них.

В инфографике показывается, что большинство пользователей демонстрируют F- и E-образную модель просмотра сайта. Здесь также говорится о том, что 80% посетителей тратят 80% времени пребывания на сайте на просмотр верхней части страниц или той части, которую можно видеть без прокрутки вниз. Интересно, что 69% времени посетители смотрят на левую часть страницы.

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

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

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

В последней части инфографики приводятся ценные советы по разработке дизайна сайта:

  • размещайте логотип слева; при этом рекламный баннер вверху не должен отвлекать от логотипа;
  • размещайте важный контент в левой части веб-страниц;
  • навигацию желательно располагать вверху или слева;
  • учитывайте F- и E-модели просмотра контента посетителями при проектировании дизайна;
  • включайте самую важную информацию в первые 2-3 абзаца на странице;
  • не размещайте на странице слишком много текста.