ウェブサイトのデザイン: ユーザーがフォームの入力をより効率的に完了できるようにする

インターネットフォームへの入力は、ほぼすべてのユーザーにとって日常的な経験です。たとえば、ユーザーは Web サイトに登録してログインしたり、ショッピングをしたりするときに、さまざまなフォームに入力する必要があります。ユーザーが望むものを得るために、フォームは、ユーザーのニーズを満たすことと、Web サイト システムに必要なデータとの間のやり取りの形になります。すると、フォーム設計の主な目標がより明確になります。つまり、ユーザーがフォームを迅速かつ効率的かつ簡単に完了できるようにすることです。

設計目標は明確ですが、フォームをどのように設計すればよいでしょうか? 以下では、フォームのコンテンツ、構成、プロセス、フォーム要素のコントロール、およびインタラクションについて詳しく説明します。

フォームの要素

フォームの使いやすさを向上させる方法を見る前に、まず一般的なフォームの要素を簡単に見てみましょう。要約すると次のようになります。

タグ: フォームの質問内容をユーザーに伝えますか?

入力ボックス: ユーザーに回答情報を提供します。

アクション: ユーザーがフォームを送信します。つまり、ユーザーはボタンまたはリンクをクリックしてアクションを実行します。

ヘルプテキスト: フォームの入力方法に関するヘルプを提供します。

入力フィードバック: ユーザー入力が正しいか間違っているかのフィードバックを提供します。

フォームの使いやすさを向上させるためのヒント

情報コンテンツの適切な構成

ユーザーがフォームに記入する目的、記入が必要なフォーム、不要なフォーム項目を削除し、フォームの内容を確定することを検討します。どのように整理するのでしょうか? フォーム項目は上から下へ 1 つずつ無秩序にリストされるのではなく、フォームの内容と特定のロジックに従って、異なるコンテンツ グループと異なるテーマに整理されます。同時に、同じテーマの各論理グループとフォーム項目は、論理的な順序またはユーザーに馴染みのあるパターン順序で配置されているため、ユーザーは簡単にフォームを閲覧して入力できます。フォームが長すぎる場合は、タスク分解と同様に、フォームを複数の Web ページに分割して、ユーザーがステップごとに入力できるようにすることができます。

Brand 1.0 システムでは、新しい注文を作成するときに、フォームの内容が基本情報 (重要/必須) と追加情報 (二次/オプション) の 2 つのコンテンツ グループに論理的に分割されます。コンテンツ グループは区切り線で区別されるため、構造が明確になり、簡単に参照できます。コンテンツ グループを区別する場合は、視覚情報の使用を減らすことを検討する必要があります。視覚情報が多すぎると、気が散ってフォームに多くの視覚的なノイズが追加される可能性があります。

Baidu Union の新規アカウントを作成する場合、フォームの内容が長く、トピックが複数あります。1 つの Web ページの情報量が多すぎるため、複数の Web ページを使用してフォームを整理し、ユーザーに明確なパスのステップを段階的に提供することで、明確でシンプルになっています。ストレスや混乱を避けるために、ユーザーがフォームに記入する際に進行状況の指示を提供します。

2. フォームを簡素化し、重要なポイントを強調する

ユーザーの使用状況データに基づいて、頻繁に使用されない、または専門ユーザーに提供される高度なフォーム項目を非表示にします。例えば、ブランド1.0の新しいクリエイティブフォームでは、90％の人が露出モニタリングリンクを記入しないため、デフォルトで折りたたまれてフォームがシンプルになり、大多数のユーザーが素早く記入できるようになり、大量のフォームによる不安を回避しながら、ニッチなユーザーのニーズを満たしています。

3つの明確な閲覧ライン

フォームの構造とパスをどのように設計するかを考える場合、基本原則は、最初から最後まで明確なナビゲーション ラインを提供することです。ユーザーの閲覧ラインは、アイトラッカー実験を使用してテストできます。たとえば、ラベルの配置や入力ボックスのレイアウトはすべて、ユーザーの閲覧ラインに影響します。単一の垂直パスが提供されると、ユーザーの注意散漫が少なくなり、質問にすばやく回答し、最短時間でタスクを完了できます。

Etre (www.etre.com) が提供している以下の視線追跡データ チャートに示されているように、フォームのさまざまな要素が垂直軸を形成して単一のパスを提供し、ユーザーは明確な閲覧ラインを持ち、質問にすばやく応答できます。もう一方の図では、完了プロセスが曲線的な目の動きになり、単一のパスを使用してフォームの問題を処理しやすくなります。

4. ユーザーシナリオを考慮してメインプロセスのスムーズさを確保する

