入力チェックから始めるUX改善
初めて使うECページで配送先を設定するときに
「郵便番号のフォーマットは「123-4567」形式にしてください」 だとか
「住所は全角文字のみ入力可能です」 だとか言われてイラっとしたことはないでしょうか？
僕は数え切れないほどあります。
特にスマホで住所入力しているときに部屋番号を全角数字で入れるのが抜群に面倒です。
こんなのやらされたら利用者は離脱しちゃいますよね。少なくとも僕は購入ページであきらめて引き返したことは何度もあります。納税を諦めかけたこともあります。
これではお互いアンハッピーです。入力チェックのイライラポイントを改善してUser Experienceを爆上げしていきましょう。
改善へのアプローチ
「入力チェックエラーの回数＝ユーザーが足止めを食らった回数」です。
エラーを踏まないようにユーザーを自然に誘導するとともに、システム側で吸収できる部分はしてあげるべきです。
① システム側で補正する
例えば郵便番号欄で123-4567の形式にさせたい場合、フォーカスアウト時に以下のような処理をやってあげればエラーにしないといけないケースは相当減ります。
- 郵便番号マーク「〒」やスペースがあったら削る
- 全角数字とハイフンを半角に自動置換
- 半角数字7文字なら3文字目のあとにハイフンを挿入
他にも地番を全角にさせたい場合などもASCII文字に含まれる範囲については基本的に半角⇔全角を一意に置き換えられます。
なるべくonblur処理やsubmit処理（の前処理）で補正してあげると親切です。
※ついでにトリム処理もかけるとなおいいです
②-1 入力前になるべく誘導する
入力してから「正しいフォーマット」をエラーとして提示してくる不親切なサービスもあります。
電話番号入力例：012-3456-7890のような「正解」がある場合は
以下のような方法で事前に入力してほしい形式を提示してあげるとスムーズです。
- 入力欄にプレースホルダー
- 入力欄近辺に注意書き
- 入力欄の脇にツールチップ
特別な事情がなければプレースホルダーが妥当です。
注意書きは画面内の情報が増えて煩雑になるのが難点、ツールチップはユーザーがわざわざ「？」アイコンにカーソルを合わせる手間が発生します。
（そしてユーザーは文字を読まないし運営側が望む操作もしてくれません）
またそもそも郵便番号のような入力桁数が決まっている箇所は入力欄の幅を最大文字数と合わせましょう。ごく稀に氏名欄と同じ幅でご提供されています。
②-2 異常な入力をできないようにする
以下のような防御策も基本ながら意外とちゃんとできてないことがあります。
- maxlength属性で文字数超過できないようにする
- 対応するものがある場合、そもそもtype属性を適切に指定する
-
<input type="email">とか
-
- それかpattern属性で制限してしまう
③ しょーもないエラー制御を改める
画面やシステム全体としてのエラー制御の方向性が悪いパターンです。
- 入力欄にカーソルインした瞬間に 「入力してください」 と赤文字出してくる
- 逆に入力時には何も指摘しないで「登録」を押した瞬間に全項目分の赤文字を出してくる
- しかも縦に長い画面で！
- 入力NGだった箇所は自分でスクロールして探すの？！
- もしくは「登録」を押した時に1か所だけエラーを教えてくれる。そこを直して再度「登録」を押すと次のエラー箇所を教えてくれる・・・💢
このあたりは既存の画面をマトモにするのは少々厄介です。少なくとも画面全体の入力チェック機構を見直すなどそれなりに大きな対応が必要になってしまいます。
とはいえ新規画面を作る際は上記のようなことが起こらないようにチェックタイミングやチェック時の挙動を見直したり、入力欄が多すぎる画面は分割するなどの上流での予防をぜひやっていきましょう。
④-1 「どうしたらいいか」がわかるエラーメッセージにする
以下のエラーメッセージはどちらが親切でしょうか？
「入力内容が正しくありません」
「郵便番号は半角数字7桁（ハイフンなし）で入力してください」
エラーの原因と解決法がわかるようなメッセージを心がけましょう。
④-2 でもなるべくコンパクトなエラーメッセージにする
このあたりはエンジニアの方が苦手意識を持ちがちですが、コードと同じように文言をリファクタリングしましょう。
例えば
「氏名（姓）が入力されていません。必須なので1文字以上入力してください」
などと長ったらしく書いてもユーザーにメリットはありません。
ということで例えば上記の例は
「氏名（姓）は必須です」 か
「氏名（姓）を入力してください」 だけで充分です。
⑤ ちゃんとデータ取って分析する
ここまで書いてから「そもそもGoogleアナリティクスとかに入力チェックエラーをログっとけばいいのでは」と今更思いつきました。
上記を片付けたうえで計測したらまた新たなパターンが出てくるかもですね。
まとめ
この記事を読んだ人が使いやすいWEBサービスをどんどん作ってくれるといいなーと思っております。
UXデザインというとなんだかオシャレで意識高そうなイメージがありますが、実務的には小さなイライラを根気よく潰していくのが大切です。私はこうしたイライラを摂取して怒り駆動でサービスの改善を行ってきました。
怒りゲージがまだあまりチャージされていない方はこちらの本がとにかくおすすめです。
Amazonで試し読みできるんでぜひプロローグ部分だけでも読んでください。
Discussion