web-dev-qa-db-ja.com

すぐにアクションを実行するトグルボタンにフラッシュメッセージを使用する必要がありますか?

Webアプリでユーザーのアカウントを管理するためのシンプルなインターフェイスがあります。インターフェイスの各ボタンをクリックすると、すぐにアクションが実行されます。

mockup

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

これは、アカウントが無効にされたときの様子です。

mockup

bmmlソースをダウンロード

注意:

  • Sign outボタンは、アカウントがオンラインの場合にのみ表示されます。

  • アイコンが少し変だと知っていますが、Balsamiqエディターで適切なアイコンを見つけることができませんでした。ただし、実際のアプリケーションでは適切なものを使用しています。

  • アカウントを無効にすると、すぐにログアウトされます。

現在の行動:

  • アカウントがログオンしている場合:

    • Disable Accountをクリックすると、モーダルがトリガーされ、アカウントを無効にしてログオフすることを確認します。ユーザーが続行すると、Sign outおよびDisable Accountがフェードアウトし、Enable Accountというボタンがフェードインします。

    • Sign outボタンをクリックすると、モーダルが表示され、アカウントがログオフされ、保存されていない変更が失われることを確認します。ユーザーが続行すると、Sign outボタンがフェードアウトします。

  • アカウントがログオンしていない場合(Sign outボタンは表示されません):

    • Disable Accountをクリックすると、その代わりにDisable Accountボタンがフェードアウトし、Enable accountボタンがフェードインします。
  • Delete accountボタンをクリックすると、これを元に戻すことができないため、確認のためにモーダルがポップアップ表示されます。次に、ユーザーをアカウントのリストにリダイレクトします。


Sign outをクリックしたときにフラッシュメッセージを表示することを検討しています:

mockup

bmmlソースをダウンロード

ただし、いくつかの問題があります。

  • Disable accountまたはEnable accountをクリックしたときにフラッシュメッセージを表示する必要がありますか?これら2つはトグルボタンのように動作し、おそらくボタンが互いにフェードインすると、適切なフィードバックが得られます。

  • フラッシュメッセージがフェードインし、ボタンも押し下げます(ボタンもフェードインしています)。あまりにも多くのことが起こっているようです。 これを行うためのより良い方法はありますか?フィードバックが多すぎる場合について話す研究/テストレポートは、この状況に役立ちます。

2
F21

clarityに役立ち、混乱を減らす場合は、それが何であれ、それを実行してください。

誰かが実行してアクションを実行し、アクションが完了したことを確信できない可能性がある場合は、視覚的なキーを提供して、それが発生したことを明確にする必要があります。この場合、メッセージを含めるとUXが大幅に改善されると思います。

TL; DR:はい、フラッシュメッセージを使用します。

1
JohnGB

ユーザーに警告するのは、ユーザーが元に戻せないことを行っている場合のみです。

それを念頭に置いて、私はお勧めします:

アカウントの無効化」ボタンの場合:変更が保存されていない場合にのみ、無効化時に警告します。それ以外の場合は、アカウントを無効にします。ユーザーがもう一度[アカウントを有効にする]をクリックするだけで元に戻すことができます。

アカウントの削除」ボタンの場合:これはかなり深刻であり、元に戻すことはできないため、ポップアップの確認を保存してください。

また、フェードイン/フェードアウトのアニメーションをすべて削除することをお勧めします。これだけで、アプリケーションの知覚応答性が向上します。ビジネスアプリケーションのアニメーションは、ユーザーがアプリを理解するのを支援するため、または視覚的な手がかりとしてのみ使用してください。この場合、それらは不必要に見えます。

2
Jaco Briers