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

Горизонтальный скроллинг: дизайнерская «фишка» или важный элемент UX

Скроллинг — не только колёсико мыши. В более широком смысле это понятие обозначает, что содержимое информации находится в движении по вертикали или горизонтали.

Неважно, о какой форме информации идёт речь — тексте или изображении. На содержании информации скроллинг никоим образом не сказывается, но он является очень важным элементом UX. Эта аббревиатура с английских слов «User eXperience» может быть расшифрована как «Опыт взаимодействия». Речь идёт о том, что чувствует человек в том или ином случае, какой, например, у него UX, если он нечаянно наступил в лужу, какой UX , если он просматривает сайт с горизонтальным скроллингом.

Стоит ли использовать горизонтальный скроллинг на сайте?

Проблемы UX рассматриваются специалистами ИТ-технологий очень пристально. Речь идёт об успешности сайта, а сайты не делаются понапрасну. По статистике на июнь 2014 года в интернете было 996 млн.сайтов, и вряд ли найдётся хоть один, у которого нет конкурентов. Стало быть, кроме SEO-продвижения, создателю сайта надо всеми силами сделать своё детище «из ряда вон». А это непросто.Тут-то дизайнер и вспоминает про горизонтальный скроллинг. Таких сайтов немного, и значит есть шанс что сайт запомнится или привлечёт большее внимание. Но возможно и обратное. Большинство пользователей привыкли переходить со страницы на страницу с помощью мыши или стрелок на клаве, а двигать ползунок хочется не каждому. Поэтому большинство специалистов UX относится к горизонтальной прокрутке сайта с большой осторожностью, если не сказать — негативно.

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

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

Горизонтальный скролл: что с ним не так?

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

Чем заменить этот паттерн

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

Загрузка меньшего количества элементов и ссылка на страницу каждой категории

Таким образом, контент не скрывается. Легко перейти к категории; данные не тратятся зря; и вы избегаете нетрадиционных, трудоемких паттернов.

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

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

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

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

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

«Но это потребует больше кликов»

Не стоит переживать, что разделение контента по страницам увеличит количество кликов.

Ведь для горизонтального скролла контента на компьютере требуется куда больше кликов по сравнению с переходом на специальную страницу для просмотра нужного контента.

Вывод

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

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

Это скучный паттерн, но им очень легко пользоваться.

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

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

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

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

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

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

Почему горизонтальный скролл редко используется

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сильные стороны горизонтального скролла

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

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

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

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

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

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

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

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

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

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

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

Примеры уместного использования горизонтального скролла

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Альтернатива горизонтальному скроллу

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

Трендовые сайты с горизонтальной прокруткой. Стоит ли это повторять?

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

Горизонтальный скролл со стрелками в zero block

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

Как сделать

1. Создай отдельно zero block с элементами, которые нужно скроллить. В настройках поставь overflow: auto.
2. Создай отдельно zero block со стрелками. Каждая стрелка — это шейп. Для шейпа со стрелкой налево укажи класс arrow-left, для шейпа со стрелкой направо укажи класс arrow-right. Инструкция по добавлению своего класса элементу.
3. Укажи настройках ниже id блока с элементами, id блока со стрелками и величину сдвига при клике на стрелку.
4. Скопируй сгенерированный код и вставь на свой сайт. Памятка по вставке кода.

   .scrollbooster-viewport < cursor: -webkit-grab; cursor: grab; padding-bottom: 30px; margin-bottom: -30px; >.scrollbooster-viewport:active < cursor: -webkit-grabbing; cursor: grabbing; >.scrollbooster-content < position: absolute; width: 100%; height: 100%; >.arrow-left, .arrow-right