Двунаправленный скролл здесь, чтобы сохранить адаптивный дизайн

В этой статье речь идет о элементарном вопросе с удивительно сложным ответом.

Проблема

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

"Что вы собираетесь делать с проблемой скролла?"

Этот вопрос застал нас врасплох.

"Проблема со скроллом?" - Спросили мы

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

"Наш мобильный сайт слишком длинный"

Итак - Нужно ли нам "фиксить" скроллинг?

Скролл не нужно фиксить

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

http://blog.chartbeat.com/2013/08/12/scroll-behavior-across-the-web/

По нашему мнению, это поведение пользователя сводится к двум мнениям:

1. Пользователи не терпеливы. Они не дожидаются, пока страница полностью загрузится, чтобы проскроллить и изучить контент.
2. Пользователи научились скроллить. В "mobile-first" мире скролл стал самым главным взаимодействием с цифровым контентом. Бесконечные новостные ленты учили пользователей этому взаимодействию снова и снова.

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

Таким образом, пользователи скроллят. Много. Означает ли это, что проблема со скроллом отсутствует? Не совсем.

Нужно исправлять плохой адаптивный дизайн

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

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

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

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

Итак, как мы можем исправить адаптивный дизайн наших клиентов?

Двунаправленный скролл

Цель

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

Было 3 основных условия:

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

Все сводится к основному маркетинговому путешествию пользователя:

1. Внимание: Покажите пользователю все что вы предлагаете
2. Заинтересованность: Генерируйте интерес к одному специфическому предложению
3. Желание: Заставьте пользователя говорить "Я хочу узнать больше"
4. Действие: Сделайте так, чтоб пользователь нажал на кнопку.

Решение

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

двунаправленный: перемещение в двух направлениях (обычно противоположное) - Викисловарь

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

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

Второе направление скролла для сайта с дувнаправленным скроллом является горизонтальным. Это направление используется отдельными разделами страницы, а не всей страницей. Каждый раздел можно скроллить отдельно.

Зачем?

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

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

Как?

Есть много замечательных статей о том, как интегрировать горизонтальный скролл в интерфейсы. Вот только две из них:

https://www.nngroup.com/articles/horizontal-scrolling/

https://uxplanet.org/horizontal-scrolling-in-mobile-643c81901af3

Примеры двунаправленного скролла

Двунаправленная прокрутка - не новая идея. Такие интерфейсы довольно давно существуют для медиабиблиотек, таких как Netflix или Amazon Video.

Вместе с Apple, охватывающим двунаправленный скролл в своих новых приложениях, таких как App Store, Music и Podcasts, в последнее время все больше и больше разработчиков приложений начали использовать эту идею.

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