効果的なウェブフォームのための 8 つのルール
|
ユーザーから情報を収集する場合、Web フォームを使用するより簡単で直接的な方法はありません。 適切に設計されたフォームは貴重な情報を提供できますが、ユーザーを遠ざけてしまう可能性もあります。 それを念頭に置いて、すべてのデザイナーが知っておくべき Web フォームの設計に関するルールがいくつかあります。 この記事のすべての例は、CoffeeCup Web フォーム ビルダーを使用して生成されました。 1. 保守的な構造と目的を持ったデザイン形態 正直に言うと、フォームの記入に何時間も費やすのは誰も好きではありません。フォームは短く簡潔にしましょう。 そして、絶対に不要なものや実用的な結果をもたらさないものを排除します。フォーム要素。フォームの各部分が すべてのポイントが全体的な開発に貢献し、ユーザーはそれに感謝するでしょう。 フォームの構造は、その中の要素と同じくらい機能的である必要があります。フォームをスタイリングするときは、 少なくとも西洋諸国では、人々は上から下へ、左から右へ読むことを覚えておいてください。また、 フォーム要素間を移動するには、Tab キーを使用します。要素の合理性とラベル付けによって、デザインが明確になるはずです。 もちろん、フォームが散らかったり乱雑に見えたりしないようにしてください。確保する すべての要素は均等に間隔をあけて整然と配置されています。 よりクリエイティブなフォームを設計するための出発点として使用できる標準フォームをいくつか示します。 ラベルは左揃えで、入力フィールドは垂直に配置されます。  このフォームには、左揃えのラベルと上から下へ整然と配置された入力ボックスが備わっています。 特にユーザーがよく知らない質問をする場合、フォームの要素は目で簡単に捉えられます。 入力ボックスに邪魔されることなく、質問リストを上から下までスムーズに読むことができるため、 質問内容に集中してください。ただし、このスタイルではラベルに注目が集まるため、フォームの記入にかかる時間が長くなります。 タブと入力ボックス間の移動には時間がかかります。 ラベルは右揃えで、入力フィールドは垂直に積み重ねられます。  右揃えのラベルは区別しやすく読みやすく、ラベルと入力フィールドの間のスペースがなくなります。 しかし、スペースが適切でないと読みにくくなり、見た目も美しくありません。 ラベルを上に揃えます:  ラベルを上に揃えると、ラベルとテキストの間を視線が移動する必要がないため、フォームへの記入が早く簡単になる。 入力ボックス間を行き来します。このスタイルでは、関連するフィールドをグループ化してスペースを節約することもできます。 2. フォームをそのスタイルに合わせる 各フォームは、伝えたい状況や文脈に合わせて調整する必要があります。フォームのデザインを計画する際には、 自分自身に次の質問をしてください: どのような質問をするつもりですか? なぜですか? フォームがある場合とない場合、どのように見えるでしょうか? フォームにはユーザーが入力する情報が含まれていますか? あるいは、記入したい情報はありますか? あなたの答えは、フォームのスタイルとコンテンツのデザインに大きな影響を与えます。 助かりました。 3. 必要なものを使う フォームに要素を追加することに躊躇している場合は、その要素がなくても実行できるかどうかを自問してください。 答えが「はい」の場合は、使用しないでください。 リセット ボタンは、多くの場合、不要なフォーム要素です。消え去るはずだったこの歴史的遺物は、今も存在しています。 フォームや将来のフォームデザインでも。考えてみてください。フォーム情報を変更したいときは、 入力ボックスに何が入っているかは実際には重要ではないので、なぜすべての情報をクリアするのでしょうか? リセット ボタンの唯一の利点は、入力した情報を誤って消去してしまい、それが煩わしい場合です。 再度記入する必要はありません。 4. 必要な場合にのみ簡潔な説明を使用する フォームで関連情報を収集する理由、特にユーザーが共有したがらない情報を収集する理由を説明する必要があるかもしれません。 電話番号やメールアドレスなど。これにより、ユーザーの疑問が解消されるだけでなく、データの信頼性も確保されます。 確実。 説明やコメントは簡潔に、要点を押さえた内容にしてください。また、異なる色、フォントサイズ、スタイルを使用して、 それらを区別します。多すぎるのも少なすぎるのも同じくらいよくありません。これらの説明が当たり障りのないものになったり、フォームの残りの部分を覆い隠したりするのは避けてください。 これは印刷サービスを提供するフォームであり、フォームの機能を説明するために説明を効果的に使用しています。 下の写真をご覧ください:  5. 積極的なコミュニケーション フォームではユーザーフレンドリーな言語を使用するようにしてください。平易な英語で書くためのヒントは次のとおりです。 会話テキスト: ユーザーと実際に会話することは避けてください。 誰かの名前を知りたい場合、相手の目を見て「フルネーム」と尋ねることはないでしょう。 本当にひどいです。肯定的な反応が欲しかったら、笑顔で「こんにちは、お名前は何ですか？」と言います。 「フルネーム」ラベルを「あなたの名前」など、より人間にわかりやすいものに置き換えるようにしてください。 6. フォームを小さな部分に分割する 少人数のグループでアイデアや意見を交換することは、コミュニケーションの一形態です。全員がお互いに自己紹介をします。自分自身について説明します。 あなたの職業、他の人がコメントしたり質問したりします。あなたは自分が言ったことを繰り返したり、他の人の質問に答えたりします。 質問にはより多くの回答が寄せられます。有意義で充実した会話、情報は無限です。 一度。 同じことは、コミュニケーションの別の形としてのウェブフォームにも当てはまります。多くの質問をしたいかもしれませんが、 しかし、だからといって読者にそれらを押し付ける必要はありません。水平線、色のブロック、意味のある画像などを使ってみてください。 またはタイトルの単語を使って情報を小さく読みやすいグループに分割します。上記の方法がどれもうまくいかない場合は、 フォームを複数のページに分割し、上部に進行状況バーを追加するだけで、ユーザーは残り時間を知ることができます。 どれくらい完了していないのですか?以下のように表示されます。  7. 意味のある、文脈に沿ったエラーメッセージを使用する エラー メッセージでは、何が問題だったのかを明確に示し、エラーを強調表示する必要があります。 結局のところ、フォーム内の欠落したフィールドを探すのは誰も好きではありません。 8. ユーザーは送信ボタンをクリックすると、これで完了だと思い、去ってしまいます。基本的には「これがあなたの情報です。さようなら」と言っているようなものです。 本当の会話であれば、握手をして「さようなら」と言って立ち去るか、 あなたのフォームでも同じことを行います。ガイドはありますか? ユーザーは、「ご提出いただきありがとうございます。すぐにご連絡いたします。」というメッセージが表示されるページに到達します。 または、そのようなもの。そして、Web ページにはホームページに戻るリンクがあるはずです。 以上です。Web フォームを設計する際にこれらのルールを念頭に置いておくと、フォームの品質に驚くことでしょう。 そしてたくさんのフィードバックをいただきました。 オリジナルリンク: http://www.wpdfd.com/問題/87/8つのルール-効果的なウェブフォーム/ |
>>: CSS を使用して画像の色を変更する 100 の方法 (収集する価値あり)
推薦する
セマンティックHTML構造を理解する方法
HTML と CSS は誰もが知っていると思います。HTML の構造と CSS の表現の分離も知って...
MySQL-8.0.26 構成グラフィックチュートリアル
はじめに: 最近、会社のプロジェクトでデータベースのバージョンが変更されました。ここでは、MySQL...
Mysql データベースの日付と日時型でデフォルト値 0000-00-00 を設定するときに発生するエラー問題の詳細な説明
現象: MySQL バージョン 5.7 以降では、日付型と日付時刻型のデフォルト値が「0000-00...
VueはTeleportをベースにModalコンポーネントを実装します
目次1. テレポートについて知る2. テレポートの基本的な使い方3. 最初のステップの最適化4. 第...
Linuxプロセスネットワークトラフィック統計の実装プロセス
序文Linux には、ネットワーク接続、プロセス、およびその他の情報をリアルタイムで収集するための対...
Bootstrap 3.0 学習ノートボタンスタイル
この記事では主にボタンのスタイルについて説明します。 1. オプション2. サイズ3. 活動状況4....
MySQL EXPLAIN ステートメントの使用例
目次1. 使用方法2. 出力結果1.id 2.選択タイプ3.表4.パーティション5.タイプ6.可能な...
LinuxカーネルマクロContainer_Ofの詳細な説明
目次1. 構造体はメモリにどのように保存されますか? 2. container_ofマクロ3. 型4...
MySQL マルチテーブルクエリの詳細な説明
よく食べて十分に休息を取るというのは簡単なことのように思えますが、実際に実行するのはそれほど簡単では...
Jenkins の紹介と Docker で Jenkins をデプロイする方法
1. 関連概念1.1 Jenkins の概念: Jenkins は、使用されるプラットフォームに関係...
ローカルで起動したときに Vue プロジェクトがクッキーを保持できない問題を解決する
vueプロジェクトをパッケージ化してサーバーにデプロイし、正常にログインできるが、ローカルで起動する...
HTMLで境界線を設定する3つの方法の詳細な説明
HTML で境界線を設定する 3 つの方法 境界線の幅: 1px 2px 2px; 境界線のスタイル...
MySQL並列レプリケーションの簡単な説明
1. 並列レプリケーションの背景まず、並列レプリケーションの概念はなぜ存在するのでしょうか? 1. ...
NodeJS は画像テキスト分割を実現します
この記事では、画像テキストセグメンテーションを実装するためのNodeJSの具体的なコードを参考までに...
CSS における要素の表示モード
CSS では、要素タグは、要素の表示モードの違いに応じて、インラインレベル要素とブロックレベル要素の...