この動作を使用して、ユーザーにパスワードを変更させています。
ユーザーがパスワード変更ボタンをクリックすると、3つのテキストフィールドが表示され、ボタンが「キャンセル」ボタンに変わります。
上記のフィールドからパスワードの変更セクションを分離する必要がありますか?それとも十分に明確ですか
あなたがそれを表示した方法は適切に機能し、人々はそれを理解すると思います。ただし、最初の画像には保存するものがないので、保存ボタンを削除することをお勧めします。このボタンを「情報の変更」ボタンにして、人がこのボタンをクリックすると、「変更を保存」に変更します。
フィールドが変更されると同時にボタンが変更されるため、すべてのユーザーがボタンが変更されたことに気付くとは限りません。これは、次に使用するフィールドであるため、フィールドの変更に集中します。
ほぼ同じように要素をグループ化すると、ユーザーエクスペリエンスと使いやすさが向上します。これについて詳しく知りたい場合は、Gestaltの原則を参照してください。
わかりやすくするために、これらの変更を1つ以上追加します。
3つの新しいテキストフィールドとボタンが画面の右端の「パスワードの変更」ボタンが消えたところに表示されるようにします。
「キャンセル」のすぐ上に「新しいパスワードを保存」ボタンを追加します。
ユーザーが「パスワードの変更」をクリックした後、「保存」ボタンを無効にします。ユーザーが新しいパスワードを入力(2倍)したら、パスワードを再度アクティブにします。