web-dev-qa-db-ja.com

マテリアルデザイン-エラーのログを表示する方法

問題

マテリアルデザインガイドラインに従うログインページを作成しようとしていますが、ユーザーが間違った電子メールまたはパスワードを入力した場合の処理​​方法がわかりません。

マテリアルデザインガイドラインでは、誤った入力フィールドのすぐ下にエラーテキストを表示することをお勧めしていますが、セキュリティ上の理由から、ユーザーに電子メールまたはパスワードが間違っているかどうかを伝えることはできません。ユーザーに伝えることができるのは、一方または両方のフィールドが間違っていることです（ただしどちらが間違っているかはわかりません）。

ログインの失敗に関する現在のエラーメッセージは次のとおりです。

このメールアドレスまたはパスワードは認識されません。情報を再確認して、もう一度お試しください。

例

これをマテリアルデザインに転送しようとすると、次のようなオプションになります。

Examples

  1. 最初のオプションは、ユーザーにどのフィールドが間違っているかを通知するため、安全規則に従っていません。
  2. 2番目のオプションでは、情報は反復的であり、ユーザーに役立つ情報を提供していないように感じます。
  3. 3番目のオプションは、材料設計ガイドラインから逸脱しています。

ログを2ページに分割することを検討しましたが、それは避けたいものです。

私たちの最良の選択肢は何ですか？

編集する

@Harshithのアドバイスに基づいてスナックバートーストを追加しました。

Updated design

loginerror-messagematerial-design
15
Sebastian S

材料設計でトーストを使用してみてください

enter image description here

Material-UI Snackbars Docshttps://material.io/guidelines/components/snackbars-toasts.html

これで問題は解決すると思います

カードのこの他のオプションを試していない場合

enter image description here

この場合、エラーが表示され、アイコンが表示されます。アイコンをクリックするとエラーテキストが大きくなるため、テキストが表示されます。ユーザーに示す必要がある主なことは、フィールドにエラーがあることです。

または、単に入力したメール/パスワードが間違っていることを表示します。確認してください

8
Harshith