Добавить в корзинуПозвонить
Найти в Дзене
UX Notes

Как добавить кнопку «Наверх» и не облажаться

Хоа Лорангер из Nielsen Norman Group написала о кнопке «Наверх». На длинных страницах пользователи возвращаются наверх, чтобы выбрать в меню новый пункт назначения; воспользоваться фильтрацией или сортировкой; изменить запрос в поле поиска. Операционные системы и браузеры предлагают способы сделать это: клавиша Home на клавиатуре; нажатие на строку состояния в iOS; полоса прокрутки и сочетания клавиш. Но большинство пользователей может не знать этих способов. Для них на сайты добавляют кнопку «Наверх». Рекомендации по добавлению кнопки «Наверх» 1. Добавляйте её на страницы, длина которых превышает 4 экрана. 2. Размещайте её в правой нижней части экрана. 3. Подписывайте её словом «Наверх». 4. Это должна быть одна кнопка с фиксированным положением. Не стоит размещать отдельные кнопки «Наверх» в конце каждого блока информации. 5. Кнопка должна быть небольшой, чтобы не закрывать полезный контент, но достаточно большой, чтобы удобно нажиматься на смартфонах и планшетах. 6. Она должна быть к
Оглавление

Хоа Лорангер из Nielsen Norman Group написала о кнопке «Наверх».

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

Операционные системы и браузеры предлагают способы сделать это: клавиша Home на клавиатуре; нажатие на строку состояния в iOS; полоса прокрутки и сочетания клавиш.

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

Рекомендации по добавлению кнопки «Наверх»

1. Добавляйте её на страницы, длина которых превышает 4 экрана.

2. Размещайте её в правой нижней части экрана.

3. Подписывайте её словом «Наверх».

MedlinePlus.gov
MedlinePlus.gov
Overstock.com
Overstock.com

4. Это должна быть одна кнопка с фиксированным положением. Не стоит размещать отдельные кнопки «Наверх» в конце каждого блока информации.

USA.gov
USA.gov

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

6. Она должна быть контрастировать с фоном, чтобы её заметили.

7. Попробуйте показывать её не сразу, а после прокрутки страницы на несколько экранов вниз или в ответ на попытку прокрутить страницу обратно наверх.

8. Кнопка не должна двигаться и таким образом отвлекать от изучения контента.

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

Альтернативы

1. Дублирование навигации в нижней части страницы.

Etsy.com
Etsy.com

2. Закреплённые меню.

Nordstrom.com
Nordstrom.com

3. Кнопка Home на социальных сайтах, например, в Твиттере.