入力フォームの研究

Webサービスやアプリで必ずと言ってもいいほど出てくる入力フォーム。
「なんやこの入力フォーム、まじで意味わからん！もうええわ😱」となってやめてしまった経験が誰でも一度はあるのではないでしょうか？

多くの人がそうした経験をしていることからもわかるように、入力フォームのUI/UXはユーザーがサービスを使い続けてくれるかを左右するような重要な要素です。
特にECサイトなどでは入力項目が多くなりがち&フォームを最後まで入力するかどうかが購入に至るかどうかを左右する大きなポイントになっており、EOF(Entry Form Optimization)として研究されています。

そこで、今回はそんな入力フォームをいかにユーザーフレンドリーにしていけるかを自分なりに研究して、重要だと思うポイントをまとめたのでそちらについてご紹介したいと思います。
(自分なりなのでここは違うんじゃない？みたいなツッコミがあれば大歓迎です👍)

入力フォームの構成要素

まずは入力フォームの構成要素についてまとめます。

・ラベル: 何をフォームに入力するかを示すラベルです
・必須可否: フォームが入力必須かどうかを示します。*マークだけではなくて必須と明記した方がよりわかりやすいです。
・フォーム本体: 入力フォーム本体です
・プレースホルダー: 入力値の例を示して、ユーザーが何を入力すれば良いかイメージしやすいようにします。
・メッセージ: 入力にバリデーションをかけている場合は事前に明示します。
・チェックマーク: 入力が完了したかを示すフォームです。こちらは一般的にはないフォームも多いように思いますが、ユーザーがフォームを正しく入力できていると言う確信を持って進めていけるので、あった方がいいと考えています。

入力を補助して負担をできるだけ軽くする

入力をユーザーに全て任せるのではなく、できるだけ負担が軽くなるように入力を補助します。
具体的には
・emailや電話番号などが自動入力、候補の表示が行われるように実装する
・郵便番号から住所を自動で入力する
・全角で入力された文字を自動で半角に変換する
など、こちらで補助してあげられることはできるだけ補助します。

エラーは適切なタイミングで表示する

エラーは適切なタイミングで表示するようにし、不用意にユーザーにストレスを与えないようにします。
実際に入力するときの流れを追いながら見ていきます。

1. 初回入力中
初回の入力中はエラーの表示は行わないようにします。
例えば以下の例のように、1文字目入力した段階で即時バリデーションが走りエラー表示がされると、ユーザーからすれば「今入力してるんや(怒)」と無駄にストレスを与えることになってしまいます。

ただしバリデーションが通ったことは前述の通りユーザーが安心感を持って進められることにつながるので、初回入力時でも通ったらすぐに表示するようにします。

2. 初回入力終了時
初回の入力が終了した(フォームからフォーカスが外れた)タイミングで初めてエラーの表示を行います。
(🤔エラーの場合フォーカスを外させないと言う方法もユーザーが再度フォームを選択するという手間を省くためにいいかなと思うのですが、そうするとユーザーの思った通りに動かずに不用意にストレスを与えてしまう可能性があり、悩みどころです。🤔)
こうすることでユーザーは今自分が入力した値に間違いがあったことにすぐに気づくことができます。

3. 2回目以降の入力(入力修正時)
エラーがあった項目を修正する際は、即時エラー表示を行うようにします。
初回入力時と異なり、ユーザーはエラーを修正するために入力をしているので、エラーが改善されたのか即時確認できる方が修正が行いやすいためです。

入力項目の多いフォームは分割する

ECサイトで買い物をしようと思って以下のようなフォームだったらめちゃくちゃやる気がなくなってしまいますよね。

(引用 ux.stackexchange.com)

入力項目の数が多くなってしまう場合はフォームを複数に分割し、ステップごとに入力できるようにします。一度に入力するフォームの数が減ることで入力に対するストレスが大きく軽減されます。
また、ステップに分ける際はステップごとにタイトルをつけて、何についての入力なのか明示した上で、現在どのステップにいるのか、あとどのくらいステップがあるのかをユーザーがわかるようにすることで更にUXの良いフォームにすることができます。

(引用 dribbble.com)

SubmitボタンをDisableにしない

以下のように入力項目を正しく入力しないと、送信ボタンがDisableになっていて押せないフォームであることがありますが、
こう言ったフォームは
・一見してどのフォームに問題があるのかわからない
・ユーザーにどのフォームに問題があるのか考えさせてしまう
と言った問題があります。

上記の問題を解決するには入力の正誤にかかわらずSubmitボタンはDisableにせずに常に押せるようにしておきます。
そして、ボタンを押したタイミングで全てのフォームのバリデーションを行い、エラーがある場合はその項目にフォーカスを当てすぐに入力できるようにします。
こうすることでユーザーはあまり何も考えずにとりあえず送信ボタンを押してみて、どれがエラーかをすぐに見つけることができるようになります。

例としてAppleの購入フォームの住所入力欄で何も入力せずに続行しようとすると以下のようになります。見事にエラーの最初の項目に自動でフォーカスされます。

いかがでしたでしょうか。
フォームに限らずですが一番重要なことは

ユーザーに考えさせないこと

かなと思います。
いかにユーザーに考えさせないかをサービスを開発する側である僕らが深く考えていく必要があるのかなと思います。

自分が重要だと思うポイントのみピックアップしたのでややざっくばらんになってしまいましたが、これらのポイントを押さえるだけでも入力フォームがかなりいいものになるのではないかなと思います。
お試しあれ！

---

PR

日程調整のニッテという使いやす〜い日程調整ツールを作っております！
ぜひ一度お試しください！

Nitte | 採用を加速させる日程調整ツール