Webアプリでユーザーのアカウントを管理するためのシンプルなインターフェイスがあります。インターフェイスの各ボタンをクリックすると、すぐにアクションが実行されます。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
これは、アカウントが無効にされたときの様子です。
注意:
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
をクリックしたときにフラッシュメッセージを表示することを検討しています:
ただし、いくつかの問題があります。
Disable account
またはEnable account
をクリックしたときにフラッシュメッセージを表示する必要がありますか?これら2つはトグルボタンのように動作し、おそらくボタンが互いにフェードインすると、適切なフィードバックが得られます。
フラッシュメッセージがフェードインし、ボタンも押し下げます(ボタンもフェードインしています)。あまりにも多くのことが起こっているようです。 これを行うためのより良い方法はありますか?フィードバックが多すぎる場合について話す研究/テストレポートは、この状況に役立ちます。
clarityに役立ち、混乱を減らす場合は、それが何であれ、それを実行してください。
誰かが実行してアクションを実行し、アクションが完了したことを確信できない可能性がある場合は、視覚的なキーを提供して、それが発生したことを明確にする必要があります。この場合、メッセージを含めるとUXが大幅に改善されると思います。
TL; DR:はい、フラッシュメッセージを使用します。
ユーザーに警告するのは、ユーザーが元に戻せないことを行っている場合のみです。
それを念頭に置いて、私はお勧めします:
「アカウントの無効化」ボタンの場合:変更が保存されていない場合にのみ、無効化時に警告します。それ以外の場合は、アカウントを無効にします。ユーザーがもう一度[アカウントを有効にする]をクリックするだけで元に戻すことができます。
「アカウントの削除」ボタンの場合:これはかなり深刻であり、元に戻すことはできないため、ポップアップの確認を保存してください。
また、フェードイン/フェードアウトのアニメーションをすべて削除することをお勧めします。これだけで、アプリケーションの知覚応答性が向上します。ビジネスアプリケーションのアニメーションは、ユーザーがアプリを理解するのを支援するため、または視覚的な手がかりとしてのみ使用してください。この場合、それらは不必要に見えます。