UIデザインを比較！パスワード設定画面の最適なUIとは？

指摘されるまで気づかない「UIデザイン」の落とし穴を、「良い例」と「悪い例」で比較しながら紹介していく連載記事、第17弾です。

今回のお題「パスワード設定画面UI」

今回は会員制アプリでは必須である機能「パスワード設定画面UI」を題材に、UIデザインのお話をしていきます。

■本記事の登場人物

1. どちらが「良いUIデザイン」ですか？

2. ユーザーに適切な設定をしてもらう「サポートUI」を意識

3. どうすれば設定完了になるの？

UIデザイナーなら読んでおきたい良書

4. まとめ

• チェックマークが入ると、正しく入力されていることが直感的に理解できて安心。
• 目のアイコンを入れることで、通常セキュリティを意識して非表示にしているパスワードを、一時的に表示し確認できて利便性が高まる。
• 入力フォームは、組み合わせの条件や、使える文字、文字数は明確に伝えてあげないと、ユーザーにダイレクトなストレスを与えてしまう。
• ユーザーが安心して適切な設定ができるよう、デザインでサポートしてあげるのが大事。
• 設定中のパスワードがわからないユーザーに向けて「パスワードをお忘れですか？」と問いかけてあげることも必要。
• どういったユーザーステータスがあり得るのか、取りこぼしのない網羅的にデザインできるよう意識する。
• 確認用のパスワードは、ユーザー自身に正しく認識している値を入力してもらったかどうか確認してもらうため設けられていることが多い
• どうしたら保存(変更)できるのか、どうしたら変更せずに戻れるのかという2軸を適切にUIとして表現してあげる必要がある。
• 変更しないユーザーにはそのまま戻れる「バックボタン」を。変更するユーザーには「変更する」という明確な目的に対するボタンを表示することで、直感的にユーザーの目的が達成できるよう導くのが大事。