Резюме: кроме того на данный момент, в то время, когда все больше сайтов и целевых страниц имитируют управление жестами и горизонтальную прокрутку при отображении на десктопах, пользователи таких устройств так же, как и прежде нехотя просматривают контент при помощи боковых перемещений мыши либо пальцев по тачпаду.
Эксперты Nielsen Norman Group (NNG), изучая проблему веб-юзабилити, отметили интересный феномен, наблюдающийся в течение нескольких последних лет: горизонтальная прокрутка остается проблемой для пользователей настольных компьютеров. Кроме того с широким внедрением мобильных устройств, где жесты употребляются для просмотра веб-контента способом скольжения пальца (свайпинг, от англ. swipe), пользователи десктопов в большинстве не приемлют горизонтальную прокрутку web-страниц.
В данном посте мы разглядим кое-какие неприятности юзабилити, которые связаны с горизонтальным скроллингом, свойственным устройствам с сенсорным экраном, при имплементации его на веб-ресурсы, отображаемые на мониторах ПК. Кроме этого мы дадим пара советов о том,как убрать горизонтальную прокрутку на сайте либо оказать помощь пользователям перемещаться через ваш контент боковыми управляющими перемещениями: горизонтальным скроллингом либо свайпингом.
Из-за чего обращаются к горизонтальной прокрутке
Совместимость (адаптивность) страницы с разными типа устройств
Просмотр несущественного содержимого
Сохранение вертикального пространства экрана
Демонстрация характерного дизайна
Риски применения горизонтальной прокрутки на десктопе
Советы по имплементации горизонтальной прокрутки либо свайпинга на веб-страницу для ПК
1. Не разрешайте «свайпить» первичную навигацию
2. Не заставляйте пользователей гадать, сколько еще контента осталось
3. Создайте очевидные, неизменно видимые сигналы для свайпинга
Вывод
Из-за чего обращаются к горизонтальной прокрутке
Главным стандартом для движения по долгим лендингам либо «портянкам» у пользователей настольных компьютеров есть классический скроллинг (прокрутка по вертикали).
Простая компьютерная мышь с колесиком прокрутки разрешает несложным перемещением вверх-вниз оценить оффер на реализовывающей целевой странице либо объемную статью, размещенную в блоге, тем самым разрешая взять полную релевантную картину предлагаемого веб-контента.
веб и Маркетологи-дизайнеры, умышленно нарушающие устоявшиеся правила, делают это по одной из следующих обстоятельств:
Совместимость (адаптивность) страницы с разными типа устройств
Те же специалисты NNG отмечают, что пользователи мобильных устройств с сенсорным экраном принимают горизонтальную прокрутку как что-то само собой разумеющееся.
маркетологи и Разработчики, использующие адаптивный дизайн для собственных лендингов/сайтов, применяют способ горизонтального скроллинга либо же свайпинга контента для всех устройств, на которых обязана отображаться веб-страница, включая настольные компьютеры. Подобный подход используется легко по причине того, что единый дизайн, подходящий для отображения контента на разных типах дисплеев, обходится дешевле в внедрении и разработке, и — предположительно! — предполагает большую совместимость лендинга со всевозможным «аппаратным парком» целевой аудитории.
Но обладатели ПК, не привыкшие к горизонтальной прокрутке, обычно не имеют понятия, что какую-то часть содержимого страницы они смогут найти посредством свайпинга на громадном мониторе. Потому, что люди взаимодействуют с мобильными и настольными устройствами полностью по-различному — напомним, что поведенческие паттерны для обоих случаев «прошиваются» практически на уровне рефлексов пользователей! — то универсальный подход типа «один размер подходит всем» (one-size-fits-all) может привести к неприятным последствиям.
Главный момент тут содержится в так называемой прерывности пользовательского опыта: просматривая одинаковый веб-ресурс, вначале с мобильного устройства, а после этого с монитора ПК, одинаковый человек парадоксальным образом будет демонстрировать 2 разных поведенческих паттерна — пользуясь смартфоном либо планшетом, он с уверенностью будет «свайпить» страницу по горизонтали, а устроившись у десктопа, он будет скроллить ее вертикально вниз до упора, сохраняя надежду отыскать продолжение контента.
Очевидно, он отыщет в памяти сравнительно не так давно идеальные действия и прибегнет к горизонтальной прокрутке, но только вследствие того что уже посещал данный ресурс, пользуясь мобильным устройством.
В случае если же обладатель ПК в первый раз заходит на посадочную страницу/сайт, оснащенные горизонтальной прокруткой, то он точно не заметит значимой части содержимого.
- Оптимизируйте пользовательский опыт — не только конверсию
Просмотр несущественного содержимого
Не через чур ответственный для коэффициента конверсии материал — типа изображений в галерее фотографий — в полной мере возможно снабжен механизмом горизонтальной прокрутки, разрешающим визитёру видеть маленькую выборку контента. Это даст ему прекрасную возможность или скоро «свайпнуть» галерею, или надавить на значок повышения для просмотра заинтересовавшего изображения.
Убедитесь, что вы не поместили критически ответственный контент на горизонтальную прокрутку: не каждый визитёр найдёт его.
Сохранение вертикального пространства экрана
Вместо того, дабы отображать целый контент на весьма долгой странице, возможно воспользоваться макетом, разрешающим свайпинг для подачи информации «небольшими дозами». Горизонтальная прокрутка, дополняющая классический скроллинг, делает дизайн страницы весьма эластичным и адаптивным: контент возможно додавать, соответственно, как по горизонтали, так и по вертикали.
Hulu.com: дизайн сайта предусматривает как вертикальный, так и горизонтальный скроллинг
Демонстрация характерного дизайна
Дизайнеры, живописцы и разнообразные цифровые агентства применяют горизонтальную прокрутку на собственных сайтах чтобы выделиться среди всех других и продемонстрировать потенциальным клиентам умения и свои навыки.
В случае если же ваш бизнес относится к какой-либо обширно распространенной категории (то, что именуется британским термином «mainstream»), то использование свайпинга для вас может стать роковой неточностью.
- Примеры юзабилити интерфейса пользователя
Риски применения горизонтальной прокрутки на десктопе
Как убрать горизонтальную полосу прокрутки на сайте? Непременно, она приемлема в некоторых обстановках, но обязана использоваться с осторожностью. Если судить по отчетам NNG, горизонтальная прокрутка на рабочем столе есть одной из веб-интеракций, неизменно вызывающих у опрощеных отрицательные реакции.
Не смотря на то, что свайпинг на десктопе не вызывает такой же уровень негативации, как классическая горизонтальная полоса прокрутки (scrollbar, скроллбар), он также представляет собой достаточно рискованный способ сотрудничества пользователя с web-интерфейсом.
Разглядим 3 главные обстоятельства, по которым горизонтальная прокрутка и свайпинг создают неприятности для обладателя ПК.
1. Классическая горизонтальная полоса прокрутки есть обузой пользователя, требуя для постоянного скроллинга постоянного внимания и громадных физических упрочнений.
Большая часть пользователей для горизонтального перемещения применяет скроллбар, а не стрелки прокрутки — это, помой-му, облегчает исполнение задачи. Однако, двигаться по «узкому туннелю» полосы прокрутки тяжело, по причине того, что подобное воздействие требует от пользователя тщательного управления курсором мыши для перемещения слайдера («ползунка») по скроллбару.
Тут мы имеем дело с частным случаем «закона вождения» (steering law), гласящего, что время, нужное пользователю для движения показывающего устройства (слайдера, в нашем случае) через условный тоннель, зависит от длины и ширины тоннеля: чем он уже и дольше, тем больше времени это займет у пользователя.
Из чего направляться вывод: применение горизонтальной полосы прокрутки имеет так именуемую «большую цена сотрудничества» (high interaction cost), что отталкивает пользователей от завершения действия. Как заявил один из участников опытов по применению горизонтального скроллинга: «Мне думается, что на прокрутку у меня ушла целая вечность!».
- Минимизируйте когнитивную нагрузку для оптимизации юзабилити
2. Пользователи смогут проигнорировать контент, дешёвый через горизонтальную прокрутку либо свайпинг, потому, что они не ожидают его в том месте отыскать.
Изучения говорят о том, что кроме того сильные визуальные сигналы, такие как стрелки, довольно часто остаются незамеченными. Люди ожидают, что им придется скроллить по вертикали в отыскивании дополнительного контента, но горизонтальная прокрутка ни с чем подобным у них не ассоциируется: подобное воздействие противоречит ментальному шаблону восприятия веб-страницы.
Тепловая карта сеанса айтрекинга на Apple.com: пользователи не обращают внимания на стрелки прокрутки, соответственно, не видят дополнительного контента
3. Кроме того очевидные сигналы для горизонтальной прокрутки имеют не сильный информационную насыщенность.
Кроме того в случае если люди подмечают сигналы о горизонтальной прокрутке, они вряд ли рискнут загружать непредсказуемый контент. Содержимое, скрытое за границами полей горизонтального скроллинга, находится в заведомо невыгодном положении, по причине того, что кроме того характерные визуальные символы (стрелки) владеют не сильный информационной насыщенностью: пользователь вряд ли может додуматься, что за данные он возьмёт, надавив на стрелку прокрутки либо самоотверженно прокрутив скроллбар.
Еще выше риск разочарования для тех вариантов страницы, где вся она может «свайпиться» всецело, дабы сделать новый контент дешёвым: визитёр, быть может, вытерпит долгую процедуру ожидания полной загрузки новый страницы, дабы убедиться, что открывшийся его глазам контент полностью нерелевантен его заинтересованностям.
USAToday.com: пользователи не пользуются стрелками горизонтального скроллинга, по причине того, что не знают, что откроется при нажатии
- Из-за чего стереотипныe лендинги и сайты конвертируют лучше?
Советы по имплементации горизонтальной прокрутки либо свайпинга на веб-страницу для ПК
Если вы подумываете об имплементации жеста «скольжения пальцем» либо горизонтального скроллинга на страницу сайта, которая будут отображаться на мониторе настольного компьютера либо ноутбука, то вот пара нужных советов.
1. Не разрешайте «свайпить» первичную навигацию
Если вы не желаете совсем убрать горизонтальную прокрутку html, то, по крайней мере, не заставляйте визитёров обязательно «свайпить» ваш контент: кое-какие захотят, но многие — нет. Разрешите другие методы навигации: разрешите пользователям перемещаться и посредством меню. Меню скажет, что имеется на сайте и окажет помощь отыскать нужную информацию. Визитёры надеются на первичную навигацию, дабы углубиться в веб-ресурс либо перемещаться по категориям.
Без глобальной навигации им сложнее искать дополнительный контент.
Dennys.com: таковой дизайн снабжает очевидную глобальную навигацию в дополнение к стрелкам для свайпинга контента. При тестировании обнаружилось, что пользователь ни при каких обстоятельствах не применял стрелки. Вместо этого он надеялся только на глобальную навигацию и смог выполнить все задачи удачно.
2. Не заставляйте пользователей гадать, сколько еще контента осталось
Применяйте полосу прокрутки с индикацией либо нумерацию страниц. Это неизменно прекрасно — продемонстрировать визитёрам, где как раз они находятся на вашем ресурсе, дабы они имели возможность лучше ориентироваться. Сообщите людям, сколько еще контента им предстоит освоить: осмысленное перемещение вперед неизменно лучше слепого блуждания без цели.
Amazon.com: нумерация страниц наглядно показывает, сколько еще вариантов офферов осталось взглянуть
- Когнитивный интернет и диссонанс-маркетинг
3. Создайте очевидные, неизменно видимые сигналы для свайпинга
Вместо того, дабы горизонтальную полосу прокрутки, разрешите визитёрам без лишних сложностей продвигаться через ваш контент посредством кликов мыши либо клавиш клавиатуры. В случае если стрелки прокрутки видны лишь при наведении на них курсора (как на примере ниже), многие просто не додумаются, что содержимого на ресурсе значительно больше.
Netflix.com: в простом состоянии нет визуальных подсказок, показывающих, что доступно больше контента (вверху). Стрелки для горизонтального скроллинга появляются лишь при наведении курсора мыши (внизу).
- Оптимизация юзабилити основной страницы вебмагазина
Вывод
Горизонтальные прокрутка и свайпинг на мониторе десктопа относятся к совсем второму типу пользовательского опыта, нежели при применении их на сенсорных дисплеях смартфонов и планшетов. Перед нами наглядный пример того, из-за чего веб и маркетологи-дизайнеры должны осознавать, что люди применяют сотовые телефоны, настольные компьютеры и планшеты по-различному, и из-за чего выгодно оптимизировать дизайн ресурса под любой вид устройств.
Не требуется нарушать устоявшиеся пользовательские паттерны восприятия лишь для того, дабы выделиться на фоне соперников по маркетинговой нише. Вместо этого лучше оценить, подходит ли горизонтальный скроллинг ожиданиям и запросам вашей целевой аудитории, улучшит ли ваше технологическое новшество юзабилити ресурса — либо, увы, напротив.
Высоких вам конверсий!
По данным nngroup.com, image source Jatin Shah
Случайные статьи:
- 5 Главных причин, мешающих вам принять рациональное решение
- Как избавиться от всего лишнего и увеличить конверсию лендинга?
Четыре жеста для управления Андроид
Подборка похожих статей:
-
«Ложное дно», или иллюзия конца страницы
UX-неточности довольно часто остаются незамеченными, но лишь не для визитёров сайта. Как гласит высказывание компании IBM: «Удобство применения возможно…
-
Размышляем на тему длинной прокрутки, или так называемого скроллинга
Чем меньше экран, тем дольше прокрутка. Эта азбучная истина растолковывает популярность долгой прокрутки либо скроллинга: с того времени как мобильный…
-
Управление репутацией в smb: хватит быть котом в мешке для своих клиентов
Из-за чего руководить репутацией принципиально важно не только большим брендам, но и SMB? Как верно организовать хороший образ компании и обойти…
-
31 Идея для мобильных лендингов, которые стоит взять на вооружение. часть 1
Подмечали ли вы, что кое-какие мобильные приложения и сайты сделаны так как следует, что вы, кроме того не долго думая, осуществляете конверсию? Все это…