【UI／UX】ログインフォームの改善事例

B2Cのwebサービスを運営しているクライアントさまからの要望を受けて、ログインフォームのUIを少し改善しました。今回は改善した内容を紹介します。

課題となっていた箇所はログインフォーム。ユーザIDとパスワードでログインする仕様です。

誤入力によるログイン失敗が多く、ユーザから運営側に問い合わせが頻繁に来る。

誤入力をして問い合わせをしてくるのは年齢層が高めのユーザで、ネットリテラシーが高くないユーザが多い傾向でした。

ユーザリテラシーを考慮した入力UIへ改善し、誤入力を軽減するためにとった対策は以下の２点です。

 

　１　パスワードの可視化

　２　文字の視認性の確保

 

改善前と改善後のイメージは以下になります。

パスワード入力のフォームは入力するとすぐに黒い丸「●」に変わってしまいます。

これはHTML上で、入力タイプが「password」になっている場合の仕様です。

（input type=“password"）

 

「input type=“password"」はセキュリティとしては問題なく、安心して入力はできるものの、入力した文字が間違っているということに気づくのが難しく入力の敷居や難易度が高いフォームと言えます。

 

たとえば「I」「l」「１」という文字、違いがわかりますでしょうか。

左から大文字のアイ、小文字のエル、数字のいち、となります。

数字とアルファベットはこのようにパッと見、わかりにくい文字がいくつかあります。

 

入力フォームのフォントサイズを一般的なwebサイトのフォントサイズよりも大きめに設定することで文字の視認性をあげました。フォントサイズは16px〜18pxくらいが一般的だと思いますが、22pxと大きめに設定。

これでユーザIDとパスワードの視認性がグっとあがりました。

 

自分で入力しているのだからそもそも間違うはずがないだろうと思いますが、自分で登録したID、パスワードを忘れてしまっていて覚えていない、というのがユーザあるあるです。

 

改善後は問い合わせが減ったと実感しております。

 

それでは。