Нет быстрого возврата к началу страницы

Критичность проблемы: Средняя | Сложность внедрения: Низкая | Встречаемость: Средняя

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

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

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

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

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

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

Когда проблема критична, а когда нет

Критична:

• Длинные страницы: каталоги, лонгриды, отзывы, бесконечная лента.
• Ключевые элементы наверху: поиск, фильтры, меню, кнопка целевого действия.
• Мобильный трафик, одна рука, неудобные условия использования.
• Аудитория с моторными ограничениями или низкой цифровой грамотностью.
• Сценарии сравнения: нужно несколько раз возвращаться к началу.

Некритична:

• Короткие страницы до 1–2 экранов.
• Есть всегда видимый «липкий» верх с поиском и меню.
• Целевое действие находится внизу и не требует возврата.
• Внутренняя система, где пользователи обучены и используют горячие клавиши.

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

Бесполезные ответы

• Нормально всё, не задумываюсь.
• Я обычно как‑то пролистываю, не помню.
• Если надо — листаю, если нет — закрываю.
• У меня айфон, там своё.
• Я редко бываю внизу страницы.

Полезные ответы

• Смотрела отзывы в карточке товара на Android, чтобы вернуться к меню, свайпала секунд 10–15, устала и ушла на главную через вкладки браузера.
• Читал статью на ноутбуке, хотел перейти в поиск в шапке. Прокрутка заняла много времени из‑за врезок и баннеров, пару раз сбился и бросил.
• В каталоге листала 5–6 раз вниз, потом захотела поменять фильтр. Не нашла способ быстро наверх, листала долго и забыла, что хотела менять.
• На iPhone случайно тапнула по ссылке внизу, вернулась, прогрузились новые карточки, верх уехал дальше — не стала подниматься.
• В блоге дочитал лонгрид, хотел открыть раздел «Маркетинг» в меню наверху. Прокрутка утомила, открыл поиск в браузере и нашёл другой сайт.

Решение проблемы

• Покажите кнопку «Наверх» только когда пользователь прокрутил вниз хотя бы на один экран. До этого её не видно, чтобы не мешать.
• Разместите кнопку справа снизу, отступ 16–24 px от краёв. Не перекрывайте чат‑виджеты и плавающие CTA. На маленьких экранах поднимайте кнопку выше фиксированных элементов.
• Минимальный размер тач‑таргета — 44×44 px. Круглая форма, стрелка вверх, контраст не ниже 4.5:1. Состояния: обычное, наведение, нажатие, фокус.
• Поддержите доступность: role=button, aria-label="Наверх", фокус‑контур, активация клавишей Enter/Space. На prefers-reduced-motion отключайте анимацию.
• Прокрутка плавная, быстрая, без укачивания: 300–600 мс для 2–3 экранов, для очень длинных страниц — ускоряйте, либо делайте резкий переход при отключённой анимации.
• Не закрывайте контент: скрывайте кнопку, когда на экране виден футер, и показывайте снова, как только футер скрыт.
• Дублируйте возможность внизу: текстовая ссылка «К началу» в футере. Это помогает, если плавающие элементы заблокированы.
• Работайте на всех устройствах: мобильные, планшеты, десктопы. Не полагайтесь на жесты системы — многие о них не знают.
• Покройте аналитикой: события показа и клика, глубина скролла, время восстановления контекста навигации. Смотрите на отказ после глубокого скролла.
• Протестируйте: разные экраны, ландшафт/портрет, масштаб 200%, клавиатура, скринридер, RTL. Проверьте, что кнопка не конфликтует с корзиной, чатом и куки‑баннером.
• Сделайте код лёгким: иконка SVG, без тяжёлых библиотек, инициализация после интерактивности страницы.

Гипотезы для роста конверсии

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

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