Страница на 49 мегабайт

Если бы активное отвлечение читателей веб-сайта было олимпийской дисциплиной, то первые места в ней всегда бы занимали новостные источники.

Я зашёл на сайт New York Times, чтобы просмотреть четыре заголовка, но меня встретили 422 сетевых запроса и 49 мегабайт данных. Для полной загрузки страницы понадобилось две минуты. И потом они удивляются, что все мало-мальски владеющие технологиями люди с головой на плечах ставят блокировщики рекламы на компьютеры своих знакомых и родственников.

Эта история повторяется у всех популярных новостных изданий.

Чтобы осознать феномен веб-страницы весом 49 мегабайт, давайте вернёмся в прошлое на несколько десятков лет. Объём этой страницы превышает размер Windows 95 (28 дискет). Операционная система, когда-то управлявшая всем миром, с запасом уместится в современной странице. В 2006 году на пике популярности были iPod и цифровая музыка. Стандартная композиция в MP3 с высоким качеством и битрейтом 192 кбит/с весила примерно 4-5 МБ. Одна страница сегодня эквивалентна 10-12 песням. По сути, чтобы прочитать несколько параграфов текста, я скачал целый альбом. Согласно сведениям International Telecommunication Union, среднемировая скорость Интернета в те времена была примерно равна 1,5 Мбит/с. Пока браузер загружал бы этого бегемота, пользователь вполне бы мог успеть заварить себе чашечку кофе.

За последние двадцать лет оборудование совершило большой шаг вперёд; неужели современный стек фреймворков/рекламных технологий полностью обнулил этот прогресс «благодаря» абстрагированию и плохой архитектуре?

Тротлинг CPU, слежка и дыры в конфиденциальности

Например, выше показана краткая сводка сетевой активности при загрузке одной страницы: она демонстрирует, что прямо в браузере клиента происходит разрастающийся неконтролируемый аукцион рекламы. Ещё до того, как пользователь закончит чтение заголовка, браузер будет вынужден обработать десятки параллельных запросов биддинга к таким рекламным биржам, как Rubicon Project (fastlane.json) и Amazon Ad Systems. Хоть эти запросы выполняются по сети асинхронно, они крайне нагружают основной поток браузера. Чтобы упростить этот процесс, браузер должен скачивать, парсить и компилировать мегабайты JS. Недопустимо, что издатели выполняют вычисления для расчёта рекламных прибылей ещё до того, как начать рендерить сами статьи.

1. Пользователь запрашивает текст.

2. Браузер скачивает 5 МБ JS-кода для слежки.

3. В фоновом режиме происходит молчаливый аукцион, сильно нагружающий мобильные CPU.

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

Наряду с весом этого программного аукциона удивляет и частота использования функций отслеживанию поведения. Мониторинг пользователя выполняется параллельно с непрекращающимся шквалом POST-запросов, обращающихся к конечным точкам слежения самого веб-сайта (a.et.nytimes.com/track). Невидимые фоновые пиксели и переадресации на doubleclick.net и casalemedia помогают выполнять межсайтовую идентификацию пользователя для различных рекламных сетей.

Открывая веб-сайт на телефоне, вы как будто начинаете участвовать в высокочастотных торгах на финансовом рынке. Чувствуете, как нагревается телефон? Как внезапно включатся кулеры ноутбука? На всё это, а также на разрядку аккумулятора влияет множество подобных мелких скриптов.

Забавно, что механизм слежки инициализируется параллельно с запросами к purr.nytimes.com/tcf, что, как я предполагаю, является европейским Transparency and Consent Framework IAB. Владельцы сайта назвали конечную точку этого фреймворка «purr» («мр-р-р»). Котик мурлычет, одновременно роясь у пользователей по карманам.

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

Экономика враждебной архитектуры

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

Сегодня очень важны метрики просматриваемости (viewability) и проведённого на странице времени (time-on-page). Все враждебные решения относительно UX исходят из одного простого факта: чем дольше пользователь находится на странице, тем больше CPM может взимать издатель. Раздражение пользователя — это продукт. Неудивительно, что разработчики и дизайнеры принимают решения по UX, оптимизируя этот параметр. И вы, читатель, вынуждены взаимодействовать, ждать, нажимать и скроллить много раз из-за этой оптимизации. Это не только шаг в неверном направлении, но и враждебное по природе своей поведение.

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

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

Нападение до прочтения

