ここ最近でよく見られるようになってきた、Webサイトやアプリで読み込み中に”読み込み後の表示構造”を簡素に表示させユーザーにそのページに何が表示されるか連想させるスケルトンスクリーンについて考察します。
スケルトンスクリーンはローディング画面
当初この画面を見たとき最初はどういう名称でどういう技術なのか未知数でした。今でこそ知っていますがこの画面の名称はスケルトンスクリーンといいます。 簡単に言うと骨組みローディング画面です。
既にご存知かもしれませんが他のローディング画面手法についてもそれぞれ名称があります。
- ブランクスクリーン(画像左)
- ローディングスピナー(画面中央)
- スケルトンスクリーン(画面右)
スケルトンスクリーンを考察するにあたって上記であげた他の手法と一緒に考えてみます。
ブランクスクリーン
ブランクスクリーンは要素が読み込まれるまで何も表示されないまっさらな画面です。通常のサイトやアプリはこの場合が多いですよね。今閲覧されている私のサイトもそうです。
“何も表示されないからよくない”という事はなくこの場合が適しているケースもあります。
読み込む時間がほぼない、もしくは極端に少ない場合はブランクスクリーンが適しています。読み込みが一瞬なのに対し、ローデング画面やスケルトンスクリーンを実装するのは多少なりとも負荷を上げてしまい読み込みに支障がでてしまうことと、読み込む一瞬でユーザーにそのアクション(情報)を伝える必要性がないからです。
通常のサイトはこのブランクスクリーンで問題ないでしょう。
ローディングスピナー
通常よく見るローディング画面です。Web閲覧やアプリをよく触っている方は一度は目にしたことがあるかと思います。
まず理解する上で考える必要があるのは、なぜこのローディング中(読み込み中)ということを伝える手法が使われるのでしょうか。
読み込むまでしばらく画面が何もない状態だとユーザーは
- ページが固まった
- 読み込み失敗した
- 何らかしらのエラーが発生した
- ボタンが押せて(タップ)いないのかも
などの体感を与え、ページリロードを繰り返したり最終的には離脱に大きく影響します。これは勘違いのユーザー体験となります。
上記で挙げた対策のために、”読み込んでいます”という表現でその先があることを明確に伝える必要性が出てきました。
そしてローディングスピナーによってユーザーが勘違いする割合を大きく減らすことができるようになりました。
このように読み込み時間が大きく発生するページはユーザーに間違った体験を与えないようにローディングスピナー(ローディング画面)などを使う事が効果的です。
スケルトンスクリーン
ではこのスケルトンスクリーンはいつ使うべきなのでしょうか。
結論から先に言うと、ローディング画面を必要とするまでもないくらい短い読み込みが発生する場合が適しています。
スケルトンスクリーンについて、今挙げた3つの手法の中でも一番新しい割と最近普及してきたものとなりますが、この手法はなぜ生まれたのでしょうか。
スケルトンスクリーンの与えるユーザー体験として、 ・段階的に表示させる感覚を与える(読み込み感) ・ページの読み込み後がある程度想定できる(理解する準備)
大きく上記の2点があります。
次に表示される時間を考えてみましょう。
読み込み時間かなり短い場合、この画面はチラツキでしかなくユーザーに違和感を与えてしまいます。 次に読み込み時間が少しかかる場合、この場合は有効で段階的に画面を読み込みさせてる表現が作り上げられます。その他効果はありますが大きな効果としてはこのことでしょう。 最後に、読み込み時間がかなりかかる場合、この場合は上記でも挙げている「画面が何もない状態」になります。そのため向いていないでしょう。 これを回避するためにシマー効果を取り入れたりする場合がありますが、読み込み負荷も上がりますので個人的にはおすすめしません。
海外ではスケルトンスクリーンを導入してテストした事例があり、その結果すべてがよくない結果でした。導入しないよりもした方が悪化したという結果だったのですが、一概にこれがすべてではなく、読み込み時間に影響したり、場合によっては適した対応が異なります。
使い方が適していれば有効なものだと私は考えます。
使いたいから使うのではなく読み込み時間に適した使い方をすべき
YouTubeやFacebookなどで使われ新しい手法は使いたくなるのがクリエイターや制作側としての性だとは思いますが、まずは本当に必要なのか必要であれば何が適しているのかを検討することが大事です。 どちらかだけではなく、併用して使うのも効果的です。
物にもよりますが、使う(伝える)のは制作者ではなくユーザーでありユーザーである第三者がどうあればこの情報は伝わりやすいのかを考える必要があるのです。