スケルトン スクリーン: スピナーの代わりにスケルトン スクリーンを使用する場合

スケルトン画面とは

Nielsen Norman Group は、ワイヤーフレームのようなビジュアルでレイアウトを模倣する読み込みページのプレースホルダーとしてスケルトン画面を定義します。これはページ全体の読み込みに使用され、人々は空の領域ではなく、これから来るものの構造を見ることができるため、知覚される読み込み時間を短縮します。

いつどれを使うか

インジケーターを内容と待機時間に合わせます。

• スケルトン: フィード、カード、プロフィールなど、レイアウトがわかっているページまたはリストがロードされます。
• スピナー: 形状が予測できない小さな領域、ボタン、またはコンテンツ。
• プログレスバー: アップロードやエクスポートなど、測定できる長いタスク。
• 何もありません: 非常に高速な応答で、インジケーターがちらつくだけです。

良い骨格を設計する

実際のコンポーネントの寸法を使用して、コンテンツが到着したときにページが移動しないようにします。これにより、累積レイアウト シフト スコアも保護されます。図形をシンプルに保ち (画像にはブロック、テキストにはバー)、低コントラストのグレーを使用し、各プレースホルダーは準備ができ次第、すべてを待つのではなく実際のコンテンツに置き換えます。

スケルトンのアニメーション化

NN/g は、一部のスケルトンには、システムがまだ動作していることを示す、パルスまたは点滅するアニメーションが含まれていることを指摘しています。ゆっくりと微妙に保ち、レイアウト プロパティではなく不透明度または変換をアニメーション化し、モーションの減少がオンになったら停止します。読み込み領域に「結果の読み込み」などのアクセス可能なラベルを付けます。