フォームを設計する際、明確で直線的な手順を定義しますが、最後まで実行することはほとんどありません。ユーザーのシナリオを考慮し、メインプロセスが中断され、ユーザーが要素の入力を諦めてしまうことがないようにしてください。たとえば、China Merchants Bank のカード番号とパスワードによる支払いプロセスは、銀行カード番号の入力、その他の検証情報の入力、支払いの成功という 3 つのフォーム ステップに分かれています。しかし、ユーザーがカード番号などの認証情報を入力した後、支払い金額が1日の限度額を超えていることに気付くことがよくあります。従来のプロセスでは、ユーザーは支払いプロセスを中断し、新しいWebページを開き、招商銀行のホームページに移動→オンライン個人バンキングにログイン→ワンカードを選択（ワンカード番号、照会パスワード、追加コードを入力）してログイン→オンラインで支払い→オンライン支払い限度額管理を通じて限度額を調整し、再度支払うという手順で、ユーザーは2つの操作プロセスを切り替えなければならず、さまざまなトラブルが発生していました。改訂された設計は非常に配慮されており、情報プロンプトを提供しながら、ユーザーは現在のプロセスに制限を設定できるため、支払いプロセスの中断を回避し、ユーザーの運用コストを大幅に節約できます。

新しい広告スロットを作成するときは、それが属するチャネルを選択します。必要なチャネルが存在しない場合は、新しいチャネルを作成し、新しいチャネルを追加するためのページを追加する必要があります。設計時に、このユーザー シナリオを考慮して、ドロップダウン選択ボックスの横に [新しいチャネル] ボタンが追加され、ユーザーの利便性が向上し、新しい広告スロットを作成するプロセスの中断が減ります。

5. 適切なラベル配置を選択する

「入力ボックスのラベルは上揃えにすべきか、右揃えにすべきか、左揃えにすべきか、それとも入力ボックス内にラベルを配置すべきか」というのは、フォームを設計するときに最もよく受ける質問です。実際、業界ではこの問題に関する実験や研究が数多く行われており（Matteo Penzo の眼球運動実験、Luke Wroblewski の調査結果、Vitaly Friedman の Web フォーム設計登録フォーム）、いずれも各方法には異なる長所と短所があり、具体的な目標やその他の要因に基づいて検討する必要があることが示されています。

Matteo Penzo 氏の視線移動実験では、トップ ラベル方式ではラベルが入力ボックスに移動するまでに 50 ミリ秒かかり、これは左揃えラベル方式 (500 ミリ秒) の 10 倍、右揃えラベル方式 (240 ミリ秒) の約 5 倍の速さであることがわかりました。

つまり、トップラベル方式では、フォームへの記入にかかる時間が最も短くなります。ただし、垂直領域を最小限に抑えたい場合は、右揃えを検討してください。ユーザーがフォームに入力するときにラベルを注意深くスキャンし、フォーム内の各入力ボックスを慎重に検討するようにしたい場合は、左揃えを使用できます。

6. 助けを提供する

ユーザーがフォームを素早く入力できるようにするために、通常、わかりにくいフォーム項目にはヘルプ情報が追加され、ユーザーがフォームを正常に入力できるようにガイドします。ヘルプ情報は、ユーザーにフォームの入力方法を指示します。一般的なヘルプでは、通常、ラベルまたは入力ボックスの横にヘルプ テキストが表示されます。また、常時表示 (常に入力ボックスの右側、下、または内部に表示される)、インスタント ヘルプ (入力ボックスがアクティブになると、ヘルプ テキストが自動的に表示される)、ユーザーがアクティブにするインスタント ヘルプ (デフォルトではヘルプ情報は表示されず、ユーザーがマウスをホバーするとヘルプ アイコンがトリガーされてヘルプが表示される)、ユーザーがアクティブにする地域ヘルプ (フォームのすべてのヘルプ情報が 1 か所にまとめられる) など、対話型の方法も多数あります。実際、ユーザーをより良くサポートするために、さらに多くの方法が考えられます。たとえば、よく見られるクレジットカードの有効期限を入力する場合、ユーザーが入力ボックスをアクティブにすると、右側に視覚的なヘルプ情報が表示され、より簡潔で直感的で理解しやすくなります。

7つのスマートデフォルト

