Readymag: как управлять вниманием читателя в вебе

Это гостевой пост . Выводы и кейсы в гостевых постах принадлежат авторам текстов и не проверялись ведущим. В текст были внесены незначительные изменения и ремарки.
Мы, команда Readymag, выпустили новый номер онлайн-журнала Enso об иконах индустриального дизайна XX века — Чарльзе и Рэй Имзах. И теперь хотим поделиться с «Мы и Жо» парочкой приемов, как удерживать внимание читателя даже на лонгридах объемом в несколько десятков экранов.

Пассивный vs Активный

В интернете столько говорят о вовлечении пользователя, но почему-то до сих пор это не имело отношения к текстам [прим. Амзина — конечно, это не вполне так. Вовлечению в тексты уделяют много внимания, например, авторы Я.Дзена, Медиатора, onthe.io и многие редакции; но, действительно, часто недостаточно]. Мы взяли за основу следующие утверждения:
— самое простое и очевидное действие для пользователя — скролл;
— скролл всегда ведет пользователя сверху-вниз, от начала к финалу.
Перемещаться по всему журналу можно, просто ведя пальцем по экрану или тачпаду. При этом мы сделали так, чтобы привычное движение приводило к непривычным событиям. Так, в некоторых местах текст на экране начинает двигаться не сверху-вниз, а справа-налево (при этом движение остается прежним, пользователю не нужно ничего перетягивать или менять направление скролла).
С одной стороны, читатель сразу понимает, что нужно делать, но в то же время он потребляет информацию не пассивно, а взаимодействует с контентом, управляет им. Для тех же, кто готов пойти дальше пролистывания экранов, в журнале запрятаны секреты. По ходу чтения можно найти  элементы, которые раскрывают дополнительные материалы там, где меньше всего того ожидаешь.

Режиссура текста

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

Акценты

Любой текст и без дополнительных средств имеет свои акценты: это заголовки и подзаголовки, выносы, цитаты. Мы попробовали использовать в вебе приёмы, традиционные для печати — плакатов, обложек, чтобы читатель уж точно не пропустил самое важное.  Тут стоит обратить внимание на выбор шрифта, размер выноса и на то, как он выделяется на фоне остального текста.
Изображение из Enso. Иллюстрация Readymag
Отметим, что в лонгриде почти не использован видеоформат. Это объясняется тем, что материал сам по себе напоминает фильм. При этом читатель может не только в любой момент нажать на паузу, но и выбрать ту смысловую часть, которая ему нужна. Для этого мы ввели боковое меню, где вместо привычных названий глав — иконки.
Наконец, чтобы не обязывать пользователя каждый раз возвращаться к меню или скроллить до нужного момента, на каждую главу был задан новый URL. Например, если ваш друг интересуется только стульями Имзов, можно скинуть ему вот такую ссылку:
http://enso.readymag.com/eames/plastic-chairs/
Посмотреть проект целиком можно здесь.