Горизонтальный скролл: что с ним не так?
Что касается производительности, контент, который пользователи не видят и который в конечном итоге могут так и не просмотреть, загружается медленно и тратит лишние данные.
Чем заменить этот паттерн
Вместо этого мы могли бы просто загрузить 4 самых популярных элемента в каждой категории.
Загрузка меньшего количества элементов и ссылка на страницу каждой категории
Таким образом, контент не скрывается. Легко перейти к категории; данные не тратятся зря; и вы избегаете нетрадиционных, трудоемких паттернов.
Однако на маленьких экранах будет немного больше вертикальной прокрутки, так как элементы будут складываться в стек, но я бы начал с этого паттерна и посмотрел, как он покажет себя в исследованиях.
Предполагаю, что дополнительный скролл на маленьких экранах подойдет – вещи, которые кажутся нам проблематичными, могут не создавать проблем для пользователей.
В конце концов, пролистывание категорий не требует больших усилий и может быть выполнено действительно быстро.
Но если исследования покажут, что этот паттерн проблематичен для пользователей, то я бы поискал способы снова скрыть контент, но только на экранах меньшего размера.
Это может быть кнопка, открывающая больше элементов. Или вы можете вернуть горизонтальный скролл.
«Но это потребует больше кликов»
Не стоит переживать, что разделение контента по страницам увеличит количество кликов.
Ведь для горизонтального скролла контента на компьютере требуется куда больше кликов по сравнению с переходом на специальную страницу для просмотра нужного контента.
Вывод
Из всех существующих сложных паттернов горизонтальный скролл кажется действительно хорошим паттерном.
Однако я по-прежнему считаю, что это слишком сложный паттерн, которого можно избежать, сделав страницы легкими по умолчанию и используя их, как форму постепенного раскрытия информации.
Это скучный паттерн, но им очень легко пользоваться.
Digest #2: изучаем виды скроллинга и признаки доступного сайта
Коснёмся темы юзабилити и обсудим два вопроса: как можно организовать прокрутку страниц и что поможет сделать сайт по-настоящему доступным для всех пользователей.
4 типа скроллинга (и их предназначение)
Кроме привычного нам простого скроллинга страниц сверху вниз, существуют и другие варианты прокрутки. Каждый из них может стать изюминкой вашего сайта.
Горизонтальный скроллинг
Прокрутка страниц слева направо используется гораздо реже, чем сверху вниз — и, возможно, зря. Такой способ просмотра подходит для сайтов с большим количеством фото и видео или с представлением контента в виде слайд-шоу. Однако если речь идёт о страницах, где преобладает текст, то горизонтального скроллинга лучше избегать.
Пользователи ПК могут не сразу понять, что страница прокручивается слева направо, поэтому больше всего горизонтальный просмотр подходит для мобильных версий сайтов. А чтобы сразу дать понять аудитории, где находится продолжение страницы, можно добавить указатели в виде стрелок.
Длинный скроллинг
Раньше, как правило, каждый раздел сайта размещался на отдельной странице, ссылка на которую помещалась в меню на главной. Теперь чаще встречаются одностраничные сайты, где все разделы расположены один за другим. В таких случаях и используется длинный скроллинг. Пользователь пролистывает экран за экраном, не отвлекаясь на переходы по ссылкам.
Длинная прокрутка удобна, когда нужно рассказать длинную историю и дополнить её красивой анимацией или когда необходимо показать фотоподборки и инфографику. Выглядит такой скроллинг красиво, но у него есть минусы: загружаются страницы с длинной прокруткой дольше, а ориентироваться на них посетителям сложнее. Поэтому здесь тоже позаботьтесь о навигации.
Бесконечный скроллинг
Все листали новостную ленту во «ВКонтакте» или в Instagram? Это и есть пример бесконечной прокрутки, когда контент на странице не кончается и «подвала» у сайта просто нет. Если у вас много разного контента и вы хотите дать возможность пользователю погрузиться в него с головой, присмотритесь к такому варианту.
Здесь снова нужно не забывать о хорошей навигации. Также бесконечные ленты контента могут быть слишком тяжеловесными для старых устройств, из-за чего страница может «притормаживать» при просмотре — это следует учитывать.
При параллакс-скроллинге сайт как будто разбивается на несколько слоёв
Параллакс-скроллинг
Параллакс-эффект заключается в движении переднего и заднего фона с разной скоростью. Такой ход придаёт прокрутке динамичности и удерживает внимание пользователя, особенно когда вместе с параллаксом используется дополнительная анимация.
Использование параллакс-эффекта может увеличить время загрузки страницы. К тому же движение элементов с разными скоростями иногда отвлекает от сути, которую вы стремитесь донести до аудитории. Так что используйте параллакс в меру: в небольших количествах он вряд ли кому-то навредит.
Возможно, вашему сайту вовсе и не нужны нестандартные варианты скроллинга. Но если перед вами стоит задача сделать сайт увлекательным или наглядно и ярко представить на нём тот или иной контент, то обязательно поэкспериментируйте со способами прокрутки.
Как сделать сайт понятнее и доступнее
Люди принадлежат к разным культурам, говорят на разных языках, по-своему воспринимают мир и имеют свои ограничения по здоровью. Чтобы вашим сайтом могли воспользоваться 100% вашей потенциальной аудитории, сделайте его доступнее для разных пользователей, вне зависимости от их особенностей.
Согласно Положению о доступности веб-контента, выделяются четыре принципа доступности сайта. Чтобы соответствовать им, сайт должен быть.
. доступным для восприятия.
Пользователи с нарушениями зрения просматривают сайты с помощью программ для чтения с экрана. Что показано на картинках и фотографиях, им известно только из содержания тега «alt» в коде изображения. Если этот тег оставить пустым, для некоторых людей ваши иллюстрации останутся загадкой. Это лишь один из примеров неприспособленности сайта для всех без исключения категорий пользователей.
. доступным для использования.
Откройте в новом окне этот сайт. На первый взгляд никакие проблемы с навигацией на нём не видны. Но для некоторых пользователей с ограниченными возможностями такие проблемы на этом сайте очевидны. Например, управление клавишами здесь не работает, а значит, люди с нарушениями зрения или моторики его посмотреть не смогут.
К этому же пункту относится и тема капчи. Не все пользователи имеют возможность рассмотреть искажённые символы на экране и вписать их в поле ввода. В связи с этим появились аудиокапчи и проверки формата reCAPTCHA.
Такую капчу проходить гораздо удобнее
. понятным.
Для охвата мультиязычной аудитории сайт должен иметь альтернативные версии на необходимых языках или быть доступным для перевода онлайн-инструментами. Чтобы страницу можно было перевести онлайн, сделайте так, чтобы текст не был частью изображения — иначе его не получится считать. Также доносите информацию не только через текст, но и через визуальные образы, будь то фотографии или иконки.
Здесь же упомянем о случаях, когда пользователь не понимает, как произвести нужное действие и что произошло после его действия. Обозначайте элементы на странице доступным образом и сообщайте юзеру о сути ошибки, если он сделал что-то неверно.
. адаптированным к разному ПО.
Сайт должен открываться при использовании любого программного обеспечения, которое предназначено для просмотра сайтов. Достаточно позаботиться о чистоте и работоспособности кода, чтобы в целом соответствовать этому принципу.
Некоторые советы по повышению доступности сайта уже прозвучали, добавим к ним ещё несколько:
- обозначайте заголовки и подзаголовки правильно;
- сопровождайте видео субтитрами или транскрипцией;
- используйте контрастные цвета при оформлении страниц;
- обеспечьте навигацию по сайту с помощью клавиш;
- установите, если возможно, специальные расширения и плагины, позволяющие делать сайт доступнее.
Горизонтальная прокрутка CSS: определение и как убрать на всех разрешения
Главный недостаток горизонтального скролла — в веб-версиях сайтов он смотрится «не очень» , п лю с п ользователи компьютеров и ноутбуков неохотно им пользуются. Из-за этого вокруг горизонтального скролла царит облако негатива , и поисковые системы жестко определили свою позицию.
Другое дело, когда горизонтальный скролл применяется в мобильных версиях веб-ресурсов. Копаясь в телефоне, удобно скроллить определенный контент «в сторону». Однак о г оризонтальный скролл оправдывается, когда реализован в отдельных блоках для удобства пользователя. Если, опять же , скроллится вся страница веб-сайта — это плохо.
Горизонтальный скролл CSS: особенности
- В веб-версиях ресурса он не заметен. Если организовать горизонтальный скролл в веб-версии сайта, тогда нужно быть готовым к тому, что пользователи будут не замечать его или просто игнорировать. Поэтому, если он организован специально, не нужно размещать важную информацию таким образом.
- Поисковые системы к горизонтальному скроллу относятся с презрением. Пользователям десктопных устройств не нравится скроллить «в сторону». Это не удобно. Поэтому поисковые системы пошли им навстречу и не рекомендуют использовать такой вид скролла на веб-ресурсе.
- В мобильной версии веб-сайт а г оризонтальный скролл позволяет компактно размещать однообразную информацию в пределах определенного блока. Например , товары одной категории в интернет-магазине. Допустим , у вас есть несколько важных категорий то ва ра, которые вы хотите разместить в начале страницы. В этом случае вы размещаете категории вертикально друг под дру гом , а товар в них размещаете так , чтобы он скроллился горизонтально.
- Горизонтальный скролл экономит много места на небольших экранах. При этом он не сильно нагружает страницу, если сравнивать с вариантом вертикального расположения всего контента.
Как убрать горизонтальный скролл с помощью CSS
Прежде чем убрать горизонтальную прокрутку возможностями CSS , давайте выясним , из-за чего она появляется. Рассматриваем тот случай, когда горизонтальный скролл появился «случайно», а не был сделан специально.
Горизонтальная прокрутка появляется в том случае, когда какой-то элемент «выходит» за область видимости контента страницы. У начинающих верстальщиков и веб-разработчиков это довольно частое явление. Чтобы избавит ь ся от горизонтальной прокрутки , нужно «выскочивший» элемент «загнать» в область видимости или удалить. Если удалось «поправить» такой элемент, тогда хорошо. Если нет, потому что вы не можете его найти, тогда есть проверенное CSS-свойство «overflow».
Как убрать горизонтальный скролл в html, используя CSS-свойство «overflow»
- overflow-х — свойство, отвечающее за горизонтальную прокрутку;
- overflow-у — свойство, отвечающее за вертикальную прокрутку.
Заключение
Сегодня вы узнали, что такое горизонтальная прокрутка и как ее можно специально использовать. Если же она возникла случайно, тогда есть проверенный способ, как убрать горизонтальный скролл возможностями CSS — использовать свойство «overflow».
Горизонтальная прокрутка не рекомендована к использованию , о днак о в отдельных случая х б ез нее никак не обойтись. Поэтому , прежде чем ее создавать или удалять, нужно тщательно все обдумать.
Мы будем очень благодарны
если под понравившемся материалом Вы нажмёте одну из кнопок социальных сетей и поделитесь с друзьями.
Горизонтальный скроллинг: дизайнерская «фишка» или важный элемент UX
Скроллинг — не только колёсико мыши. В более широком смысле это понятие обозначает, что содержимое информации находится в движении по вертикали или горизонтали.
Неважно, о какой форме информации идёт речь — тексте или изображении. На содержании информации скроллинг никоим образом не сказывается, но он является очень важным элементом UX. Эта аббревиатура с английских слов «User eXperience» может быть расшифрована как «Опыт взаимодействия». Речь идёт о том, что чувствует человек в том или ином случае, какой, например, у него UX, если он нечаянно наступил в лужу, какой UX , если он просматривает сайт с горизонтальным скроллингом.
Стоит ли использовать горизонтальный скроллинг на сайте?
Проблемы UX рассматриваются специалистами ИТ-технологий очень пристально. Речь идёт об успешности сайта, а сайты не делаются понапрасну. По статистике на июнь 2014 года в интернете было 996 млн.сайтов, и вряд ли найдётся хоть один, у которого нет конкурентов. Стало быть, кроме SEO-продвижения, создателю сайта надо всеми силами сделать своё детище «из ряда вон». А это непросто.Тут-то дизайнер и вспоминает про горизонтальный скроллинг. Таких сайтов немного, и значит есть шанс что сайт запомнится или привлечёт большее внимание. Но возможно и обратное. Большинство пользователей привыкли переходить со страницы на страницу с помощью мыши или стрелок на клаве, а двигать ползунок хочется не каждому. Поэтому большинство специалистов UX относится к горизонтальной прокрутке сайта с большой осторожностью, если не сказать — негативно.
Но не всё так однозначно. Успешные сайты с горизонтальной прокруткой существуют и приносят их владельцам ощутимую пользу. Эти сайты создавались не только с использованием выигрышного дизайна. Но и с тщательной предварительной проработкой всех вопросов. Восприятие горизонтального скроллинга облегчается, если на сайте есть подсказки, помогающие посетителю сориентироваться. Очень важно качество содержания сайта, хороший контент — краеугольный камень каждого сайта, с оригинальным типом прокрутки — тем более.
Есть мнение, что горизонтальный скроллинг имеет преимущества, когда сайт содержит много картин, когда на нём размещено крупное изображение, не воспринимаемое быстро, скажем, карта, когда информация построена так, что к основному материалу прилагаются отдельные приложения, картинками или текстом , когда выкладывается большой каталог товаров, содержащий многие категории. Широкое распространение сенсорных экранов даёт горизонтальному скроллингу дополнительные шансы на успех его применения.