{"id":13466,"url":"\/distributions\/13466\/click?bit=1&hash=891d339b00b86120568ea8e4296ded112a42876a976e2fd335004400f35cbd30","title":"\u0427\u0442\u043e \u0441\u043c\u043e\u0442\u0440\u044f\u0442, \u0447\u0438\u0442\u0430\u044e\u0442 \u0438 \u043a\u0443\u0434\u0430 \u0445\u043e\u0434\u044f\u0442 \u0432\u0430\u0448\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u044b?","buttonText":"\u0423\u0437\u043d\u0430\u0442\u044c","imageUuid":"24bb823c-c595-5fc8-be0f-fba9e89237c2","isPaidAndBannersEnabled":false}
Дизайн
Николай Романов

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

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

Что надо знать о человеческом мозге

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

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

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

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

Техники работы со скроллом на странице помогают поддерживать внимание мозга на нужном уровне. Они вызывают ощущение новизны и приводят к выработке дофамина.

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

Не обмануть ожидания

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

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

Создать иллюзию, что пользователь управляет процессом

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

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

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

Менять ритмику повествования

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

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

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

Крупная типографика и разные иллюстрации не дают мозгу заскучать

Ломать шаблон взаимодействия

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

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

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

Завлечь микроанимацией

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

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

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

Не переборщить с механиками взаимодействия

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

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

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

Лендинг с дайджестом должен рассказывать о новостях, но вместо них видно только анимацию

Главное: как управлять вниманием на лендинге

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

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

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

0
24 комментария
Написать комментарий...
Театральный кубок
По скроллу карта превращается в инфографику
Ответить
Развернуть ветку
Светлана Завацкая

На это можно смотреть вечно. Но идея в статье крутая на самом-то деле!

Ответить
Развернуть ветку
Иван Сергеев

Все никак не покажет дворец в геленджике.

Ответить
Развернуть ветку
Дима Дьяконов
Вместо этого к скроллу можно привязать анимированную смену объектов

как же я ненавижу вот эту дизайнерскую хрень

если в анимации было что-то интересное/нужное, приходится елозить туда-сюда мышью, вылавливая нужный момент

в 99% разработчики фокусируются только на одном устройстве - если на маке с трэкпадом все будет супер гладко, на ноуте с виндой и мышью анимация чаще будет несмотрибельна. Или наоборот. В зависимости от любимой платформы разработчиков

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

Когда нужно показать несколько фото, вертикальный скролл меняется на горизонтальный — пользователь может посмотреть всю галерею

зачем менять направление скролла?
может я хочу пропустить именно эту секцию с картинками? зачем заставлять меня смотреть ее еще раз, если я забыл что-то вверху и хочу вернуться?

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

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

Если правильно выстроить лендинг

ваши разработчики настолько не любят людей, что отдают все картинки как png?
23 мб вес страницы для мобильного устройства и 56 мб для десктопа (и это при отсутствии поддержки ретины у картинок) - вы уверены, что все сделали правильно?

Ответить
Развернуть ветку
Николай Романов
Автор

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

P.S. Подскажите, пожалуйста, вы по своей специальности программист?

Ответить
Развернуть ветку
Дима Дьяконов

Да, программист.
Но часть проблем описал с точки зрения пользователя

Ответить
Развернуть ветку
Николай Романов
Автор

возвращаюсь с ответами на комменты

....«в 99% разработчики фокусируются только на одном устройстве — если на маке с трэкпадом все будет супер гладко, на ноуте с виндой и мышью анимация чаще будет несмотрибельна. Или наоборот».
→ Проверяли и тогда и сейчас. Ещё раз посмотрел на винде, с анимацией всё окей.

....«мобильное юзабилити с такими анимациями — отдельная форма издевательства. Ок, когда смотришь через сотовый сидя дома через домашний же вайфай в удобном кресле. Но когда на бегу ищешь нужную инфу на улице в зоне плохого приема, это ну явно не лучший вариант».
→ Иногда анимация в проектах реально мешает. Но я не могу соотнести это с Куйбышевым и представить что кто-то будет искать на Куйбышеве информацию с плохим интернетом на бегу. У проекта другая задача.

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

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

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

