Как создать удобную с точки зрения UX кнопку "Наверх" для сайта

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

Функции кнопки «Наверх»

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

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

• вернуться к пунктам навигации, перейти в другой подраздел;
• отфильтровать свой запрос по другим критериям — по цене, производителю, по тегам;
• задать запрос.

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

Лучшие идеи для кнопки «Наверх»

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

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

Порой возникает необходимость направлять пользователя не только к началу, но к определенным элементам на экране — например, к форме подписки либо к элементу Call to Action (купить, заказать, получить со скидкой). Такие элементы дизайна могут быть реализованы по-разному, но кнопка «Наверх» никогда не должна обманывать пользователя.

Как должна выглядеть кнопка «Наверх»

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

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

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

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

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

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