Горизонтальный скролл становится модным. Разберемся в этом / SketchBuilder corporate blog / Habr
В последнее время все более популярным становится подход в проектировании сайтов с использованием горизонтального скролла. Нас очень беспокоит целесообразность и юзабилити данного подхода. Чтобы разобраться в этом вопросе, мы перевели статью посвященную горизонтальному скроллу. Предлагаем ознакомиться с материалом и обсудить данную тему в комментариях…
Оригинальное название публикации: “Иск против горизонтального скролла”…
Время от времени всё переосмысливается. А значит нет ничего удивительного в том, что сайты с горизонтальным расположением контента становятся модными. Это смелая и впечатляющая дизайнерская инновация, так как в настоящее время в интернете подавляющее большинством веб-сайтов используют вертикальную прокрутку.
Причина популярности подхода с вертикальной прокруткой очевидна — его проще реализовать, он привычен и чаще используется. Сайты с вертикальной прокруткой считаются также и более эффективными. Так как это мнение большинства, то использование горизонтального скроллинга становится еще более девиантным и смелым.
Избравшие «стезю» горизонтальной прокрутки, рассуждают с позиции собственного выбора. А организации, которые предпочли данный метод, провозглашают свои сайты произведением искусства.
(http://www.guillaumejuvenet.com/)
Горизонтальные сайты — это заявление о собственной уникальности и нежелании вписываться в общественные рамки. В результате, торговая марка, использующая такую конструкцию сайта, часто зарабатывает себе репутацию «причудливой» и «ушлой».
Почему некоторые используют горизонтальный скролл
Так как прокручивание сайтов вверх-вниз стало негласным правилом, многим и в голову не придет, что может быть как-то иначе. Компьютерные мыши с колесиком прокрутки, скроллы в тачпадах на ноутбуках — еще больше укоренили эту идею. Веб-сайты, использующие горизонтальную прокрутку, явно пренебрегают нормами стандартных веб-сайтов, заявляя о своей индивидуальности.
Ставка на мобильные устройства может быть не такой удачной идеей
Горизонтальное пролистывание в смарфотнах и планшетах уже не ново и довольно широко применяется благодаря своей простоте. Его использование на целом ряде различных устройств, часто объясняется более последовательным представлением контента. С другой стороны, на настольных компьютерах горизонтальная прокрутка встречается намного реже. Основная причина этого уже была высказана выше. Люди не знают о том, что можно просматривать контент, просто прокручивая его как-то по-другому.
Поскольку экраны мобильных телефонов или планшетов и экраны десктопов считаются достаточно специфичными относительно друг друга, сходство здесь не применимо. Нельзя использовать горизонтальное пролистывание на настольном компьютере, просто потому что оно распространено на планшетах и телефонах.
Здесь за основу берется принцип того, что люди используют эти устройства с различным подходом в мышлении, и изменение принятого положения вещей может привести к некоторому недопониманию, оставив пользователей вне их зоны комфорта.
Основным же недостатком в реализации горизонтальной прокрутки является то, что пользователи предпочитают не уникальные механики просмотра контента на странице, а единообразие в веб-интерфейсах.
Продуктивное использование вертикального пространства для контентной области
В вертикальном макете, весь контент вне зависимости от степени его важности, идёт друг за другом. Ключевую информацию можно выделить только оформлением, а не позиционированием на странице. Единственное что может дизайнер — разместить ключевую информацию в начале страницы.
В отличие от популярных вертикально-ориентированных макетов, горизонтальные макеты имеют одно преимущество. Они аккуратно предоставляют лишь небольшую часть информации в области горизонтального скролла. А ключевую информацию можно закрепить в вертикальном пространстве, обратив на неё внимание пользователей не только оформлением, но и позиционированием.
Когда стоит использовать горизонтальный скроллинг, если вы это точно хотите
(http://qandhlondon.com/)
Cайты с горизонтальным расположением контента больше всего подходят для ситуаций, когда необходимо единовременно отображать несколько объектов: графических изображений, небольших информационных блоков, групп иконок или превью, ссылающиеся на более подробное описание.
Мобильные версии “десктопных” сайтов, или веб-сайты, рассчитанные на просмотр с мобильных устройств — вот сфера применения, где горизонтальный скролл полностью уместен. Однако, он также хорошо подходит и ряду других сайтов, позволяя им отображать большое количество информации простым и выгодным способом.
Проблема юзабилити
(http://movingislands.com/en)
Хотя множеству пользователей сегодня знакомо и даже привычно горизонтальное пролистывание (когда меняется всё наполнение страницы), горизонтальную прокрутку (с плавной подгрузкой контента) многие по-прежнему осуждают. Она продолжает получать отрицательные отзывы от многих пользователей, и поэтому применять ее следует с осторожностью. Ее, как правило, используют, чтобы проявить индивидуальность, например, заявить о торговой марке. Но даже при таком использовании, многим людям это непривычно.
Пользователи игнорируют блоки сайтов с горизонтальной прокруткой
Одна из основных реакций, которую вызывает горизонтальный скроллинг, заключается в игнорировании разделов с ним. Так как это провоцирует выход пользователя из его зоны комфорта.
Люди, как правило, не замечают даже явные подсказки, касающиеся навигации по веб-сайту с горизонтальной прокруткой, часто оставляя большие стрелки и другие элементы горизонтальной навигации незамеченными и нетронутыми.
(http://www.lorenzobocchi.com/)
Главным образом так происходит, потому что такая форма использования не соответствует ожидаемой схеме функционирования и в результате не является приемлемой или значимой.
Нередко сайты, где перелистываются страница полностью (аналогично бумажным книгам и журналам), вызывают у пользователей высокие ожидания, но в последствии, люди часто оказываются разочарованы предоставленным контентом. Таким образом, неплохое решение для одного (те самые бумажные книги и журналы), может оказать для другого медвежью услугу.
Как же правильно?
(http://www.themobileplaybook.com/en-us/#/overview)
Что же делать, если вы все-таки хотите реализовать у себя на сайте горизонтальную прокрутку и не терять при этом пользователей? Все на самом деле просто — добавить дополнительные возможности навигации.
Добавьте в механику горизонтального скроллинга меню, которое позволит не только перемещаться от одного раздела к следующему, но также перескакивать некоторые разделы совсем. Это принесет гибкости и воодушевит большее количество пользователей просматривать интересующие их разделы.
Горизонтальный скролл-бар также является обязательным, чтобы показывать, сколько еще осталось не просмотренного контента. Иногда это мотивирует людей прочитать немного больше, когда они уже собрались покинуть сайт.
Что следует принимать во внимание
(http://www.richard-hill.org.uk/)
Хотя отношение к использованию горизонтальной прокрутки медленно меняется с приходом новых технологий, таких как сенсорные экраны, планшеты, ПК в форм-факторе моноблоков с тачскрином и т.д., данный метод все еще не доминирует.
В аналоговых клавиатурах легче манипулировать клавишами «вверх/вниз», чем «вправо/влево». А вот на тачпаде добавление новых жестов будет более удобным при реализации горизонтального скролла.
Скорость прокрутки также должна быть оптимизирована. Слишком быстрый скроллинг может вызвать головную боль, а слишком медленный может сильно раздражать.
Несмотря на тот факт, что мы привыкли читать слева направо, медленно прокручивая страницу вниз, эта привычка сейчас меняется. С появлением электронных книг и различных приложений для смартфонов, планшетов и тачпада, люди постепенно привыкают и к перелистыванию при чтении. Однако, всегда важно принимать во внимание, то с чем пользователи могут столкнуться при внедрении новых концепций в повседневную жизнь.
В заключение
(http://www.archi-graphi.fr/)
Раз горизонтальная прокрутка пришлась кстати на мобильных устройствах с тачскринами, это не значит, что она будет столь же популярной на десктопах. Не стоит «выходить за рамки» только для того, чтобы выделиться из толпы, но пробуйте, если действительно верите в такой подход. Однако даже в этом случае не упускайте из внимания комфорт пользователей, ибо это вы зависите от них, а не наоборот.
Если вы намерены применить относительно новый метод для просмотра вашего сайта, постарайтесь не усложнить жизнь его посетителей. Вместо совершенно нового дизайна привнесите нечто знакомое и в то же время реализованное по новой концепции, чтобы пользователь смог оценить и удобство сайта, и вашу изобретательность.
Переводчик: Аня, тестировщик Mockup editor SletchBuilder
Использование вертикального скроллинга и вертикального параллакса при создании сайтов
Эффект параллакса (неравномерного смещения одних элементов относительно других) часто используется для придания большей выразительности и 3D-эффекта процессу вертикального скроллинга (прокрутки) одностраничного сайта. Посмотреть пример сайта с эффектом параллаксаТехническое задание
- неподвижное фоновое изображение, занимающее всю площадь окна браузера
- шапка сайта, зафиксированная в верхней позиции
- полупрозрачная подложка под контентом сайта
- два независимых контейнера с фоновыми изображениями, перемещающиеся с разными скоростями при вертикальном скроллинге страницы
Реализация
1. Задаем неподвижное фоновое изображение, занимающее всю площадь окна браузера и полупрозрачную подложку под контент страницы
Содаем файл index.html
<!DOCTYPE html>
<html>
<head>
<title>Вертикальный скроллинг & Вертикальный параллакс</title>
<meta charset="utf-8" />
<link rel="stylesheet" media="all" href="/css/main.css" />
</head>
<body>
<div>
<div>
Здесь будет размещен контент страницы
</div>
</div>
</body>
</html>
Создаем файл стилей main.css
body {
background: url(../img/bg.jpg) fixed; /*задаем неподвижное фоновое изображение */
background-size: 100% 100%;
overflow-x: hidden;
height: 3300px;
}
#subbg {
background:url(../img/subbg.png) repeat-y center fixed; /* полупрозрачная полоса под контентом */
height: 3300px;
}
#wrapper {
position: relative;
z-index:999;
}
2. Добавляем неподвижный верхний блок с элементами навигации
Добавляем в контейнер wrapper файла index.html
<header>
<div>
<h2>Вертикальный скроллинг & Вертикальный параллакс</h2>
<nav>
<ul>
<li><a href="#position1">Пункт №1 •</a></li>
<li><a href="#position2">Пункт №2 •</a></li> <li><a href="#position3">Пункт №3 •</a></li> <li><a href="#position4">Пункт №4</a></li>
</ul> </nav> </div> </header>
Задаем для них стили в файле main.css
#fixed-header-bar {
width: 100%;
background: #000;
position: fixed;
z-index: 9999;
}
#fixed-header-bar h2 {
float: left;
width: 590px;
padding: 10px 15px;
text-transform: uppercase;
font-size: 18px;
font-weight: bold;
}
.top-bar {
width: 1090px;
margin: 0 auto;
}
#navigation {
width:400px;
}
nav#navigation {
z-index: 5;
float: right;
margin-top: 10px;
z-index:99999;
}
nav#navigation li {
position: relative;
height: 20px;
float: left;
}
nav#navigation a {
display: block;
width: 90px;
height: 20px;
}
3. Формируем контент с элементами навигации
Добавляем в контейнер wrapper файла index.html
<div>
<article>
<header>
<h3>Пункт №1</h3>
</header>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit"</p>
<nav>
<hr />
<a href="#position2">Перейти к Пункту №2</a>
</nav>
</article>
<article>
<header>
<h3>Пункт №2</h3>
</header>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit"</p>
<nav>
<a href="#position1">Перейти к Пункту №1</a>
<hr />
<a href="#position3">Перейти к Пункту №3</a>
</nav>
</article>
<article>
<header>
<h3>Пункт №3</h3>
</header>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit"</p>
<nav>
<a href="#position2">Перейти к Пункту №2</a>
<hr />
<a href="#position4">Перейти к Пункту №4</a>
</nav>
</article>
<article>
<header>
<h3>Пункт №4</h3>
</header>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit"</p>
<nav>
<a href="#position3">Перейти к Пункту №3</a>
<hr />
<a href="#position1">Перейти к Пункту №1</a>
</nav>
</article>
</div>
Задаем стили в файле main.css
nav.next-prev {
margin: 20px 0 0 0;
}
a.prev, a.next {
display: block;
height: 22px;
padding-left: 40px;
}
a.prev {
margin: 0 auto 5px auto;
background: transparent url('../img/scroll-arrow-up.png') 0 0 no-repeat;
}
a.prev:hover {
background: transparent url('../img/scroll-arrow-up.png') 0 -22px no-repeat;
}
a.next {
margin: 5px auto 0 auto;
background: transparent url('../img/scroll-arrow-down.png') 0 0 no-repeat;
}
a.next:hover {
background: transparent url('../img/scroll-arrow-down.png') 0 -22px no-repeat;
}
4. Формируем два независимых контейнера с фоновыми изображениями, перемещающимися с разными скоростями при вертикальном скроллинге страницы и контейнер для изображений контента
Добавляем в контейнер wrapper файла index.html
<!-- Нижние фоновые изображения -->
<div>
<img src="/img/image-bg1.png" alt=""/>
<img src="/img/image-bg2.png" alt=""/>
<img src="/img/image-bg3.png" alt=""/>
<img src="/img/image-bg4.png" alt=""/>
</div>
<!-- Средние фоновые изображения -->
<div>
<img src="/img/image-bg1.png" alt=""/>
<img src="/img/image-bg2.png" alt=""/>
<img src="/img/image-bg3.png" alt=""/>
<img src="/img/image-bg4.png" alt=""/>
</div>
<!-- Изображения контента -->
<div>
<img src="/img/img-content1.png" alt=""/>
<img src="/img/img-content2.png" alt=""/>
<img src="/img/img-content3.png" alt=""/>
<img src="/img/img-content4.png" alt=""/>
</div>
И описываем их стили в файле main.css
/* Изображения контента */
#parallax-bg3 {
z-index: 1;
position: fixed;
left: 50%; /* установка по центру */
top: 0;
width: 940px;
}
#bg3-1 {
position: absolute;
top: 110px;
left: -50px;
}
#bg3-2 {
position: absolute;
top: 710px;
left: -50px;
}
#bg3-3 {
position: absolute;
top: 1300px;
left: -50px;
}
#bg3-4 {
position: absolute;
top: 1920px;
left: -50px;
}
img#bg3-1, img#bg3-2, img#bg3-3, img#bg3-4 {
-webkit-box-shadow: 3px 3px 1px #666;
box-shadow: 3px 3px 1px #666;
border: 3px solid #border-radius: 50%;
border: 4px solid #ECF0F1;
}
img#bg3-2, img#bg3-4 {
border-radius: 50%;
}
/* Средние фоновые изображения */
#parallax-bg2 {
z-index: -1;
position: fixed;
left: 50%; /* установка по центру */
top: 0;
width: 1200px;
}
#bg2-1 {
position: absolute;
top: 250px;
left: 350px;
}
#bg2-2 {
position: absolute;
top: 600px;
left: -650px;
}
#bg2-3 {
position: absolute;
top: 900px;
left: 450px;
}
#bg2-4 {
position: absolute;
top: 1400px;
left: -750px;
}
/* Нижние фоновые изображения */
#parallax-bg1 {
z-index: -1;
position: fixed;
left: 50%; /* установка по центру */
top: 0;
width: 1200px;
}
#bg1-1 {
position: absolute;
top: 100px;
left: -690px;
}
#bg1-2 {
position: absolute;
top: 450px;
left: 300px;
}
#bg1-3 {
position: absolute;
top: 900px;
left: -700px;
}
#bg1-4 {
position: absolute;
top: 1350px;
left: 400px;
}
5. Подключаем скрипты для плавного перемещения контента
Помещаем в файл index.html внутри тэгов <head>…</head>
<script src="/js/modernizr.custom.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="/js/jquery-1.6.1.min.js"><\/script>')</script>
<script src="/js/parallax.js"></script>
Наслаждаемся сделанным!
Остались вопросы? Или хотите получить что-то необычное?
Пишите нам на Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра. и мы вам обязательно поможем.
Сайты с вертикальным скроллингом. Примеры
Если раньше многие старались «вписать» главную страницу сайта в размер «первого экрана», чтобы пользователь гарантировано увидел все, то теперь более распространенными становятся сайты с вертикальным (или горизонтальным) скроллингом.
Эта тенденция наблюдается последние 1,5 – 2 года, и, даже несмотря на разные исследования, утверждающие, что пользователи редко прокручивают «резиновые» сайты до конца, она не теряет своей популярности. Трудно сказать, чем это обусловлено: то ли стремлением попробовать что-то новое, то ли нежеланием отставать от моды, но факт остается фактом – пользователям, равно как и веб-дизайнерам, такие сайты нравятся. И есть за что: возможность реализовать интересные дизайнерские задумки; отпадает надобность бродить по страницам второго, третьего уровня и т. д. К сожалению, увидеть дизайн сайтов с вертикальной прокруткой целиком практически невозможно, ведь мы ограничены размерами наших мониторов, а при прокрутке не получается увидеть общую картину. Но веб-дизайнеры с большим вниманием относятся к проработке дизайн-макетов и охотно делятся ими на профильных сайтах. В этом посте мы предлагаем посмотреть на 15 дизайн-макетов веб-сайтов с вертикальным скроллингом. Некоторые из них уже реализованы, другие еще нет, но все они являются примерами крутого дизайна и источником вдохновения.
Frú Frú by Johanna Roussel
B Yoga Website by Agency Dominion
Daniel Simon Website by Lance Culbreth
Cutthroat & Cavalier Website by Brijan
Rosa Restaurant Website by George Olaru
Apidura by Owen Perry
Market Street Catch by Agency Dominion
Gauthier & Nolet Architects by Justin Bechard
This is Ground by Charles Riccardi
OBH Landing Page Concept by Thomas Le Corre
Lexus HTML5 Parallax by bil Chamberlin
Toby Steaks Restaurant by Ink Ration
Bentley The New Flying Spur by Impossible Bureau
Telfez by Mani
Dapper Ink Website by Joel Reid
Если у вас есть свои примеры дизайн-макетов сайтов с вертикальной прокруткой, покажите их в комментариях к этому посту. Также нам интересно ваше мнение по поводу эффективности сайтов с вертикальным скроллингом. Напишите нам о своем опыте работы и плюсах и минусах, которые вы видите. Надеемся, что этот пост был полезен для вас и вдохновил на создание красивого и функционального дизайна.
Related
Css прокрутка списка. Вертикальный скролл с помощью jScrollPane. О полезном свойстве overflow
В этой статье мы детально разберем свойство overflow со всеми его значениями, позволяющее так же добавить или убрать горизонтальную/вертикальную полосу прокрутки. Другими словами как сделать полосы прокрутки.
Overflow в CSS отвечает за то, как будет выглядеть отображение информации в блоке, в случае превышения содержимого высоты или ширины этого блока. Это свойство применимо только к блочным элементам (display : block ; или те которые изначально являются блочными — div и так далее).
Возможные значения, которые принимает это свойство(по-умолчанию visible ):
- Visible — Отображается все содержание элемента, даже за пределами установленной высоты и ширины.
- Hidden — Отображается только область внутри элемента, остальное будет скрыто.
- Scroll — Всегда добавляются полосы прокрутки.
- Auto — Полосы прокрутки добавляются только при необходимости.
- Inherit — Наследует значение родителя.
Чаще всего это свойство используют, чтобы убрать или добавить полосы прокрутки какому-то элементу. Таким образом, например, поступают с фреймами, чтобы не впихивать их в полный размер. Либо для вставки какого-то большого текста, чтобы он не занимал пол страницы, а уютненько сидел в специальном блоке, и там его можно было прокрутить и прочитать. По большей части свойство решает проблемы комфортного отображения информации.
В демо вы сможете пронаблюдать, как действует каждое из значений свойства на деле:
Код HTML
Страница
visible
Товарищи! начало повседневной работы по формированию позиции играет важную роль в формировании систем массового участия. Значимость этих проблем настолько очевидна, что постоянный количественный рост и сфера нашей активности требуют определения и уточнения новых предложений. Таким образом укрепление и развитие структуры представляет собой интересный эксперимент проверки модели развития. Задача организации, в особенности же новая модель организационной деятельности в значительной степени обуславливает создание системы обучения кадров, соответствует насущным потребностям.
Разнообразный и богатый опыт укрепление и развитие структуры позволяет оценить значение направлений прогрессивного развития. Таким образом дальнейшее развитие различных форм деятельности позволяет выполнять важные задания по разработке новых предложений. Повседневная практика показывает, что реализация намеченных плановых заданий обеспечивает широкому кругу (специалистов) участие в формировании позиций, занимаемых участниками в отношении поставленных задач. Значимость этих проблем настолько очевидна, что укрепление и развитие структуры представляет собой интересный эксперимент проверки существенных финансовых и административных условий. Таким образом постоянный количественный рост и сфера нашей активности позволяет оценить значение форм развития. Идейные соображения высшего порядка, а также рамки и место обучения кадров обеспечивает широкому кругу (специалистов) участие в формировании позиций, занимаемых участниками в отношении поставленных задач.
auto
Товарищи! начало повседневной работы по формированию позиции играет важную роль в формировании систем массового участия. Значимость этих проблем настолько очевидна, что постоянный количественный рост и сфера нашей активности требуют определения и уточнения новых предложений. Таким образом укрепление и развитие структуры представляет собой интересный эксперимент проверки модели развития. Задача организации, в особенности же новая модель организационной деятельности в значительной степени обуславливает создание системы обучения кадров, соответствует насущным потребностям.
Разнообразный и богатый опыт укрепление и развитие структуры позволяет оценить значение направлений прогрессивного развития. Таким образом дальнейшее развитие различных форм деятельности позволяет выполнять важные задания по разработке новых предложений. Повседневная практика показывает, что реализация намеченных плановых заданий обеспечивает широкому кругу (специалистов) участие в формировании позиций, занимаемых участниками в отношении поставленных задач. Значимость этих проблем настолько очевидна, что укрепление и развитие структуры представляет собой интересный эксперимент проверки существенных финансовых и административных условий. Таким образом постоянный количественный рост и сфера нашей активности позволяет оценить значение форм развития. Идейные соображения высшего порядка, а также рамки и место обучения кадров обеспечивает широкому кругу (специалистов) участие в формировании позиций, занимаемых участниками в отношении поставленных задач.
body {margin:0 0 0 0; padding:0 0 60px 0; font-size:16px;} h3 {color:#CC0033;} div { width:200px; /* фиксированная ширина */ height:300px; /* фиксированная высота */ border:1px solid #555; padding:4px; margin:4px; float:left; } .VisibleDiv {overflow:visible;} .HiddenDiv {overflow:hidden;} .ScrollDiv {overflow:scroll;} .AutoDiv {overflow:auto;}
Стоит обратить внимание на то, что в данном конкретном случае блоки с заданой фиксированной высотой и шириной. Это важно, например, рассмотрим вариант, когда высота блока задана в auto :
Мы видимо, что текст во всех случаях корректно отображается внутри блока, кроме небольшого неудобства в случае со scroll , где появляются неактивные полосы прокрутки.
Но в этом случае заключается небольшая опасность, встретившись с которой многие не понимают, почему она возникла и как ее исправить. Дело в том, что если блок с overflow : visible ; то есть значением по-умолчанию, а его содержимое имеет элементы с любым значением float , кроме none , то отображаться все это будет некорректно. Для того, чтобы понять, что это за ситуация, рассмотрим пример:
СтраницаОстерегайтесь горизонтальной прокрутки и имитации управления жестами для десктопов
Резюме: даже сейчас, когда все больше целевых страниц и сайтов имитируют управление жестами и горизонтальную прокрутку при отображении на десктопах, пользователи таких устройств по-прежнему неохотно просматривают контент при помощи боковых движений мыши или пальцев по тачпаду.
Специалисты Nielsen Norman Group (NNG), изучая проблему веб-юзабилити, отметили любопытный феномен, наблюдающийся в течение нескольких последних лет: горизонтальная прокрутка остается проблемой для пользователей настольных компьютеров. Даже с широким внедрением мобильных устройств, где жесты используются для просмотра веб-контента методом скольжения пальца (свайпинг, от англ. swipe), пользователи десктопов в большинстве не приемлют горизонтальную прокрутку web-страниц.
В данном посте мы рассмотрим некоторые проблемы юзабилити, связанные с горизонтальным скроллингом, присущим устройствам с сенсорным экраном, при имплементации его на веб-ресурсы, отображаемые на мониторах ПК. Также мы дадим несколько советов о том,как убрать горизонтальную прокрутку на сайте или помочь пользователям перемещаться через ваш контент боковыми управляющими движениями: горизонтальным скроллингом или свайпингом.
Почему обращаются к горизонтальной прокрутке
Совместимость (адаптивность) страницы с различными типа устройств
Просмотр несущественного содержимого
Сохранение вертикального пространства экрана
Демонстрация характерного дизайна
Риски применения горизонтальной прокрутки на десктопе
Советы по имплементации горизонтальной прокрутки или свайпинга на веб-страницу для ПК
1. Не позволяйте «свайпить» первичную навигацию
2. Не заставляйте пользователей гадать, сколько еще контента осталось
3. Создайте очевидные, всегда видимые сигналы для свайпинга
Вывод
Почему обращаются к горизонтальной прокрутке
Доминирующим стандартом для перемещения по длинным лендингам или «портянкам» у пользователей настольных компьютеров является традиционный скроллинг (прокрутка по вертикали).
Обычная компьютерная мышь с колесиком прокрутки позволяет простым перемещением вверх-вниз оценить оффер на продающей целевой странице или объемную статью, размещенную в блоге, тем самым позволяя получить полную релевантную картину предлагаемого веб-контента.
Маркетологи и веб-дизайнеры, умышленно нарушающие устоявшиеся правила, делают это по одной из следующих причин:
Совместимость (адаптивность) страницы с различными типа устройств
Те же эксперты NNG отмечают, что пользователи мобильных устройств с сенсорным экраном воспринимают горизонтальную прокрутку как нечто само собой разумеющееся.
Разработчики и маркетологи, применяющие адаптивный дизайн для своих лендингов/сайтов, используют метод горизонтального скроллинга или же свайпинга контента для всех устройств, на которых должна отображаться веб-страница, включая настольные компьютеры. Подобный подход применяется просто потому что единый дизайн, подходящий для отображения контента на различных типах дисплеев, обходится дешевле в разработке и внедрении, а также — предположительно! — предполагает максимальную совместимость лендинга со всевозможным «аппаратным парком» целевой аудитории.
Однако владельцы ПК, не привыкшие к горизонтальной прокрутке, зачастую не имеют понятия, что какую-то часть содержимого страницы они могут обнаружить с помощью свайпинга на большом мониторе. Поскольку люди взаимодействуют с мобильными и настольными устройствами абсолютно по-разному — отметим, что поведенческие паттерны для обоих случаев «прошиваются» буквально на уровне рефлексов пользователей! — то универсальный подход типа «один размер подходит всем» (one-size-fits-all) может привести к неприятным последствиям.
Ключевой момент здесь заключается в так называемой прерывности пользовательского опыта: просматривая один и тот же веб-ресурс, сперва с мобильного устройства, а затем с монитора ПК, один и тот же человек парадоксальным образом будет демонстрировать 2 различных поведенческих паттерна — пользуясь смартфоном или планшетом, он уверенно будет «свайпить» страницу по горизонтали, а устроившись у десктопа, он будет скроллить ее вертикально вниз до упора, надеясь найти продолжение контента.
Разумеется, он вспомнит недавно совершенные действия и прибегнет к горизонтальной прокрутке, но лишь потому, что уже посещал этот ресурс, пользуясь мобильным устройством.
Если же владелец ПК впервые заходит на посадочную страницу/сайт, оснащенные горизонтальной прокруткой, то он наверняка не увидит значимой части содержимого.
Просмотр несущественного содержимого
Не слишком важный для коэффициента конверсии материал — типа изображений в фотогалерее — вполне может быть снабжен механизмом горизонтальной прокрутки, позволяющим посетителю видеть небольшую выборку контента. Это даст ему великолепную возможность либо быстро «свайпнуть» галерею, либо нажать на значок увеличения для просмотра заинтересовавшего изображения.
Убедитесь, что вы не поместили критически важный контент на горизонтальную прокрутку: не каждый посетитель обнаружит его.
Сохранение вертикального пространства экрана
Вместо того, чтобы отображать весь контент на очень длинной странице, можно воспользоваться макетом, позволяющим свайпинг для подачи информации «мелкими дозами». Горизонтальная прокрутка, дополняющая традиционный скроллинг, делает дизайн страницы очень гибким и адаптивным: контент можно добавлять, соответственно, как по горизонтали, так и по вертикали.
Hulu.com: дизайн сайта предусматривает как вертикальный, так и горизонтальный скроллинг
Демонстрация характерного дизайна
Дизайнеры, художники и разного рода цифровые агентства используют горизонтальную прокрутку на своих сайтах для того, чтобы выделиться среди всех прочих и показать потенциальным клиентам свои навыки и умения.
Если же ваш бизнес относится к какой-либо широко распространенной категории (то, что называется английским термином «mainstream»), то применение свайпинга для вас может стать роковой ошибкой.
Риски применения горизонтальной прокрутки на десктопе
Как убрать горизонтальную полосу прокрутки на сайте? Безусловно, она приемлема в некоторых ситуациях, но должна применяться с осторожностью. Судя по отчетам NNG, горизонтальная прокрутка на рабочем столе является одной из веб-интеракций, неизменно вызывающих у респондентов отрицательные реакции.
Хотя свайпинг на десктопе не вызывает такой же уровень негативации, как традиционная горизонтальная полоса прокрутки (scrollbar, скроллбар), он тоже представляет собой довольно рискованный метод взаимодействия пользователя с веб-интерфейсом.
Рассмотрим 3 главные причины, по которым горизонтальная прокрутка и свайпинг создают проблемы для владельца ПК.
1. Традиционная горизонтальная полоса прокрутки обременяет пользователя, требуя для непрерывного скроллинга постоянного внимания и больших физических усилий.
Большинство пользователей для горизонтального перемещения использует скроллбар, а не стрелки прокрутки — это, вроде бы, облегчает выполнение задачи. Тем не менее, двигаться по «узкому туннелю» полосы прокрутки трудно, потому что подобное действие требует от пользователя тщательного управления курсором мыши для движения слайдера («ползунка») по скроллбару.
Здесь мы имеем дело с частным случаем «закона вождения» (steering law), гласящего, что время, необходимое пользователю для перемещения указывающего устройства (слайдера, в нашем случае) через условный тоннель, зависит от длины и ширины тоннеля: чем он уже и длиннее, тем больше времени это займет у пользователя.
Из чего следует вывод: использование горизонтальной полосы прокрутки имеет так называемую «высокую стоимость взаимодействия» (high interaction cost), что отталкивает пользователей от завершения действия. Как заявил один из участников экспериментов по применению горизонтального скроллинга: «Мне кажется, что на прокрутку у меня ушла целая вечность!».
2. Пользователи могут игнорировать контент, доступный через горизонтальную прокрутку или свайпинг, поскольку они не ожидают его там найти.
Исследования показывают, что даже сильные визуальные сигналы, такие как стрелки, часто остаются незамеченными. Люди ожидают, что им придется скроллить по вертикали в поисках дополнительного контента, но горизонтальная прокрутка ни с чем подобным у них не ассоциируется: подобное действие противоречит ментальному шаблону восприятия веб-страницы.
Тепловая карта сеанса айтрекинга на Apple.com: пользователи не обращают внимания на стрелки прокрутки, а значит, не видят дополнительного контента
3. Даже очевидные сигналы для горизонтальной прокрутки имеют слабую информационную насыщенность.
Даже если люди замечают сигналы о горизонтальной прокрутке, они вряд ли рискнут загружать непредсказуемый контент. Содержимое, скрытое за границами полей горизонтального скроллинга, находится в заведомо невыгодном положении, потому что даже характерные визуальные знаки (стрелки) обладают слабой информационной насыщенностью: пользователь вряд ли может догадаться, что за информацию он получит, нажав на стрелку прокрутки или самоотверженно прокрутив скроллбар.
Еще выше риск разочарования для тех вариантов страницы, где вся она может «свайпиться» полностью, чтобы сделать новый контент доступным: посетитель, возможно, вытерпит длительную процедуру ожидания полной загрузки новый страницы, чтобы убедиться, что открывшийся его глазам контент абсолютно нерелевантен его интересам.
USAToday.com: пользователи не пользуются стрелками горизонтального скроллинга, потому что не знают, что откроется при нажатии
Советы по имплементации горизонтальной прокрутки или свайпинга на веб-страницу для ПК
Если вы подумываете об имплементации жеста «скольжения пальцем» или горизонтального скроллинга на страницу сайта, которая будут отображаться на мониторе настольного компьютера или ноутбука, то вот несколько полезных советов.
1. Не позволяйте «свайпить» первичную навигацию
Если вы не хотите совсем убрать горизонтальную прокрутку html, то, по крайней мере, не заставляйте посетителей непременно «свайпить» ваш контент: некоторые захотят, но многие — нет. Разрешите альтернативные способы навигации: позвольте пользователям перемещаться и с помощью меню. Меню сообщит, что есть на сайте и поможет найти необходимую информацию. Посетители полагаются на первичную навигацию, чтобы углубиться в веб-ресурс или перемещаться по категориям. Без глобальной навигации им сложнее искать дополнительный контент.
Dennys.com: такой дизайн обеспечивает очевидную глобальную навигацию в дополнение к стрелкам для свайпинга контента. При тестировании обнаружилось, что пользователь никогда не использовал стрелки. Вместо этого он полагался исключительно на глобальную навигацию и смог выполнить все задачи успешно.
2. Не заставляйте пользователей гадать, сколько еще контента осталось
Используйте полосу прокрутки с индикацией или нумерацию страниц. Это всегда хорошо — показать посетителям, где именно они находятся на вашем ресурсе, чтобы они могли лучше ориентироваться. Скажите людям, сколько еще контента им предстоит освоить: осмысленное движение вперед всегда лучше слепого блуждания без цели.
Amazon.com: нумерация страниц наглядно показывает, сколько еще вариантов офферов осталось посмотреть
3. Создайте очевидные, всегда видимые сигналы для свайпинга
Вместо того, чтобы просто убрать горизонтальную полосу прокрутки, позвольте посетителям без лишних сложностей продвигаться через ваш контент с помощью кликов мыши или клавиш клавиатуры. Если стрелки прокрутки видны только при наведении на них курсора (как на примере ниже), многие просто не догадаются, что содержимого на ресурсе гораздо больше.
Netflix.com: в обычном состоянии нет визуальных подсказок, указывающих, что доступно больше контента (вверху). Стрелки для горизонтального скроллинга появляются только при наведении курсора мыши (внизу).
Вывод
Горизонтальные прокрутка и свайпинг на мониторе десктопа относятся к совершенно другому типу пользовательского опыта, нежели при использовании их на сенсорных дисплеях планшетов и смартфонов. Перед нами наглядный пример того, почему маркетологи и веб-дизайнеры должны понимать, что люди используют мобильные телефоны, планшеты и настольные компьютеры по-разному, и почему выгодно оптимизировать дизайн ресурса под каждый вид устройств.
Не нужно нарушать устоявшиеся пользовательские паттерны восприятия только ради того, чтобы выделиться на фоне конкурентов по маркетинговой нише. Вместо этого лучше оценить, подходит ли горизонтальный скроллинг запросам и ожиданиям вашей целевой аудитории, улучшит ли ваше технологическое нововведение юзабилити ресурса — или, увы, наоборот.
Высоких вам конверсий!
По материалам nngroup.com, image source Jatin Shah
30-05-2014