ウェブサイトのフォームデザインの簡単な分析（I）ユーザーをより良く誘導する方法

フォームは主にデータ収集を担当し、訪問者の名前、メールアドレス、性別、住所、メッセージの提案、パスワードの設定、個人アカウントの管理など、訪問者が自分でフォームに入力する必要があります。今日では、フォームはどこにでもあります。フォームの設計が成功すると、ユーザー満足度が向上するだけでなく、より正確なデータを収集できます。逆に、フォームの設計が失敗すると、誤った乱雑な情報のみが収集され、最終的には潜在的なユーザーを失うことにつながる可能性があります。

1. フォームの内容を整理してユーザーにわかりやすいガイドを提供する

まず、ユーザーにどのようなフォームに記入するのか、記入後に何ができるのかを明確に伝える必要があります。どのような質問をする必要がありますか？ユーザー情報を取得する他の方法はありますか？一般的に、フォームのレイアウトは、垂直配置、ステップバイステップの入力（複数ページ表示）、左右レイアウトの3種類に分けられます。これら 3 つの形式の構成形式と機能特性により、使用環境の違いに応じてそれぞれのスタイルが決まります。いくつかの対応する例を通して具体的な分析をしてみましょう。

図1

Web 実践の調査によると、ソフトウェアをアンインストールするためのインターフェースの一般的な構成構造は、垂直配置スタイルです。通常、上部ではフォームに記入する目的を明確にし、その後にフォームの具体的な質問を提示します。アンインストール タイプのフォームでは、ユーザー入力を減らすために内容を簡潔にする必要があり、質問と回答の数を減らし、必須項目のない複数選択の質問を可能な限り提供する必要があります。ユーザーはフォームへの記入を好まないということを知っておく必要があります。特にソフトウェアをアンインストールすると、フォームへの記入にあまり忍耐力がなくなってしまいます。図 1 に示すように、アンインストール フォームは垂直に構成されています。上部には、これらの質問をする目的を明確に示すスピーチがあり、その下にグループ化されたフォーム コンテンツがあります。この垂直レイアウトと簡潔なフォーム構成は、ユーザーからのフィードバックを得るのにさらに役立ちます。

図2

図3

図4

図5

状況によっては、多くの質問に順番に答える必要があります。各フォームのコンテキストを理解して整理することで、最適な回答を得ることができます。フォームがダイアログ形式で提示される場合、トピック間には当然ギャップが生じるため、ダイアログを意味のあるわかりやすいトピックに分割するには、複数の Web ページが必要になります。入力されたフォームは、図 2 ～ 5 に示すように複数のページに表示されます。フォームは、一連のデータ入力ボックスではなく、特定の人との会話であると考えてください。各フォームは、異なるコンテキストの質問を使用してユーザーと通信するため、実際の応答率が高くなります。

図6

フォームでさらに多くの回答を収集する必要がある場合は、フォームへの入力後にオプションの質問をいくつかして、より多くの回答を得ることを検討できます。フォームのラベルには一貫した用語を使用します。解釈しやすい簡潔な単語 1 語のラベルを使用します。図 6 に示すように、フォーム デザインでは左右レイアウトが採用されており、必須および重要なフォーム項目が左側に、オプションのフォームが右側に配置されているため、ページ フォーム コンテンツの視覚的なかさばりが軽減されています。インターフェイス コンテンツ全体が中央に配置されているため、より美しく読みやすくなっています。

2. フォーム入力に関するフィードバックにより、ユーザーに思慮深いガイダンスを提供する

フォームの完了度と正確性を高めるために、デザイナーはさまざまな要素を避け、明確でシンプルな Web フォームを提供するよう努めます。そのため、あらゆる視覚効果は適切に使用する必要があります。このようなエラーを解決し、ユーザーの誤解を減らすには、視覚的な手段を使用します。ユーザーがエラー情報を含むデータを送信した場合、どうすればよいでしょうか。まず、エラーが発生したこと、エラーの内容、およびエラーを修正する方法をユーザーに知らせる必要があります。

