「良いフォーム」ってなんだろう 第1回 体験が悪いフォームを知る
「良いフォーム」を知るために、まずこの記事では、体験が悪いフォームの例とその改善方法について考えていきます。それを知ることで、良いフォームを作るためのヒントを探ってみましょう。
はじめに
お問い合わせフォーム、会員登録フォーム、アンケートフォームなど、Webサイトにはさまざまなフォームがあります。私たちは、良いフォームを作るために、さまざまなことを考えます。見やすい色はなにか、入力しやすいUIはどういうものかと試行錯誤しますが、そもそも良いフォームとはどういうものなのでしょうか。
利用者が簡単に情報を入力でき、迷わずに利用できるフォームというのは良いフォームと言えますが、具体的にはどうなっていれば迷わず簡単に入力できるのでしょうか。
良いフォームを作るためにも、体験が悪いフォームを知っておく必要があります。体験が悪いフォームとは、入力が煩わしかったり、誤入力を誘うようなものです。利用者にとってストレスとなり、最終的には離脱の原因となります。
今回のシリーズでは、悪いフォームを知り、良いフォームを作るための方法を考えていきます。
体験が悪いフォームとは……
体験が悪いフォームの例をいくつか挙げてみます。
- 全角／半角の指定がある
- パスワード入力欄の独自のルールやコピーペーストの禁止
- 補完機能が思ったとおりに働かない
- 入力欄が分かれていて入力しづらい
- 入力欄の文字が切り取られていても気づかない
- 必要な理由がわからない入力項目
- 選択肢が少ないセレクトボックス
- なぜ入力値エラーが起きているかわからない
- 送信ボタンに似たクリアボタン
どれも、利用者として身に覚えのあるものではないでしょうか。それぞれについて、詳しく見ていきましょう。
カナ入力や全角／半角が指定されている
最近は減ってきましたが、名前などのカナ入力で、半角カナ指定がされている場合があります。
スマートフォンでは半角カナの入力が面倒です。また、項目の欄に単に「カナ」とある場合、全角で良いのか半角でも良いのかの判断ができません。どちらでも良いのかと思い、全角で入力したらエラーになったり、半角で入力したらエラーになったりしては、ストレスが溜まります。
「カナ」だから全角カナというのは暗黙の了解でしかないので、入力欄に「カナ（全角）」と明記するほうが良いでしょう。
また、住所の入力欄に「半角英数」や「全角英数」などの指定がある場合があります。この場合も、スマートフォンでは全角英数の入力が面倒です。
たとえば、ピクセルグリッドの住所は「東京都港区南青山5丁目5番18号」となっていますが、全角指定のある場合は「東京都港区南青山５丁目５番１８号」と入力しなくてはなりません。また丁目や番地をハイフンで入力したい場合は「東京都港区南青山５−５−１８」と全角数字と全角ハイフンを入力しなくてはなりません。
入力してみたら数値やハイフンが半角でエラーになったり、全角でエラーになったりしてはストレスが溜まります。
半角・全角のどちらでも受け入れるか、自動で変換する仕組みを導入するなどして、利用者の負担を減らすことが重要です。
なぜ入力値エラーが起きているかわからない
エラーメッセージが「エラーがあります」のように表示されるだけで、どの入力欄が間違っているのかがわかりにくい・わからない場合があります。筆者の体験としては、「入力項目が多く長いページでエラーが発生し、散々悩んだ挙げ句、電話番号が全角数字で入力する必要があった」というようなこともありました。どこを直せば良いのかがわかるように、エラーの内容を明確にすることが重要です。
コピーペーストの禁止や独自のルールがある
アカウント作成時などのパスワードを設定する際のパスワード入力欄でも、体験が悪いフォームという経験はあります。よくあるものとして、コピーペーストが禁止されている入力欄があります。
コピーペーストができないと、ブラウザのパスワード生成機能を使う場合、利用者は生成したパスワードをわざわざ表示して、それを見ながら入力しなくてはなりません。
また、パスワード入力欄の独自ルールがある場合があります。たとえば、「半角英数字記号」という指定がありつつも、実は$と&は使えない、というような場合です。
利用者がパスワード管理アプリやパスワード生成機能を使うと、こういった独自のルールに対応できないことがあります。特に、パスワード管理アプリは、利用者が設定したルールに従ってパスワードを生成するため、独自のルールがあると、生成されたパスワードが受け入れられないことも多いでしょう。そうなってしまうと、利用者は、パスワード管理アプリを使わずに手入力でパスワードを設定することになります。
そのほか、パスワードの入力欄などで、設定した文字数を超えた値を貼り付けると、パスワードが切り取られてしまい、意図しないパスワードになってしまうことがあります。
これは、maxlengthで文字数が指定されていることが原因です。文字数を超えた値を貼り付けると、maxlengthの文字数に収まるように自動的に切り取られます。入力欄の大きさによっては、切り取られたことにユーザーが気づかないことがあります。
ですので、文字数制限をしたいのであれば、maxlengthを使わずに、JavaScriptで文字数をカウントし、指定の文字数を超えている場合はエラーとし、注意文を出すという工夫が必要です。
補完機能が思ったとおりに働かない
ブラウザの補完機能は、過去に入力した内容をブラウザが覚えていて、入力欄に入力しようとしたときに候補を出して入力を補完してくれます。
autocomplete属性に適切なもの、たとえばautocomplete="email"が指定されていれば、ブラウザに登録してあるメールアドレスから候補を出してくれますし、autocomplete="postal-code"であればブラウザに登録してある住所情報にある郵便番号を候補として出してくれます。
type属性は、input要素がどのように振る舞うかを決めます。どんなデータが入るかという感じでもありますが、type属性によって見た目や機能も変わります。type="email"であればメールアドレス形式に沿わない文字列が入力されていればエラーになりますし、type="file"であればファイル選択用のものに変わります。
しかし、適切なtype属性値や、autocomplete属性値が指定されていないと、この機能が正しく働かないことがあります。次のデモでは、メールアドレスの入力欄の、autocomplete属性がpostal-codeになっているため、補完機能で出てくる候補は郵便番号になってしまいます。メールアドレスを入力しようとしているのに、郵便番号の候補が出てきても、利用者は困惑するだけです。
ほかにも、補完機能を使いたい項目として、電話番号やクレジットカード番号などがありますが、それらの情報を複数の入力欄に分けて入力させる場合があります。たとえば、クレジットカード番号入力欄が4つに分かれていることがあります。
これは、一見すると入力しやすいように見えますが、これも補完が効かないため、手入力が必要になり、面倒になることがあります。どうしても分けたい理由があるのであれば、クレジットカード番号を貼り付けた際に各入力欄に自動で分けて入力されるようにするなどの工夫が必要です。
郵便番号を入力する際にも、3桁部分と4桁部分を分けて入力させることがありますが、これも同様に補完が効かないため、手入力が必要になってしまいます。
メールアドレスの誤入力を減らす
メールアドレスの確認用の入力欄があることは多いですが、メールアドレスを2回入力させることになるので、手間が増えます。メールアドレスの確認用の入力欄は、必要ない場合が多いです。入力するとしても1回目の入力をコピーペーストしてしまうことが多いでしょう。それでは2回入力する意味がありません。
誤入力がないかを確認させるためには、2回入力させるよりも、1回目の入力が正しいかを確認させるほうが良いでしょう。たとえば、メールアドレスを入力した後に「このメールアドレスでよろしいですか？」と確認するような方法です。
まとめて入力できない
前節では補完機能を利用するために入力欄を分けないほうがよいと述べましたが、そのほかの理由でも、1つの入力欄にまとめてしまったほうが、利用者にとっては入力しやすいことがあります。たとえば、次のような項目です。
- 姓名
- 生年月日
- 会員番号やクーポン番号
姓名の入力欄では、ミドルネームがあるユーザーの場合、どこに入力すれば良いのかがわかりませんし、姓と名の間に区切りのない名前もあります。
姓と名で分けたい明確な理由がないのであれば、1つの入力欄にまとめてしまったほうが良いでしょう。もし分ける必要があるのであれば、ミドルネームや区切りのない名前の場合は、どのように入力すれば良いのかを明記します。
また、生年月日では、年、月、日をそれぞれ別の欄に分けている場合があります。よく見るものは次のようなものです。
- 年も月も日もセレクトボックス
- 年はセレクトボックス、月と日はテキストボックス
筆者としては、一行で19851207で入力させるほうが手間が少なく、良いと感じています。もちろん、どういう形式で入力させるかのヒントや、入力しやすくするためのカレンダーUIを用意するといった考慮が必要です。
そのほか、会員番号やクーポン番号を複数の入力欄に分けていることがあります。独自の会員番号やクーポン番号は、ブラウザの補完機能は良い感じには働かないでしょう。そうであったとしても、パスワード管理アプリであったり、メモ帳アプリであったり、他のアプリで会員番号やクーポン番号を管理している場合は、そこからコピーして貼り付けることになるので、1つの入力欄になっていたほうが便利です。
区切り文字を入力する・しない
電話番号や郵便番号、クレジットカード番号など、区切り文字を入力するかどうかの指定がある場合があります。区切り文字を入力しないとエラーになることもあります。
JavaScriptを使って入力を監視して、適当な位置に区切り文字を自動で入力するようにするか、区切り文字を入力してもしなくても受け入れるようにするなど、利用者の負担を減らすことが重要です。
項目の選択がわかりにくい
利用者に何かの選択を問うときに、「問い方」の実装の仕方によっては、実装としては間違っていないけれど、利用者に手間をかけてしまったり、誤認させてしまうこともあります。
たとえば、性別を選択する際の選択肢は、「男性」「女性」「その他」「回答しない」の4つ程度でしょう。その場合、セレクトボックスで選択する場合と、ラジオボタンで選択する場合で、どちらが選択しやすいでしょうか。
セレクトボックスは選択肢が多い場合でも1つにまとめられるという利点があります。しかし、選択するまでどのような値があるかわからず、セレクトボックスを開いてからの項目選択になるので2ステップ必要です。この例のように4つ程度で選択肢が少ない場合は、選択肢が明らかになって1ステップで項目を選択できるラジオボタンのほうが、セレクトボックスよりもわかりやすいです。利用者が選択しやすい「問い方」を考えることが重要です。
また、ボタンの配置への考慮もあります。たとえば、クリアボタン（type="reset"）は、フォームの入力内容をすべてクリアする機能があります。そのため、誤って押してしまうと、入力した内容がすべて消えてしまいます。
筆者には、あまりクリアさせる理由も思いつかないのですが、稀に「入力内容をクリアする」ボタンが送信ボタンと似たデザインや近い位置に配置されていることがあります。
クリアボタンを置くにしても、置く理由を明確にし、送信ボタンとしっかり区別できるようにすることが重要です。
本当にその入力項目が必要か考える
本当に必要なのであればよいですが、本当にその情報を登録してもらう必要があるのかをよく検討したほうがいいものもあります。
- 住所（都道府県だけでいいのであれば市町村や番地まで書かせない）
- 性別
- 役職
たとえば、オンラインの購読で完結しているCodeGridなら、購読申し込みフォームに、住所の入力欄が任意項目であったとしたら、「これは一体何に使われるんだろう？」と不安になってしまいます。住所を入力する理由が明確でない場合、利用者は入力をためらうかもしれません。
ここまでのまとめ
良いフォームを作るためには、「悪い体験」を知ることが出発点となります。利用者の体験を損なう典型的な悪いフォームの問題点について挙げました。
多くの問題は、開発側の都合や古い設計に引きずられていることが原因です。しかし、昨今の利用者は多様なデバイスを使い、パスワード管理アプリや自動入力といった補助機能に慣れています。良いフォームは、そうした利用者の行動や期待に合わせて設計します。
たとえば、全角／半角の強制や独自のパスワード制限は、入力ミスを誘発し、補完機能や自動入力が正しく動作しないと、利便性が著しく低下します。また、「何を」「なぜ」入力するのかが不明確な項目や、不親切なエラーメッセージ、誤って押してしまうクリアボタンの存在は、フォーム全体の信頼性を損ねかねません。
このような「悪い例」を知ることは、単なる批判ではなく、逆に「どうすればより良くなるか」を導き出す手がかりとなります。次回以降は、こうした課題に対して、具体的にどのように改善していけるかを考えていきます。