とあるweb屋の仕事術

とあるweb屋の仕事術

10年以上現役のweb製作屋さん。web製作雑務全部やる。

黒丸●になるパスワードを可視化するべきかの考察。フォーム最適化(EFO)

黒丸●になるパスワードを可視化するべきかの考察。フォーム最適化(EFO)

ログインや新規登録でのパスワード入力。

日常でさまざまなwebサービス、サイト、アプリを

利用しているユーザにとっては一番よく使うフォーム

ではないでしょうか。

といってもログインが保持されていれば初回の入力

以降はめったに入力する機会がないかもしれませんが。

 

ログインフォームといえば、

ログインIDとパスワードの入力です。

ログインIDはメールアドレスで代用されることも

多いですね。

今回はパスワードについての考察です。

 

パスワードは、HTMLソースコードでは、

input  type="password" で実装されます。

 

この実装をされた入力フィールドは

入力すると「●●●●●」のように黒丸に

なり、入力した内容が見えないようになります。

スマホでは次の文字が入力されると黒丸●になります。

「●●●2」のように入力時は一応みえていて、

続きを入力すると、

「●●●●a」のように最後の文字だけ見えるかたち。

 

このように input  type="password" は

パスワードを安全に入力するための入力

フィールドですが、

 

ちょっと待った。

 

これは果たして、よいのだろうか。

セキュリティ面ではたしかに安心ですが、

入力する側の負荷があがります。

 

入力の敷居が高い、入力の難易度が高い。

 

リテラシーの高くないユーザからすると

この黒丸での入力はなかなか難しいものです。

自分で入力した内容がわからくなって入力ミス

にも気づかず、という事態は容易に想像できますし、

事実、僕がこれまでたずさわってきた受託案件でも

ユーザの入力ミスや問い合わせが多かったです。

 

入力した内容が見えないユーザは、

自分が間違って入力しているとは考えません。

なので、パスワードは正しいのにログインできない

と運営に問い合わせが行きます。

 

どうするのがよいのか。

そのあたりしっかりと対応している大手サイトの例をみましょう。

 

まずはAmazonのスマホ。

パスワードを表示というチェックを入れるとパスワードを表示した状態にすることができます

パスワードを表示というチェックを入れるとパスワードを表示した状態にすることができます

 

input type="password" の下に入力した内容を表示させています。

Amazonはなぜかスマホサイト、スマホアプリでしかこの実装がされていません。

PCサイトでは、黒丸●のままでした。

 

これは、

  • PCは不特定多数のユーザが利用する端末
  • スマホはいち個人のみが手元で操作する端末

という違いであえてそうしているのかなと想像します。

 

PCの場合は他人に画面をうしろから見られる場面も多く、

スマホは画面をのぞき込まれることもありますが、

手元での操作で、操作しているユーザしか見えないような限定的な状況、

という違いでしょうか。

 

ちなみにFacebookも同じく、

PCでは黒丸のみ、

スマホでは表示/非表示を切り替えられる仕様でした。

FacebookはPCでは黒丸のみ

FacebookはPCでは黒丸のみ

スマホでは表示/非表示の切り替えあり

スマホでは表示/非表示の切り替えあり

スマホでパスワードを表示にしたキャプチャ

スマホでパスワードを表示にしたキャプチャ

 

表示/非表示で input type="password" から

input type="text" に動的に変更しているようです。

 

では次にGoogleの例です。

GoogleはPCサイトもスマホサイト同じ仕様です。

Googleは入力フォームの右端に目のアイコンがある

Googleは入力フォームの右端に目のアイコンがある

目のアイコンを押すと、パスワードが可視化されます。

目のアイコンを押すと、パスワードが可視化されます。

 

Googleは 目のアイコンを押すことで、

Facebookと同じように、

input type="password" から input type="text" に

動的に変更しています。

 

GoogleとAmazon、Facebookがやっていて、

他のサイトはどうかというと、意外にほか

のサイトではやっていないようです。

 

Apple、Twitter、楽天、ZOZOTOWNでは

PCもスマホも黒丸。

ECの大手のアスクルやヨドバシ、

ユニクロなどでも黒丸のままですね。

 

パスワードを可視化するべきか、という解

については、やればいんじゃないの?

とは思います。

そんなむずかしい実装ではありませんし、

大手サイトがやっているのであれば、

それに習っていくのがwebの風潮、

慣例的なところもありますしね。

 

コンテンツの特性やユーザのリテラシーレベル

に合わせて考えてみてはどうでしょうか。

 

と、いうところに着地。