効果的なウェブフォームのための 8 つのルール
|
ユーザーから情報を収集する場合、Web フォームを使用するより簡単で直接的な方法はありません。 適切に設計されたフォームは貴重な情報を提供できますが、ユーザーを遠ざけてしまう可能性もあります。 それを念頭に置いて、すべてのデザイナーが知っておくべき Web フォームの設計に関するルールがいくつかあります。 この記事のすべての例は、CoffeeCup Web フォーム ビルダーを使用して生成されました。 1. 保守的な構造と目的を持ったデザイン形態 正直に言うと、フォームの記入に何時間も費やすのは誰も好きではありません。フォームは短く簡潔にしましょう。 そして、絶対に不要なものや実用的な結果をもたらさないものを排除します。フォーム要素。フォームの各部分が すべてのポイントが全体的な開発に貢献し、ユーザーはそれに感謝するでしょう。 フォームの構造は、その中の要素と同じくらい機能的である必要があります。フォームをスタイリングするときは、 少なくとも西洋諸国では、人々は上から下へ、左から右へ読むことを覚えておいてください。また、 フォーム要素間を移動するには、Tab キーを使用します。要素の合理性とラベル付けによって、デザインが明確になるはずです。 もちろん、フォームが散らかったり乱雑に見えたりしないようにしてください。確保する すべての要素は均等に間隔をあけて整然と配置されています。 よりクリエイティブなフォームを設計するための出発点として使用できる標準フォームをいくつか示します。 ラベルは左揃えで、入力フィールドは垂直に配置されます。  このフォームには、左揃えのラベルと上から下へ整然と配置された入力ボックスが備わっています。 特にユーザーがよく知らない質問をする場合、フォームの要素は目で簡単に捉えられます。 入力ボックスに邪魔されることなく、質問リストを上から下までスムーズに読むことができるため、 質問内容に集中してください。ただし、このスタイルではラベルに注目が集まるため、フォームの記入にかかる時間が長くなります。 タブと入力ボックス間の移動には時間がかかります。 ラベルは右揃えで、入力フィールドは垂直に積み重ねられます。  右揃えのラベルは区別しやすく読みやすく、ラベルと入力フィールドの間のスペースがなくなります。 しかし、スペースが適切でないと読みにくくなり、見た目も美しくありません。 ラベルを上に揃えます:  ラベルを上に揃えると、ラベルとテキストの間を視線が移動する必要がないため、フォームへの記入が早く簡単になる。 入力ボックス間を行き来します。このスタイルでは、関連するフィールドをグループ化してスペースを節約することもできます。 2. フォームをそのスタイルに合わせる 各フォームは、伝えたい状況や文脈に合わせて調整する必要があります。フォームのデザインを計画する際には、 自分自身に次の質問をしてください: どのような質問をするつもりですか? なぜですか? フォームがある場合とない場合、どのように見えるでしょうか? フォームにはユーザーが入力する情報が含まれていますか? あるいは、記入したい情報はありますか? あなたの答えは、フォームのスタイルとコンテンツのデザインに大きな影響を与えます。 助かりました。 3. 必要なものを使う フォームに要素を追加することに躊躇している場合は、その要素がなくても実行できるかどうかを自問してください。 答えが「はい」の場合は、使用しないでください。 リセット ボタンは、多くの場合、不要なフォーム要素です。消え去るはずだったこの歴史的遺物は、今も存在しています。 フォームや将来のフォームデザインでも。考えてみてください。フォーム情報を変更したいときは、 入力ボックスに何が入っているかは実際には重要ではないので、なぜすべての情報をクリアするのでしょうか? リセット ボタンの唯一の利点は、入力した情報を誤って消去してしまい、それが煩わしい場合です。 再度記入する必要はありません。 4. 必要な場合にのみ簡潔な説明を使用する フォームで関連情報を収集する理由、特にユーザーが共有したがらない情報を収集する理由を説明する必要があるかもしれません。 電話番号やメールアドレスなど。これにより、ユーザーの疑問が解消されるだけでなく、データの信頼性も確保されます。 確実。 説明やコメントは簡潔に、要点を押さえた内容にしてください。また、異なる色、フォントサイズ、スタイルを使用して、 それらを区別します。多すぎるのも少なすぎるのも同じくらいよくありません。これらの説明が当たり障りのないものになったり、フォームの残りの部分を覆い隠したりするのは避けてください。 これは印刷サービスを提供するフォームであり、フォームの機能を説明するために説明を効果的に使用しています。 下の写真をご覧ください:  5. 積極的なコミュニケーション フォームではユーザーフレンドリーな言語を使用するようにしてください。平易な英語で書くためのヒントは次のとおりです。 会話テキスト: ユーザーと実際に会話することは避けてください。 誰かの名前を知りたい場合、相手の目を見て「フルネーム」と尋ねることはないでしょう。 本当にひどいです。肯定的な反応が欲しかったら、笑顔で「こんにちは、お名前は何ですか？」と言います。 「フルネーム」ラベルを「あなたの名前」など、より人間にわかりやすいものに置き換えるようにしてください。 6. フォームを小さな部分に分割する 少人数のグループでアイデアや意見を交換することは、コミュニケーションの一形態です。全員がお互いに自己紹介をします。自分自身について説明します。 あなたの職業、他の人がコメントしたり質問したりします。あなたは自分が言ったことを繰り返したり、他の人の質問に答えたりします。 質問にはより多くの回答が寄せられます。有意義で充実した会話、情報は無限です。 一度。 同じことは、コミュニケーションの別の形としてのウェブフォームにも当てはまります。多くの質問をしたいかもしれませんが、 しかし、だからといって読者にそれらを押し付ける必要はありません。水平線、色のブロック、意味のある画像などを使ってみてください。 またはタイトルの単語を使って情報を小さく読みやすいグループに分割します。上記の方法がどれもうまくいかない場合は、 フォームを複数のページに分割し、上部に進行状況バーを追加するだけで、ユーザーは残り時間を知ることができます。 どれくらい完了していないのですか?以下のように表示されます。  7. 意味のある、文脈に沿ったエラーメッセージを使用する エラー メッセージでは、何が問題だったのかを明確に示し、エラーを強調表示する必要があります。 結局のところ、フォーム内の欠落したフィールドを探すのは誰も好きではありません。 8. ユーザーは送信ボタンをクリックすると、これで完了だと思い、去ってしまいます。基本的には「これがあなたの情報です。さようなら」と言っているようなものです。 本当の会話であれば、握手をして「さようなら」と言って立ち去るか、 あなたのフォームでも同じことを行います。ガイドはありますか? ユーザーは、「ご提出いただきありがとうございます。すぐにご連絡いたします。」というメッセージが表示されるページに到達します。 または、そのようなもの。そして、Web ページにはホームページに戻るリンクがあるはずです。 以上です。Web フォームを設計する際にこれらのルールを念頭に置いておくと、フォームの品質に驚くことでしょう。 そしてたくさんのフィードバックをいただきました。 オリジナルリンク: http://www.wpdfd.com/問題/87/8つのルール-効果的なウェブフォーム/ |
>>: CSS を使用して画像の色を変更する 100 の方法 (収集する価値あり)
推薦する
VueはExcelテーブルをインポートし、インポートに失敗したデータを自動的にダウンロードします。
次のような要件があります: インポート ボタン。ボタンをクリックして Excel テーブルをインポー...
Linux のバックグラウンドで実行するいくつかの方法 (まとめ)
1. ノーフープハングアップ信号を無視してプログラムを実行する追加メモnohup コマンドは、ハン...
LinuxにPython 3.6をインストールして落とし穴を避ける
Python 3のインストール1. 依存環境をインストールするPython3 はインストール プロセ...
MySQLパラダイムの使用に関する詳細な説明
1. パラダイムこのパラダイムの英語名は Normal Form であり、1970 年代にリレーショ...
Vue.$set の失敗の落とし穴の発見と解決
偶然、プロジェクト内でVue.$setが無効であることがわかりましたデータ フィルタリングを追加する...
実用的なウェブオンラインツール12選
1.ファビコン.cc ico アイコンの Web サイトをオンラインで作成するには、画像をアップロー...
MySQL 並列レプリケーションの簡単な分析
01 並列レプリケーションの概念MySQL のマスター スレーブ レプリケーション アーキテクチャで...
HTMLの基礎を詳しく解説（第2部）
1. リストリスト ulコンテナーには、一貫した構造とスタイルを持つテキストまたはグラフの形式が読...
一般的な CSS プロパティのブラウザ互換性の概要 (推奨)
CSS プロパティのブラウザ互換性をまとめる必要があるのはなぜですか?使用する際は、Can I U...
両端の CSS レイアウトのサンプルコード (親の負のマージンを使用)
最近、開発中に両端が揃ったレイアウトに遭遇しました。レイアウトはパーセンテージに基づいていました。以...
CentOS7 で MySQL のスケジュールされた自動バックアップを実装する方法
実稼働環境で起こる最も嬉しいことは、シナリオによっては、更新または削除時にパラメータを無視せざるを得...
Docker+Selenium Grid に基づく技術アプリケーションをテストするためのサンプル コード
Selenium Grid の紹介Selenium Grid のいくつかの新しい機能は、今後リリース...
ボタンをEnterキーに関連付けるjsコード
コードをコピーコードは次のとおりです。 <html> <ヘッド> <ス...
CSS でデフォルトのスタイルをクリアし、共通のスタイルを設定する方法
CSS デフォルトスタイルをクリア通常の明確なデフォルト スタイル: *{ マージン:0; パディン...
Docker ベースの ELK を素早く構築する方法
[概要] この記事では、自作の Docker プラットフォームをベースに完全な ELK システムを素...