Web フォームには、スマート デフォルトを使用して必要な選択と入力の数を減らし、フォームの完了プロセスを高速化できる場所が多数あります。プッシュのデフォルトは、ほとんどの人のニーズを満たすデフォルトの選択肢と値を設定することで、一般的にすべてのユーザーに対して同じになります。フォーム オブジェクトに関連付けられているデフォルトをカスタマイズする方法もあります。たとえば、JD.com から購入した注文情報は、個人に関連するようにインテリジェントにデフォルト設定されており、フォーム入力は必要ありません。以前の配送先住所情報、支払いおよび配送方法、請求書情報などは、ユーザーのニーズと習慣に合わせてデフォルト設定され、繰り返し入力するコストを回避します。ブランド 1.0 の新しい広告設定では、ユーザーの 96% の割引率は、そのユーザーが属する注文の割引率になります。ただし、KA ユーザーが広告割引率を変更したいというニーズを満たす必要があるため、ほとんどのユーザーのフォーム入力を高速化するために、入力ボックスはデフォルトで注文割引率にプリセットされています。

8. 即時フィードバック検証

フォームは、コンテンツ構造が明確で、意味のある入力ヘルプを提供するように設計されていますが、回答は常に複数あります。この時点で、直接的なフィードバックは、即座に検証を提供し、回答が有効であることを人々に再確認させるのに役立ちます。即時検証では、入力が適切であることを確認したり、有効な回答を提案したり、デザインをリアルタイムで更新して入力を検証したりといった、複数の種類のフィードバックが提供され、ユーザーが必要な制限内に留まるのに役立ちます。このタイプのフィードバックは通常、ユーザーが入力フィールドで入力を開始、続行、または停止したときに発生します。

たとえば、パスワードを設定する場合、ユーザーは限られた文字数または限られた文字種類のパスワードを入力する必要があります。インスタント検証を使用すると、すべてのフォームに入力してから送信後にパスワードを変更する必要があることを通知するのではなく、入力したパスワードが有効で適格かどうかをユーザーに知らせることができるだけでなく、パスワードのセキュリティレベルを説明することもできるため、ユーザーは視覚的にパスワードの品質を測定できます。

直接的なフィードバックは、提供された回答の確認に限定されず、入力の提案も提供できます。ユーザーが検索する際、検索ボックスは入力プロセス中に入力を自動的に完了し、関連する検索候補を提供します。これにより、ユーザーの入力エラーを防ぐだけでなく、ユーザーのスペル入力時間を節約できます (これは携帯電話ではさらに重要です)。

9 追加入力

追加入力により、より多くのオプションや高度なオプションを提供して、それらを必要とするユーザーの妨げにならずに、それらを必要とするユーザーを満足させることができます。図に示すように、10% 未満のユーザーが複数の暴露モニタリング リンクを入力します。このようなユーザーは、[追加] ボタンをクリックしてさらに入力することができます。すぐに入力が増えても、タスクの完了は妨げられません。

10. その他の方法

ユーザーが入力したフォームのフォーム項目の大部分が既存のフォームと同じ場合、ユーザーによる繰り返し入力を避けるために、フォームデータのコピーとインポート機能が提供され、ユーザーは少量のデータのみを変更すれば済みます。

重要な情報や理解しにくい情報を視覚化し、情報を明確かつ効果的に伝達および伝達し、効率的な機能と使用法のマッピングを形成し、ユーザーがタスクの目標を効率的に達成できるようにします。たとえば、Ad Manager 1.0 でクリエイティブ テンプレートを選択した場合、テーブル リスト形式は明確ですが、ユーザーの理解と選択のコストが高くなります。新しいソリューションでは、デフォルトでサムネイル形式が使用され、創造性の直感性が強調され、一枚の写真が千の言葉に値し、ユーザーの選択がより効率的になります。

上記の方法以外にも、プライマリアクションとセカンダリアクションを区別したり、垂直タブや水平タブを使用したり、オーバーレイを使用したりといった方法もあります。ユーザーはフォームに入力する際、できるだけ早くタスクを完了したいと考えています。そのため、フォームをわかりやすく整然とデザインする必要があります。

フォローアップ

テクノロジーの発展に伴い、音声インテリジェンス、写真、センサーなどの新しいテクノロジーの出現により、フォームデザインに新しいアイデアが生まれることは間違いありません。また、将来的には、人々がフォームを使用せず、音声やアイコンタクトなどを通じてシステムと直接対話するようになり、フォームがさらに弱体化したり、消滅したりする可能性もあります。

参考文献

http://www.etre.com

http://www.lukew.com/ff/entry.asp?1502

http://www.smashingmagazine.com/2011/06/27/useful-ideas-and-guidelines-for-good-web-form-design/

ルーク・ウォロブレフスキー 《Web フォームのデザイン: 空欄を埋める》

元のタイトル: ウェブサイトのデザイン: ユーザーがフォームの入力をより効率的に完了できるようにする

キーワード: ウェブサイト、ユーザー、より効率的に、完了、フォーム、記入、インターネット、ウェブフォーム、ウェブマスター、ウェブサイトのプロモーション、収益化