Горизонтальный сайт: 17 потрясающих примеров сайтов с горизонтальным скроллингом

17 потрясающих примеров сайтов с горизонтальным скроллингом

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

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

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

Square

Веб-сайт Squareподарит вам незабываемые впечатления. Это онлайн-платформа, где люди могут выставлять свои работы, и она выполнена очень необычно. С самого начала вас приглашают исследовать сайт с Let’s Rock! Это кнопка, при нажатии на которую открывается врата веб-империи, где вас приветствуют контрастные цвета, популярные анимированные GIF-файлы, изображения в стиле 90-хи синтезаторные мелодии. И все это происходит еще до того, как вы получите доступ к основному контенту.

Чтобы увидеть работы художников, сначала нужно перетащить мышью квадрат, пока он не достигнет финишной черты, обозначенной красной точкой. Когда вы катитесь по квадрату, появляются известные иллюстрированные персонажи, которые составляют вам компанию, такие как Супер Марио, Дарт Вейдер, Эрик Картман, Бендер из Футурамы и т. д… Только после того, как вы завершите эту мини-игру, вы сможете увидеть избранные проекты.

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

Home Société

Home Société — это бренд, который производит роскошную мебель для дома и открытых пространств. Их веб-сайт был разработан известным агентством Locomotive, поэтому неудивительно, что он выглядит таким креативным и интересным от самого первого до последнего экрана. Это одностраничная страница с гладкой горизонтальной прокруткой слева направо. Весь сайт по сути прост, но увлекателен плавными анимационными эффектами и привлекательными витринами работ компании. Основная навигация четкая и всегда видимая, она расположена в левой части экрана, поэтому вы всегда можете перейти прямо к наиболее интересному разделу. Когда вы дойдете до конца горизонтальной прокручиваемой домашней страницы, вас встречает полноэкранный раздел с большой типографикой.

D. Potfer Studio

D. Potfer Studio — французская консалтинговая и коммуникационная студия, специализирующаяся на искусстве жизни, культуре, еде и напитках. Их работы представлены в карусельной галерее с горизонтальной прокруткой. Изображения выглядят очень мягкими, мечтательными и прекрасно сочетаются с тонкой, четкой типографикой. Графика также великолепно анимирована, что делает приключение с прокруткой еще более увлекательным.

Kwok Yin Mak

Сайт Kwok Yin Mak — прекрасный оазис минимализма, который, несомненно, производит сильное впечатление на посетителей. Это еще один потрясающий пример одностраничного веб-сайта с горизонтальной прокруткой, который в данном случае работает в обоих направлениях. Как только сайт загрузится, вы можете выбрать прокрутку влево или вправо. Основная навигация скрыта в нижнем левом углу экрана. Но при наведении указателя мыши на О себе, Работаи Гостевая книга, стрелка укажет вам, в каком направлении прокручивать, чтобы добраться до этих разделов. Благодаря использованию привлекательных фотографий, отличному выбору типографики, размерам шрифтов и простым анимационным эффектам Квоку удалось создать потрясающий веб-сайт, который прекрасно демонстрирует его творческие способности и навыки.

Prevint

Prevint — это программа предотвращения межличностного насилия, цель которой — повысить осведомленность о различных типах насилия, которым люди чаще всего подвергаются. Разработчики этого сайта выбрали горизонтальную навигацию, чтобы познакомить посетителей с тем, чем занимается их организация, и поделиться тремя спектрами, которые могут быть полезны людям, подвергающимся насилию. Этот веб-сайт является отличным примером того, как работает горизонтальный скроллинг, когда вы хотите представить некоторые общие идеи своим пользователям, и при этом вам не обязательно придерживаться его на всем сайте. Фактически, здесь горизонтальная навигация исчезает в пользу эффекта прокрутки повествования, когда посетители нажимают, чтобы узнать больше о любом из спектров. Веб-сайт Prevint был неоднократно награжден и выигрывал награды CSS Design Awards, Awwwards, и The FWA.

Canals

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

Qode Interactive Catalog

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

Каталог QI получил несколько наград, в том числе « Сайт дня».признание Awwwards, награда « Веб-сайт дня» от CSSDA и награда Webpicksот Communication Arts.

Christie Tang

Кристи Танг — дизайнер продуктов с замечательным сайтом-портфолио. Горизонтальная навигация позволяет нам исследовать ее последние работы, которые элегантно перемещаются из правой в левую часть экрана. Когда вы дойдете до седьмого проекта, цвет фона изменится с белого на черный, а навигация перейдет с горизонтальной на вертикальную. С каждым новым свитком вы попадаете прямо в глубины творческого мира Кристи, где представлены примеры ее мастерства и разносторонности. Главное меню всегда видно: оно находится в верхней части экрана. Когда вы наводите курсор на меню, происходит классная вещь — забавные видеоролики появляются на всем экране (в одном из них даже изображена сама Кристи, играющая в видеоигру), побуждая вас узнать больше об этом, несомненно, уникальном и вдохновляющем дизайнере.

Peak’n Film

