新しいコンテンツがどこに配置されるかわからないときに、完全なアプリケーションで「進行中」を表示AJAXアプリケーション
AJAX=有効になっているWebアプリケーションを構築しています。リンクをクリックすると、サーバーからページが読み込まれ、トリッキーなJavaScriptによって、ページのどの部分を置き換える必要があるかが決まります。その後、フェードします古いパーツを取り除き、新しいパーツをフェードインします。
これはうまく機能しますが、上記はサーバーからコンテンツを受信した後にのみ発生するため、以下は使用できません。
- 置き換えるコンテンツを非表示またはフェードします。
- 新しいコンテンツが配置される場所の代わりにドキドキを表示する。
ページがロードされていることをユーザーに知らせるために、スロバーまたはステータス表示を配置するための一般的な領域を探しています。インジケーターは、ユーザーが何かが発生していることを認識できるようにする必要がありますが、微妙で邪魔にならないようにする必要もあります。
デスクトップアプリケーションでは、これは多くの場合、マウスカーソルをビジーカーソルに変更することで示されます。しかし、Webアプリケーションでは、これがうまくいくとは思いません。ビジーなカーソルが表示された場合、ページがクラッシュし、タブを再起動する必要があることを示しています。
置き換えられるページの一部を空白/フェードアウトすることなく、サーバーからデータを読み込んでいることをユーザーに示すための巧妙でエレガントな方法はありますか？
私が見たパターン（例：Googleメール）は、このためにスライドダウンバナーを使用することです。このパネルは、ビューポート（ページではなく）の上中央から"Loading..."メッセージ。
アニメーションはユーザーの目を引き、オーバーレイであるという事実は、このページで何が変わるかわからないことを補強するのに役立ちます。
Twitter/Stack Overflowのアプローチを使用して、ユーザーがクリックするまで再描画を遅らせることもできます。 "There are _ 2 _ new responses. _ Click here _ to show them."
これを行う1つの方法は、クリックされたアイテムを目立たせることです。おそらく、クリックされたアイテムの横に表示またはマーカーを配置して、ユーザーがプロセスを開始し、そのプロセス中に他のリンクやボタンをクリックしてはならないことを示すことができます。
ただし、ユーザーはそのページを読み続けることができます。したがって、問題にさらに焦点を当てるには、まずクリックアクションが"次のページに移動する"か"このボタンの機能に興味がある"かどうかを調べてください。次に、ステータスメッセージが画面全体をフェードできるか、ボタンの横にある種のマーカーを置くだけでよいかを判断できます。