Article

ブログ

2020/03/30

フォーム改善に取り組もう。

ウェブサイトにおけるフォームは、お問い合わせや申込みなどサービス提供者とユーザーをつなぐ重要なインタラクションです。入力がしづらかったり、ユーザーが不安に感じるようなフォームは、離脱やサービスへの不満につながります。
では、分かりやすいフォームとはどんなものでしょうか。登録フォームやログインフォームなど、いくつかのフォームを参考にしながら考えていきたいと思います。

ラベルをつける

登録フォームにおいて、ラベルは重要な役割を果たします。見出しとしての役割以外にも、ヒット領域を拡げることができます。
Amazon のアカウント作成フォームですが、名前やメールアドレスと書かれた見出し(ラベル)をクリックすれば、フォーム要素にフォーカスが自動的に当たります。
また、視覚障害のあるユーザーも、スクリーンリーダーを通して、聞くことができるようになります。

placeholder でヒントを与える

placeholder はユーザーにヒントを与えることが目的です。
上記の Amazon のパスワードのように、条件があらかじめ決まっている場合は、placeholder に入れることも考えましょう。条件が長かったり、複数ある場合は外に出します。
ただし、ラベルのように必須ではありません。
下記のように、名前のラベルに「名前を入力してください」という placeholder を追加すると重複してしまいます。
なしにするか、「sample@co.jp」といった記入例をヒントとして入れることを検討しましょう。

適切な type 属性をつける

input 要素の type 属性は正しいものをつけましょう。
例えば、メールアドレスの type 属性を email にすることで、スマートフォンで入力しようとすると、 @マークが表示されるなど、キーボードが適切なものに切り替わります。(対応していないブラウザでは text 属性のものが出る。)
下記は iOS でのメルカリのフォーム例ですが、ニックネーム入力では出ていなかった@が、メールアドレスではボタンとして表示されています。

同じものを入力させない

パスワードの入力で、複数回同じパスワードを入力させるフォームがあります。手間が2倍になり、ユーザーにストレスとなります。
パスワードを確認したいユーザーがいるのであれば、目のアイコンをつけ、パスワードを表示できるようにすることで、その手間を削減できます。

ルールを後出ししない

入力後に、ルールを示すのはユーザーに何度も入力の手間をかけることになり、おすすめできません。
また、何も書いてないのに「大文字、小文字、記号すべてを使ってください」と後でルールを知らされるのはユーザーにとって大きなストレスです。
以下の画像は、メール送信サービスの MailChimp の入力フォームですが、パスワードは事前にチェックリストを設け、クリアできたものは色がグレーになるフィードバックがあり、ユーザーの認知がスムーズです。

入力に寛容に

例えば、電話番号の入力にハイフンやスペースがあったとしても、それを拒否しないようにしましょう。
電話番号にハイフンやスペースを入れる、もしくは入れなくて良いというエラーを返すのであれば、事前に明確に示す必要がありますが、それはそれで注意文が長くなってしまいます。
ハイフンを入れようが入れまいが、おおよそ正しいものを入力しようとしていることが予想できるのであれば、それを許容する方がユーザーにとっての手間を減らすことができます。

適切なエラーメッセージを返す

美しくデザインされたフォームであっても、 エラーメッセージがいい加減であれば、ユーザーの離脱にもつながります。
例えば、メールのフォームで @が入ってないミスについては、「@マークを入力してください」とした場合、メールフォームのすぐ近くにあれば、理解できます。しかし、上部にサマリーとしてある場合は、どのフォームのことを指しているのかがわかりづらくなってしまいます。
上部に表示する場合は「メールアドレスには@マークが必要です」とすることで、理解しやすくなります。

合理的な順序にする

EC サイトなどでは、支払情報を入力するページがどこかで発生します。
同じ内容を入力してもらう場合にも、その順番次第でユーザーが受ける印象は変わってきます。
商品を選ぶ前に、クレジットカード情報を求められれば、ユーザーは困惑してしまうでしょう。
商品を選んだ後は、メールアドレスや配送先などの入力をし、その後に支払情報を持って来たほうがユーザーの信頼を損なわずに済みます。
また、フローの出戻りをなるべく避けるようにしましょう。
ユーザーが商品を一部削除したり、購入量を編集したい場合に、商品の詳細ページまで戻すのではなく、確認ページで編集・削除できるようにすることで、決済完了率を高めることができます。
図は Amazon の確認画面ですが、その画面では数量変更まではできないものの、左下の 数量の変更・削除 から、詳細ページまで戻ることなく、数量を編集し、決済フローに遷移することが可能です。

まとめ

フォームは多くのサービスで利用されています。登録の際に、不安になったり使いづらいと感じれば、 サービスへの印象も悪化してしまいますし、コンバージョン低下にも繋がります。
フォームにおいて意外性や型破りなものをつくる必要はありません。
ユーザーのゴールは、フォームを入力することではなく、その先のサービスや価値を早く享受することです。 シンプルで分かりやすいフォーム作成を目指しましょう。

本記事は Form Design Patterns を参考にしています。300ページを超える内容がすべてフォームにフォーカスして書かれた貴重な書籍です。ぜひ気になる方は手にとってみてください。