На пользовательский опыт (User Experience, UX) могут повлиять мельчайшие детали. Большая часть того, что мы делаем в Интернете, совершается нами бессознательно. Мы рассеянно смотрим на экран, прокручиваем веб-страницы и взаимодействуем с контентом.
Однако несмотря на то что значительная часть действий пользователя может быть подсознательной, в бэк-энде нужно сознательно продумать каждую мелочь. Все аспекты вашего сайта должны учитывать желания и потребности в данный момент времени. Разработчики сайтов обязаны использовать данные клиентов и образы идеальных покупателей для идеального соотношения сложности и визуального оформления.
Скроллинг — это недооцененный, но крайне важный элемент UX. Узнайте, как он может улучшить UX или отвлечь от него и как внедрить лучшие практики, удерживающие посетителя на сайте.
Скроллинг — это миф?
В некоторых веб-дизайнерских кругах распространено мнение, согласно которому люди не скроллят. По этой причине дизайнеры по-прежнему разбивают контент на отдельные экраны или страницы, чтобы свести к минимуму практику прокрутки. Это ошибочно по нескольким причинам:
1. Длинный контент. Контент-маркетологи все больше склоняются к применению контента в длинной форме, так как это позитивно сказывается на поисковой оптимизации (Search Engine Optimization, SEO). Перепрыгивание по статье, состоящей из 5 страниц, может оказаться утомительным, особенно если пользователь делает это на экране мобильного устройства. Возможно, стоит отказаться от поста, практического руководства или учебника, если такой контент становится слишком сложным для чтения.
2. Тачскрины. Мобильные девайсы и сенсорные технологии естественным образом привели к утверждению прокрутки. Поскольку подобные устройства продолжают доминировать на рынке, скроллинг будет становиться все более стандартной практикой.
Нижеприведенные отчеты и исследования только подтверждают необходимость наличия удобного для прокрутки дизайна:
- Компания Cheatbeat, продающая решения для аналитики, проанализировала более 2 миллиардов посещений сайтов и обнаружила, что 66% внимания на типичной веб-странице приходится на часть ниже линии сгиба (Below the Fold) — люди специально скроллят, чтобы туда добраться.
- Айтрекинг-исследования гуру юзабилити Якоба Нильсона (Jakob Nielson) показали, что люди больше склонны сосредотачиваться на контенте, находящемся выше линии сгиба (Above the Fold), но при этом они все еще выполняют прокрутку, особенно когда страница соответствует определенным условиям, облегчающим данный процесс.
- На мобильном сайте около половины всех пользователей начинают прокручивать в течение первых 10 секунд, а 90% — в течение 14 секунд.
- Исследование, проведенное в Лаборатории исследований юзабилити программного обеспечения (Software Usability Research Laboratory), показывает, что пользователи читают длинные тексты с прокруткой быстрее сегментированных или разбитых на страницы.
- Согласно исследованию CX Partners, пользователи предполагают, что разработчики обычно создают дизайн с прокруткой, поэтому они по привычке начинают скроллить.
Подводя итог: если вы выстроите хороший дизайн, посетители будут прокручивать. Тогда возникает вопрос: «Как создать сайт так, чтобы внедрить в него прокрутку, и какие лучшие практики следует в этом случае применить?».
Сканирование и значение точек прокрутки
Люди склонны к быстрому просмотру контента, или «сканированию». Оно требует меньше умственных усилий, чем чтение всей статьи, поэтому мы быстро пробегаем текст глазами, пока не найдем что-то интересное. Этот принцип применим не только в веб-дизайне. Именно он стал причиной того, что супермаркеты размещают самые дорогие или популярные продукты на полках на уровне глаз, а менее привлекательные и дешевые бренды прячет на нижних полках.
Тем не менее, есть в дизайне своя специфика: мы разбиваем сканирование на так называемые «точки прокрутки» (Scrolling Points). Неумение разбивать важную текстовую информацию на ключевые моменты вызывает явление под названием «усталость от скроллинга». Она может привести к двум результатам:
- «Зомби-скроллинг» (Zombie Scrolling): пользователь постепенно теряет концентрацию внимания и меньше реагирует на «приманки» в ваших CTA (Call-To-Action — призыв к действию).
- «Отказ в гневе» (Rage-Quitting): пользователь раздражается из-за долгой прокрутки и покидает сайт, не усвоив его ключевые точки и не вынеся выводов.
Обдумайте использование следующих советов и подсказок при создании дизайна страницы, чтобы избежать негативных результатов и сохранить пользовательскую вовлеченность до конца.
Преподносите контент правильно
Первый способ побудить к скроллингу — так организовать контент, чтобы его легко было прокручивать. Вот предложения по оптимизации:
- Сильное начало: интересное введение захватит читателей и побудит прокрутить статью до конца. Сразу же выдайте некую мысль, развитие которой произойдет дальше по тексту, — так у них появится повод для чтения.
- На протяжении статьи вбрасывайте значимые для аудитории факты: чем важнее окажутся эти детали, тем вероятнее, что пользователи будут продолжать скроллить.
- Подходящие картинки помогают разбивать контент и удерживать интерес читателей. Имейте в виду, однако, что стоковые снимки не будут оказывать особенно позитивного влияния. Делайте выбор в пользу инфографики и уникальных кадров.
Остерегайтесь эффекта ложного дна
С точки зрения визуального дизайна одна из самых важных вещей, которые вы можете сделать для способствования прокрутке, — это избегать так называемого «ложного дна» (False Bottom). Этот феномен возникает тогда, когда пользователям кажется, будто ниже линии сгиба больше не будет контента. Конечно, область выше линии — это ваш основной капитал, но не менее важно дать понять, что и дальше есть ценный контент, доступ к которому обеспечивается скроллингом.
Визуально добиться этого довольно легко. Организовав контент в виде сетки или карточной системы, вы просто обрезаете сетку выше линии сгиба, и посетитель понимает, что ему нужно прокрутить страницу вниз, чтобы увидеть оставшийся контент.
Еще один метод предоставить визуальную подсказку — включить стрелки или надпись «Прокрутить вниз». Эти маленькие ухищрения могут вызвать большой прирост времени, проводимого человеком на сайте.
Фишки в навигации
Навигация может сыграть решающую роль в улучшении/ухудшении восприятия сайта, так что ее настройка является естественным решением ситуации. Длинный контент часто создает проблемы с навигацией, и пользователям может надоесть прокрутка то вверх, то вниз на десктопе или в мобильном формате. Простое решение — липкая навигация (Sticky Navigation). Когда навигация всегда видна, пользователям сайтов и приложений становится легче добраться до любой части контента. С целью экономии ценного экранного пространства, вы можете сделать навигационное меню доступным по запросу, и оно будет выскакивать при прокрутке около верха просматриваемой страницы. Особенно эффективно трюк работает на мобильных устройствах, для которых свойственно наличие ограниченного рабочего пространства.
Следуйте базовым правилам SEO
Длительная прокрутка может нанести роковой удар по вашей SEO. Почитайте базовые советы по работе с поисковыми системами, убедитесь, что ваш сайт попадает в начало страницы поисковых результатов. Проверяйте свой прогресс с помощью аналитический инструментов, чтобы узнать, приносят ли ваши усилия результат, или нужно внести коррективы на этом пути.
Скроллинг: выводы и секреты для профессионалов
Если вы думали, что скроллинг умер, то вам нужно освежить свои взгляды. Контент большого объема и мобильные гаджеты делают прокрутку все более актуальной.
Пользователи могут и хотят скроллить ниже линии сгиба при условии, что сайт делает это действие простым и интуитивным.
Лучшие практики применения прокрутки включают создание точек концентрации внимания, придумывание качественного и увлекательного контента, его разбивку и форматирование навигации таким образом, чтобы она способствовала скроллингу. Имея подходящие визуальные подсказки и интуитивный дизайн, вы можете увеличить время, проводимое пользователями на сайте, и даже использовать скроллинг для превращения потенциальных клиентов в реальных. Примените данные секреты на своем сайте, и результат вас не разочарует.
Высоких вам конверсий!
По материалам: usabilitygeek.com Источник картинки: iksiukasan
