Отчет об опросе прокрутки за 2021 год

Ознакомьтесь с отчетом о результатах опроса Scroll Survey за 2021 год, а также комментариями команды Chrome о том, как это повлияет на приоритеты и планы развития Chromium и веб-технологий.

Adam Argyle

Sam Dutton

В апреле команда Chrome опубликовала исследование по прокрутке и сенсорным действиям, основанное на наиболее часто сообщаемых проблемах из отчета MDN Web DNA за 2019 год . Отчет по исследованию прокрутки за 2021 год готов, и команда Chrome хотела бы поделиться некоторыми мыслями и планами действий, которые мы выявили на основе результатов исследования. Мы надеемся, что эти результаты помогут производителям браузеров и группам по стандартизации понять, как улучшить прокрутку веб-страниц.

Ознакомьтесь с отчетом об исследовании Scroll за 2021 год .

Примечательные результаты

В ходе анонимного опроса было собрано 880 ответов, из которых 366 человек ответили на все вопросы.

Хотя для начала работы с прокруткой достаточно одной строки CSS, например, overflow-x: scroll; , область применения API и параметров прокрутки обширна и охватывает все уровни — от JavaScript до CSS. Приведенные ниже результаты помогают выявить проблемы, с которыми сталкиваются веб-разработчики.

Общая удовлетворенность прокруткой веб-страниц

Вопрос 27

Этот вопрос был намеренно помещен в конец опроса, после вопросов о 26 вариантах использования и функциях прокрутки. Из ответов ясно, что веб-сообщество испытывает трудности с прокруткой. Почти половина респондентов сообщают об определенном уровне неудовлетворенности.

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

Трудности при работе со свитком.

Вопрос 2

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

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

Важность тактильного взаимодействия

Вопрос 3

Учитывая продолжающийся рост числа пользователей мобильного интернета , неудивительно, что половина респондентов отметила важность сенсорного управления для своей работы в сети. Это свидетельствует о необходимости уделения дополнительного внимания таким функциям веб-сайтов, как CSS-привязка к прокрутке и touch-action чтобы обеспечить высококачественное взаимодействие с пользователем.

Сложности при использовании клавиши Tab или геймпада для навигации.

Вопрос 5а

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

Обучение touch-action

Вопрос 9

В некоторых вопросах опроса задавались вопросы об использовании определенных API с возможным ответом «Да», «Нет» или «сегодня я узнал». Примечательно, что многие участники опроса сообщили об изучении touch-action , поскольку это критически важное свойство при создании пользовательских жестов касания, которые должны взаимодействовать при прокрутке.

Циклическая прокрутка

Вопрос 27

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

Важны ли прокручиваемые области?

Вопрос 2

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

Карусели

Вопрос 20

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

Бесконечная прокрутка

Вопрос 22

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

Хотя content-visibility и contain-intrinsic-size можно комбинировать для снижения затрат на отрисовку длинных прокручиваемых областей, это, похоже, не помогает в случае бесконечной прокрутки с функцией "загрузить больше".

Анимации, связанные с прокруткой или запускаемые при прокрутке

Вопрос 24

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

Конкуренция с помощью встроенной прокрутки.

Вопрос 26

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

Лишь половина респондентов посчитала, что добиться такого же качества работы, как со встроенной функцией прокрутки, удается лишь в редких случаях.

Общая удовлетворенность созданием интерактивных элементов при прокрутке веб-страниц

Вопрос 27

Основные выводы опроса

Результаты опроса разделены на четыре категории: совместимость , образование , API и функциональные возможности .

Совместимость

Команда Chrome поставила перед собой цель уменьшить количество проблем совместимости с веб-сайтами, включая проблемы с прокруткой.

Первые три проблемы совместимости, на которые следует обратить внимание: 1. Совместимость с горизонтальной прокруткой. 1. overscroll-behavior в разных браузерах. 1. Удаление префиксов из -webkit-scrollbar и следование стандарту.

Образование

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

Области, на которых следует сосредоточиться: 1. touch-action 1. Логические свойства

API

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

Мы сосредоточим работу над API для scroll-snap : 1. Доступность и совместимость API во всех браузерах. 1. Начать работу над новыми CSS API, такими как scroll-start . 1. Начать работу над новыми событиями JavaScript, такими как snapChanged() .

Функции

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

К числу функций, которые разработчикам сложно реализовать, относятся: 1. Карусели 1. Виртуальная прокрутка 1. Бесконечная прокрутка

Ресурсы

• Отчет об опросе по прокрутке
• Объявление об опросе
• Mozilla DNA сообщает
• Compat2021: Устранение пяти основных проблем совместимости в интернете.

Изображение для предварительного просмотра: фотография Тейлора Уилкокса на Unsplash .