2021 Scroll Survey Report と、Chrome チームが Chromium とウェブの優先事項と計画にどのような影響を与えるかについて語ります。
Chrome チームは 4 月に、2019 MDN Web DNA Report で報告された主な問題に基づいて、スクロールとタップ操作に関するアンケートをリリースしました。2021 スクロール アンケート レポートが完成しました。Chrome チームは、アンケート結果から得られた考えとアクション アイテムを共有したいと思います。これらの結果が、ブラウザ ベンダーと標準グループがウェブのスクロールを改善する方法を理解する一助となることを願っております。
2021 年のスクロール アンケート レポートをご覧ください。
注目すべき結果
このアンケートでは、880 件の回答が匿名で収集され、366 件がすべての質問に回答しました。
スクロールの開始は overflow-x:
scroll; のような 1 行の CSS ですが、スクロール API とオプションの範囲は広く、JavaScript から CSS にまで及びます。次の結果は、ウェブ デベロッパーが直面している問題をハイライト表示するのに役立ちます。
ウェブ スクロールについての全体的な満足度
質問 27
45%
ウェブのスクロールについてややまたは非常に不満
です。
この質問は、26 のスクロール ユースケースと機能に関する質問の後に、アンケートの最後近くに意図的に配置されています。回答から、ウェブ コミュニティがスクロールに苦労していることは明らかです。回答者のほぼ半数が全体的な不満を 報告しています
スクロールでの操作に関する全体的なセンチメントがこれほど低くならないようにする必要があります。この指標は変更する必要があります。これは、作業が必要なことを明確に示しています。
スクロールの操作が難しい
問題 2
43%
ややまたは
非常に困難
にスクロール操作が行えると報告しています。
Google の調査によると、これらの課題はスクロールの多数のユースケースに起因しています。スクロールについて言及する場合には、次のようなものが挙げられます。 - スクロール可能な領域内での要素の配置 - 無限スクロール - スクロール リンク アニメーション - カルーセル - スクロールビューのパディング - 周期的なスクロール - 仮想スクロール
ブラウザ機能の欠如、複雑な JavaScript、タップ、キーボード、ゲームパッドなどの入力モードをサポートする必要があるため、これらのすべてが難しくなります。
タッチ操作の重要性
問題 3
51%
タップ操作が仕事にとって非常に重要または非常に重要
と回答している。
モバイルウェブ ユーザーのアクセス統計は引き続き増加しているため、回答者の半数がウェブでの作業にタップが非常に重要であると回答したのも驚くには値しません。これは、CSS のスクロール スナップや touch-action などのウェブ機能で質の高いタップ操作を提供するには、特別な配慮が必要であることを示しています。
Tab キーまたはゲームパッドの操作がしづらい
問題 5a
44%
ゲームパッドとタブ ナビゲーションがややまたは非常に難しいと報告している
スクロールには、キーボードの矢印キー、タブキー、スペースバーの押下、ゲームパッドなどのナビゲーション方法が含まれますが、カスタム スクロール処理を行う際にこれらを含めることは困難です。回答者のほぼ半数が、これらの入力を組み込むのがやや難しい、または非常に難しいと回答しています。
学習 touch-action
問題 9
50%
アンケートから、
`touch-action: manipulation`
に関する学習を報告します。
特定の API の使用に関するアンケートの質問で、「はい」、「いいえ」、「今日学習した」という回答が考えられます。注目すべきフィードバックの一つは、アンケートから touch-action について学んだという回答が多数あったことです。これは、スクロール内で操作する必要があるカスタム タップ ジェスチャーを構築する際に重要なプロパティです。
循環スクロール
質問 27
58%
循環スクロールを使用して、時々、頻繁に、またはすべてのプロジェクトで
が報告されます。
60 秒後に 0 から再び始まります。
この数値は、ウェブ プラットフォームが提供するサポートがほとんど、またはまったくないスクロール機能の場合は高くなります。そのため、この機能では、効果を強制するために重複や JavaScript の挿入が発生し、技術的な負債が大量に発生することがよくあります。商品カルーセルや、秒単位または分単位で時間を選択して循環スクロールする場合によく使用されます。
スクロール可能な領域は重要ですか？
問題 2
55%
非常にまたは
重要
16%
まったく重要ではない
またはあまり重要ではない
回答者はスクロール可能な領域の重要性を強く感じており、高品質のスクロールを実現するために必要な課題に関する別のシグナルとなっています。
カルーセル
問題 20
87%
カルーセルを使用した経験がある。
24%
管理が簡単であると報告しています。
ほぼすべての回答者がウェブワークにカルーセルを表示していますが、カルーセルを管理しやすいと答えた回答者はわずか 25% でした。調査中、市販のカルーセルが人気でしたが、この統計情報は、あまり解決されていないように思えるため、驚きました。
無限スクロール
質問 22
65%
時々
すべてのプロジェクト
60%
ややまたは
非常に難しい。
回答者の 3 分の 2 がウェブで無限スクロールを提供しており、同じ割合の回答者が、実装が難しいと回答しています。使用頻度が高いにもかかわらず難易度が高いという、注意が必要な領域の例です。
content-visibility と contain-intrinsic-size を組み合わせて、長いスクロール可能な領域のレンダリング コストを削減することはできますが、「もっと読み込む」無限スクロールの UX には役立たないようです。
スクロール リンク アニメーションまたはスクロール トリガー アニメーション
問題 24
47%
時々
すべてのプロジェクト
56%
ややまたは
に報告します。
非常に難しい
回答者のほぼ半数がスクロール アニメーションを使用しており、その半数は使いづらいと回答しています。これは、使用頻度が高いと使いづらいと感じる傾向が再び示されています。
組み込みのスクロール機能と競合する
問題 26
32%
常にまたは
ほとんどの場合
50%
ときどき
スマートフォンやタブレット アプリケーションに組み込まれているスクロールとタップによる操作は、ウェブが追いつくべき明確な場所としてしばしば宣伝されています。これらの機能には、スクロールリンク アニメーション、プログラマティック インターフェース、音声統合、スクロールのヒント、pull して更新の API などがあります。
回答者の半分だけが、組み込みのスクロール エクスペリエンスに匹敵するエクスペリエンスを提供できると回答しています。
ウェブでのスクロール操作の作成に関する全体的な満足度
質問 27
アンケートのまとめ
アンケート結果は、互換性、教育、API、機能の 4 つのカテゴリに分類されています。
互換性
Chrome チームは、スクロールの互換性など、ウェブの互換性に関する問題の発生を減らすことを目標として掲げています。
最初に確認すべき 3 つの互換性の問題は次のとおりです。
1. 水平スクロールの互換性。1. overscroll-behavior クロスブラウザ。1. -webkit-scrollbar から接頭辞を削除し、標準に準拠しました。
教育
アンケート結果から、touch-action と論理プロパティについて、より多くの教育が必要であることが明らかになりました。このブラウザは国際的なレイアウトの最前線にあり、十分に活用されていないか、誤解されていることが明らかです。
重点分野:
1. touch-action
1. 論理プロパティ
API
スクロール スナップの使用は増加しており、一般的なライブラリやプラグインと相互運用できる機能を使用したいという声がデベロッパーから寄せられています。CSS とプラグイン ライブラリのギャップを縮小することで、スクロール スナップのデベロッパーとユーザーの満足度を高めることができます。
API での作業は scroll-snap を中心に説明します。
1. ブラウザ間での API の可用性と互換性。
1. scroll-start などの新しい CSS API の作業を開始します。1. snapChanged() などの新しい JS イベントの作業を開始します。
機能
このアンケートの結果から、ウェブのスクロール関連の特定のコンポーネントについては、プラットフォームにはプラグインや大掛かりな労力を必要とせずにビルドに必要なプリミティブが提供されないため、ユーザーは苦労していることがわかりました。この点については、今後さらに詳しく調査したいと考えています。
デベロッパーが構築に苦労する機能には、次のものがあります。 1. カルーセル 1. 仮想スクロール 1. 無限スクロール
リソース
サムネイル画像: Taylor Wilcox 撮影（Unsplash）。