2021 年のスクロール アンケート レポートと、これが Chromium とウェブの優先事項や計画にどのように影響しているかについて、Chrome チームが語ります。
Chrome チームは 4 月に、2019 MDN Web DNA Report で報告された主な問題を基に、スクロールとタップ操作に関するアンケートを公開しました。2021 年スクロール調査レポートが用意できました。Chrome チームは、アンケート結果から得られた意見やアクション アイテムを共有したいと考えています。この結果が、ブラウザ ベンダーや標準グループがウェブ スクロールを改善する方法を理解する一助となれば幸いです。
2021 年スクロール アンケート レポートをご覧ください。
注目すべき結果
匿名で 880 件の回答を集め、すべての質問に 366 人が回答しました。
スクロールは、overflow-x:
scroll; のように 1 行の CSS から始める必要がありますが、スクロール API とオプションの表示領域は大きく、JavaScript から CSS まで多岐にわたります。次の結果は、ウェブ デベロッパーが直面する問題を明らかにするのに役立ちます。
ウェブ スクロールの全体的な満足度
問題 27
45%
ウェブのスクロールについて、
全体的にややまたは非常に不満である
この質問は、26 のスクロールのユースケースと機能に関する質問の後に意図的に配置されています。この回答から ウェブコミュニティが スクロールに苦戦していることは明らかです回答者のほぼ半数が全体的な満足度に 不満があると回答しています
Google は、スクロールの使用に関する全体的なセンチメントが、これほど低くあってはならないと考えています。この指標は変更が必要であり、改善の余地があることを明確に示しています。
スクロール操作がうまくいかない
問題 2
43%
スクロールの操作がややまたは
非常に難しい
と報告しています
Google の調査によると、こうした困難はスクロールのユースケースが多いことに起因しています。スクロールについて説明すると、次のようなものが該当します。 - スクロール可能な領域内での要素の配置 - 無限スクロール - リンクされたアニメーション - カルーセル - スクロールビューのパディング - 周期スクロール - 仮想スクロール
ブラウザ機能がなく、複雑な JavaScript である、タップ、キーボード、ゲームパッドなどの入力モードをサポートする必要性などにより、これらすべてがさらに難しくなります。
タップ操作の重要性
問題 3
51%
タップ操作を
「非常に」または「非常に重要」として報告する。
モバイルウェブ ユーザーの訪問統計は依然として増加傾向にあるため、回答者の半数がウェブでの仕事にはタップ操作が非常に重要であると回答しているのも当然です。これは、CSS のスクロール スナップや touch-action などのウェブ機能については、ウェブで高品質のタップ操作を実現するために特に注意する必要があることを示しています。
Tab キーまたはゲームパッドのナビゲーションが困難
問題 5a
44%
のゲームパッドとタブのナビゲーションがややまたは非常に難しいと報告している
スクロールには、キーボードの矢印、Tab キー、スペースバーの押下、ゲームパッドなどのナビゲーション方法が含まれますが、カスタム スクロール作業を行う際には、これらの操作を含めることが難しい場合があります。回答者のほぼ半数が、これらの入力情報を含めることがある程度または非常に難しいと回答しています。
学習中: touch-action
問題 9
50%
アンケートから
`touch-action: manipulation`
に関する学習を報告します。
アンケートの質問の中には、特定の API の使用について尋ねられており、答えは「はい」、「いいえ」、「今日学んだこと」のいずれかです。注目すべきフィードバックの 1 つは、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%
always または
ほとんどの場合
50%
ときどき
スマートフォンやタブレット アプリに組み込まれているスクロール操作とタップ操作は、ウェブが追いつくことができる場所としてよく宣伝されています。機能には、スクロールリンク アニメーション、プログラマティック インターフェース、音声統合、スクロールのヒント、pull-to-Refresh 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