web-dev-qa-db-ja.com

必須フィールド

すべての必須フィールドがあるページと混在しているページがあるフローの必須フィールドを示すルールは何ですか?

この場合、オプションのフィールドを示す方が良いですか?

6
Aaron Benjamin

このようなインジケーターの目的は、何かが異なる場合にユーザーに通知することです。したがって、フォームにどのようにアプローチするかを伝えてください。一般に、フォームの大部分が必要な場合は、そのことを前に述べ、それに応じてOptionalフィールドにフラグを付けます。逆に、フォームのほとんどがオプションで、一部が必須の場合は、requiredフィールドにフラグを付けます。

Some Examples

Luke Wroblewski からのこの短い投稿は2008年のものですが、今日でも適用できます。

インタラクションデザインアソシエーション(IxDA)ディスカッションリストで、エリンウォルシュは、必須フォームフィールドとオプションフォームフィールドのマーク付けに関する興味深い洞察を共有しました。

「私たちは最近、必須フィールドとオプションフィールドが混在する複数の検索フォームでプロトタイプテストを行いました。チームでは、最善のアプローチに分かれていたため、メソッドを区別することを試みました。異なる視覚的インジケーター。サンプルサイズは限られていましたが、「オプション」の方が勝者でした。驚くべきことに、一部の参加者は、「ここでオプション」と言ったのが好きだとコメントしました。UIチームは興奮していませんが、アイコンや他の視覚的インジケータを使用するよりも、それを詳しく説明することは非常に有利でした。」

この発見は、私がWebフォームデザインで提唱しているベストプラクティスと一致しています。

「ラベルの後に「オプション」という語句を含めることは、同じことを表すために使用できる視覚的シンボルよりもはるかに明確です。誰かが常に「このアスタリスクの意味は何ですか?」そして、物事を説明する伝説を探しに行かなければならない。」

Emphasismine)

12
Hynes

テクノロジーは変化し進化しているため、必要なフィールドの前に赤い星を使用するのではなく、非常に多くのデザインを実験して同じタスクを実行できます。

オプションのフィールドと必須のフィールドをめちゃくちゃにしないで、それらを別々にして、ユーザーが必要な情報を入力できるようにすることは、uxの観点によると良い習慣です。ほとんどの場合、私たちは最近html5を使用するので、画像に示すような素晴らしいものを試して、他のフィールドとラベルのためのスペースを空けることができます!

enter image description here

ニューヨークの日を過ごす!

5
user3011961

このような状況になると、一貫性が鍵となります。フィールドに関する詳細情報(必須またはオプションなど)があることを示す一般的な指示は、フィールドの横にあるアスタリスク(*)であり、フォームの下部(またはどこか見やすい場所)に*の意味を説明しています。

*を使用して必須フィールドを示す場合は、入力の周りを赤色で強調表示することを検討してください。しかし、あなたの状況からすると、フィールドがオプションである場所は数箇所しかないようです。リストのサイズとオプションの数によっては、ラベルのすぐ下に「(optional)」という小さなテキストを入力するだけで済む場合があります。

ラベル:入力フィールド

ラベル:入力フィールド

ラベル:入力フィールド
(オプション)

ラベル:入力フィールド

または、この特定のケースでフローの必須フィールドよりもオプションフィールドが多い場合は、「(optional)」テキストの代わりに、すべてのオプションフィールドの横に*を付けることができます。
しかし、一つのことは一般的に普遍的です。 赤の*は必須フィールドです。黒の*はどちらにも使用できます。ほとんどの場合(これは決して規則ではなく、単なる観察です)青い*はオプションです。 しかし、*が表すものをユーザーが簡単に見られる場所で指定してください。

リストにオプションのフィールドがいくつかある場合は、「(オプション)」というテキストを使用します。数が多い場合は、*を使用します。 allのアイテムがオプションの場合、「スキップ」ボタンを提供しますどこかに移動しますフローの次のページに移動します。

1
Andrew

私はあなたがベイマーズの最新の研究に興味があるかもしれないと思った: http://baymard.com/blog/required-optional-form-fields

要約は次のとおりです。

  • 上位100の米国のチェックアウトプロセスをベンチマークすると、サイトの9%のみが両方のフィールドタイプを明示的にマークしました
  • オプションフィールドと必須フィールドの両方を明示的に示すことにより、ユーザーは何も推論する必要がなく、入力するフィールドのみに集中でき、その結果、フォームフィールド全体でフィールドごとにシームレスに進むことができます。前のフィールドのスキャン。
  • 最も一般的な間違い–トップ100のeコマースチェックアウトの63%が犯した間違い–は、タイプの1つだけを示すことです
  • モバイルチェックアウトをテストすると、テスト対象の75%が、必須フィールドとオプションフィールドの両方を明確にマークできなかったサイトでフォームの使いやすさに関する重大な問題を経験しました。

そして彼らの勧告:

enter image description here

0
DLM