UI観察 - 読み込み中のプレースホルダー（スケルトンスクリーン）
アプリ起動時やタップしてページを読み込んでいる時には、何も表示されていないとユーザーは不安になってしまいます。そのため、読み込み中を知らせるプレースホルダー（スケルトンスクリーン）が実装されていることが多いです。
その機能のアプリ別の挙動についてまとめたので、それぞれ紹介していきます。
（その他のUI観察記事はマガジンはこちら ↓）
スケルトンスクリーンとは
スケルトンスクリーンは、画像やCSS、JavaScriptを読み込んでいる間にワイヤーフレームのようなボックスを表示し、UXを向上させるために使われる。 ユーザにとってはプログレスバーやスピナーと違いどんなページが表示されるか予想できるため、ロード時間が長くても心理的に短く感じられる。
引用に記載の通り、どんなページが表示されるのかユーザーが予想できるのがメリットとなります。
スピナーとの違いとして、スケルトンスクリーンは待機時間でなく進行状況に焦点を当てています。情報が段階的に読み込まれるため、読み込んでいるというのが伝わります。その意味でいうとプログレスバーと同じ手段のカテゴリに含まれるかもしれません。
アプリの「スケルトンスクリーン」事例
スケルトンスクリーンが使用しづらいケース
スケルトンスクリーンは、実際に読み込まれるグレーパターンのレイアウトが表示されるというのが前提となります。そのためスケルトンスクリーンと実際のレイアウトが一致していないとユーザーは違和感を感じてしまいます。
上記記事のLINE NEWSでは、ユーザーによってパーソナライズされた広告を配信するため、それぞれレイアウトの異なる広告にあったが表示される。これはスケルトンスクリーンが使用しづらいケースといえますが、下記方法で解決されています。
しかしいくつかの工夫により、その懸念は解消されました。1つは切り替え時のフェードアウトアニメーションを細かく調整したこと。もう1つはSkeletonScreenのデザインをある程度出現頻度の高いレイアウトに寄せたことです。中でも、ユーザーの目線が集中しがちな画面上部のSkeletonScreenを実際のコンテンツに限りなく近づけたことで、SkeletonScreen解除時の違和感はかなり解消されていると思います。
- ログミーTech
画面によっては、スケルトンスクリーンと実際に読み込まれる画面に差異があったが、普通に操作している分には、ほぼ違和感は感じなかった。注意してみないと気づけないレベル。一部画面で多少の差異が出る程度なら、配置が異なるスケルトンスクリーンを使用しても問題ないと言えるでしょう。
さいごに
UI観察 - 読み込み中のプレースホルダー（スケルトンスクリーン）について簡単に書きました。スケルトンスクリーンは読み込みを長く感じさせない手法として一般的になりましたが、使用できるケースとしづらいケースがあります。見極めた上で実装を検討しましょう。参考になると幸いです。
参考記事
この記事が気に入ったらサポートをしてみませんか？