Как управлять вниманием читателя с помощью скролла
Если правильно выстроить лендинг и использовать несколько техник управления вниманием, информация на нем будет для мозга как легкий наркотик — читатель доскроллит страницу до конца. Собрали основные механики, которые позволяют маркетологу и дизайнеру управлять вниманием с помощью скролла.
Что надо знать о человеческом мозге
Мозг весит всего 2% от массы тела, при этом потребляет до 20% энергии. При любом удобном случае он пытается перейти в фоновый режим работы: не соображать, а работать на рефлексах. Из-за этого нам сложно долго концентрироваться на чем-то одном.
Исключение — когда информация привлекает внимание мозга. Есть два основных способа это сделать, согласно книге Дэвида Рока «Мозг. Инструкция по применению»:
заставить мозг бояться — тогда начнет вырабатываться норадреналин. Это естественный эволюционный рефлекс, который срабатывает, когда человек видит саблезубого тигра в кустах. С сайтами это связать сложно.
- доставить мозгу удовольствие — тогда получится задействовать дофамин. Для повышения уровня дофамина не нужны наркотики и алкоголь, достаточно дать мозгу свежие впечатления — то, что мы не видели или редко встречаем.
Техники работы со скроллом на странице помогают поддерживать внимание мозга на нужном уровне. Они вызывают ощущение новизны и приводят к выработке дофамина.
Рассмотрим их на примерах.
Не обмануть ожидания
Как сделать. Если мы привлекли внимание человека к проекту и он его открыл, то должен получить обещанное — без смены темы и воды. Иначе не сработают никакие механики работы с вниманием.
Пример. Если статья называется «5 способов сделать яичницу», она не должна рассказывать о том, откуда берутся куриные яйца. Так делают авторы SEO-статей, чтобы впихнуть больше ключевых слов и нагнать трафик. Если обещаете развлекательные материалы — пусть будет настоящее развлекалово, если простую для понимания обучающую информацию — на лендинге должна быть именно она.
Создать иллюзию, что пользователь управляет процессом
Как сделать. Когда пользователь скроллит страницу, обычно он просто идет по колонке из текста и иллюстраций, экран за экраном. Вместо этого к скроллу можно привязать анимированную смену объектов: картинки и текст будут всплывать, а отдельные иллюстрации увеличиваться или прокручиваться по горизонтали. Это сильная механика, потому что она обманывает мозг: ему кажется, что он управляет процессом.
Пример. Мы делали проект к юбилею завода «КуйбышевАзот» в Тольятти. На странице юбилея завода по скроллу на картинках появляется текст, работает анимация, бегут цифры.
Менять ритмику повествования
Как сделать. На лендингах обычно есть визуальная ритмика: заголовок, текст, картинка — и все повторяется. Мозгу это быстро наскучивает, поэтому важно нарушать ритмику, например, добавить крупный текст необычным шрифтом. Так мы поддерживаем мозг на высоком уровне концентрации.
Пример. На странице биографического лендинга на сайте Музея Сахарова время от времени появляется крупный текст в непривычной типографике, а иллюстрации представлены по-разному: обтравлены, в кружке, целиком или в галерее.
Ломать шаблон взаимодействия
Как сделать. Изменения по скроллу — мощная механика, но и к ней мозг быстро привыкает, в результате концентрация внимания снижается. Поэтому иногда стоит предложить абсолютно новый опыт взаимодействия с проектом: интерактивные подписи, аудио, короткие видео. Так мозг получает дополнительный дофамин — как сердце пациента скорой помощи получает новый импульс от электрического заряда.
Пример. На странице о локомотивах «ЛокоТеха» интерактивные подписи к объектам появляются, если навести курсор на знак вопроса, описания разных локомотивов отображаются, если нажать на стрелки, а собственный локомотив соберется — если подергать ползунки конструктора.
Завлечь микроанимацией
Как сделать. Иногда лучше ставить не статичную картинку, а немного подвижную. Все, что движется, может представлять опасность или потенциал для взаимодействия, поэтому привлекает внимание мозга.
Пример. Такой прием использовали создатели страницы с биографией Музея Сахарова.
Не переборщить с механиками взаимодействия
Как сделать. С механиками для управления вниманием важно быть осторожным. Если их будет слишком много или они будут превалировать над контентом, на мозг это подействует противоположным образом — он устанет воспринимать новое.
По нашему опыту, на один лендинг в 20-30 экранов достаточно 3-4 механик. Если объем меньше, хватит и 2-3. При этом использовать их стоит умеренно, иначе даже одна очень активная механика может загубить все повествование.
Пример. Квартальный дайджест «ВТБ Онлайн» должен рассказывать об обновлениях в приложении. Все управление лендингом происходит по скроллу: уменьшаются и увеличиваются картинки, вылетают карты, строятся графики и линии на карте. Кажется, что все это должно помочь мозгу сконцентрироваться, но на деле дает обратный эффект — мы видим только анимацию, но не можем прочитать текст. Механики победили полезный контент, и он за ними исчез.
Главное: как управлять вниманием на лендинге
- Не обманывать ожиданий — дать читателю то, что объявили в заголовке.
- Создать иллюзию управления процессом за счет изменений по скроллу.
- Иногда нарушать ритмику повествования.
- Ломать шаблон взаимодействия — давать новую информацию не только по скроллу, но и по клику или наведению курсора.
- Завлечь микроанимацией, тогда с лендингом захочется взаимодействовать.
- Не переборщить с механиками, 3-4 будет достаточно.
Читайте другие наши статьи о приемах работы с информационными продуктами
Ещё мы собираем лучшую инфографику со всего мира и разбираем, как эти примеры могут работать в коммерческих целях, в Телеграме.
По скроллу карта превращается в инфографику
Все никак не покажет дворец в геленджике.
На это можно смотреть вечно. Но идея в статье крутая на самом-то деле!
Вместо этого к скроллу можно привязать анимированную смену объектовкак же я ненавижу вот эту дизайнерскую хрень
если в анимации было что-то интересное/нужное, приходится елозить туда-сюда мышью, вылавливая нужный момент
в 99% разработчики фокусируются только на одном устройстве - если на маке с трэкпадом все будет супер гладко, на ноуте с виндой и мышью анимация чаще будет несмотрибельна. Или наоборот. В зависимости от любимой платформы разработчиков
мобильное юзабилити с такими анимациями - отдельная форма издевательства. Ок, когда смотришь через сотовый сидя дома через домашний же вайфай в удобном кресле
Но когда на бегу ищешь нужную инфу на улице в зоне плохого приема, это ну явно не лучший вариант (добавить проверку ширины канала пользователя или предложить выбрать лайт версию - не рокет сайенс)
Когда нужно показать несколько фото, вертикальный скролл меняется на горизонтальный — пользователь может посмотреть всю галереюзачем менять направление скролла?
может я хочу пропустить именно эту секцию с картинками? зачем заставлять меня смотреть ее еще раз, если я забыл что-то вверху и хочу вернуться?
Если правильно выстроить лендинг и использовать несколько техник управления вниманием, информация на нем будет для мозга как легкий наркотик — читатель доскроллит страницу до концаа вы смотрели статистику прочтений конкретно у этой страницы?
можно как-то получить айпи адреса этих наркоманов, прокрутивших до конца? хочу пригласить их на просмотр пары других метровых лендосов с адсенсом, думаю, им такое зайдет
Если правильно выстроить лендингваши разработчики настолько не любят людей, что отдают все картинки как png?
23 мб вес страницы для мобильного устройства и 56 мб для десктопа (и это при отсутствии поддержки ретины у картинок) - вы уверены, что все сделали правильно?
Дмитрий, очень конкретные комменты. Спасибо за внимательное изучение проекта. Сегодня не успею подробно ответить, но завтра обязательно.
P.S. Подскажите, пожалуйста, вы по своей специальности программист?
возвращаюсь с ответами на комменты
....«в 99% разработчики фокусируются только на одном устройстве — если на маке с трэкпадом все будет супер гладко, на ноуте с виндой и мышью анимация чаще будет несмотрибельна. Или наоборот».
→ Проверяли и тогда и сейчас. Ещё раз посмотрел на винде, с анимацией всё окей.
....«мобильное юзабилити с такими анимациями — отдельная форма издевательства. Ок, когда смотришь через сотовый сидя дома через домашний же вайфай в удобном кресле. Но когда на бегу ищешь нужную инфу на улице в зоне плохого приема, это ну явно не лучший вариант».
→ Иногда анимация в проектах реально мешает. Но я не могу соотнести это с Куйбышевым и представить что кто-то будет искать на Куйбышеве информацию с плохим интернетом на бегу. У проекта другая задача.
....«добавить проверку ширины канала пользователя или предложить выбрать лайт версию — не рокет сайенс».
→ Согласен, стоит учесть и подумать, какая могла бы быть лайт-версия у проекта.
....«зачем менять направление скролла? может я хочу пропустить именно эту секцию с картинками? зачем заставлять меня смотреть ее еще раз, если я забыл что-то вверху и хочу вернуться?»
→ Для визуального разнообразия взаимодействия с проектом кроме одного скролла. Понятно, что не всем понравится, но и цели такой не было. В нашем случае ориентиром был клиент, ему понравилось и он захотел это в проекте. В качестве альтернативы можно было сделать галерею, как в мобильной версии, когда пользователю самому нужно протянуть галерею мышкой. На мой взгляд это дело вкуса. Одним понравился, другим нет.
....«а вы смотрели статистику прочтений конкретно у этой страницы?можно как-то получить айпи адреса этих наркоманов, прокрутивших до конца? хочу пригласить их на просмотр пары других метровых лендосов с адсенсом, думаю, им такое за»
→ Метрика есть, но доступа к ней у нас нет, так как настраивал клиент самостоятельно.
...«ваши разработчики настолько не любят людей, что отдают все картинки как png? 23 мб вес страницы для мобильного устройства и 56 мб для десктопа (и это при отсутствии поддержки ретины у картинок) - вы уверены, что все сделали правильно?»
→ Согласен, упустили этот момент. Я считал что разрабы и дизайнеры по умолчанию делают уже это. Но ошибся, исправимся ✊🏻
Главное, чтобы эта хрень не грузилась полторы минуты.