...«ваши разработчики настолько не любят людей, что отдают все картинки как png? 23 мб вес страницы для мобильного устройства и 56 мб для десктопа (и это при отсутствии поддержки ретины у картинок) - вы уверены, что все сделали правильно?»
→ Согласен, упустили этот момент. Я считал что разрабы и дизайнеры по умолчанию делают уже это. Но ошибся, исправимся ✊🏻

Ответить
Развернуть ветку
Хлоргексидин

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

Ответить
Развернуть ветку
Дима Дьяконов
Ещё раз посмотрел на винде, с анимацией всё окей.

на самом деле не совсем)
погуглите "touchpad mouse scroll speed"
даже если смотрится на тестовом устройстве в нужной ос корректно, у реальных пользователей бывает совершенно другая скорость скролла у мыши/тачпада. Некоторые врубают всякие штуки вроде ускорения и прочего такого. Это так же доставляет некоторые проблемы.

В целом оно может быть и ок, но прокручиваться может несколько по разному.

У проекта другая задача.

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

Согласен, стоит учесть и подумать, какая могла бы быть лайт-версия у проекта.

добавление лайт-версии удорожает проект и усложняет его поддержку

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

клиент чаще не разбирается. На мой взгляд, задача студии объяснить, почему именно так плохо.

На мой взгляд это дело вкуса

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

Согласен, упустили этот момент. Я считал что разрабы и дизайнеры по умолчанию делают уже это

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

Ответить
Развернуть ветку
DeadFine

Главное, чтобы эта хрень не грузилась полторы минуты.

Ответить
Развернуть ветку
Александр Бородавка

Это точно)

Ответить
Развернуть ветку
Александр Стексов

Круто! Спасибо за информацию. Очень важно не переборщить с анимацией. Этим грешат крупные компании. Видимо там сидят дизайнеры, которые не очень разбираются в контент маркетинге.

Ответить
Развернуть ветку
Vasek Romanov

Понравилась и статья и лендинг про Тольятти Азот (ввиду моего места проживания)

Ответить
Развернуть ветку
Georgy Uvarov

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

Предлагаю поэтому, перед показом сайта предлагать юзеру небольшую анкету на определение психотипа, вопросов 200 хватит

Ответить
Развернуть ветку
Ияза Гара

В 2022 году подобные летающие по скроллу анимации - пошлость. Они нужны только разработчикам и заказчику, но не пользователями.
Да, круто потратить кучу денег и времени на подобное, и разработчики молодцы. Но тем не менее, людей задолбала история вечного скролла. Особенно учитывая что на обычном слабом компе или ноуте у среднего юзера все это будет безбожно тормозить и двигаться рывками.
Актуально было лет 5-7 назад, когда только появилось. Сейчас подобные сайты вызывают тоску.

Ответить
Развернуть ветку
Раиль Шакуров

По-моему, столько механик-это лишнее, мне как пользователю вовсе не хочется кликать, наводить на разные элементы и постоянный горизонтальный скролл утомляет только меня? 🤔

Ответить
Развернуть ветку
Александр Бородавка

Спасибо вам за эти мысли с примерами в статье!

Ответить
Развернуть ветку
Vlad

Идаельный пример (не могу вспомнить ссылку) это статья про распространение Covid-19 - во время скролла происходит изменение контентной части + изменяется карта распространение вируса из Китая.
Вроде сайт англоязычный - China Today

Ответить
Развернуть ветку
Василий Великий

Что по ценам стоит такое сделать на сайте?

Ответить
Развернуть ветку
Ияза Гара

Долго и дорого. А главное - бессмысленно )

Ответить
Развернуть ветку
Евгений Кауффман
обманывает мозг: ему кажется, что он управляет процессом.

То есть, он не управляет процессом и скроллит кто-то другой в это время? Ну, ок.

Ответить
Развернуть ветку
Николай Романов
Автор

Имеется в виду, что двигаются картинки не по его сценарию, а по задуманному изначально. Но у мозга ощущение, что он управляет процессом.

Ответить
Развернуть ветку
Андрей Гусаров

или не вникают

Ответить
Развернуть ветку
Михаил Катовайс

Статистику бы по сайтам которые вы сделали по таким паттернам. А то выглядит как вредные советы.

Ответить
Развернуть ветку
Читать все 24 комментария
null