Ритм вашего экрана

Длина страницы — это не проблема, проблема в отсутствии ритма.

Это перевод статьи Кристоффера Батлера The Rhythm of Your Screen.

Сейчас 2023 год, а клиенты по-прежнему часто спрашивают меня о скроллинге. Я понимаю, почему.

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

Однако мы знаем, что люди будут скроллить страницу.

Более 25 лет назад Якоб Нильсен отметил, что пользователи уже привыкли к скроллу, и его исследования должны были успокоить тех, кто считал, что информация ниже первого экрана не будет просмотрена.

Однако обратите внимание, что в обновленной версии этой статьи, опубликованной в 2010 году, а затем в 2018 году, его исследования о движения глаз показали, что контент ниже первого экрана изучали менее пристально. В частности, время просмотра информации в первом экране составляет 57%, а все остальные экраны ниже получают 17% или того меньше. Это значительное снижение. В исследовании учитывалось, что вертикальный размер веб-страницы по-разному отображается на разных устройствах, поэтому они также провели измерения с таким условием, что за «первый экран» взяли 20% контента от общей длины страницы. И снова большая часть времени просмотра тратилась в верхних 20% страницы.

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

Между тем, в статье для TIME, Тони Хейл из Chartbeat написал, что 66% внимания уделяется контенту ниже первого экрана. Вот это уже интересно. Что же здесь происходит?

Происходящее здесь имеет мало отношения к скроллингу, а связано с вниманием.

То, что люди делают своими руками не так важно важно, как то, что они делают своим умом.

Когда надо понять, как люди взаимодействуют с вашим дизайном, вы должны задавать вопросы про внимании, а не про скроллинг. (Клики — это другой вопрос — и не о том, о чём эта статья, — но вот что я вам скажу: наберите в Google «тепловая карта» и «карта кликов» и скажите мне, помогает ли вам эта информация лучше понять людей или разработать более удобные интерфейсы? Нет)

Скроллинг — это невнимательное действие. Сканирование информации — это частичное внимание. Чтение — это углублённое внимание.

Вопрос не в том, «будут ли они скроллить?». А в том, будут ли они скроллить так медленно, чтобы обработать всю информацию, которую видят. Люди будут это делать, если ваш дизайн использует информационную архитектуру и визуальный язык таким образом, чтобы на подсознательном уровне убедить пользователя, что контент полезен и ему стоит уделить внимание.

Помните, что уже в первую секунду или две просмотра вашей страницы люди задают и отвечают на три ключевых вопроса:

1. Что это за информация?

2. Она относится ко мне?

3. Что мне делать дальше?

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

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

Расположение информации на экране — это, пожалуй, самое важное дизайнерское решение, которое вы можете принять. На втором месте идёт размер.

Давайте вернемся к исследованию Chartbeat, которое показало, что 66% внимания приходится на область ниже первого экрана. Звучит противоречиво, учитывая исследование Нильсена, которое говорит об обратном. Но помните, что исследование Нильсена говорит о снижении времени просмотра экранов, по мере скроллинга страницы. В нём не шла речь — и, вероятно, не измерялись — скорость прокрутки, наличие пауз и их продолжительность. Я готов поспорить, что большая часть первоначальной прокрутки страницы была в основном непрерывной. Опять же, это значит, что большая часть содержимого страницы находится в непрерывном движении.

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

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

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

Итак, несколько простых советов:

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

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

• Повторение — это информация. Повторение структуры элементов и их композиции помогает при сканировании понять общую структуру страницы. Например, способность визуально определить список в тексте помогает нашему внутреннему сканеру понять, к какому контенту он относится и выбрать следующие действия.

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

У каждого из этих советов есть две важные общие черты.

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

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

Экран без заданного ритма не привлечёт внимание при сканировании страницы. Экран с заданным ритмом не только удержит внимание, но и углубит его.

Больше полезного контента в уютном тг канале Дизайн Шар