Когда пользователь нажимает на новостную ссылку, он хочет лишь прочитать заголовок и пробежать глазами по тексту. Проблема в том, что при загрузке страницы пользователей встречает то, что я называю войной Z-индексов. Баннеры GDPR/куки занимают нижние 30%. Пользователь скроллит один раз и видит модальное окно «Подпишитесь на нашу рассылку». Тем временем браузер начинает бить по нему диалоговыми окнами с запросом на отправку уведомлений.

Пользователь должен произвести визуальную оценку, найти значки закрытия окон (которые намеренно делаются малоконтрастными) и выполнить побочные квесты лишь для того, чтобы получить доступ к 5 КБ текста, за которыми он и пришёл. Давайте посмотрим, как эти антипаттерны образуют единый враждебный к пользователю UX. Ниже представлен анализ загрузки стандартной страницы Economic Times.

1. Критическая ошибка: двойная атака модальными окнами

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

2. Серьёзная проблема: забивание вьюпорта

Взгляните на пространство экрана. Мы видим верхний рекламный баннер, skyscraper (вертикальный рекламный блок) слева, skyscraper справа и встроенный в текст блок рекламы. Содержимое самой статьи занимает примерно 15% от пространства экрана. Издатель инвертировал соотношение рекламы и контента.

3. Утомительная бесполезная работа: неприемлемая цена взаимодействия

Прежде, чем прочитать хотя бы одно предложение, пользователь вынужден сначала найти и нажать на значок «X» центрального модального окна, сделать то же самое с правым верхним модальным окном, а затем проскроллить огромный верхний баннер. Вынуждая пользователя заниматься этой вознёй перед доступом к контенту, издатель создаёт перед ним необязательные преграды.

Нарушения эвристик UX и источники

