推測を減らし、成功率を高める：フォームの認知負荷を軽減する4つの原則
フォームデザインの4つの原則、構造・透明性・明確さ・支援は、ユーザーの認知負荷を最小化し、ユーザビリティを向上させる。
フォームの入力は頭を使う作業だ。
以前、EASフレームワーク（削除・自動化・簡略化）によってフォームにおける身体的な努力を最小化する方法を検討したが、この記事では、ユーザーがフォーム入力時に直面する思考・想起・意思決定といった精神的な努力の軽減に焦点を当てる。その結果、ユーザーはより少ない認知的な努力で、より自信を持ってフォームを完了できるようになるだろう。
認知負荷を減らす：4つの原則
フォームの各フィールドは、ユーザーにその質問を解釈し、適切な情報を見つけ、それを要件を満たす形式で提供することを要求する。これらはすべて認知負荷、つまりタスクを完了するために必要な精神的な努力を増加させる。この負荷が高くなりすぎると、ユーザーがミスをしたり、負担を強く感じたり、フォームを完全に放棄してしまう恐れが高くなる。
フォームの認知負荷を減らすには、次の4つの原則に従うとよい：
- 構造：内容を論理的に編成し、完了までの明確な道筋を作る。
- 透明性：要件を伝え、期待値を事前に設定する。
- 明確さ：内容とインタラクションを理解しやすいものにして、あいまいさの余地を残さない。
- 支援：プロセス全体を通じて、タイムリーで有用なガイダンスを提供する。
構造
人間の脳は、情報の中にあるパターンや関係性を自然に探すものだ。フォームが論理的に構造化されていると、ユーザーは全体像を把握し、各要素がどう組み合わされているかを理解でき、フォームをより効率的に進められる。
関連するフィールドをグループ化する
質問のレベルでは、ユーザー名の後にパスワード、町名番地の後に市（訳注：英語の住所の書き順）といったように、特定の種類の情報が一緒に示されることが多い。関連する質問をグループ化すると、ユーザーが記憶から情報を想起しやすくなる。
フォーム全体のレベルでは、関連するフィールドをセクションにグループ化すると長いフォームが記入しやすく感じられる。その理由は次のとおりである：
- ユーザーが一度に1つの情報カテゴリに集中できる。
- 無関係なトピック間のコンテキストの切り替えが最小限に抑えられる。
- 各セクションを完了するごとに、進んでいる感じが得られる。
さらに、各セクションに明確で記述的な見出しを付けると、ユーザーは次のトピックを事前に把握できる。こうした目印は、ユーザーが個々のフィールドを目にする前にコンテキストを確立することで、認知負荷を軽減する。
視覚的階層を作る
視覚的な階層が明確であれば、ユーザーの注意は自然と最も重要な要素に向かう。こうした階層構造を効果的に実装すれば、フォームの構成要素間の関係が明確になり、ユーザーが一目でフォーム全体の構造を理解できる。
まず、フォームフィールドに一貫した、戦略的なスペーシングを設定することから始めよう。近い位置にある要素は関連していると知覚されるため、関連するフィールド同士は近づけて配置し、異なるセクションの間にはより広いスペースを設けよう。
要素同士の関係がスペーシングだけでは十分に明確にならない場合は、コンテナ・控えめな区切り線・色つきの背景でグループになっていることを強調しよう。これはゲシュタルトの共通領域の法則の応用である。視覚的な境界を設置することで、ユーザーはフォームのどの部分がひとまとまりになっているかをすばやく見て取れるようになる。
視覚的な重みを戦略的に適用し、サイズ・色・コントラスト・タイポグラフィで重要性を強調しよう。たとえば、フォームラベルは補助的なヘルプテキストよりも目立たせるため、より太いフォントが用いられることが多い。エラーメッセージは注意を引くため赤で表示されるのが一般的だ。一方、必須ではないツールチップは、ユーザーの気を散らさないように最小化されるか、デフォルトでは非表示にされることが多い。
質問と選択肢を論理的な順序で並べる
フォームの構造化とは会話をするようなものだ。質問の順序がフローと理解に影響する。誰かと向かい合って腰を下ろし、フォームの質問を対面で尋ねる場面を想像してみるとよい。どういう順序で尋ねれば、自然で、相手に失礼がないだろうか。
実際の会話では、相手の言葉に応じて次の質問や返答を変えるのが普通だ。分岐ロジックを備えたフォームも同様である。この手法は「ウィザード」と呼ばれることが多いが、前の入力に基づいて関連するフィールドを動的に表示するというものだ。ウィザードはユーザーのフォーム記入に必要な労力を最小化するだけでなく、彼らが無関係な質問を流し読みして取捨選択するのに注意力を費やさずにすむようにもする。
質問の順序は、何よりもフォーム記入に必要な労力を最小限に抑えられるものであるべきだ。フォームに分岐機能があるかどうかにかかわらず、これは覚えておくべき有用な原則である。
たとえば、製品使用時にユーザーが経験した問題について知りたい場合、まず彼らの名前を入力させるのではなく、問題に遭遇したかどうかを尋ねるべきだ。問題に遭遇していないユーザーの氏名を聞く意味はないからである。
分岐のないフォームであっても、質問を適切な順序で尋ねればユーザーの負担を軽減できることもある。たとえば、州や市よりも先に郵便番号を尋ねれば、ユーザーが州や市を入力する手間を省けるかもしれない。そうした情報は自動入力できる可能性があるからだ。
分岐を考慮しないことにし、全ユーザーにすべての質問が提示されるとした場合、質問を適切な順序に並べるのは、科学であると同時に芸術の領域ともいえる。質問の構成に関して考慮すべき原則は次のとおりである。
- 馴染み度合い：容易に答えられる身近な情報（たとえば、氏名やメールアドレスなど）から始め、勢いをつけよう。他のフォームで一般的に提示される順序に合わせるとよい。
- 優先度：最も重要な質問を先に提示した後で、補足情報を収集しよう。
- 依存関係：後続の質問は先行する質問に基づく。
- 複雑さ：より単純な質問から始め、次第に複雑な質問へ移ろう。
- 機微性：機微性の低い情報について尋ねてから、より個人的な情報について依頼しよう。
実際には、これらの原則は併用すると効果的なことが多い。たとえば、求人応募フォームでは馴染み度合いと機微性の原則を併用し、まず基本的な連絡先情報を入力してもらってから、職歴や希望給与額を尋ねたりする。また、任意フィールドが多いアンケートでは、優先度の原則に従い、最も重要な情報を先に収集することもある。
1カラムレイアウトを採用する
調査では、フォーム完了率において1カラムレイアウトがマルチカラムレイアウトを上回ることが一貫して示されている。1カラムは、上から下へたどる明確な縦の道筋を提供するので、ユーザーがたどりやすく、さまざまなデバイスに展開しやすいからだ。
対象的に、マルチカラムレイアウトでは、ユーザーがフィールドの順序や方向を解釈する必要があり、その解釈は人によって異なる可能性がある。こうしたあいまいさによって、フィールドを見落としたり、想定されているフローを見誤りやすいし、キーボードユーザーの中には、タブの順序を予測しにくいと感じる人もいるかもしれない。アクセシビリティ上の配慮を必要とするユーザーにとっては、問題はさらに深刻だ。というのも、スクリーンリーダーは視覚的なレイアウトとは異なる順序でフィールドを処理する場合があるからだ。また、画面拡大ソフトのユーザーは拡大表示領域外にあるフィールドを見逃すおそれがある。
段階的開示を活用する
長いフォームは、入力を始める前からユーザーを圧倒してしまうことがある。段階的開示は、プロセスの各段階で必要な情報だけを表示することで、この問題を解決する。
複雑なフォームをデザインする際は、現在のタスクに関連するものだけを表示し、ユーザーの進行に合わせてフィールドを順次提示しよう。たとえば、長い複雑なフォームを複数ページに分割したり、前の回答に基づいてフィールドを表示する条件付きロジックを実装するといったやり方だ。
GOV.UKが推奨する「1ページに1つのこと」（one thing per page）パターンは、この原則に従い、画面ごとに1つの質問またはタスクだけを表示するものだ。このように焦点を絞るやり方は、複雑なフォームを分解し、エラーの発見と修正を容易にする。ユーザーが扱うトピックが一度に1つだけだからだ。
透明性
不確実性は認知負荷を増大させる。たとえば、ユーザーは自分が今どこにいるのかがわからなかったり、次に何が起こるか予測できなかったりすると、フォームの完了よりも、状況の推測のために精神的なエネルギーを費やすことになる。透明性は信頼を築き、ユーザーに主導権をもたらし、フォームを予測可能なストレスの少ないものにする。
開始前にフォームの要件を伝える
ユーザーはフォームに時間を割く前に、自分が何に取り組むことになるのかを知りたいものだ。必要な情報や所要時間が明確なら、ユーザーは心の準備をして、先へ進むかどうか判断できる。これは、完了に数分以上かかるフォームや、途中で離脱する必要がある場合に進捗を保存できないフォームにおいては、特に重要である。
長く複数ページにわたるフォームをデザインする際には、事前に次の点を明記しよう：
- 推定所要時間
- 必要な資料や情報（たとえば、ID番号や書類など）
- 締め切りや時間制限の有無
- 最大試行回数（該当する場合）
- 進捗が自動保存されるか、あるいは、1回のセッションで完了する必要があるかどうか
必須フィールドに印を付ける
任意の質問は、追加する前によく考えよう。質問が1つ増えるたびにフォームは長くなるし、完了するための負担感も増すからだ。
任意の質問を入れる場合は、必須の質問と明確に区別することだ。必須フィールドにアスタリスクで印を付けるだけではなく、任意フィールドであることも明示しよう。こうすることで、ユーザーは必須でない質問はスキップできると安心でき、認知負荷も軽減される。この表示が不明確だと、多くの人が任意の質問にも答える義務があると感じてしまう。
明確なプログレスインジケータを表示する
ユーザーインタフェースのデザインのための10のユーザビリティヒューリステッィクスの1つ、システムの状態の視認性は、ユーザーが自分の現在地を把握し、次に何をすべきかを判断するのに役立つ。
長いフォームの入力というコンテキストでは、プログレスインジケータは、どれだけ入力済みでどれだけ残っているかを視覚的に示すことで、フォーム完了に必要な労力を見積もりやすくする。この進んでいるという感覚は、達成感を生み、結果としてユーザーが最後まで続ける動機づけになる。
さらに、最初からすべてのステップを表示しておくことで、プロセスの全体像を示すことになり、ユーザーがそのフォームのメンタルモデルを形成するのに役立つ。このやり方は、先に述べた構造の原則に整合する。
明確さ
あいまいさはユーザーの速度を落とす。明確な指示とデザインを提供すれば、ユーザーは質問の意味を解読したり、インタフェースの操作方法を見極めたりするために、貴重な精神的リソースを無駄にすることがなくなる。
平易な言葉を使う
フォームのラベルや指示は、即座に理解できるものであるべきだ。背景や専門知識にかかわらず、平易な言葉の使用はすべてのユーザーに有益である。一方、専門用語や社内用語、過度に複雑な言い回しは障壁となり、ユーザーの作業速度を落とす。一般向けには、通常、6～8年生レベル（：日本の小学6年生～中学2年生）の読解難易度で書くことを推奨する。ユーザーはフォームを記入するために専門用語を理解する必要はないはずだからだ。
フォームを最も効果的にするには、必要とする情報について、ユーザーが自然に考え、話す言葉遣いを反映した表現を使うことだ。
たとえば、医療用のフォームで「主訴」を尋ねると、多くの患者が混乱する恐れがあるが、「受診理由」と表現すれば、同じ要求をより直接的に伝えられる。同様に、「過去の手術歴を記入してください」と尋ねると、「手術を受けたことはありますか」と単に聞くよりも患者の認知負荷は増えてしまう。
フォームの文言を確定する前に、実際のユーザーでテストし、どこでつまずくかを観察しよう。特定の用語で混乱やためらいのパターンが見られるようなら、それは簡素化すべき、というサインである。
肯定的な言い回しを用いる
否定的な言い回しは、質問の解釈を複雑にする。文を頭の中で反転させる必要があるからだ。その結果、認知的努力がより多く求められ、エラーのリスクも増加する。これは単独型のチェックボックスには、特に当てはまる。オプトインでは、意図した結果をそのまま表す文言を用いるべきである。
二重質問を避ける
二重質問とは一度に2つのことを尋ねる質問である。これは、アンケートにおける落とし穴になりがちだ。ユーザーが一方に同意してももう一方には同意できない恐れがあるため、あいまいさを生むからだ。
たとえば、「我々のウェブサイトは有益で、移動しやすかったですか」という質問は、回答者に2つの異なる質問に対して1つの回答を返すことを強いる。コンテンツは有益だがナビゲーションはわかりにくいと感じる人もいれば、その逆に感じる人もいるかもしれない。
そうしたあいまいさをなくすには、一度に1つのことだけを質問することだ。「我々のウェブサイトのコンテンツはどの程度有益でしたか」と尋ねたあと、「我々のウェブサイトではどの程度移動しやすかったですか」と尋ねればよい。こうすれば認知負荷を減らせるだけでなく、ユーザーエクスペリエンスを正確に表す、より正確なデータを収集できる。
コンテキストと例を提供する
特定の書式や入力の種類が必要なフィールドでは、ユーザーが推測に労力を費やしたり、誤った推測をするのを防ぐため、事前に要件を明示的に伝えよう。たとえば、日付の書式は世界各地で異なるため、「MM/DD/YYYY」や「DD/MM/YYYY」といった簡単な書式例でユーザーに具体的な基準を与えると、後で修正が必要になるようなエラーを防げる。
追跡番号・製品シリアルコード・参照番号などの複雑な識別文字列を要求する場合は、たとえば「領収書に記載されている16桁のコード」や「3文字のアルファベットに続く9桁の数字（例：ABC123456789）」のように、何を探すべきかを正確に伝えよう。このガイダンスにより推測作業が不要になり、ユーザーは情報を正確かつ効率的に見つけて入力できるようになる。
フォーム要素の慣例に従う
ユーザーは、さまざまなウェブサイトでのエクスペリエンスに基づいて、フォーム要素の外観や挙動に関するメンタルモデルを形成する。一貫性のあるお馴染みのパターンを用いれば、ユーザーは既存の知識を活用することで、目の前のタスクに集中でき、インタフェースの仕組みを理解しようとせずにすむ。
たとえば、クリックするとグループ内の他のすべてのチェックボックスが自動的に選択解除されるチェックボックス（通常はラジオボタンに結びつけられる挙動）に出会ったら、ユーザーがどれほど混乱するかを考えてみてほしい。
デザイナーは競合と差別化できる今までにない特徴的なインタフェースを作るべきだという圧力を感じがちだ。革新性自体には意義があるものの、フォーム要素は創造的な実験に適した場とは言いがたい。混乱やエラー、離脱といった潜在的なコストが、新規性によるメリットをはるかに上回るからである。
入力フィールドの長さを想定される内容に合わせる
入力フィールドのサイズは、想定される回答の長さに関する視覚的な手がかりとなる。
短いフィールドは短い回答を示唆し、郵便番号や年齢のような簡潔なデータに最適だ。長いフィールドは、住所や説明、コメントのように、より詳細な内容の入力が必要であるという意味になる。フィールドの長さが想定される入力内容と一致しない場合、ユーザーは求められている内容を自分が理解できているかどうか疑問に思うかもしれない。
支援
フォームの記入は精神的なマラソンのように感じられることもある。そのため、ユーザーはその道のりのあらゆる段階で支援されるべきだ。これは、常にガイダンスを表示し、ミスを事前に防ぎ、エラー発生時にはタイムリーに支援を提供する、ということを意味する。配慮の行き届いた一貫した支援は、ユーザーに自信を持たせ、彼らが最後まで離脱せずにフォームに取り組む可能性を高める。
プレースホルダーを使わない
プレースホルダー（入力フィールド内に表示され、ユーザーがフィールドをタップすると消えるテキスト）は、一見、スペース効率の良いガイダンス提供方法に思えるかもしれない。しかし実際には重大なユーザビリティ上の問題を引き起こす：
- ユーザーが入力を始めると消えるため、指示を短期記憶に頼って覚えざるをえない。
- 通常、薄い灰色の低コントラストのテキストが使用されるため、読みにくい。
- 事前入力値と誤認される恐れがあり、ユーザーがフィールドを見落としたり誤ってスキップしたりする原因となる。
代わりに、ラベルとヘルプテキストを入力フィールドの外側に配置し、入力フィールド自体は空のままにしておこう。こうすることで、フィールドに入力している最中でも、送信前に内容を見直しているときでも、一貫したガイダンスが常時表示され、ユーザーはいつでもそれを参照できる。
有益な制約を盛り込む
一般的にはユーザーの自由を擁護すべきだが、許容される選択肢が明確なルールで定義されている場合には、制約は有益になる。なぜなら、費用が高くついたり、時間をロスするようなミスを防ぐことができるからだ。ユーザーに無効なデータを入力させておいてからエラーメッセージを表示するのではなく、事前に制約を設け、発生前にエラーを捕捉しよう。
たとえば、銀行の振込インタフェースをデザインする際には、利用可能残高を超える金額を入力できないようにするほうが、そのまま先へ進ませてしまい、結果として無効な取引や当座貸越を招くよりも効果的だ。
視認性の高いエラーメッセージをタイムリーに表示する
ユーザーも人間だ。ミスは起こる。したがって、重要なのは、ユーザーのフローを妨げずに、適切なタイミングで支援を提供することだ。ユーザーに作業する時間の猶予を与えることと、エラーを早めにとらえることを両立させるのが理想である。
- 早すぎるバリデーションは避ける：ユーザーがフィールドをクリックした直後や入力を始めた瞬間にエラーを表示してはならない。ユーザーはまだ入力する機会すら与えられていないからだ。早すぎるバリデーションは、根拠のない叱責によってユーザーのフローを乱すため、敵対的なパターンと見なされることが多い。経験則として、ユーザーがフィールドの入力を終えて次のフィールドに移動するまではエラーを表示しないことだ。
- リアルタイムバリデーションは選択的に使用する：ユーザーが即時フィードバック（パスワード要件のチェックリストなど）から利益を得られる場合、またはエラーメッセージが重大なミスを防ぐのに役立つ場合にのみ、リアルタイムバリデーションを実装しよう。そうでない場合には、本来のタスクからユーザーの注意をそらしてしまう恐れがある。
認知負荷を最小限に抑えるため、エラーメッセージはエラーが発生したフィールドに隣接して表示すべきだ。エラーメッセージがダイアログ内に表示されたり、そのフィールドから遠く離れた場所に表示されると、ユーザーはエラーを修正するためにそのメッセージを記憶しておかなければならない。これは認知負荷を増大させる。
さらに、エラーメッセージでは、建設的なコミュニケーションを行い、ユーザーの努力を尊重すべきだ。単に問題を指摘するだけではなく、具体的に誤りを明示し、実践的な提案を示して、問題の修正へとユーザーを導く必要がある。思慮深くデザインされたエラーメッセージは、責められているのではなく支援されている、とユーザーに感じさせる。
結論
フォームへの入力は山登りに似ている。ユーザーには、足取り導くためのしっかりと目印のついた道筋（構造）、方向感覚を保つための先が明確に見通せる視界（透明性）、自信をもって進むためのわかりやすい道標（明確さ）、そして、つまずかないように支える頑丈な手すり（支援）が必要だ。構造・透明性・明確さ・支援という4つの原則を適用すれば、ユーザーが何をすべきかを見極める時間を減らし、彼らが価値ある情報の提供により多くの時間を割けるようなフォームをデザインすることができるだろう。
記事で述べられている意見・見解は執筆者等のものであり、株式会社イードの公式な立場・方針を示すものではありません。
