ユーザーを飽きさせないためのローディングアニメーションの10選

Nick Babich

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。

この記事はUX Planetからの翻訳転載です。配信元または著者の許可を得て配信しています。

10 Creative Loading Indicators (2018/9/9)

読み込みが長過ぎると皆こうしたくなります。 画像:Gal Shir

システムのステータスを視覚化することは、UIデザインの指針の中でも最も重要なものの1つです。

良いインタラクションデザインはフィードバックを与える

アプリやWebサイトから即座に反応があれば1番良いですが、読み込みが遅いときもあります。反応が遅いのは、インターネットの接続が悪いせいかもしれませんし、オペレーションそのものに時間がかかっている可能性もあります。そのような場合、デザイナーは、アプリが実際に作動しておりリクエストに取り組んでいるということが分かるよう、ユーザーを安心させなくてはなりません。

アニメーションによる待機表示は、何か起こっている、もしくは読み込んでいる際に、ユーザーにシステムの状態を知らせる最も一般的な形です。しかしこれらの表示のほとんどは、クリエイターがただデフォルトで提供されているものを採用しているだけなので、見ていて面白くありません。

ユーザーは、この連続的な読み込みスピナーを見れば、コンテンツが読み込み中だとわかります。毎秒市場に出るアプリはこれを使っています。

待ち時間を短くできないのなら、少なくともその時間がユーザーにとって嬉しいものにするべきである

クリエイティブな進度表示は、ユーザーの感じる時間を短くすることができます。待っている間に見ていて面白いものをアプリが表示すれば、待っているということに対する注意を減らすことができるでしょう。ユーザーが次の段階に移る前に待ちくたびれてしまわないよう、デザイナーはその注意を引く何かを提供しましょう。

この記事では、読み込み表示の面白いコンセプトを10個紹介していきたいと思います。

1. 採用情報の読み込み

ueno. は待ち時間に彼らのチームメンバーを紹介する表示を使用しています。

2. クリスマスプレゼントを読み込み

まるでプレゼントを積み込んでいるようです。画像:Chuan²

3. かわいい猫

読み込みスピナーを使うのではなく、デザイナーは(願わくば)ポジティブな感情を与えるものを創作できるでしょう。画像:Thomas Bogner

4. 2重らせん

この読み込みアニメーションは3D効果をもたらします。画像:Drew Endly

5. 最適なフライトを検索

出発地と目的地を選択し、「検索」ボタンをクリックすると、選択した場所の間を飛ぶフライトのアニメーションが現れます。画像:Mark

6. データをクラウドに保存

この読み込み表示は、クラウドにファイルをアップロードしている様子を描いています。下から上へ、まるで文字通り「アップ」ロード。画像:Ben Mettler

7. 読み込みプロセスを生き生きと

このアニメーションは読み込みプロセスを、綱渡りを見ているのと同じくらい楽しく見せます。画像:xjw

8. スプラッシュスクリーンの芸術的アニメーション

芸術的なアニメーションを伴ってスプラッシュスクリーンが美しくデザインされていれば、アプリ開発者がデータのダウンロードに暇を持て余すことはありません。画像:Behance

9. 画面を下に引くと出るアニメーション

この「引くと出るアニメーション」はアップデートの前後を繋ぐという明確な目的があります。画像:Ramotion

10. ファイルアップロードのアニメーション

このアニメーションは、なめらかなステータス変化を表現する素晴らしい作例です。最後に出るチェックマークで、オペレーションが成功したことがわかります。画像:Eddy Gann

まとめ

上記のすべての効果はユーザーエクスペリエンスを向上することができるにせよ、それらを使いすぎるのも考えものです。

100回も同じものを見れば、最初は楽しくかわいかったアニメーションも、つまらなくなり、何が出るかユーザーはもう分かりきってしまいます。また、いくらクリエイティブな効果をもたらしても、読み込み時間の遅さを解決することはできません。毎回同じ効果を見ていると、ユーザーは読み込み時間が遅いと責め始めるでしょう。


イベント