図7

図8

図 7 はメール登録フォームのページです。ユーザーが間違ったメッセージを送信したり、間違った操作が行われたりすると、エラーの横に目立つ赤い視覚要素がガイドとして表示され、ユーザーがエラーの場所を見つけられないという恥ずかしさを効果的に解決します (エラーを促す要素記号に関しては、これに対処する際に、色盲や色弱のユーザーのニーズも考慮する必要があるかもしれません。彼らはこのような強い色のプロンプトを見ることができませんが、感嘆符などのリマインダー要素の存在によってもこの双方向のニーズを解決できると思います)。登録されたユーザー名が同じ場合、ドロップダウン ボックスを使用して、アドレスがどのような構造で登録されているかが示されます。また、同じユーザー名に同じプレフィックスを付けたい場合にサフィックスを追加する方法の提案がユーザーに提供され、正しく入力すると、図 8 に示すようにテキスト アイコン フィードバックも表示されます。

図9

図10

図 9 と 10 の登録フォームには、2 つのエラー プロンプト スタイルがあります。入力が成功すると、プロンプトは消えます。入力が間違っているか、標準を満たしていない場合は、対応する異なるテキスト フィードバックが表示され、ユーザーにエラーの理由が通知されます。ユーザーがすべての情報を入力した後にフィードバックが表示されないように、Enter キーを押してすぐに修正します。

3. クリエイティブなフォームスタイルはユーザーにリラックスした快適な体験を提供します

入力ボックスとラベルのスタイルは、全体的なインターフェース スタイルに応じて定義する必要があります。さまざまなクリエイティブ タイプを表示することで、より多くの視聴者を引き付けることができます。したがって、フォームを最適化するために優れたクリエイティブをデザインすることが非常に重要です。

図11

図 11 Blackwave はノートブック機能を使用して重要なメモを記録し、フォームに挿入します。手書きや付箋の要素の使用が注目を集め、これらの遊び心のあるデザインはユーザーにその機能を完璧に伝えます。

図12

図13

訪問者がレイアウトを退屈に感じないようにするために、図 12 と 13 のフォーム デザインでは、レトロなノスタルジアや紙の重なりなどの芸術的な要素を使用してフォームを提示しています。

図14

図 14 Wing Cheng のフォーム スタイルは、このコンセプト Web サイトに沿ったもので、非常にシンプルで基本的なフォーム レイアウトとユニークな視覚的角度により、フォームへの入力がより面白くなっています。

図15

図 15. Orca Bay Sea Foods のフォームは、サイト レイアウトに完全に統合されるように設計されています。

図16

図17

フォームのクリエイティブな表現は、ウェブサイト全体のスタイルの特徴から派生しており、ウェブサイト全体の主な視点を反映しており、閲覧時に唐突感がなく、全体的なつながりが強いです。図 16 に示すように、ArtFlavours ホームページのメインビジュアル スタイルと図 17 の ArtFlavours フォーム スタイルは同じ処理手法を使用しており、どちらも布のテクスチャ パッチワークを使用してフォームに対するユーザーの快適性を高め、訪問者に深い印象を残すとともに、Web サイト全体のスタイルとも一致しています。

上記はフォームの簡単な概要であり、フォームのレイアウト、フォーム入力後のインタラクティブなフィードバック、クリエイティブフォームの独自性という 3 つの側面が含まれています。この記事がフォーム設計に役立つことを願っています。

転載の際は出典を「Baidu MUX」と明記してください

原題: ウェブサイトフォームデザインの簡単な分析 (I) ユーザーをより良く誘導する方法

キーワード: 分析、ウェブサイト、フォーム、断片、ユーザーをより良く誘導する方法、責任者、ウェブマスター、ウェブサイトのプロモーション、収益化