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

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

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

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

Но как все-таки правильно реализовать эту функцию и сделать ее наиболее удобной?

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

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

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

Примеры сайтов, на которых различным способом реализована функция «Наверх»:

• protraffik.ru – кнопка в правом нижнем экрана, действие – прокрутка;
• wp-kama.ru – кнопка внизу посредине, прокрутка;
• livestreet.ru – несколько кнопок, прокрутка;
• habrahabr.ru – полоса на левом краю экрана, выделяющаяся только при наведении, прокрутка;
• kinopoisk.ru – полоса на левом краю экрана, выделяющаяся только при наведении, мгновенное действие;
• sovet.kidstaff.com.ua – левая часть экрана, выделяющаяся, когда активна и при наведении, прокрутка;
• vk.com – левая часть экрана, выделяющаяся только при наведении, мгновенное действие, также реализована возможность вернуться назад.

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

1. Постоянный поиск элемента и наведение на него курсора – выполнение дополнительных и лишних действий, которые требуют отвлечения от текущей задачи.
2. Затраты времени на поиск и наведение курсора.
3. Отвлечение от основной задачи и основного содержания страницы из-за выделяющегося оформления и резкого появления элемента.
4. Наглядность активной области элемента.
5. Раздражение как зрительное, так и психологическое.
6. Непонимание происходящего.
7. Непонимание своего положения на сайте.
8. Отсутствие возможности вернуться назад при ошибочном нажатии.

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

Большая активная область кнопки от границы содержания страницы до края браузера не допускает проблем с поиском и наведением курсора (vk.com, sovet.kidstaff.com.ua).

Ненавязчивое оформление кнопки и постепенное ее появление решает проблему с отвлечением (vk.com, habrahabr.ru, livestreet.ru).

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

Ненавязчивое выделение всей активной области и чуть более яркое выделение при наведении решают проблему наглядности, не создавая проблемы отвлечения (sovet.kidstaff.com.ua).

Куда лучше поместить кнопку и ее название?

Заглянем немного в психологию, затронем ассоциации. Человек читает слева направо сверху вниз, ищет информацию в этом же порядке. Начало в сознании человека находится в верхнем левом углу (если не говорить о людях, читающих справа налево). Поэтому размещение элемента, позволяющего вернуться в начало, лучше всего поместить слева, а его подпись для обеспечения быстрого поиска – в верхнем левом углу.

Конечно, все зависит от сайта, его структуры, но все же, этот вывод для большинства.

Как лучше реализовать сам переход на начало страницы: мгновенно или быстрой прокруткой?

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

Мгновенный прыжок на начало страницы

Незнающим пока об этой кнопке пользователям при случайном нажатии на нее будет непонятно, что произошло. Первой фразой скорее будет: «Что за?!» Второй их фразой будет: «Где я?» Так как он не знает, что сделал, то может предположить, что нажал на какую-то ссылку и вряд ли просто обновил страницу.

Когда пользователь уже опытен и привык к такой кнопке, он не будет испытывать проблем при взаимодействии с этим элементом.

Автоматическая быстрая прокрутка к началу страницы

У незнающих пользователей остается фраза «Что за?!!!», только с более сильной интонацией, но им все же будет понятно, куда их переместило, хотя также непонятно, почему это произошло.

Опытных пользователей эта прокрутка будет раздражать. Это быстрое мелькание элементов сайта перед глазами не только становится бесполезным, но и может причинить вред, не говоря уже об эпилептиках. Кроме этого, оно занимает время, пусть и немного. Сравните kinopoisk.ru и habrahabr.ru.

Резюме

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

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

Автор поста – Андрей Журавель, специалист по юзабилити ARTOX media.

Посты в тему:

• Тезисы с конференции Digital Branding 2011 (1)
• Как узнать количество лайков в социальных сетях? (6)
• Все что вы хотели знать о таргетированной рекламе Вконтакте (5)