フォームインターフェイスの推奨事項

フォームの設計は非常に難しい場合があります。 ユーザーにとって価値のある便利なものを得るには、さまざまな推奨事項とルールを考慮する必要があります。 この記事では、このような推奨事項の有用なリストを作成しようとしました。 コンパイルするには、経験と専門家の記事を使用しました。

主な推奨事項とデータ入力

• 簡潔さを目指して。
• 1つの言語がフォーム（売上高、用語）で使用されていることを確認してください。
• ページ上にフォームのみがあり、それ以外に何もない場合、ページをロードするとき、フォームの最初のフィールドに焦点を当てる価値があり、これは少し時間を節約します（検索、ログイン、登録ページ）。
• フォームに記入する明確な方法を維持します。
• 可能であれば、二次的な活動を避けてください。
• それ以外の場合は、プライマリアクションとセカンダリアクションを明確に分離します。
• フォームのフィールドだけでなくメインアクションも調整します。これにより、フォームの認識が簡単になります。
• メインボタンの色付きの背景は、より見やすくします。
• ユーザーがクリックした後、「送信」ボタンを無効にします。これにより、二重データ送信が回避されます。
• さらに良いのは、送信インジケータを表示することです。

グループ化、タブ、および複数ページのフォーム

• 同様のフィールドを近くに配置します。
• ユーザーがレイアウトを小さく切り替える必要があるように、フィールドをグループ化します。
• 適切なフィールドグループを使用して、フォームのコンテンツを整理します。
• フォームを強調表示するために必要な視覚要素の最小数を使用します。
• フォームをいくつかの短いフォームに簡単に分割できる場合は、1ページを使用します。
• フォームに複数のトピックに関連する多数の質問が含まれている場合-複数のページを使用します。
• フォームに1つのトピックに関する多数の質問が含まれている場合は、長いページを使用します。
• ウィザードの場合、前の手順に戻る機能を提供します。
• ウィザードで、ネストされたステップを避け、一貫性のあるものにします。

フィールド

• 各フィールドを持つことの適切性を評価します。
• 不要なフィールドを削除する機会を探してください。
• 他のフィールドを削除するために、一部のフィールドを複雑にしないでください。
• 複数の方法でデータを入力できる場合、電話番号を入力するときなど、柔軟な入力を使用します。
• 柔軟な入力を提供しても、単純なフィールドへの入力は難しくなりません。
• 定型入力を使用して、日付などの特定のデータを入力します。
• 入力マスクは、次のようにフィールドに入力するのに必要な時間を短縮できます。 一部の文字はすでに入力されています。
• 特定のタイプの文字のみが予想される場合、ユーザーがそれについて知っていることを確認してください。
• あなたが間違った文字を入力した場合-注目すべきですが、ユーザーに押し付けて通知しません。
• デフォルト値がユーザーの目標と一致していることを確認してください。
• パーソナライズされたデフォルトを使用すると、返信ユーザーがフォームにすばやく記入できるようになります。たとえば、コメント入力フォームの電子メールを記憶します。
• キーボードとタブを使用してフォームに記入することを忘れないでください。
• tabindexを使用して、タブの動作を制御します。
• フォームを設計するときに、フィールドに入力する論理的な順序を指定します。
• フォームを使用して大量のデータを管理する場合、フィールドはオートコンプリートをオフにする必要があります。そうしないと、時間の経過とともにすべての可能な値が保存されます。
• 編集できないフィールドとそのフィールドは適切に見えるはずです。

キャプション

• フィールドの署名は、フィールドの左側または上部に配置する必要があります（推奨）。
  
  • 署名は十分な長さにすることができ、左から1行に収まらない場合は上に収まります。
  • 国際化に適しています。別の言語では署名が長くなる可能性があり、左側に収まりません。
  • 右側に空のスペースが表示されます。これは、明確化または検証に適しています。
  
  
• 複数行のフィールド署名は避けてください。
• 署名には、予想されるデータを明確に反映する必要があります。
• フォームにオプションのフィールドを配置しないようにしてください。ユーザーが入力しないようにしてください。
• ほとんどのフィールドが必須の場合-オプションを選択します。
• ほとんどのフィールドがオプションの場合、必須を選択します。
• 必須フィールドをテキストで強調表示することをお勧めしますが、*またはフォント/色の強調表示も適切です。
• フォームの名前は、フォームのタスクに対応している必要があります。
• フォームへの入力に必要なヒントを最小限に抑えます。
• ヘルプは状況に応じたものである必要があります-目的のフィールドの近くにあり、役立つものです。
• ユーザーになじみのない大量のデータを要求する場合-動的なヘルプシステム（ツールヒントなど）を使用します。
• アライメントとグループ化を使用して、データがどのように関連しているかを示します。

検証とヒント

• 発生したエラーを強調表示します-それらをフォームの前と各フィールドに表示します。
• エラーを修正する効果的な方法を提供します。
• 視覚的にエラーメッセージを複製します。
• データが正しく送信されたことを明確に理解してください。
• エラーの割合が高い可能性のあるフィールドに対してインスタント検証を使用します。
• レポートフィールドの制限。
• 可能であれば、フィールドの長さを制限しないでください。
• それ以外の場合は、データがフィールドに配置されていることを確認してください。

