Всех впускать — никого не выпускать: 12 лайфхаков для удержания пользователя на сайте

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

Общеизвестные рекомендации по увеличению этих показателей следующие:

• создавайте отличный контент;
• увеличивайте взаимодействие пользователя с сайтом;
• делайте мощную внутреннюю перелинковку.

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

Эти способы соответствуют логике удержания пользователя на сайте, которая включает три этапа:

• Удержите посетителя при входе.
• Замедлите его передвижение по странице.
• После просмотра одной страницы направляйте его на другую.

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

1) Используйте цепляющие заголовки. Ниже удачный пример вовлекающего контента на первом экране с сайта https://32praktika.ru/:

• простой цепляющий заголовок, отрабатывающий «боль» клиента («Безопасное отбеливание»);

• описание процесса с помощью буллетов (эффективное, комфортное, мгновенное);
• вовлекающая претензия на уникальность технологии (Zoom!4);
• описание результата (осветление до 8 тонов).

2) Сокращайте долгие вступления и убирайте из них «воду». Пример «водного» (без конкретики) текста на втором экране главной страницы сайта http://dentfamily.ru/:

Еще один пример блока преимуществ с сайта http://dentfamily.ru/, который может не заинтересовать пользователя, так как применяются только общие фразы:

3) Не делайте первый экран полупустым в угоду дизайну (который может понравиться, а может и не понравиться пользователю). Помните — огромные пустые пространства скроллятся мгновенно. Пример дизайна первого экрана сайта http://kuhtadent.ru/:

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

Слайдер выполняет сразу три задачи за счет постоянной смены изображений и движения:

• привлекает внимание к важной информации (например, к акциям);
• обеспечивает эффектную презентацию продукта или услуги (в виде «слайд-шоу»);
• увеличивает время пребывания пользователя на странице.

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

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

Сравните два примера:

1) Пример настройки скорости слайдера в 5 секунд — http://dentfamily.ru/:

2) Пример статичного слайдера — https://www.kostamed.ru/. Из-за неверной настройки посетители сайта не видят два специальных предложения из трех:

Настраивайте скорость смены изображений в слайдерах:

• не более 5 секунд для десктопов;
• не более 3 секунд для мобильных телефонов (если есть возможность настраивать для разных устройств раздельно).

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

Слайдеры на первом экране любят за их эффектность, но все чаще вместо них на первом экране (особенно на главной странице) размещают фоновое видео — оно смотрится еще эффектнее и лучше привлекает внимание. Яркий пример: https://www.dreamworks.com/.

Когда вы располагаете иконки на первом экране, а тем более — на «приклеенной» шапке (Sticky Header), вы сами предлагаете посетителю покинуть сайт как можно скорее. Лучше расположите их в футере. Совсем удалять «социальные» иконки не стоит: их присутствие на сайте — один из факторов ранжирования.

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

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

Поэтому не стройте препятствия на пути к качественному контенту. Лучше поэкспериментируйте с таймером всплывающего окна. Например, установите на 30, 45 или 60 секунд после нахождения посетителя на странице, замерьте конверсионность и выберите самое «конверсионное» время отсрочки.

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

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

Когда вы оставляете право выбора посетителю, нажать или не нажать кнопку, скрывающую текст, происходит следующее:

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

В результате присутствие спойлеров и аккордеонов способно сокращать время пребывания посетителей на странице и влиять на конверсионность.

На изображениях далее — несколько реальных примеров.

Применение спойлеров и аккордеонов оправдано в двух случаях:

• Если вы хотите разместить несущественную для пользователя информацию — например, оптимизированный текст, полезный для SEO, но в целом не важный для посетителя (который он, скорее всего, не станет читать).

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

Изображения на сайте — это уже ценный контент, но когда с ними можно взаимодействовать — это еще лучше:

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

Арсенал взаимодействий с изображениями расширяется постоянно, вот лишь несколько примеров:

• Слайдеры до / после (Before / After Image Slider) https://ultimateelementor.com/widgets/before-after-slider/:

