Сайты с долгой прокруткой – не единичный тренд и не исключение. Это новые возможности для веб-дизайнеров. Однако есть и подводные камни.
В этой статье вы узнаете, что дает длинный скроллинг, когда его лучше применять и что учитывать.
Выгоды длинного скроллинга
Такая техника позволяет просматривать сайт без лишних усилий – пользователь получает информацию по мере того, как листает страницу.
Во-первых, скроллинг не требует дополнительных действий для вовлечения. Все внимание – на контент, а не на механизмы навигации.
Это идеальный вариант для мобайла. Чем меньше экран, тем дольше прокрутка, но сенсорный характер девайсов делает изучение материала интуитивным.
Когда длинный скроллинг – лучшее решение
- Для сторителлинга: линеарная структура подходит для историй.
- Для объемных статей и многошаговых обучающих гайдов.
Пример – руководство для пользователей облачного сервиса Dropbox:
- Когда контент – единое целое, и его нельзя делить на части – например, инфографика.
- Для выделения характеристик и выгод продукта, как на сайте хостела Hans Brinker:
Далее – 11 советов, как улучшить пользовательский опыт на ресурсах с длинным скроллингом.
Мотивируйте посетителей прокручивать
Контент над сгибом создает первое впечатление. От него зависит, захотят ли люди листать дальше. Поэтому поместите туда:
Как реально избавиться от БЕСКОНЕЧНОГО СКРОЛЛИНГА, не удаляя YouTube и Instagram
- Вступление с ответом на вопрос, о чем эта страница.
- Вовлекающая галерея изображений – картинка привлекает внимание, если содержит релевантную информацию.
Сделайте «липкую» навигацию
Помните, что пользователи хотят знать, где находятся, и видеть доступные пути к другим разделам сайта. Если меню пропадает из виду во время прокрутки, посетитель вынужден постоянно возвращаться назад.
Решение этой проблемы – «липкая» навигация:
Для мобайла
На маленьком экране панель занимает внушительную часть. Пока пользователь листает новости, можно спрятать навигацию, и вернуть, когда он прокручивает в обратном направлении.
Это эффективно для бесконечного скроллинга, который ведет сквозь большой объем контента без видимого финиша, как в лентах соцсетей.
Совет: разработайте дополнительную навигацию. Она создает ярлыки просмотренных блоков и помогает отслеживать прогресс.
Убедитесь, что кнопка «Назад» работает правильно
Легко потеряться на странице, когда кнопка «Назад» возвращает на начало вместо положения, с которого переходите по ссылке при скроллинге. Ожидаете, что вернетесь к тому же фрагменту, а тут – нужно заново прокручивать материал. Такое никому не понравится.
Фотохостинг Flickr – пример, как соответствовать ожиданиям пользователей. Сайт «запоминает», где они были и возвращает туда же.
Учитывайте позицию в скроллинге в URL
Если URL-адрес не отражает позицию и ведет на начало, невозможно поделиться фрагментом страницы. Это вызывает неудобства при переключении между девайсами, если пользователь хочет продолжить с конкретного места.
Сломай свою зависимость от телефона
В HTML5 это возможно без перезагрузки страницы.
Создайте опции переходов (jump-to)
Другая проблема – дезориентация: трудно найти что-либо, что пользователь уже видел на сайте.
Опция jump-to поможет это решить, если контент состоит из примерно равных блоков. В соцсети Tumblr вы можете перейти вниз или обратно к старту, если потеряетесь. В помощь – индикаторы в виде точек в левой части экрана.
Можно достичь желаемого фрагмента главной страницы всего в один клик!
Если точки маленькие или незаметные, и при нажатии легко промахнуться, откажитесь от этой идеи.
Настройте визуальный фидбэк при загрузке контента
Пользователь не любит сюрпризов и хочет знать, что происходит на странице в любое время. Визуализация статуса системы – важный принцип интерфейса.
Визуальный фидбек делает дизайн интуитивно понятным. Если сайт загружает материалы, нужен четкий знак, что это действительно происходит. Разместите индикатор прогресса, чтобы показать, что новый контент скоро появится.
Демонстрировать работу систему можно с помощью loop-анимации.
Не ограничивайте скорость скроллинга
На странице Mac Pro показ происходит при установленной скорости. Неважно, как быстро человек управляет курсором, он не может выбрать удобный темп прокрутки.
Дайте пользователю контроль над просмотром. Иначе он может покинуть сайт.
Оптимизируйте время загрузки
47% посетителей ожидают открытия в 2-3 секунды. Если дольше, 57% покидают страницу.
Пригодятся сервисы анализа и советы по оптимизации:
Увеличиваем конверсию, ускоряя загрузку страниц
Определите, сколько ресурсов потребляет страница
Прокрутка фото- и видеоматериалов, гифок использует слишком много CPU-памяти. Особенно на девайсах с ограниченными ресурсами типа айфонов, так как много мультимедийных объектов замедляют работу сайта.
Тестируйте на разных устройствах и настраивайте замедляющуюся анимацию для элементов, которые посетитель уже просмотрел.
Изучайте поведение пользователя
Нужен ли длинный скроллинг на странице? Аналитические данные помогут ответить на этот вопрос.
Откройте в Google Analytics таблицу аналитики и посмотрите количество кликов под линией сгиба.
В e-commerce его используют часто. Листать список товаров или результаты выдачи без остановки просто – ничто не отвлекает от выбора.
Вот рекомендации, как создать положительный пользовательский опыт для посетителя интернет-магазина.
«Липкие» фильтры
Они сужают список из тысяч продуктов до того, что соответствует интересам. Если фильтры постоянно видимые, пользователь чувствует, что все под контролем, и не боится упустить важное.
Закладки
Обеспечьте возможность сохранять в закладки отдельные элементы, чтобы посмотреть позже.
Это помогает вернуться к определенным товарам до решения о заказе.
Количество результатов поиска
Так пользователям легче решить, сколько времени займет просмотр.
В примере общий объем поисковой выдачи – под названием каждой категории.
Доступный подвал сайта
Обычно там ищут нужные ссылки и контактную информацию. Долгий скроллинг часто затрудняет доступ: новые результаты постоянно выходят по мере того, как посетитель приближается к концу списка.
Это поможет решить кнопка «Загрузить / показать еще», «Далее» и подобное. Так контент появляется по запросу, не автоматически. Пользователь легко достигает подвала и не теряет его из виду.
Параллакс эффект
Внимание пользователя онлайн – 8 секунд, но удобный скроллинг продлевает интерес. Тем более если анимация радует глаз.
Фон движется медленнее, чем объекты на странице. Это создает иллюзию 3D, мотивирует листать дальше и вызывает wow-эффект у аудитории.
Увлекает не только «пункт назначения», но и само «путешествие» по сайту.
Потрясающий пример для сторителлинга – интерактивный графический сюжет The Boat. По мере того, как пользователи скроллят, анимации перемещают их на следующий экран с новым контентом, за ним следует еще. Любопытно, что произойдет дальше.
Если задача пользователя – совершить покупку, параллакс при скроллинге – плохая идея. Представьте, как это настораживало бы посетителей Amazon каждый раз, когда они хотят купить что-то. Оставьте эту фишку для развлекательных и обучающих ресурсов.
Как не проколоться с параллакс эффектом
- Используйте для анимации простые возможности, которые дешево воплотить и которые не будут раздражать. Это translate3d (сдвиг элемента по осям X, Y, Z), изменение масштаба, вращение, затемнение.
- Не применяйте картинки с большим весом. Это может дорого обойтись.
- Не лепите слишком много анимаций на одну страницу. Не все осилят такой «визуальный беспорядок» на сайте.
Если движение перекрывает фон, добавьте альтернативный вариант просмотра – отключить его. Прикрутите специальную кнопку или переключатель для этого.
Фокусируйтесь на целях пользователей и создавайте для них положительный опыт. Если все интуитивно и удобно, не имеет значения объем контента.
Высоких вам конверсий!
Статья подготовлена по материалам blogs.adobe.com.
Похожие статьи
Хотите тоже написать статью для читателей Yagla? Если вам есть что рассказать про маркетинг, аналитику, бизнес, управление, карьеру для новичков, маркетологов и предпринимателей. Тогда заведите себе блог на Yagla прямо сейчас и пишите статьи. Это бесплатно и просто
Опубликовано редакцией Yagla
Читайте ещё статьи по этой теме
Скорая помощь при выгорании аудитории Статья
Замечали ли вы, что в определенный момент рекламная кампания перестает приносить желаемые результаты? Хотя вы ничего не меняли, а раньше всё шло вполне успешно. Вероятная причина этому – выгорание аудитории.
3 лучших расширения Яндекс Wordstat Статья
Если собирать ключи из сервиса Яндекс Wordstat по старинке, то есть вручную, это займет много времени и сил. Есть альтернативный вариант – автоматизация с помощью специальных расширений (плагинов для браузера). 2
14 видов ретаргетинга Статья
Классический ретаргетинг работает по такой схеме: пользователь посетил ваш сайт, совершил на нем определенные действия (заполнял формы, открывал разделы, просматривал страницы, карточки товара и т. д.
Источник: yagla.ru
Скрипт для включения видео при прокрутке
Суть задачи, чтобы видео, которое находится где-то на странице, включалось только при прокрутке страницы, когда само видео появляется на экране. При этом видео становится на паузу, если хоть немного выходит за экраны, и пользователь не сможет насладиться полным отображением видеозаписи.
Реализовать можно разными методами и со сторонними библиотеками, но самый простой вариант рассмотрим в примере ниже:
Как вариант, можно использовать различные плагины для определения положения объектов на экране например, плагин isInViewport, только с использованием данного плагина видео будет включаться даже при появлении на экране небольшой части видео, а не при появлении всего видео целиком.
Такой получился скрипт:
$(function() < var $video = $(‘.video’); var $window = $(window); $window.scroll(function() < if ($video.is(«:in-viewport»)) < $video[0].play(); >else < $video[0].pause(); >>); >);
Вот рабочий пример, только в JS я подключил и сам скрипт isInViewport.min.js (потому что не получилось подключить его в CodePen по быстрому по другому), а скрипт, который описан выше добавлен под код скрипта isInViewport.min.js в строках [9-21], ну вы поняли, в общем.
Необходимое ПО В первую очередь надо установить клиент git: обязательно потребуется консольный клиент, доступный по…
CSS Grid — это технология совершенно новая и официально стала поддерживаться современными браузерами только…
18 января 2018 года вышла из беты долгожданная версия Bootstrap 4, основанная на использовании…
Добавляем кастомную иконку в googlemap на своем сайте. JS
Источник: denis-creative.com
Как создать сайт с плавной прокруткой (smooth scrolling)
Узнайте, как создать сайт с плавной прокруткой, используя HTML, CSS и JavaScript, для улучшения пользовательского опыта.
Алексей Кодов
Автор статьи
1 июня 2023 в 13:45
Плавная прокрутка или smooth scrolling — это техника, используемая в веб-разработке, которая позволяет пользователям плавно переходить к различным разделам страницы без резких переходов. Это может сильно улучшить пользовательский опыт на вашем сайте. В этой статье мы рассмотрим, как создать сайт с плавной прокруткой с использованием HTML, CSS и JavaScript.
HTML
Сначала создадим базовую структуру нашего сайта с использованием HTML. Добавим якорные ссылки, которые будут перенаправлять на определенные разделы страницы.
Сайт с плавной прокруткой Раздел 1 Раздел 2 Раздел 3
Раздел 1
Содержимое раздела 1
Раздел 2
Содержимое раздела 2
Раздел 3
Содержимое раздела 3
CSS
Теперь добавим немного стилей с помощью CSS, чтобы сделать наш сайт более привлекательным. Вы можете настроить стили согласно вашим предпочтениям.
body < font-family: Arial, sans-serif; line-height: 1.6; >nav < background-color: #333; padding: 1rem; >nav a < color: #fff; text-decoration: none; margin-right: 1rem; >nav a:hover < color: #ccc; >section < height: 100vh; padding: 1rem; >#section1 < background-color: #f4f4f4; >#section2 < background-color: #e8e8e8; >#section3
Веб-разработчик: новая работа через 9 месяцев
Получится, даже если у вас нет опыта в IT
JavaScript
Наконец, добавим функциональность плавной прокрутки с помощью JavaScript. Мы будем использовать метод scrollIntoView с опцией behavior: ‘smooth’ .
document.querySelectorAll(‘a[href^=»#»]’).forEach(anchor => < anchor.addEventListener(‘click’, function (e) < e.preventDefault(); document.querySelector(this.getAttribute(‘href’)).scrollIntoView(< behavior: ‘smooth’ >); >); >);
И вот ваш сайт с плавной прокруткой готов! Теперь пользователи смогут навигировать по разделам страницы с плавным и приятным эффектом прокрутки.
Если вы хотите углубиться в изучение веб-разработки и научиться создавать еще более продвинутые сайты, обратите внимание на школу
Источник: sky.pro