Как сохранить положение прокрутки при сравнении содержимого длинного списка — советы и решения

Один из самых быстрых способов разочаровать пользователя — лишить его возможности отслеживать свой прогресс. Представьте: вы долго прокручиваете список, находите нужный пункт, переходите по ссылке, читаете, а потом нажимаете кнопку Назад и оказываетесь не там, где остановились, а в самом начале списка. 

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

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

Понимание поведения Прокрутки

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

Во время недавнего UX-исследования один из участников просматривал выпуски подкастов в приложении Spotify. Он прокручивал список вниз, чтобы найти новый выпуск. После того как он его нашел, он вернулся, чтобы ознакомиться с подробностями, а затем решил вернуться и продолжить просмотр, однако он снова оказался вначале, и ему пришлось снова прокручивать список  вниз, чтобы найти нужное место. Такое поведение интерфейса необоснованно усложняет взаимодействие.

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

Сохраняйте Положение Прокрутки Почти Всегда

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

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

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

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

Когда сброс позиции прокрутки уместен

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

Сброс позиции прокрутки при частом обновлении контента

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

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

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

Сброс при длительном отсутствии

Сохранение позиции прокрутки лучше всего работает, пока пользователь помнит, где он был и зачем. Обычно это 30-60 минут с момента последнего взаимодействия. 

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

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

Выбирайте наименее навязчивый вариант

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

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

на практике лучше всего работает компромисс:  сохранение позиции + доступная кнопка «Перейти к последнему сообщению». К сожалению сейчас ChatGPT при возврате в чат сбрасывает прокрутку, даже если окно переписки остается открытым. Это неудобно. 


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