ユーザーにパスワードが一致せず、強度が不十分であることを伝える

Question

ユーザー登録フォームに2つの機能があります

プレゼンテーションに関する質問が2つあります

パスワードが一致しない、または強度が不十分な場合、どの単語を使用すればよいですか？最初は空の最初のパスワードの横にテキストフィールドがありますが、各文字を入力すると更新されます（パスワードの確認部分の横に2番目のテキストフィールドを追加できます）。
いつどのような順序で関数を呼び出す必要がありますか？たとえば、「パスワードの確認」セクションでパスワード照合機能のみを呼び出した場合、ユーザーが戻って最初のパスワードを変更すると、問題が発生します。ユーザーが最初にパスワードを入力するときにパスワード照合機能を呼び出すと、パスワードの強度が不十分であるというメッセージが上書きされるか、十分に強力なパスワードが「パスワードが一致しない」というメッセージが上書きされます。

パスワードが十分に強力かどうかをチェックする機能は、「123」とパスワードを防止するだけの非常に単純なものです。将来的には、パスワードのマスクを解除するオプションを作成し、フィールドを1つだけにして確認を行いたいと考えています。

Charles Wesley · Accepted Answer

複雑にしないでおく：

ユーザーが最初のテキストフィールドに入力するときに、入力時に更新されるパスワードが強力かどうかをユーザーに伝えることにより、強度インジケーターを近くに置きます。要件を満たすパスワードを入力するまで、確認フィールドを有効にしないでください。
ユーザーが2番目のフィールドに移動して確認するときは、その横にラベルがあり、パスワードが一致するかどうかを入力すると更新されます。
ユーザーが最初のテキストフィールドに戻って変更を行った場合は、確認テキストフィールドを空白にして、すべての内容をもう一度入力してもらいます。

マスクされていない単一フィールドを最終的に作成するという最終目標は良いものです。下の図では、説明のためにマスクを外しました。

重要なポイントは次のとおりです：一度に1つのタスクにユーザーを集中させ、ユーザーがそのタスクを完了したら検証し、次のタスクに移動しますワークフローのステップ。ワークフローのそのステップでのステータスに関する情報をリアルタイムで提供します。

mockup

^{download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム}