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

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

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

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

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

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

  • Удержите посетителя при входе.
  • Замедлите его передвижение по странице.
  • После просмотра одной страницы направляйте его на другую.
Всех впускать — никого не выпускать: 12 лайфхаков для удержания пользователя на сайте

Удерживаем на входе

1. Располагайте вовлекающий контент в начале страницы

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

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

  • простой цепляющий заголовок, отрабатывающий «боль» клиента («Безопасное отбеливание»);
  • описание процесса с помощью буллетов (эффективное, комфортное, мгновенное);
  • вовлекающая претензия на уникальность технологии (Zoom!4);
  • описание результата (осветление до 8 тонов).
Всех впускать — никого не выпускать: 12 лайфхаков для удержания пользователя на сайте

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

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

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

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

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

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

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

2. Увеличьте скорость смены изображений в слайдерах

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

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

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

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

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

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

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

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

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

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

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

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

3. Разместите фоновое видео вместо слайдера на первом экране

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

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

4. Уберите иконки соцсетей из шапки

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

<i>В этом примере значки соцсетей в хедере привлекают внимание быстрее, чем конверсионные кнопки «Подробнее» и «Онлайн-запись» (<a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fwww.gorod-krasoti.com%2F&postId=139255" rel="nofollow noreferrer noopener" target="_blank">https://www.gorod-krasoti.com/</a>)</i>
В этом примере значки соцсетей в хедере привлекают внимание быстрее, чем конверсионные кнопки «Подробнее» и «Онлайн-запись» (https://www.gorod-krasoti.com/)

5. Настройте паузу перед появлением всплывающих окон

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

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

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

<i>Пример быстро появляющегося окна на главной странице сайта <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Farsvita.clinic%2F&postId=139255" rel="nofollow noreferrer noopener" target="_blank">https://arsvita.clinic/</a></i>
Пример быстро появляющегося окна на главной странице сайта https://arsvita.clinic/

Замедляем скроллинг по странице

6. Не играйте с пользователем в прятки — не прячьте важную информацию в спойлерах и аккордеонах

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

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

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

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

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

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

<i>Посетитель заходит на страницу в поисках цены на нужную услугу. Вы чините препятствия на его пути и скрываете цену за кнопкой. Зачем? Посетитель может нажать на кнопку, а может и не нажать — и уйти со страницы (<a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fvdin.ru%2Fnapravleniya%2Flor&postId=139255" rel="nofollow noreferrer noopener" target="_blank">https://vdin.ru/napravleniya/lor</a>)</i>
Посетитель заходит на страницу в поисках цены на нужную услугу. Вы чините препятствия на его пути и скрываете цену за кнопкой. Зачем? Посетитель может нажать на кнопку, а может и не нажать — и уйти со страницы (https://vdin.ru/napravleniya/lor)
<i>На раскрывающиеся вкладки указывают только бледные стрелки. Посетители вашего сайта могут видеть такую «штуку» впервые и не понять, что с ней делать (особенно люди в возрасте). Пример с сайта <a href="https://api.vc.ru/v2.8/redirect?to=http%3A%2F%2Fdentamed64.ru%2Fstomatologija-saratov-ceny-price-list%2F&postId=139255" rel="nofollow noreferrer noopener" target="_blank">http://dentamed64.ru/stomatologija-saratov-ceny-price-list/</a></i>
На раскрывающиеся вкладки указывают только бледные стрелки. Посетители вашего сайта могут видеть такую «штуку» впервые и не понять, что с ней делать (особенно люди в возрасте). Пример с сайта http://dentamed64.ru/stomatologija-saratov-ceny-price-list/
<i>Если без аккордеона не обойтись — проявите заботу о пользователе и покажите, что вкладки раскрываются, оставив первую открытой по умолчанию</i>
Если без аккордеона не обойтись — проявите заботу о пользователе и покажите, что вкладки раскрываются, оставив первую открытой по умолчанию

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

  • Если вы хотите разместить несущественную для пользователя информацию — например, оптимизированный текст, полезный для SEO, но в целом не важный для посетителя (который он, скорее всего, не станет читать).
  • Когда информации настолько много, что ее действительно сложно разместить и структурировать на странице. В частности, это характерно для сайтов сложной технической продукции. Пользователи таких сайтов (например, проектировщики) привыкают к подаче информации во вкладках, знают, как ими пользоваться, и активно переходят по ним в поисках технических данных.
<i>Используйте аккордеоны только там, где это оправдано — например, для структурирования технических данных (<a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fwww.vesper.ru%2Fcatalog%2Finvertors%2Fe4-8400%2Fspecification%2F&postId=139255" rel="nofollow noreferrer noopener" target="_blank">https://www.vesper.ru/catalog/invertors/e4-8400/specification/</a>)</i>
Используйте аккордеоны только там, где это оправдано — например, для структурирования технических данных (https://www.vesper.ru/catalog/invertors/e4-8400/specification/)

7. Настройте взаимодействия с изображениями

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

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

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

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

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

8. Включите автовоспроизведение видео и зациклите его

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

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

<i>На сайте <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fallon4.ru%2F&postId=139255" rel="nofollow noreferrer noopener" target="_blank">https://allon4.ru/</a> автовоспроизведение зацикленного видео мгновенно показывает суть сложной процедуры и привлекает внимание</i>
На сайте https://allon4.ru/ автовоспроизведение зацикленного видео мгновенно показывает суть сложной процедуры и привлекает внимание

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

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

9. Поменяйте шрифты

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

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

  • Слишком элегантные и редко используемые на сайтах шрифты. Стремление подчеркнуть статусность, необычность и аристократичность продукта — похвально. Но если для этого используется шрифт с кольца «Властелина Колец», посетителям будет сложно его читать. Не стоит изобретать велосипед — уже давно разработаны и проверены на тысячах сайтов наиболее хорошо воспринимаемые посетителями шрифты: Montserrat, Open Sans, Lato и другие.
<i>Примеры элегантных, но сложночитаемых шрифтов на сайте <a href="https://api.vc.ru/v2.8/redirect?to=http%3A%2F%2Fwww.daimondlife.ru%2F&postId=139255" rel="nofollow noreferrer noopener" target="_blank">http://www.daimondlife.ru/</a></i>
Примеры элегантных, но сложночитаемых шрифтов на сайте http://www.daimondlife.ru/
<i>Пример сложночитаемого шрифта в угоду творческой концепции на сайте ресторана (<a href="https://api.vc.ru/v2.8/redirect?to=http%3A%2F%2Fromein.ru%2Fmenu%2F&postId=139255" rel="nofollow noreferrer noopener" target="_blank">http://romein.ru/menu/</a>)</i>
Пример сложночитаемого шрифта в угоду творческой концепции на сайте ресторана (http://romein.ru/menu/)
  • Слишком бледные шрифты. Различные оттенки серого в шрифтах более комфортны для чтения с экрана, чем шрифты чисто черного цвета. Но светло-серые шрифты бывают просто нечитабельны, поэтому их нужно использовать с осторожностью.
<i>Пример сложночитаемого светло-серого шрифта на сайте <a href="https://api.vc.ru/v2.8/redirect?to=http%3A%2F%2Fwww.verazhukovastudio.ru%2F&postId=139255" rel="nofollow noreferrer noopener" target="_blank">http://www.verazhukovastudio.ru/</a></i>
Пример сложночитаемого светло-серого шрифта на сайте http://www.verazhukovastudio.ru/
  • Слишком мелкие или слишком крупные шрифты. На сайтах можно встретить шрифты разного размера: чтобы прочитать одни, понадобятся очки, другие же настолько переадаптированы к мобильным устройствам, что из-за огромного размера придется скроллить каждые три слова. Поставьте себя на место пользователя и подберите наиболее удобочитаемые размеры шрифтов для различных устройств.
<i>Пример мелкого шрифта, который еще сложнее прочитать из-за пестрого фона (<a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Frattan-mebel.ru%2Fcollection%2Fbruni_bryni%2F&postId=139255" rel="nofollow noreferrer noopener" target="_blank">https://rattan-mebel.ru/collection/bruni_bryni/</a>)</i>
Пример мелкого шрифта, который еще сложнее прочитать из-за пестрого фона (https://rattan-mebel.ru/collection/bruni_bryni/)
  • Недостаточный или избыточный интерлиньяж. Интерлиньяж — это пространство между строками. Регулируйте его правильно — давайте тексту «дышать» или, наоборот, устраняйте лишний «воздух». И то, и другое влияет на удобочитаемость текста, а значит — на длительность пребывания пользователя на странице.
<i>Пример текста, выполненного отличным шрифтом, но с недостаточным интерлиньяжем (<a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fwww.relita-kazan.ru%2Frestaurant%2F&postId=139255" rel="nofollow noreferrer noopener" target="_blank">https://www.relita-kazan.ru/restaurant/</a>)</i>
Пример текста, выполненного отличным шрифтом, но с недостаточным интерлиньяжем (https://www.relita-kazan.ru/restaurant/)

Направляем на следующую страницу

10. Не скрывайте навигационные ссылки

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

<i>В этом примере навигационные ссылки лучше оставить открытыми (<a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fkedr-stom.ru%2Fservices%2F&postId=139255" rel="nofollow noreferrer noopener" target="_blank">https://kedr-stom.ru/services/</a>)</i>
В этом примере навигационные ссылки лучше оставить открытыми (https://kedr-stom.ru/services/)

11. Используйте блоки подобных товаров или статей

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

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

<i>Пример обновляемого на основе предпочтений пользователя блока на Яндекс.Дзен (<a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fzen.yandex.ru%2F&postId=139255" rel="nofollow noreferrer noopener" target="_blank">https://zen.yandex.ru/</a>)</i>
Пример обновляемого на основе предпочтений пользователя блока на Яндекс.Дзен (https://zen.yandex.ru/)
<i>Пример блока рекомендуемых товаров на сайте <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fgipfel.ru%2F&postId=139255" rel="nofollow noreferrer noopener" target="_blank">https://gipfel.ru/</a></i>
Пример блока рекомендуемых товаров на сайте https://gipfel.ru/

12. Не скрывайте меню в футере

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

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

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

<i>Ссылки (карта сайта) в футере <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fwww.apple.com%2Fru%2F&postId=139255" rel="nofollow noreferrer noopener" target="_blank">https://www.apple.com/ru/</a></i>
Ссылки (карта сайта) в футере https://www.apple.com/ru/

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

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

Выводы

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

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

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

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

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

55
4 комментария

Многие пункты сомнительные. 

Ответить

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

1
Ответить

Борис, спасибо за твою плодотворную работу и аналитику!

Удачи в проектах!

Ответить

Егор, спасибо за мотивацию! 

Ответить