もう退屈させない！読み込み時間を楽しくするクリエイティブなアニメーション

システムが今どういった状態にあるのかということの可視性はUIにおいて非常に大切です。

 

アプリやウェブサイトからの即時に反応が返ってくることが最善ではありますが、あなたの製品がスピードに関するガイドラインに準拠できないこともあります。インターネット接続が不良である場合や、操作自体に時間がかかる場合など、応答が遅くなることは多々あります。そのような場合、デザイナーは、アプリケーションが要求に応じてきちんと動作していること、および実際の進捗状況をユーザーに知らせ、安心感を与える必要があります。

 

待機アニメーションの進行状況インジケータは、何かが起きているときや読み込んでいるときにユーザーのシステムステータスを提供する最も一般的な形式です。しかし、製品の作成者は単にデフォルトのローディングインジケータを使用するだけなので、それらは退屈になりがちです。

 

クリエイティブな進捗インジケータは、ユーザーに時間を感じさせません。アプリを待っている間に見る、面白い何かをユーザに与えるなら、ユーザが待っていること自体にあまり注意を払わないようにすることが大切です。したがって、何かが起こるのを待っている間に人々が飽きないように、デザイナーは気を散らさせることができます。

 

この記事では、ローディングインジケータの10のエキサイティングなコンセプトを探求したいと思います。

 

 

1.インタビューがロードされています…

訪問者にチームを紹介し、待ち時間の苦痛を軽減します。画像：ueno

 

 

2.クリスマスプレゼントのロード

アプリがプレゼントをロードしているようです。画像：Chuan²

 

 

3.愛らしい猫

システムローディングスピナーを使用する代わりに、デザイナーはポジティブな（うまくいけば）感情を作り出すものを使うことができます。画像：Thomas Bogner

 

 

4.二重螺旋

この読み込みアニメーションは3Dの効果を作り出します。画像：Drew Endly

 

 

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

ユーザーがフライトの出発地と目的地を選択して[検索]ボタンをクリックすると、アニメーションは出発地から目的地までのフライトを表示します。画像：Mark

 

 

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

このローディングインジケータは、クラウドにファイルをアップロードするというメタファーに基づいています。垂直方向のプログレスバーはほとんど文字どおりのことを表します。画像：Ben Mettler

 

 

7.読み込みのプロセスを生き生きとさせる

このアニメーションは、誰かが綱渡りをしているのを見ているようにエキサイティングなものとして読み込みプロセスを彩ります。画像：xjw

 

 

8.スプラッシュ画面の細かいアニメーション

きれいなアニメーションと美しくデザインされたスプラッシュスクリーンは、アプリ開発者に必要なすべてのデータをダウンロードするのに数秒余分な時間を与えます。イメージ：Behance

 

 

9.アニメーションをリフレッシュするためにプルする

アニメーションをリフレッシュするこのプルは明確な機能目的を持っています。更新前と更新後の2つの状態を接続します。画像：Ramotion

 

 

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

このアニメーションは、スムーズなトランジションの素晴らしい例です。最後のチェックマークは、操作が成功したことをユーザーに通知します。画像：Eddy Gann

 

 

 

結論

上記のすべての効果がユーザーエクスペリエンスを向上させる可能性がありますが、過剰使用はしない方が良いでしょう。最初は楽しく愛らしいように見えますが、100回後には退屈で予測可能に見えるかもしれません。また、クリエイティブなローディング効果はローディング時間の問題を解決できません。何度も何度も同じ読み込みエフェクトが表示されると、ユーザーはすぐに読み込み時間が遅くなることを非難するようになります。

 

 

 

※本記事は、10 Creative Loading Indicatorsを翻訳・再構成したものです。

 

 

▼こちらの記事もおすすめです！