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

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

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

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

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

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

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

9 рекомендаций по кнопкам «Вернуться наверх»

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

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

Альтернативные способы Вернуться наверх

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

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

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

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

Кнопка «Домой» в соц.сетях часто переносит людей наверх их домашней страницы, которая, как правило, является страницей с длинной лентой и в большинстве случаев нуждается в быстром способе вернуться наверх. Большинство людей на социальных сайтах привыкли нажимать кнопку «Домой», чтобы прокрутить свою ленту наверх.

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

Заключение

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