• Прокрутка картинок при наведении (Image Scroll) https://premiumaddons.com/elementor-image-scroll-widget/:

• Картинки-перевертыши (Flip Box) https://premiumaddons.com/flip-box-widget-for-elementor-page-builder/:

• Интерактивные диаграммы https://premiumaddons.com/charts-widget-for-elementor-page-builder/:

• Эффект Кена Бернса

https://premiumaddons.com/ken-burns-section-addon-for-elementor-page-builder/:

• Параллакс https://premiumaddons.com/parallax-section-addon-for-elementor-page-builder/:

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

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

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

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

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

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

• Отключите звук. Если только это не интервью, звук не нужен совсем. Думаете, посетителю не понравится ролик без фоновой музыки? Но музыка — дело индивидуальное: она может не понравится и свести на нет позитивное впечатление от видео. Если музыка неожиданно зазвучит слишком громко или просто наскучит, чтобы избавиться от нее, пользователь может выключить видео или закрыть страницу. Еще одно возможное преимущество такого подхода: отключив фоновую музыку, вы будете уверены, что не нарушаете авторские права (это также может быть актуально).

• Вместо ссылки на YouTube разместите видео на хостинге. Так вы будете уверены, что посетитель не уйдет на YouTube с вашего сайта, и пребывание на странице будет максимально долгим.

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

Далее распространенные ошибки в шрифтах, которые могут влиять на продолжительность сеанса.

• Слишком элегантные и редко используемые на сайтах шрифты. Стремление подчеркнуть статусность, необычность и аристократичность продукта — похвально. Но если для этого используется шрифт с кольца «Властелина Колец», посетителям будет сложно его читать. Не стоит изобретать велосипед — уже давно разработаны и проверены на тысячах сайтов наиболее хорошо воспринимаемые посетителями шрифты: Montserrat, Open Sans, Lato и другие.

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

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

• Недостаточный или избыточный интерлиньяж. Интерлиньяж — это пространство между строками. Регулируйте его правильно — давайте тексту «дышать» или, наоборот, устраняйте лишний «воздух». И то, и другое влияет на удобочитаемость текста, а значит — на длительность пребывания пользователя на странице.

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

Не выпускайте посетителя с сайта, когда он доходит до конца страницы. Предлагайте дальнейший маршрут. Вспомните бесконечный блок «Вам может быть интересно» в «Яндекс Дзен». Действуйте аналогично. Вариантов блоков, на которые можно направить посетителя — бесконечное множество.

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

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

Помните IKEA? Благодаря грамотной навигации, войдя в магазин вы не выйдете из него, пока не пройдете от начала до конца по специальной дорожке с указателями (и не наполните корзину массой товаров). Сделайте так же на вашем сайте.

Оставляйте полноценное меню в футере. Не ограничивайтесь только категориями — размещайте подкатегории. Посмотрите, как это реализовано на сайте Apple (https://www.apple.com/). Меню в футере с подкатегориями — это одновременно карта сайта, отражающая богатство его содержания. Если посетитель чего-то не нашел, возможно, он заметит интересующую страницу в футере и перейдет на нее.

Ссылки в меню футера — словно товары в прикассовой зоне: вы покупаете то, что не собирались, просто потому, что это удобно расположено. Так и со ссылками — вы переходите по ним просто потому, что они удобно расположены в конце страницы.

Делайте навигацию на сайте как можно более удобной, и вы сможете заметно увеличить глубину просмотра.

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

Продумывайте и внедряйте собственные способы улучшения поведенческих характеристик с учетом логики удержания пользователя:

• Удержите посетителя при входе.
• Замедлите его передвижение по странице.
• После просмотра одной страницы направляйте на другую.

Всегда ставьте себя на место посетителя и прогнозируйте его поведение перед внедрением на сайте новых решений — тогда шансы на положительный результат заметно возрастут!

С уважением, Борис Южиков, SEO-специалист PARUS AGENCY