web-dev-qa-db-ja.com

WebサイトのメインページのUIに通知を表示する

Webサイトのメインページで、すべてのユーザーアクション(データベースに追加された構成、選択した構成のデータを読み込めない、サーバーが切断されているなど)の応答として通知を表示したい。

ステータスメッセージを表示するページの最適な場所は何ですか(つまり、ページの一部であるか、ナビゲーションバーの下にある場合があります)。また、単一の時点で、複数の通知がUIに到着する場合があるため、どのように表示する必要があるか。 。ステータスバーに最新の通知を配置すると、ミリ秒の差で到着した古い通知は表示されません。

また、ステータスバーを非表示にする最善の方法は何ですか。つまり、ステータスバーに閉じるアイコンを追加して手動で閉じるか、タイムアウトを適用して一定時間後に閉じるようにします。

5
Omar Bahir

それは、ユーザーがすべての通知を読むことを意図しているかどうかによって異なります。それが優先事項である場合、画面の側面に沿ってスタックするフェードイン/フェードアウト通知を使用できます。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

これには、各通知の閉じるボタンを含めることができます(ボタンをホバーすると表示されます)。これらは、一定の時間が経過するとフェードアウトする可能性があるため、却下されます。

ただし、スペースを節約する必要があり、ユーザーが各通知を読むことがそれほど重要ではない場合(つまり、ブラウザーの下部にあるような「ステータス」メッセージが増えるなど)、メッセージが表示される限り、ステータスバーを使用してメッセージをすばやく表示できます。関係がある。

mockup

bmmlソースをダウンロード

このステータスバーの変更により、ユーザーは何かが発生した/発生していることを知ることができます。これらのメッセージは、関連性がなくなるとすぐに閉じます。「ダウンロード中」のメッセージは、ダウンロードされなくなると消えます。これは、ユーザーに一度に1つのことだけを伝える必要があることを前提としています。重要なメッセージが複数ある場合は、他の方法の方が効果的です。

最後に、ステータスバーを閉じません。代わりに、メッセージが表示されていない場合は、「準備ができました...」のようなメッセージで、Webサイトがアクションを実行する準備ができていることをユーザーに知らせます。

4
mginn