Скроллинг — что это. Виды и способы прокрутки

Привычный свайп или эффект взгляда из поезда? Рассказываем про виды прокрутки, приводим примеры и делимся советами по её оптимальному использованию.

Скроллинг (от англ. scrolling — «прокрутка») — это действие, которым пользователь перемещает содержимое на экране своего гаджета, чтобы увидеть скрытую за границами дисплея часть. Скроллинг позволяет просматривать лендинги, веб-страницы и новостные ленты в соцсетях без открытия новых вкладок или уменьшения масштаба страницы.
Скроллинг — базовый способ навигации в современном цифровом интерфейсе, который значительно упрощает взаимодействие пользователя с продуктом и улучшает пользовательский опыт.

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

Интуитивно понятный скроллинг имеет решающее значение для UX/UI. Это инструмент, который позволяет пользователю быстро ориентироваться и перемещаться между наполнением любого проекта, будь то лендинг, онлайн-магазин или соцсеть. Если пользователь не понимает, как листать содержимое, или ему неудобно это делать, скорее всего, он не задержится надолго на таком сайте или в приложении.

Основные преимущества скроллинга для пользовательского опыта:

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

● Вертикальный скроллинг

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

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

● Горизонтальный скроллинг

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

● Длинный скроллинг

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

● Параллакс-скроллинг

Вариант прокрутки, при котором фоновые изображения или слои движутся медленнее элементов на переднем плане. Это создаёт эффект глубины и трёхмерного пространства и позволяет пользователю получить необычный опыт. Параллакс-скроллинг можно сравнить со взглядом из окна движущегося поезда: полустанки и деревеньки мелькают перед глазами, а горы на горизонте движутся медленно.

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

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

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

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

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

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