効果的なウェブフォームのための 8 つのルール
|
ユーザーから情報を収集する場合、Web フォームを使用するより簡単で直接的な方法はありません。 適切に設計されたフォームは貴重な情報を提供できますが、ユーザーを遠ざけてしまう可能性もあります。 それを念頭に置いて、すべてのデザイナーが知っておくべき Web フォームの設計に関するルールがいくつかあります。 この記事のすべての例は、CoffeeCup Web フォーム ビルダーを使用して生成されました。 1. 保守的な構造と目的を持ったデザイン形態 正直に言うと、フォームの記入に何時間も費やすのは誰も好きではありません。フォームは短く簡潔にしましょう。 そして、絶対に不要なものや実用的な結果をもたらさないものを排除します。フォーム要素。フォームの各部分が すべてのポイントが全体的な開発に貢献し、ユーザーはそれに感謝するでしょう。 フォームの構造は、その中の要素と同じくらい機能的である必要があります。フォームをスタイリングするときは、 少なくとも西洋諸国では、人々は上から下へ、左から右へ読むことを覚えておいてください。また、 フォーム要素間を移動するには、Tab キーを使用します。要素の合理性とラベル付けによって、デザインが明確になるはずです。 もちろん、フォームが散らかったり乱雑に見えたりしないようにしてください。確保する すべての要素は均等に間隔をあけて整然と配置されています。 よりクリエイティブなフォームを設計するための出発点として使用できる標準フォームをいくつか示します。 ラベルは左揃えで、入力フィールドは垂直に配置されます。  このフォームには、左揃えのラベルと上から下へ整然と配置された入力ボックスが備わっています。 特にユーザーがよく知らない質問をする場合、フォームの要素は目で簡単に捉えられます。 入力ボックスに邪魔されることなく、質問リストを上から下までスムーズに読むことができるため、 質問内容に集中してください。ただし、このスタイルではラベルに注目が集まるため、フォームの記入にかかる時間が長くなります。 タブと入力ボックス間の移動には時間がかかります。 ラベルは右揃えで、入力フィールドは垂直に積み重ねられます。  右揃えのラベルは区別しやすく読みやすく、ラベルと入力フィールドの間のスペースがなくなります。 しかし、スペースが適切でないと読みにくくなり、見た目も美しくありません。 ラベルを上に揃えます:  ラベルを上に揃えると、ラベルとテキストの間を視線が移動する必要がないため、フォームへの記入が早く簡単になる。 入力ボックス間を行き来します。このスタイルでは、関連するフィールドをグループ化してスペースを節約することもできます。 2. フォームをそのスタイルに合わせる 各フォームは、伝えたい状況や文脈に合わせて調整する必要があります。フォームのデザインを計画する際には、 自分自身に次の質問をしてください: どのような質問をするつもりですか? なぜですか? フォームがある場合とない場合、どのように見えるでしょうか? フォームにはユーザーが入力する情報が含まれていますか? あるいは、記入したい情報はありますか? あなたの答えは、フォームのスタイルとコンテンツのデザインに大きな影響を与えます。 助かりました。 3. 必要なものを使う フォームに要素を追加することに躊躇している場合は、その要素がなくても実行できるかどうかを自問してください。 答えが「はい」の場合は、使用しないでください。 リセット ボタンは、多くの場合、不要なフォーム要素です。消え去るはずだったこの歴史的遺物は、今も存在しています。 フォームや将来のフォームデザインでも。考えてみてください。フォーム情報を変更したいときは、 入力ボックスに何が入っているかは実際には重要ではないので、なぜすべての情報をクリアするのでしょうか? リセット ボタンの唯一の利点は、入力した情報を誤って消去してしまい、それが煩わしい場合です。 再度記入する必要はありません。 4. 必要な場合にのみ簡潔な説明を使用する フォームで関連情報を収集する理由、特にユーザーが共有したがらない情報を収集する理由を説明する必要があるかもしれません。 電話番号やメールアドレスなど。これにより、ユーザーの疑問が解消されるだけでなく、データの信頼性も確保されます。 確実。 説明やコメントは簡潔に、要点を押さえた内容にしてください。また、異なる色、フォントサイズ、スタイルを使用して、 それらを区別します。多すぎるのも少なすぎるのも同じくらいよくありません。これらの説明が当たり障りのないものになったり、フォームの残りの部分を覆い隠したりするのは避けてください。 これは印刷サービスを提供するフォームであり、フォームの機能を説明するために説明を効果的に使用しています。 下の写真をご覧ください:  5. 積極的なコミュニケーション フォームではユーザーフレンドリーな言語を使用するようにしてください。平易な英語で書くためのヒントは次のとおりです。 会話テキスト: ユーザーと実際に会話することは避けてください。 誰かの名前を知りたい場合、相手の目を見て「フルネーム」と尋ねることはないでしょう。 本当にひどいです。肯定的な反応が欲しかったら、笑顔で「こんにちは、お名前は何ですか？」と言います。 「フルネーム」ラベルを「あなたの名前」など、より人間にわかりやすいものに置き換えるようにしてください。 6. フォームを小さな部分に分割する 少人数のグループでアイデアや意見を交換することは、コミュニケーションの一形態です。全員がお互いに自己紹介をします。自分自身について説明します。 あなたの職業、他の人がコメントしたり質問したりします。あなたは自分が言ったことを繰り返したり、他の人の質問に答えたりします。 質問にはより多くの回答が寄せられます。有意義で充実した会話、情報は無限です。 一度。 同じことは、コミュニケーションの別の形としてのウェブフォームにも当てはまります。多くの質問をしたいかもしれませんが、 しかし、だからといって読者にそれらを押し付ける必要はありません。水平線、色のブロック、意味のある画像などを使ってみてください。 またはタイトルの単語を使って情報を小さく読みやすいグループに分割します。上記の方法がどれもうまくいかない場合は、 フォームを複数のページに分割し、上部に進行状況バーを追加するだけで、ユーザーは残り時間を知ることができます。 どれくらい完了していないのですか?以下のように表示されます。  7. 意味のある、文脈に沿ったエラーメッセージを使用する エラー メッセージでは、何が問題だったのかを明確に示し、エラーを強調表示する必要があります。 結局のところ、フォーム内の欠落したフィールドを探すのは誰も好きではありません。 8. ユーザーは送信ボタンをクリックすると、これで完了だと思い、去ってしまいます。基本的には「これがあなたの情報です。さようなら」と言っているようなものです。 本当の会話であれば、握手をして「さようなら」と言って立ち去るか、 あなたのフォームでも同じことを行います。ガイドはありますか? ユーザーは、「ご提出いただきありがとうございます。すぐにご連絡いたします。」というメッセージが表示されるページに到達します。 または、そのようなもの。そして、Web ページにはホームページに戻るリンクがあるはずです。 以上です。Web フォームを設計する際にこれらのルールを念頭に置いておくと、フォームの品質に驚くことでしょう。 そしてたくさんのフィードバックをいただきました。 オリジナルリンク: http://www.wpdfd.com/問題/87/8つのルール-効果的なウェブフォーム/ |
>>: CSS を使用して画像の色を変更する 100 の方法 (収集する価値あり)
推薦する
el-table のテーブルを最適化するために仮想リストを使用する方法についての簡単な説明
目次序文解決具体的な実装満たすべき前提条件質問序文テーブルをよく使用します。データ量が多い場合は直接...
フィールドを結合するSQL関数
最近、関連テーブル内のすべてのフィールドをクエリし、それらを 1 つのフィールドに再グループ化する必...
MySql インポート CSV ファイルまたはタブ区切りファイル
別のライブラリから別のライブラリにデータをインポートする必要がある場合があり、このデータは CSV ...
Nest.js パラメータ検証とカスタム戻りデータ形式の詳細な説明
0x0 パラメータ検証Nest.jsでは、パラメータ検証業務のほとんどをパイプライン方式で実装してい...
Windows Server のインストール後にワイヤレスとオーディオが機能しない問題を解決する
1. ワイヤレスPowerShell を実行し、次のコマンドを入力します。 install-wind...
Linux DHCPサービスの詳細な説明
目次1. DHCP サービス (動的ホスト構成プロトコル) 1. 背景2. 概要3. 利点4.DHC...
Promise カプセル化 wx.request メソッド
前回の記事では、Promise を使用して小さなプログラム wx.request をカプセル化する実...
Mysql論理アーキテクチャの詳細な説明
1. 全体的なアーキテクチャ図他のデータベースと比較すると、MySQL は、そのアーキテクチャがさま...
Vueは複数の画像の追加、表示、削除を実装します
この記事では、Vueで複数の画像を追加、表示、削除するための具体的なコードを参考までに紹介します。具...
VUE+Canvasはデスクトップピンボールブロック破壊ゲームのサンプルコードを実装します
誰もがピンボールやレンガ崩しのゲームをプレイしたことがあるでしょう。左と右のキーを使用して、下にある...
Html+CSS フローティング広告ストリップの実装
1.html部分コードをコピーコードは次のとおりです。 <!DOCTYPE html> ...
ブラウザのCSS、JavaScript、背景画像のキャッシュをクリアする簡単な方法
実際のプロジェクト開発プロセスでは、ページがサーバーにアップロードされます。サーバーへの負荷を軽減し...
チャットバブル効果を実現するCSS
1. レンダリングJD効果シミュレーション効果 2. 原則高さと幅が0のボックスを用意しますこのボ...
フロントエンドコンポーネント化の基礎知識を詳しく解説
目次コンポーネントの基本概念オブジェクトとコンポーネントの違い成分属性属性とプロパティ属性：財産：ク...
Vue は左右のスライド効果のサンプルコードを実装します
序文個人の実際の開発で使用した効果問題を、今後の開発やレビューに役立てるためにまとめています。他の人...