• Эстетичный и минималистичный дизайн — интерфейсы не должны содержать нерелевантную или редко нужную информацию [NN/g Usability Heuristic #8].

• Затраты на взаимодействие — двойной удар модальными окнами требует высоких затрат на физическое взаимодействие ещё до того, как пользователь получит от сайта что-то полезное [NN/g Interaction Cost].

• Core Web Vitals (мешающие промежуточные окна) — собственные поисковые рекомендации Google штрафуют страницы, контент на которых труднодоступен из-за всплывающих окон, закрывающих основной контент сразу после перехода на страницу [Google Search Central].

Катастрофа с CLS

Пользователь находится на втором абзаце. Внезапно текст перескакивает вниз на 250 пикселей, и пользователь теряет читаемую им строку. Почему? Рекламная сеть наконец-то завершила процесс биддинга и инъецировала iframe над вьюпортом. В Core Web Vitals Google это расценивается, как Cumulative Layout Shift. Высокий CLS часто напрямую коррелирует с высокими показателями ухода пользователя со страницы.

Следует учесть, что катастрофа с CLS, атака модальными окнами и даже блокирующие рендеринг скрипты вроде бы должны снижать оценку страницы. И Google официально пессимизирует всё это в SEO (по крайней мере, теоретически). Странно то, что собственные рекламные продукты Google способствуют созданию такой системы.

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

Прилипчивый видеопроигрыватель

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

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

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

Примечание.

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

Инновационные помехи

На мобильных устройствах самым ценным ресурсом является вертикальное пространство. Среднестатистический мобильный вьюпорт имеет высоту 800 пикселей. Многие новостные сайты используют приклеенный заголовок (с логотипом и меню-гамбургером), отъедающий 80-100 пикселей. Из-за приклеенной панели с кнопками «Поделиться» и строки URL самого мобильного браузера пространство для контента уменьшается ещё сильнее.

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

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

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

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

Красными прямоугольниками выделено: препятствие в виде кнопки «Открыть в приложении», модальное окно с предложением подписки, реклама и раздел «Поделиться». Зелёным прямоугольником выделен: сам контент

Я рос на статьях из газеты Dainik Jagran, она была одним из самых популярных в Индии ежедневных печатных изданий на хинди. А вот, как выглядит его веб-сайт сегодня. Крошечная полоска контента скрыта даже не одним, а двумя модулями войны Z-индексов. Многие веб-сайты активно препятствуют доступу к ним читателей, предлагая посещать их при помощи «приложений». Не понимаю, откуда берётся это желание заставлять всех скачивать своё приложение.

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

Примечание.

Если пользователь не пользуется активно навигацией, то заголовок остаётся мёртвым грузом. Заголовок должен скрываться при scrollDown и отображаться при scrollUp. Дайте контенту дышать.

Ситуацию можно улучшить

Заставляя пользователя выполнять 3-4 действия для того, чтобы увидеть контент, издатель не может ожидать, что этот процесс будет приятным. Это эквивалентно сжиганию запаса когнитивных сил пользователя ещё до того, как он получит что-то ценное. Бизнес оправдывает это так: «Нам нужен комплаенс и генерация лидов», но от этого никак не выигрывает пользователь. Если он не прочитал ни строчки работы ваших журналистов, то зачем ему вообще на вас подписываться?

Это можно исправить, не показывая всплывающие окна в первые 60 секунд на странице или в первые 50% скроллинга. Вместо того, чтобы допускать инъецирование нескоординированных оверлеев сторонними скриптами, разработчики должны реализовать последовательную очередь онбординга по одному оверлею за раз, запускаемую поведением пользователя, а не загрузкой страницы. Создавайте модальные окна, не препятствующие чтению и обеспечивающие accessibility. При необходимости объедините запрос на разрешение куки и просьбу о подписке на рассылку в один раздел в нижней части экрана, не препятствующий чтению. Если пользователь закрывает его, сохраняйте состояние в localStorage и никогда больше не показывайте его в той же сессии.

Ещё лучше инъецировать предложение подписаться на рассылку в виде стилизованного div между четвёртым и пятым абзацами. Если пользователь проскроллил страницу настолько далеко, то он уже заинтересован контентом. Это не только снизит затраты на взаимодействие пользователя, но и может даже увеличить показатели конверсии, потому что намерение в этом случае согласуется с действием.

Примечание.

Если требуется обновление рекламы, используйте рекламу с ленивой загрузкой, привязанную к глубине скроллинга (например, слоты обновления, когда пользователь проскроллит ниже них на 50vh), а не препятствуйте процессу чтения.

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

Издателю следует резервировать пространство для асинхронного контента. Обёртывайте слоты для рекламы и изображения в контейнер с заданным соотношением сторон или фиксированной минимальной высотой. Если слоту назначен прямоугольник 300×250, то контейнеру можно жёстко прописать следующие параметры:

min-height: 250px; background: var(–skeleton-loader);

или что-то подобное. При загрузке DOM не двигается. Если рекламе не удаётся заполнить контейнер, можно свернуть его чем-нибудь наподобие ResizeObserver, если он находится вне текущего вьюпорта. Но стоит избегать смещения текста вниз, когда пользователь уже начал чтение.

Примечание.

У Google должен быть какой-нибудь механизм, отделяющий в результатах поиска новостные статьи, которые скрыты за paywall.

Не все сошли с ума

Всё ещё существуют упрощённые версии сайтов наподобие text.npr.org, lite.cnn.com и www.cbc.ca/lite. И RSS-фиды тоже есть. Активное сообщество разработчиков приложений для чтения фидов ежедневно помогает миллионам людей. Благодаря им можно подписываться на нужные новостные издания, не подвергая себя нападению модальных окон или постоянной слежке.

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

Подведём итог

Пользователи жаждут качественного UX, и если реализовать его правильно, он кажется почти естественным, интуитивно понятным. Судя по состоянию UI, для современных новостных изданий читатель — это враг, которого нужно захомутать и монетизировать. Прибыльность публикации и быстрый, удобный UX — это не взаимоисключающие понятия. Я уверен, что разработчикам веб-сайтов этих изданий тоже всё это не нравится, как и нам, но они попали в ловушку бизнес-моделей, отдающих приоритет кратковременным CPM в ущерб долговременному привлечению читателей. Нам просто нужно запретить сторонним маркетинговым скриптам диктовать архитектуру сайта.

Ни один отдельный разработчик сайта Times не решил специально ухудшить процесс чтения. Эта архитектура возникла из-за тысяч мелких решений, каждое из которых рационально в локальном масштабе, но суммарно они приводят к катастрофе.

Они построили систему, которая относится к вниманию пользователя, как к добываемому ресурсу. Самое радикальное, что можно сделать — отказаться быть ресурсом. Закройте вкладку. Пользуйтесь RSS. Пусть показатель отказов на сайте говорит сам за себя. Это метрики тщеславия, которые лишь приводят к кризису.

Они идеально подходят для тех, кто создал систему такой. Вопрос в том, подходят ли они вам.