Горизонтальный скролл. Когда и где использовать
Эта статья входит в цикл моих статей “Шкатулка с секретами”, в ней я делась своими знаниями о работе и особенностях применения различных компонентов. Сегодня я хочу поговорить о таком популярном, но в тоже время спорном приёме, как горизонтальный скролл.
На сайтах с большим количеством информации дизайнеры охотно прибегают к использованию горизонтального скролла, чтобы сократить высоту страниц и контролировать объем получаемой пользователем информации.
К сожалению, данное решение часто работает не так хорошо, как хотелось бы. Основная причина заключается в том, что в веб версии пользователи до сих пор крайне неохотно работают с горизонтальным скроллом. Это решение чаще других других вызывает сильные негативные эмоции. При этом в мобильной и планшетной версии таких серьезных проблем не возникает. В подтверждение моих слов, можно почитать опубликованную уважаемыми NNgroup статью https://www.nngroup.com/articles/scrolling-and-scrollbars/
Так как мобильная версия все чаще становится приоритетной из-за быстро растущей популярности выхода в интернет через мобильные устройства, решения, удобные для мобильной версии, применяются и в веб версии. Технологически сложно поддерживать две разные версии макетов для веб и мобильной версии. Поэтому я не призываю отказаться от этого элемента. Его использование часто бывает оправдано. Однако перед использованием лучше знать о недостатках.
Рассмотрим риски, на которые стоит обратить внимание
- Будьте готовы к тому, что пользователи часто не будут обращать внимание на горизонтальный скролл в веб версии. Даже если поставить стрелочки по бокам, вероятность того, что пользователь обратит на них внимание, довольно мала. Не размещайте критически важную информацию таким образом.
- Даже если пользователь обратит внимание на возможность скролла, он, вероятно, просто не захочет с ним взаимодействовать. Причина проста — это довольно трудоемкое действие. Нужно навести мышью на небольшую стрелочку, потом кликнуть по ней и ждать, когда прогрузится новый контент.
Причины, почему горизонтальный скрол все же популярен
- Горизонтальный скролл очень часто является единственно возможным адекватным решением для мобильной версии. Поддержка принципиально разных версий внешнего вида одного и того же блока для разных версий отображения(веб, планшет, мобильная) — сложно не только для дизайна, но и для разработки. Такие решения нельзя назвать оптимальными.
- Это решение позволяет показать большое количество контента, не перегружая страницу. Например, при отображении изображений в галерее горизонтальная прокрутка позволяет пользователю увидеть небольшую часть. Это дает возможность быстро понять, релевантна ли эта информация его запросу.
- Горизонтальная прокрутка экономит много места на вертикальном экране. Макет гораздо более гибкий, ведь добавлять контент можно в обоих направлениях — вертикальном и горизонтальном.
- Горизонтальная прокрутка позволяет пользователям просматривать намного больше разной по смыслу информации, поэтому ее часто используют на главной и разводящих страницах.
Рекомендации
Вместо скролла в веб версии можно использовать ссылку “смотреть больше”. Это позволит пользователю увидеть нужный контент, а если ему понадобится больше, то он сможет перейти на страницу и посмотреть там. Да, это доработка, но не очень большая.
Если вы все же используете горизонтальный скролл, максимально сигнализируйте о возможности скролла. Добавляйте крупные стрелочки, на которые легко попасть мышью, и показывайте кусочек следующего блока.
По возможности дайте пользователю понять, сколько контента скрывается за скроллом. Так у пользователя появится понимание того, сколько контента не попало в его зону видимости (это должна быть не слишком большая цифра).
Механика работы
Когда проектируете этот элемент, не забудьте подумать о том, как пользователь будет с ним взаимодействовать. На мой взгляд, важно помнить о трех аспектах:
О событии, по которому происходит прокрутка блока. Первый вариант — боковыми стрелочками, кликая на которые мы инициируем прокрутку блока. Второй вариант — свайп. В веб версии обязательно наличие стрелочек, а вот в мобильной версии от них часто можно избавиться.
О количестве прокручиваемого контента после клика. Первый вариант — по одному новому блоку после клика на стрелочку, второй — полностью новая подборка после клика. Какой вариант выбрать зависит от содержимого блока. Например, если это галерея фильмов, то более логичным будет вариант с полностью новой подборкой. А в случаях, когда что-то нужно сравнивать, например, галерею с тарифами, то можно использовать первый вариант.
Также не забывайте обо всех необходимых состояниях — ховерах, о том, что происходит после первого клика.
Скролл в мобильной версии
Не смотря на то, что с мобильной версии намного меньше проблем со скроллом, тем не менее в интерфейсах часто можно встретить неудобную реализацию.
Бывает, что на макете дизайнер показывает только первую позицию скролла, забывая о том, как это будет работать при взаимодействии с блоком. В результате может выйти такая картина:
На первом экране все в порядке — мы видим первый блок в скролле и видим значимый кусок второго блока. Однако как только мы передвигаемся дальше, вылезают проблемы. Так как во время взаимодействия нужно показывать не только следущий блок, но и предыдущий, видимая область этих блоков стала минимальна. В таких случаях часто скролл перестает быть заметен, пользоваться таким блоком не комфортно.
Способов сделать горизонтальный скролл довольно много и правильное решение всегда зависит от большого количества факторов. Для примера покажу два совершенно разных решения для этой проблемы:
В первом случае показывается одна карточка и часть следующей. Для сигнализации о возможности скролла вправо или влево используются точки под карточками. Это решение рабочее, но подойдет оно далеко не всем. Например, если ваша карточка длинная и может не войти целиком в экран телефона, такое решение не подойдет.
Во втором случае ширина карточки рассчитана таким образом, чтобы пользователь всегда видел внушительный кусок следующей и предыдущей карточки.
Также не стоит забывать о контроле реализации. Плохая тормозная реализация способна нивелировать все ваши старания. В мобильных версиях сайтов скролл может работать заторможенно, в таким случае вероятный исход — закрытие вашего сайта. Обязательно проверяйте механику работы данного блока перед выходом в прод.
И еще одна маленькая полезность
Иногда бывает полезно последним элементом в скролле делать ссылку. Например, если выведено 10 самых популярных фильмов этой недели, то в конце списка можно поставить карточку со ссылкой на топ 50. Таким образом, если пользователя заинтересовал контент из скролла, но ему его показалось недостаточно, он сможет довольно просто продолжить смотреть более расширенную подборку на отдельной странице.
На этом все. Буду рада вашим комментариям и предложениям по интересующим темам для новых статей.
