フォームの必須項目｜UIデザインポリシー整理
リーガルテックAI SaaSスタートアップ、MNTSQモンテスキューのプロダクトデザイナーのクボスケです。
私たちは、レバレッジの効くデザインの仕組みづくりを目指しています。この記事は、MNTSQとしてのUIデザインの基準や方針を決めていく「UIデザインポリシー整理」というプロジェクトのなかで行なわれたディスカッションをもとにまとめたものです。
このプロジェクトの主旨や運営については、初回の記事でも述べていますので、ぜひご覧ください。
それでは、今回のトピックは「フォームの必須項目」です。
フォームの必須項目
ユーザーからの入力を受け付ける基本的なUIであるフォームにおいて、入力を必要とする項目です。必須であることを入力時に明示するほか、これらが未入力のまま送信しようとした場合には、フォーム全体のデータの送信を実行せず、エラーメッセージを表示してユーザーに入力を求めます。
必須であることを示すために、入力箇所のラベルテキストの右に「必須」とテキストで示します。多言語の場合は各ロケールに合わせて適切なテキストで表示します。色は警告色の赤とします。
原則すべて必須として任意の項目にのみ「任意」と付記するべき、という主張も存在しますが、MNTSQでは必須の項目に「必須」と記す方針とします。業務システムであるMNTSQとしては、フォームの構成を通して業務オペレーション上必要な情報が何かをユーザーに教える意味合いも持ちます。
以下はやりとりの内容を一部抜粋したものです。
〈必須または任意のどちらを表示するか〉
ナカシマ：フォーム全体の中で、しばしば入力が必須の項目のほうが多いため、必須のものは何も記さず、任意のものにのみ付記するのが妥当だという指摘です。また、「必須」が並ぶと視覚的に強く警告的になってしまい、ユーザーの感情に悪い影響を与える、という懸念もあります
ナカシマ：全部が必須というケースはたびたびあるが、フォームの存在意義からして、全部が任意ということは、通常ほぼないため、「必須」を意識させた方がよいという意見です
クボスケ：どちらにせよ一貫性は大事ですよね。同一のプロダクトのなかで混在するのは混乱を招きます
kassy：必須「＊」を表示するほうが、スタンダード感がありますよね
クボスケ：理屈はともかく慣れって大事で、積み上げられてきたUIの作法は、ユーザーのスムーズな理解のために無視できないですね
ナカシマ：そもそも、入力が「必須」ということを意識しなくていいようにデータを取り扱う建てつけ自体を変化させるアプローチも出てきている気がします。たとえばECサイトで住所など必須の情報を入力する場面を初回に限るなど。フォームにおける必須という概念自体が今後なくなっていったり、変化していったりするかもしれません。現時点では「必須」には馴染みがある、というのは確かだと思いますが
クボスケ：業務システムとして、きちんと明示することに意味がある、というのはあるかもしれません。業務上必要だから入力を求めている情報であるわけで
kassy：業務オペレーションの型をフォームの構成を通じてユーザーに教えている意味合い、ということでしょうか。たしかにある程度明示的にするのは理にかなっていると言えます。「必須」の表示に警告色の赤を用いるのも妥当だと思います
〈必須を表す記号・テキスト〉
kassy：「＊（アスタリスク）」を使うことが多いでしょうか
クボスケ：「＊」の意味が伝わらないユーザーも意外といたりします。また、「＊は必須項目です」というような1行を一番上といった離れた場所に代表して記載しておくよりも、繰り返しになってもその箇所で「必須」とつけるほうがユーザーの負荷は低いのではないかと思います
kassy：説明を探すのは結構負担ですもんね。その場で見てわかるのは重要だと思います
ナカシマ：多言語表記を考慮すると、やはり半角の「*（アスタリスク）」が標準的ですかね
クボスケ：日本語だと全角の「＊」や、」「※（コメ印）」もありえそうですが、多言語で統一できたほうがいいでしょうか。ただ、「*」だけだと見落としやすそうなので、何にせよテキストはあったほうがいいのではないでしょうか。フォントやフォントサイズによっては「*」は、ただの点のように見えてしまうかもしれません。テキストについて、ちなみに英語で「required」はアメリカ的な表現で、イギリス英語圏だと「mandatory」が多いような印象があります
ナカシマ：逆に、「必須」を指すテキストがあるなら、記号は不要とも考えられるでしょうか
kassy：手がかりを増やして気づきやすくするために、記号も併用するのはありな気がします
ナカシマ：原則的に、シンプルにできるぶんはなるべくシンプルにしたい、というのはあります
kassy：フォントによって大きさが変わってしまったり、表示の差が出てしまう懸念も。不確実性やゆらぎをなるべく小さくする観点でも、記号はなくしてしまっていいのかもしれませんね
ナカシマ：あと、アクセシビリティ観点からは、記号をいちいち「アスタリスク」などと読み上げずに無視する設定がひと手間必要になりますかね。MNTSQのUIにおいては、記号に大きな意義があるとは言えないのかな、と思います
〈「いずれか必須」の表現〉
クボスケ：ややこしいケースとして、いくつかの項目のうちいずれかが必須、のようなものがあります
kassy：ユーザーもしくはユーザーグループのいずれか必須みたいな場合ですね
クボスケ：対象すべてに「必須」の表記をしつつ、愚直に注意書きを添えるのもスッキリしません。分岐で制御したりするのも複雑でユーザーが理解しづらかったり、適切でなかったりします
ナカシマ：同じカテゴリーの中で選択肢がある場合は、大きな情報のかたまりに対して「必須」を示すとか
kassy：あまり事前にあれこれ示すのではなく、必須の項目が未入力で［送信］ボタンが押されたタイミングでメッセージで知らせる、だけにするのがシンプルかもしれません
クボスケ：ケースによって最適な対処は変わりそうなので、具体的なケースに遭遇したときにあらためて考えましょうか