Как управлять вниманием читателя с помощью скролла

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

Мозг весит всего 2% от массы тела, при этом потребляет до 20% энергии. При любом удобном случае он пытается перейти в фоновый режим работы: не соображать, а работать на рефлексах. Из-за этого нам сложно долго концентрироваться на чем-то одном.

Исключение — когда информация привлекает внимание мозга. Есть два основных способа это сделать, согласно книге Дэвида Рока «Мозг. Инструкция по применению»:

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

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

Рассмотрим их на примерах.

Как сделать. Если мы привлекли внимание человека к проекту и он его открыл, то должен получить обещанное — без смены темы и воды. Иначе не сработают никакие механики работы с вниманием.

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

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

Пример. Мы делали проект к юбилею завода «КуйбышевАзот» в Тольятти. На странице юбилея завода по скроллу на картинках появляется текст, работает анимация, бегут цифры.

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

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

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

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

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

Пример. Такой прием использовали создатели страницы с биографией Музея Сахарова.

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

По нашему опыту, на один лендинг в 20-30 экранов достаточно 3-4 механик. Если объем меньше, хватит и 2-3. При этом использовать их стоит умеренно, иначе даже одна очень активная механика может загубить все повествование.

Пример. Квартальный дайджест «ВТБ Онлайн» должен рассказывать об обновлениях в приложении. Все управление лендингом происходит по скроллу: уменьшаются и увеличиваются картинки, вылетают карты, строятся графики и линии на карте. Кажется, что все это должно помочь мозгу сконцентрироваться, но на деле дает обратный эффект — мы видим только анимацию, но не можем прочитать текст. Механики победили полезный контент, и он за ними исчез.

1. Не обманывать ожиданий — дать читателю то, что объявили в заголовке.
2. Создать иллюзию управления процессом за счет изменений по скроллу.
3. Иногда нарушать ритмику повествования.
4. Ломать шаблон взаимодействия — давать новую информацию не только по скроллу, но и по клику или наведению курсора.
5. Завлечь микроанимацией, тогда с лендингом захочется взаимодействовать.
6. Не переборщить с механиками, 3-4 будет достаточно.

Читайте другие наши статьи о приемах работы с информационными продуктами

• Как сделать корпоративную презентацию информативнее
• Пять практических приёмов, как улучшить читаемость документов
• 4 принципа дизайна годовых отчетов

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