За Peak’n Filmстоит Том Гарсин, французский фотограф и видеомейкер. Этот удивительный веб-сайт представляет собой увлекательную демонстрацию захватывающих произведений Тома. Все просто и минималистично, что позволяет его творчеству привлекать внимание. Вверху страницы есть индикатор выполнения, показывающий, как далеко вы продвинулись и сколько его изображений осталось увидеть. Горизонтальный скроллинг гладкий, работает волшебно в обоих направлениях и идеально дополняет портфолио Тома. Весь проект поразителен, отсюда и все награды, которые он получил на FWA, Awwwardsи CSS Design Awards.

Gosha Khidzhakadze

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

Gingko

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

Emanuele Milella

Эмануэле Милелла — креативный директор и интерактивный дизайнер с отличным сайтом-портфолио. Страницы покрыты песчаной зернистой текстурой, которая придает сайту атмосферу ретро. В разделе « Работы» появляется эффект горизонтальной прокрутки. Вы можете отслеживать, сколько проектов вы просмотрели, следя за массивными жирными цифрами, отображаемыми рядом с каждым проектом, или проверяя индикатор выполнения, расположенный под изображениями. Когда вы наводите указатель мыши на изображение, графика начинает следовать за движением курсора и поэтому искажается, хотя и не сильно. Это просто забавный элемент, который демонстрирует внимание Эмануэля к деталям.

Myles Nguyen

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

Parsons Branding

Parsons Branding — студия стратегии и дизайна бренда из Кейптауна. На их веб-сайте вы можете выбирать между бесконечной каруселью и полной сеткой проекта. Если вы выберете первое (которое установлено по умолчанию), вы сможете просматривать проекты студии, используя горизонтальную прокрутку. Как только вы найдете проект, о котором хотите узнать больше, нажмите на него, чтобы открыть кейс. И когда вы дойдете до конца исследования, загрузится еще одно, посвященное другому проекту, и так далее, поддерживая идею непрерывности, которая вездесуща на этом сайте.

Studio Björk

Веб-сайт Studio Björk — еще один яркий пример горизонтальной прокрутки, которая используется на каждой странице сайта. Этот сайт довольно минималистичный, в основном черно-белый, а более яркие цвета видны только на выставленных работах. Экран разделен на несколько частей, каждая из которых соответствует одному проекту. Под каждой картинкой есть несколько основных деталей о работе, о которой идет речь. 

Ciao Bella

Чао Беллабыл создан Netflix в честь Найроби, одного из главных героев популярного шоу La Casa de Papel. Сайт заполнен фотографиями, видео, письмами и аудиоконтентом, которые люди со всего мира отправляют своему любимому персонажу. Контент отображается на всем экране, и вы можете перемещаться по нему, перетаскивая курсор в любом направлении. Когда вы найдете что-то, что хотите посмотреть, прочитать или послушать, просто нажмите. Затем вы можете перетащить указатель мыши по горизонтали, чтобы изучить контент, представленный в той же строке, и узнать, что еще фанаты и актеры сериала сказали о Найроби.

Vogue España

Интернет-издание Vogue Españaо моде 80-х представляет собой одностраничный журнал, в котором освещаются все основные модные тенденции эпохи синти-попа. Вы можете перемещаться по графическому и текстовому контенту 80-х годов с помощью горизонтальной навигации, и именно этот эффект придает всему веб-сайту особый внешний вид.

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

Источник

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

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

Строгий и минималистичный сайт-портфолио дизайнера из Италии, область компетенций которого простирается от работы с jQuery и брендирования до проектирования взаимодействия и рекламы. В 2014 году площадка удостоилась звания «Сайта дня» по версии CSS Winner и Awwwards. Прокрутка возможна посредством управления с клавиатуры.

Самые популярные хэштеги 2014 года — от #ICantBreathe до #Sochi2014 — собраны здесь и иллюстрированы различными художниками. Сайт является производным Hshtags.com. Скроллинг осуществляется с помощью перетаскивания специального ползунка.

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

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

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

Сайт-портфолио фотографа, режиссёра, сооснователя и креативного директора Studio White Сирила Массона. На площадке представлено множество прекрасных снимков знаменитостей, а также фотографий, сделанных для Nike, Perrier, ID Parfums и других именитых организаций.

В это непросто поверить, но за крайне экстравагантным дизайном в данном случае скрывается производитель замороженных овощей из Хорватии. И горизонтальная прокрутка здесь — лишь капля в океане креативности: тут вам и анимация, и неформальные фотографии сотрудников в качестве фона, наглядные примеры «до» и «после», и многое другое.

Ещё один сайт-визитка — на этот раз от 21-летнего французского программиста Гийома Жевуне. Для навигации по площадке юноша предлагает пользователю взять под управление маленького робота, который, передвигаясь по горизонтальной плоскости, знакомит нас с личностью и деловыми качествами его создателя. Выглядит необычно, забавно и непринуждённо.

лучшие практики — CMS Magazine