チェックボックスとラジオボタンの推奨事項

• チェックボックスとラジオボタンは常に署名の左側にあります。
• カスタム設計要素は、可能な限り標準表現に近づける必要があります。
• リストを縦に並べて、1行に1つのオプションがあります。
• 複数のフラグまたはラジオボタンが互いの下にある場合、それらの間には同じ距離があるはずです。
• 行にいくつかのオプションを付けて水平に使用する場合は、要素と署名を使用してそれらの間に十分なスペースを空け、どのラベルが参照されているかを明確に強調します。 。
• ユーザーが選択したときに何が起こるかが明確になるように、チェックボックスの署名にはポジティブな表現を使用します。
• ユーザーが選択するとどうなるか、空白のままにするとどうなるかを理解できるように、署名を書きます。
• これができない場合は、2つのラジオボタンを作成することをお勧めします。1つは機能をオンにし、もう1つはオフにして、各ケースに明確な署名を書き込みます。
• 可能であれば、短いドロップダウンリストの代わりにラジオボタンを使用します。
• ラジオボタンのすべてのリストに対して常にデフォルトオプションを設定します。
• ラジオボタンでは1つのオプションしか選択できないため、両方のオプションが互いに矛盾せず、明らかに異なることを確認してください。
• ラジオボタンが必要なデータ領域を完全に覆っていることを確認してください。そうでない場合は、オプション「other」とテキストフィールドを追加してオプションを入力してください。 これはドロップダウンリストにも適用されます。
• ユーザーがチェックボックス/ボタンだけでなく署名もクリックしてオプションを選択できるようにします。フィッツの法則に従って、大きなターゲットをクリックする方が簡単です。 HTMLフォームでは、各ラベルをラベルタグで囲むだけで簡単にこれを実現できます。
• チェックボックスとラジオボタンは、状態を変更するためにのみ使用し、アクションボタンとして使用したり、フォームを送信したりすることはできません。

ドロップダウンリスト

• リストに2つ以上のオプションがある場合、アルファベット順にソートする必要があります。これにより、目的のアイテムの検索が高速化されます。
• 「その他」オプションを使用する場合は、最後に配置する必要があります。
• 多くのオプションがあるが、それらの意味に従ってグループに分けられている場合、これは価値があります。
• リストが長いが、最も一般的な値のグループ（約5〜7個）がある場合は、それらをリストの上にドラッグできます。
• リストが長すぎる場合は、オートコンプリートを使用する必要があります。
• ドロップダウンリストにyes / noオプションのみが含まれている場合は、チェックボックスに置き換えます。
• ドロップダウンリストの値の数が常に一定で、4〜5未満の場合、そのようなリストはラジオボタンの水平グループに展開されます。

[キャンセル]ボタンと[クリア]ボタンの推奨事項

• 優れたインターフェイスの[キャンセル]ボタンはまったく必要ありません。 他のナビゲーションメカニズム-ブラウザーの戻るボタン、パンくずリスト、メニューが使用されます。
• キャンセルボタンをリンクに置き換えて、二次的な重要性を強調することをお勧めします。
• クリアボタンもリンクする価値があります。 コストを、フィルターや検索など、これに適した場所にのみ配置します。
• 最大の問題は、ユーザーがしばしば[送信]ボタンではなく[リセット]ボタンをクリックすることです。 ワンクリック-そして、すべての骨の折れる作業が消えました。
• フォームの最後に2つのボタンがあると、インターフェイスに混乱が生じ、ユーザーが次のステップを明確に判断することは困難です。 この役に立たないボタンを見て、2つのボタンのどちらを押すかを判断するのに時間がかかります。
• ユーザーがフォームに入力したデータの一部を本当に削除したい場合でも、この機能を実行する専用ボタンの存在は、前に2つの選択肢があるため、作業を遅くするだけです。
  
  • 無効なデータを含むフィールドを編集して、古いテキストを新しいテキストに置き換えます。
  • [リセット]ボタンをクリックし、すべての元のフォームフィールドに新しいテキストを入力します。
  
  
• 追加の選択肢は追加のメンタル労力のみを必要とし、最適に構成されたインターフェイスで作業する場合、次の段階に進む必要があるアクションをさらに考慮することで失われるよりも多くの時間が節約されます。 2つのオプションのいずれかを選択するには少なくとも1〜2秒かかります。そのため、この選択の前にユーザーをまったく配置しないことが最善です。 1秒は低下のように見えるかもしれませんが、この低下は、地球全体の年間ベースの生産性の低下から1億番目の損失をもたらします。

準備では、次の材料が使用されました。

• ジェイコブ・ニールセンによるアラートボックス。
• ux.stackexchange.comからのトピックの束。
• SmashingMagazineの記事
• ビジネスリンチ。
• artgorbunov.ruからのヒント。