【マテリアルデザイン】visibility icon、パスワード見たいときはどっちのアイコンを使うか問題
visibility iconは2種類存在する
visibility
visibility off
アイコンの使いどころがサービスごとに異なる件
私の個人的な感覚としては、こうです。
・visibility：パスワードが見える状態の時に使用する
・visibility off：パスワードが見えない状態の時に使用する
目の形のアイコンは、「状態」を示すものだから、という考えだからです。
しかし、トレースなどしていると、サービスごとに上記と逆のパターンでアイコンが使用されているケースが見られました。
「どの状態のとき、どちらのアイコンを使用するのが公式ルールなのか？」が気になり、調べてみました。
マテリアルデザイン上での定義は？
順番が一部前後しますが、M1のマテリアルデザインをまず確認してみました。
M1上での説明
テキストでアイコンの使い分けを説明しているわけではありませんでしたが、右の画面を見る限り、私が考えていたように
・visibility：パスワードが見える状態の時に使用している
・visibility off：パスワードが見えない状態の時に使用している
という状態でした。
M3上での説明
M3においては、ガイドライン内では説明が存在しなかったものの、アクセシビリティ内で一部関連する説明がありました。
For example, when a password is hidden, the label for the view icon is "Show password," and when the password is visible, the label is "Hide password."
例えば、パスワードが非表示の場合、表示アイコンのラベルは "Show password "となり、パスワードが表示されている場合、ラベルは "Hide password "となります。
う〜ん、若干混乱してきました。。
この文章だけ読むと、M1の画像で示しているケースとは逆な気がするのですよね…。
・パスワードが非表示の時は
・アイコンはview iconで（ここで矛盾している）
・アイコンのラベルは”Show password"にする（アイコンとラベルは一致している）
現状のGoogleではどっちで実装してる？
瞑想極めましたが、「今Googleがどうしてるのか確認すればいいか」と思い立ち見てみたところ……
パスワードが非表示のときにvisibilityが使われている！？！？！？！？！？！？
信じられない。。。私だったらこれ混乱するのに。。。でもあのGoogleがこうしているというからには、何か理由があるのだろうか。。。
2019年とちょっと古いですが、私と同じような見解をされている方もいらっしゃるんだけどなあ〜。。。答えは見つからず、謎が深まっただけです。
4点目。逆にアイコンのトグルは「現在の状態」を表してることが多いよね。PhotoshopとかFigmaとかのレイヤー表示/非表示ってそうじゃん？Googleとか多くのサービスのパスワードフォームみてもこの目は「現在の状態」を示してるから、あえて逆のUIにしてユーザーを混乱させないように気をつけよう！ pic.twitter.com/FDUbjPVXfu
— 広野 萌 (@hajipion) September 26, 2019
Googleの公式見解が知りたいところです。
もしご存知の方がいたらぜひ教えていただきたいです。。
（不完全燃焼なまとめnoteになってしまい大変悔しい。）
後日追記（2023/10/19)
なぜ現状のGoogleでは、アイコンの使い方が逆になっているのか夜な夜な考えたのですが（ガチで）、こういうことか？と推測をしました。
私は、前提条件として目の要素を「状態を示すアイコン」だと考えている
「状態を示すアイコン」という前提に立った時、パスワードが非表示のときにvisibility offを使うのは「見えていないですよ」という状態を示している
＜推測＞一方で、Googleは目の要素を「動作を行うボタン」だと考えている？
「動作を行うボタン」という前提に立った時、パスワードが非表示のときにvisibilityを使うのは「表示させますよ」という動作を示している（こうすることで、アクセシビリティで説明したラベルの意味「"Show password"とも一致し、説明が成立する）
この記事が気に入ったらサポートをしてみませんか？