В июле 2014 года в интернете уже насчитывалось 996 миллионов сайтов. Часть из них составляет прямую конкуренцию вашему ресурсу: пытается выйти на рынок или увеличить имеющуюся долю за ваш счёт. Они пытаются привлечь тех же пользователей, что и вы. Или, что еще хуже, они пытаются откусить кусок от вашего пирога или пользовательской базы. Разумеется, точное количество конкурентов зависит от направления деятельности, целевой аудитории, масштаба компании ­— регионального, национального или международного — и многих других факторов.

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

Сильный выразительный веб-дизайн — один из лучших способов обратить на себя внимание. Ведь нам нужно, чтобы сайт «зацепил» пользователей уже в первые секунды — прежде чем они заскучают и отправятся смотреть свежее видео с котиками.

Горизонтальный скроллинг (он же горизонтальная навигация) всегда был предметом для споров веб-дизайнеров и довольно долго считался провальным ходом. Как бы то ни было, он появился ещё на заре интернета и иногда становится трендом — причём настолько мощным, что какое-то время (правда, недолго) считается самым популярным и современным решением.

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

Прочитав этот вопрос в статье о лучших практиках горизонтальной прокрутки вы, должно быть, удивитесь. Тем не менее, вопрос вполне оправдан. Учитывая спорное отношение к горизонтальному скроллингу со стороны дизайнеров и UX-специалистов, стоит всерьёз задуматься о том, нет ли других способов привлечь к себе внимание. Согласно исследованию UX-гуру Якоба Нильсена, информацию, скрытую за боковыми «полями» страницы, находит только 1% пользователей. С другой стороны, правильный подход к горизонтальному скроллингу может сделать пользовательский опыт интересным. Рассмотрим несколько примеров выразительного сочетания горизонтальной прокрутки с параллакс-эффектом. В конце концов, эта статья посвящена именно тому, как, используя горизонталь, добиться отличного UX.

По мнению Демиена Риса (Damian Rees), есть 4 случая, когда горизонтальная прокрутка делает пользовательский опыт лучше:

1. На сайте много картинок (например, сайт о фотографии или сайт-портфолио)
2. Сайт содержит визуальный контент крупного формата, который не воспринимается быстро (например, карта)
3. Структура ресурса представляет собой несколько разделов или слайдов в приложении
4. Крупный каталог товаров, где должно быть удобно просматривать различные категории

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

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

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

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

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

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

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

При работе над горизонтальным сайтом дизайн нередко превращается в самоцель. Чаще всего такая угроза существует на трендовых сайтах, богатых визуальным контентом. Не стоит забывать о настоящей цели сайта, которая только в очень редких случаях звучит как «чтобы пользователи просто смотрели все эти крутые картинки». Убедитесь, что на сайте присутствует информация о бизнесе, продуктах и услугах, контактная информация, формы заказа и т.д.

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

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

Здесь существует несколько подходов.Вот отличный урок, из которого вы узнаете, как создать отличный и функциональный сайт с помощью базовых элементов HTML и CSS. Это только один способ, кроме него существуют и другие.

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

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

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

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

Ищете команду, способную не только выдавать высококлассный креатив, но и качественно его реализовывать? Обязательно воспользуйтесь рейтингом креативности веб-студий.

Во-первых, он независимый и объективный.

Во-вторых, вы сможете сразу изучить карточки или сайты его участников.

В-третьих, помимо общего зачета, в рейтинге креативности разработчиков сайтов было сформировано несколько подрейтингов относительно количества побед в каждом из 6 конкурсов: «Рейтинг Рунета», «Золотой сайт», Webby Awards, CSS Design Awards, Awwwards, а также FWA.

Оригинал: http://usabilitygeek.com/horizontal-scrolling-user-experience-best-practices/

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

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

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

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

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

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

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

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

Остерегайтесь горизонтальной прокрутки и имитации управления жестами для десктопов

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

Специалисты 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

Горизонтальный скролл становится модным. Разберемся в этом

Это перевод статьи от Design Your Way — http://www.designyourway.net/blog/inspiration/the-case-against-horizontal-scrolling-websites/, оригинальное название, публикации:

«Иск против горизонтального скролла»

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

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

Избравшие «стезю» горизонтальной прокрутки, рассуждают с позиции собственного выбора. А организации, которые предпочли данный метод, провозглашают свои сайты произведением искусства.

(http://www.guillaumejuvenet.com/)

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

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

ul.infinte{
white-space: nowrap;
overflow-x: auto;
}
ul.infinte li{
display: inline-block;
}

<ul>
<li><img src="image1.jpg" /></li>
<li><img src="image2.jpg" /></li>
<li><img src="image3.jpg" /></li>
<li><img src="image4.jpg" /></li>
...
<li><img src="image999.jpg" /></li>
<ul>

  
  
  
  
  
 
 
 
 (Ваш текст находится здесь.Кроме того, вы можете размещать другие элементы в этом родительском div. 
 
 
 
  
  
  

  
 div {
 background-color: lightblue; 
 граница: сплошной черный 1px; 
 высота: 100 пикселей; 
 ширина: 500 пикселей; 
 переполнение-x: прокрутка; 
} 
 p {
 width: 1000px; 
 поле: 10 пикселей; 
} 
  

  
 div {переполнение-x: скрыто; } 
  

  
 p {ширина: 100%; }