ブラウザは、ドロップダウンメニューでパスワードUXを台無しにします。どうすれば修正できますか？
上記の画像は
autocomplete="new-password"で撮影したものです
ご覧のように、ドロップダウンはエラーメッセージ（「文字と数字」で終わる（および他のいくつかのエラーメッセージ）で覆われています）をカバーしています。
このエラーメッセージは重要であり、ユーザーは必ず表示する必要があるため、ドロップダウンを非表示にするにはどうすればよいですか？ドロップダウンにより、ユーザーはメッセージを表示できません。この特定の状況では、「ドロップダウンは悪いUX」と言えます
メッセージをフィールドの下に移動すると言うこともできますが、反対方向からexact同じ問題が発生します。
私の知る限り、私たちのソリューションは次のとおりです。
- ドロップダウンを無効にする
- ドロップダウンがカバーしない場所にメッセージを移動します（ポップアップまたは横など）
- メッセージを移動して、常にドロップダウンの反対側に表示されるようにします
オプション1は機能しません。以前はautocompleteを"new-password"または"off"または"false"に設定することでドロップダウンを無効にすることができたためですが、これらのどれにも当てはまりませんもうドロップダウンを無効にするようです。
オプション2は実際には機能しません。メッセージをnearにして、エラーメッセージにいくつかのコンテキストを与えたいからです。 「パスワードが短すぎます」というエラーメッセージが表示されたポップアップは、UXが悪いように思われるので、ほしくない。エラーメッセージをパスワード入力の横に移動することはできると思いますが、画面幅がない小さなデバイスでは機能しません。
オプション3も、ウィンドウのスクロール位置に基づいてエラーメッセージが移動し、任意のスクロール行に基づいてテキストを移動することも悪いUXのように見えるため、あまりよくありません。
だから、そうだね、誰も考えられない限り、私には選択肢がない。
これはブラウザの問題ですか？または、私が望む優れたUXを取得するために使用できる簡単なトリックはありますか？
ここ数年の私の推奨はフォームのレイアウトです
- Label
- 説明/メモ
- エラーメッセージ
- フィールド
あなたが説明している問題のような問題は、このレイアウトに従うのに十分な理由ですが、訪問者がエラーメッセージやメモを表示するのに十分なほど下にスクロールしていない可能性がある小さな画面の使用例も同様です。