Прокрутка снова превращается в основной элемент взаимодействия. Это означает, что дизайнеры должны изучить новые правила ее использования.

Почему прокрутка возрождается

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

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

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

Длинная прокрутка развивалась вместе с карточным дизайном. В сочетании они предоставляют пользователям бесконечный поток контента.

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

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

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

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

Прокрутка подходит всем?

Преимущества прокрутки:

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

Недостатки прокрутки:

• Наличие только одной страницы на сайте может негативно повлиять на SEO-продвижения сайта.
• Несогласованность между прокруткой и контентом может привести пользователей в замешательство.
• Трудности навигации – неудобно «возвращаться» к предыдущему контенту, размещенному на веб-странице. Чтобы исправить это, можно создать статичное верхнее меню навигации, в котором каждый элемент привязан к разделу страницы.
• Большие фрагменты контента, такие как видео или галереи изображений, могут замедлять скорость работы сайта. Особенно использующие прокрутку с эффектом параллакса на JavaScript и jQuery.
• На сайтах с бесконечной прокруткой рекомендуется использовать минимальный «липкий» футер, чтобы не жертвовать функциями навигации. Отсутствие дополнительных элементов навигации внизу страницы может запутать пользователей.

Длинная прокрутка больше всего подходит для сайтов:

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

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

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

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

Рекомендованные практики реализации прокрутки

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

Вот несколько советов для успешной реализации длинной прокрутки.

1. Не бойтесь чередовать длинную прокрутку с короткой. Пусть контент диктует длину прокрутки, а не наоборот. Совершенно нормально использовать главную страницу с короткой прокруткой и целевые страницы с длинной прокруткой (например, «Продукты», «Обзор» и т. д.).
2. Подумайте об использовании липкой навигации, чтобы пользователи всегда могли быстро «вернуться» или перейти к другому элементу.
   
3. Стрелки и анимированные кнопки — это простой способ помочь пользователям определить, что делать дальше.
4. Создайте четкие различия между элементами прокрутки и призывами к действию.
5. Проанализируйте, как ваши пользователи взаимодействуют с прокруткой. Для этого можно использовать Google Analytics (вкладку «Аналитика страницы»). Она показывает количество посетителей, перемещающихся ниже первого сгиба. Основываясь на этих данных, можно настроить дизайн соответствующим образом.
6. Длинная прокрутка не означает 500 страниц непрерывного контента. Не усердствуйте сверх меры.
   
7. При создании сайтов с более длинной прокруткой следует понимать, что пользователям по-прежнему требуется чувство ориентации.
8. Включите визуальные подсказки, которые помогают ориентировать пользователей.

Бесстраничные проекты будущего

Переход от длинной прокрутки к дизайну без страниц уже начался, и некоторые дизайнеры даже считают, что это будущее интернета.

Интерактивный дизайн — это основа длинной прокрутки. Если пользователям нравится интерфейс, то они не будут обращать внимание на длину прокрутки (если она не слишком длинная).

Перевод статьи «The New Rules for Scrolling in Web Design»

http://vanar.md/ro/cursuri-web-designer/complex

Источник: https://www.internet-technologies.ru/articles/novye-pravila-dlya-prokrutki-v-veb-dizayne.html