7 способов побудить ваших пользователей прокрутить весь дизайн вашего сайта

Опубликовано: 2021-09-11

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

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

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

«Вот семь способов побудить людей продолжать прокручивать страницу.

1. Начните сильно

Скриншот Wholegrain Digital сверху сгиба
Wholegrain Digital использует много открытого пространства в верхней части страницы, чтобы читатели могли сосредоточиться на своем основном сообщении.

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

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

Ищете лучший способ создать свой сайт как для ваших клиентов, так и для поисковых систем? Не смотрите дальше!

2. Создавайте привлекательный контент

макет маховиком скриншот двух блоков контента
Статьи макета разбиты на части смелыми, яркими художественными изображениями.

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

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

3. Четко определите свои цели

используйте скриншот веб-страницы перед полетом с кнопками CTA с надписью «Пилоты» и «Менеджеры по обучению».
Use Before Flight, созданный Wholegrain Digital, использует две кнопки призыва к действию в верхней части страницы.

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

Это означает, что вам следует подумать о размещении кнопок CTA в нескольких местах вниз по странице. Помните, что не все будут прокручивать вниз.

4. Избегайте ложного дна

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

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

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

5. Предоставьте четкую дорожную карту

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

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

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

Если ваша страница особенно длинная, вы можете включить опцию перехода или рассмотреть разные URL-адреса для разных этапов страницы. Что бы вы ни делали, убедитесь, что кнопка «Назад» работает правильно, поэтому, если люди перейдут по ссылке, они вернутся к той же части страницы, с которой ушли.

6. Порадуйте людей творческим взаимодействием

скриншот сайта смены
The Shift делает процесс прокрутки интересным и уникальным для своих зрителей.

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

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

7. Не злоупотребляйте прокруткой

Скриншот веб-сайта метода розового золота
Метод – Rose Gold, созданный Wholegrain Digital, использует забавные эффекты прокрутки, не отвлекая от работы.

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

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


Что дальше?

Если вы маркетолог, работающий с сайтами WordPress, плагины — идеальный способ оптимизировать ваши усилия! Однако поиск идеального варианта, который поможет вам достичь ваших целей, может быть чем-то вроде A/B-тестирования CTA — требуется исследование, тестирование и отслеживание результатов, чтобы точно знать, что окупается. Теперь умножьте это на все полезные параметры в каталоге плагинов, и вы получите список прачечной для расстановки приоритетов.

Вам нравится использовать сайты с длинной прокруткой, и есть ли у вас какие-нибудь полезные советы, которые можно добавить в этот список? Расскажите мне в комментариях ниже.