Не так давно публиковал статью про грехи в навигации сайтов и приложений. Самым спорным и обсуждаемым пунктом оказался про кнопку «наверх». Это та, что возвращает наверх страницы, ускоряя долгий скроллинг вверх после долгого скроллинга вниз. С этой кнопкой ситуация как со многими вещами в нашем любимом интернете: практически везде она сделана плохо, от этого пользователи ее недолюбливают. Проясним ситуацию.
Когда и как ее имеет смысл делать кнопу «наверх»:
1) Только на страницах с длинным контентом. То есть, когда пользователь делает прокрутку в несколько экранов. Для простоты будем считать так: более 5000 пикселов вниз.
2) Ее появление должно быть не раньше, чем эти самые экраны были прокручены. Иначе она не только мешает визуально, но и как бы намекает пользователю «А чего тебе крутить вниз, там ничего интересного, давай-ка вверх» (то есть назад).
3) Размер кнопки должен быть не больше того, что требуется для комфортного нажатия, иначе внимания она на себя заберет слишком много.
4) Хорошо, если кнопка не наезжает на контент, ее место в правом или левом поле от края до контента.
5) Правильный цвет серый, плюс при взаимодействии она не должна менять цвет, размер и прочее. То есть ее дело быть скромной и незаметной, это дополнительный элемент навигации, на нем не должно быть акцента.
6) Очень хорошо, если кнопка начинает показываться не во время прокрутки вниз, а при начале обратной прокрутки вверх.
На мобильном или десктопе?
Лучше и там и там, но только если контента хватает на длинную прокрутку. Например, на моем сайте кнопка только на мобильных, для десктопа как раз недостаточно длинный контент.
Плавающая или нет?
Да, плавающая. Вернуться назад пользователь захочет в любой момент и если мы ее разместим фиксом в конце страницы, то до нее может дело не дойти.
Примеры
Хорошо в конструкторе Wix.
Кнопка только на мобильном, появляется только при скроллинге вверх.
Плохо на сайте Авиасейлз.
Смотреть с десктопа. В мобильной версии (где она нужнее) вместо кнопки у них фильтр.
Вместо резюме или как еще можно вернуться наверх?
На компьютере это сочетание клавиш Ctrl-Home. В некоторых десктопных браузерах клик по активной вкладке. Да, такой навигационный элемент это в чистом виде функция браузера. Например, мобильный Дельфин кнопку формирует сам.
Но, на этот счет браузеры договориться не могут уже который год, вот и приходится владельцам сайтов делать все самим. Так давайте это делать хорошо!
UPD. Яндекс-почта обновилась и у нее появилась кнопка именно такой как не стоит делать — навязчивой, с самого начала скроллинга и далеко от края экрана.
Смотрите также: Как получить максимальный доход с рекламных систем на своем сайте
ссылка на оригинал статьи https://habrahabr.ru/post/327538/
Добавить комментарий