Краткое изложение: 9 UX рекомендаций для ссылок «Наверх», которые помогают пользователям перейти к началу длинной страницы. В зависимости от потребностей пользователей другие методы могут быть более подходящими на некоторых сайтах.

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

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

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

Операционные системы и браузеры уже предлагают множество способов сделать это: нажатие клавиши «Домой» на клавиатуре, нажатие строки состояния в Safari на iOS, использование команд быстрого доступа и т. д.

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

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

9 рекомендаций для кнопок «Наверх»

Вот основные рекомендации, которые помогут вам решить, когда использовать кнопку «Наверх» и как ее эффективно создавать.

  1. Используйте кнопки «Наверх» для страниц, длина которых превышает 4 экрана. Для относительно коротких страниц ссылки «Наверх» не нужны — люди могут просто прокручивать страницу назад без особых усилий. Не нужно загромождать интерфейс, если вы можете просто использовать полосу прокрутки или свой палец, чтобы быстро перейти к началу страницы.
  2. Поместите постоянную кнопку «Наверх» в нижней правой части страницы. Именно здесь люди ожидают ее увидеть. Эта позиция в стороне, но заметна. Когда кнопка помещается в другое место на экране, ее часто не замечают.
  3. Подпишите кнопку «Наверх». Эта фраза является наиболее описательной. Только значок (например, стрелка, направленная вверх) может быть неоднозначным и, в зависимости от графической реализации, может не передавать правильное значение.

MedlinePlus.gov
MedlinePlus.gov: Значение значка стрелки слишком непонятно. Текстовая подпись поможет преодолеть неясность в этом контексте.
Overstock.com
Overstock.com: Текстовая надпись Back to Top (Наверх) находящаяся рядом со значком стрелки, помогает объяснить функцию кнопки.
4. Имейте одну фиксированную ссылку Наверх на странице вместо того, чтобы добавлять несколько ссылок в каждом разделе страницы. (Этот последний шаблон пользовался популярностью на страницах с якорями.) В исследованиях юзабилити мы наблюдаем, как люди игнорируют эти повторяющиеся ссылки, потому что они настолько предсказуемы.
USA.gov
USA.gov: Повторяющиеся ссылки Наверх увеличивают визуальный беспорядок, заставляя их игнорировать.
5. Оставляйте кнопку маленькой, чтобы она не закрывала важные элементы страницы. Но, если вы находитесь на сенсорном экране, сделайте ее достаточно большой, чтобы люди могли нажать на нее.

6. Сделайте кнопку визуально выделяющейся на странице. Когда кнопка «Наверх» слишком сильно сливается с фоновым контентом, пользователи с меньшей вероятностью заметят и используют ее.

7. Рассмотрите возможность задержки появления параметра «Наверх» до тех пор, пока пользователи не прокрутят несколько страниц и не покажут, что они хотят прокручивать вверх (например, движение полосы прокрутки вверх, жест пролистывания вверх). Таким образом, кнопка появляется только тогда, когда она, скорее всего, необходима, не закрывая важные части экрана остальное время.

Overstock.com: Ссылка «Наверх»
Overstock.com: Ссылка «Наверх» появляется только при прокрутке страницы. (И она в нижнем правом углу, что мы также рекомендуем.)
8. Сделайте кнопку неподвижной. Как только она появится, не позволяйте ей двигаться. Движущиеся элементы сильно отвлекают, так как любое движение на экране автоматически привлекает глаз.

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

Альтернативы кнопке «Наверх»

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

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

Etsy.com
Etsy.com: Вместо того, чтобы использовать кнопку «Наверх», этот сайт предлагает ссылки в нижнем колонтитуле и рядом с ним для поддержки путешествия пользователя.
Иногда фиксированные меню — более элегантное решение, чем кнопка «Наверх». Если основной целью прокрутки является переход к различным темам или разделам веб-сайта, наличие правильных параметров меню, доступных, когда люди в них нуждаются, устраняет необходимость возврата.

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

Nordstrom.com
Nordstrom.com: Этот веб-сайт фиксирует на странице функции сортировки товаров, предотвращая необходимость возврата к началу страницы для большинства торговых задач
Кнопка «Главная» на социальных сайтах часто приводит людей к началу их домашней страницы, которая, оказывается, является страницей с длинной лентой новостей и ей больше всего требуется быстрый способ вернуться к началу. Большинство людей на социальных сайтах привыкли нажимать кнопку «Главная» («Домой»), чтобы прокручивать к началу новостной ленты.

Хотя кнопка «Главная» может работать на социальных сайтах, не рассчитывайте на нее для других типов веб-сайтов. На обычных веб-сайтах люди ожидают, что ссылка Главная приведет их на главную страницу, а не в верхнюю часть той же веб-страницы.

Twitter.com
Twitter.com: Кнопка «Главная» одновременно выполняет функцию кнопки Наверх.

Вывод

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