ページローディング時にユーザーの興味を維持するためのスケルトンスクリーン

ニールセンではResponse Time Limits: Article by Jakob Nielsenにおいて下記のように述べています。

  • 0.1秒:心理的・感情的な違和感を感じない
  • 1秒:思考の流れが妨げられない
  • 10秒:注意力を維持する限界

さらに

A snappy user experience beats a glamorous one
てきぱきとしたユーザーエクスペリエンスは見かけの華やかさに勝る。
Website Response Times

とも言っていて、表示速度の重要性を挙げています。

スケルトンスクリーンの登場

一方で、表現できる幅が広がるにつれ、ページのサイズは上がっていきます。
このジレンマを解消するため、従来はスピナーと呼ばれるローディング画像が使用されてきました。
ページローディング時にユーザーの興味を維持するためのスケルトンスクリーン

しかし、ローディング時間が長ければ、この表現方法は効果を発揮しません。
そこで最近登場してきたのが、スケルトンスクリーンです。
実際のものは下記です。
ページローディング時にユーザーの興味を維持するためのスケルトンスクリーン
出典:4 Ways Animation Can Actually Improve User Experience

このように徐々にコンテンツの枠組みを見せることで、ユーザー期待値の減少を和らげることが可能になります。
Facebookも取り入れていたこの手法、選択肢の一つとして考えてみてはいかがでしょうか。
ページローディング時にユーザーの興味を維持するためのスケルトンスクリーン
出典:Explore skeleton pattern as alternative to loading spinner · Issue #38 · ksux/ks-design-guide · GitHub

アプリでの事例(Polar on the App Store on iTunes
ページローディング時にユーザーの興味を維持するためのスケルトンスクリーン
出典:Explore skeleton pattern as alternative to loading spinner · Issue #38 · ksux/ks-design-guide · GitHub

design > ページローディング時にユーザーの興味を維持するためのスケルトンスクリーン