概要

入力された文字がデフォルトで非表示になるタイプのパスワード入力欄にて、ユーザーが入力済みの文字列を確認できるように表示・非表示を切り替えられるボタンを実装する。
切り替えボタンは「目」のマークを利用する。

疑問

入力された文字が非表示状態の場合、サービスによって、目のマークが開いているものと、閉じているものがある。
どちらが一般的なのか。

参考例

非表示状態の場合
①開いているサービス：Google パスワードマネージャーなど
②閉じているサービス：Green(エンジニア転職サイト) など

考察

個人的には、非表示状態では目は閉じている方がイメージにあうが、逆を採用しているサービスもあるため、それぞれの目的を考えてみる。
まず、非表示状態で目が閉じているマークの場合、今の状態をマークで表すことが目的になる。
逆に非表示状態で目が開いているマークの場合、マークをクリックすることで起こる"次のアクション"を表すことが目的になる。

①の場合は個人的には違和感はあるが、よく考えてみると多くの場合、ボタンは押すとどうなるかのアクションが表現されていることが多いとも思った。
ex)「登録」「更新」「削除」「次へ」

結論

理屈で言うと①かな？と思ったが、ユーザーの直感的には②なのかな？とも。
どちらを採用するかはサービスによるとおもうが、今回はユーザーが直感的に理解できる方を選択してみようと思う。