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

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

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

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

Однако, с ростом популярности смартфонов, где активно используется смахивание в сторону (свайп), многие дизайнеры снова задумываются о том, в каких случаях можно использовать горизонтальную прокрутку.

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

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

1. Дополнительные усилия со стороны пользователя

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

Это обосновано тем, что чаще всего пользователь вынужден обдумать и выполнить менее удобное действие: перетащить ползунок на узкой полоске горизонтального скроллбара, найти и кликнуть по маленьким кнопкам «Влево/Вправо» или перейти к клавишам со стрелками. Вариант, где пользователь может воспользоваться колесиком мыши, встречается, но довольно редко.

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

2. Пользователю приходится обрабатывать информацию в двух «измерениях»

Это затрудняет понимание и негативно сказывается на концентрации внимания.

3. Поддерживать комфортную скорость горизонтального скролла сложнее

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

4. Уменьшение доступности

Дополнительные действия, которые нужно осуществить для прокрутки контента в сторону, могут ограничивать доступность контента, поскольку не подходят некоторым категориям пользователей.

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

5. Более низкие показатели оптимизации

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

Несмотря на все ограничения горизонтального скролла, у него есть свои преимущества и случаи, в которых он может принести пользу вашему дизайну:

1. Блоки с горизонтальным скроллом легко адаптировать под экраны планшетов и смартфонов

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

2. Горизонтальный скролл позволяет размещать больше контента

А также предоставлять даже второстепенную по значимости или дополнительную информацию, при этом не перегружая страницу. Пользователь может прокрутить контент, если его что-то заинтересовало. Главное — оставлять важные детали на видном месте.

3. Позволяет расходовать вертикальное пространство страницы более эффективно

Благодаря этому, сокращается длина страницы. В итоге: полезная информация находится на видном месте, а пользователь может быстрее долистать до нее.

4. Больше всего подходит для демонстрации визуального контента

Его можно смело использовать там, где изображений больше, чем текста.

5. Горизонтальный скролл всей страницы сделает ваш сайт запоминающимся и вызовет больший эмоциональный отклик у пользователей

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

Для большей ясности разберем примеры, где использование горизонтального скролла действительно оправдано и полезно для проекта.

Отображение множества изображений

Часто горизонтальный скролл используется в слайдерах, где представлены изображения. Это могут быть фотографии товаров в интернет-магазине, готовые проекты на сайте компании, работы в портфолио фотографа или дизайнера и т. д.

Отображение слишком больших изображений

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

Отображение отдельных разделов с информацией

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

Отображение большого каталога товаров

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

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

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

Рекомендации:

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

• Стрелки и кнопки («Вперед/Назад», «Влево/Вправо»). Они должны быть заметными и достаточно крупными, чтобы по ним было легко попасть. При этом в мобильных версиях стрелки обычно убираются.
• Полоса прокрутки (скроллбар) поможет не только пролистать контент, но и понять, сколько его еще осталось.

2. Горизонтальный скроллбар должен быть внешне похож на вертикальный, так пользователь быстрее определит, зачем он нужен. Кроме того:

• Цвета ползунка и самой линии должны быть контрастными.
• Добавьте стрелки «вперед-назад», чтобы пользователь мог нажать их.
• Предусмотрите различные способы взаимодействия со скроллбаром: с помощью колесика мыши, перетаскивание ползунка, нажатие на стрелки, клик мышью по желобу скроллбара.

3. Пользователь должен понимать, сколько контента осталось и где он заканчивается

Для этого можно снова использовать скроллбар или пагинацию (цифры или точки под изображениями).

Чтобы пользователь понял, что долистал до конца, можно также использовать анимацию или дополнительный пробел в конце.

4. Продумайте, какое количество контента будет пролистываться с помощью одного клика:

• Один клик — один новый элемент (если пользователю нужно сравнить варианты).
• Один клик — полностью новая подборка (если пользователю не нужно сравнивать карточки).
• Всегда видно часть следующей карточки или блока (обязательно для мобильных версий).

Еще один вариант сделать просмотр списка с карточками более удобным — совсем убрать горизонтальный скролл. Для этого в конце списка нужно добавить кнопку или ссылку «Показать еще». Таким образом, важный контент будет видно сразу, а если пользователю будет действительно интересно — он перейдет по ссылке.

Если вы регулярно ищите вдохновение на сайте Awwwards, вы наверняка встречали сайты, где вертикальная прокрутка страницы полностью заменена горизонтальной, как в примере ниже:

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

Однако в повседневной жизни такие сайты практически не встречаются. Ведь мы уже выяснили, что поисковые системы не размещают сайты с горизонтальной прокруткой среди первых результатов поисковой выдачи. А пользователи, в свою очередь, негативно отзываются о непривычных паттернах взаимодействия с интерфейсом.

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

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

3. Еще один вариант для продвинутых пользователей (например, UX/UI-дизайнеров) — совмещать горизонтальный и вертикальный скролл на одной странице.

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

4. Позаботьтесь об удобной и очевидной навигации на сайте.

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

5. Добавляйте подписи и инструкции, чтобы пользователь точно знал, что от него требуется.
6. Содержание сайта все еще должно быть информативным.

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

У горизонтального скролла есть ряд недостатков, поэтому он является не самой простой механикой для использования на сайтах, особенно для новичков в дизайне.

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

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

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