it-swarm-ja.com

送信前にWebフォームの必須フィールドを強調表示する最良の方法は何ですか?

これは主観的に見えますが、そうです。私のクライアントは、アプリケーション内のWebフォームの必須フィールドを赤いアスタリスクで強調表示してほしいと思っています。通常、赤いアスタリスクはエラーが発生していることを意味するため、別の方法を探しています。

必要なフィールドをユーザーに知らせるにはどうすればよいですか? (回答ごとに1つずつください。)

PDATE:これは、どのフィールドが必要かを示しますbefore検証/ポストバックが発生します。

46
Ryan Shripat

すべてのフィールドの95%がtechinsurance.comで必須であるため、私の決定は、フィールドが必須であることを示すために太字を使用し、混乱を減らすためにオプションのフィールドの横にWord(オプション)を書くことでした。

例えば.

会社の電話番号

携帯電話番号(オプション)

エラーメッセージ自体もおそらく同じくらい重要です。私はそれらを可能な限り明白にしました...

必須フィールド...

alt text

エラーあり...

alt text

これらの決定は、必要なフィールドを示すために、半伝統的な赤いアスタリスクが付いたWebサイトが何年も続いた後に行われました。これらのアスタリスクはほとんどの場合機能しました。問題は検証エラーがあったときでした。一部のページはかなり長くなる可能性があり、赤い検証エラーは、ページがすでに赤いアスタリスクでいっぱいになっている場合、ページで十分に目立たないでしょう。時々人々はそれについて私たちを呼ぶのに十分イライラするので私はこれを知っています。しかし、すべての兆候は、新しい(上記の)デザインが問題を修正したことを示しています。

57
Steve Wortham

これを行うための最良の方法は、実際には入力フィールドの後に「必須」という単語を綴ることです。この感情は、Luke WroblewskiによるWebフォームデザインにも反映されています。 http://www.lukew.com/ff/entry.asp?725

リンクの例では必須フィールドではなくオプションフィールドについて説明していますが、プリンシパルは同じであると考えています。ユーザーは視覚的なインジケーターを含めるのではなく、それを書き出すことを好みます。

さらに、確認する必要があるのは、必須のフィールドではなくオプションであるフィールドを示している場合があります。私にとっては、どちらにしても例外はありません。たとえば、10個のフィールドがあり、そのうちの8個が必須である場合、8個のフィールドに「必須」と書く代わりに、2つの例外に「オプション」と書き込みます。ただし、2つだけ必要な場合は、例外であるため、その2つに「必須」と記入します。

9
RussellUresti

この質問は、最初に想像するよりも問題になる可能性があります。

たとえば、一部のポスターでは、「必須」を示すためにアスタリスクを使用することを提案しています。これに関する問題は、一部のWebサイトが実際に逆を使用し、オプションのフィールドの横にアスタリスクを配置することです。ユーザーは、アスタリスクが「必須」フィールドであるかオプションフィールドであるかを一目で確認できず、さらに調査し、フローを中断し、フォームプロセスに不満を感じ、場合によってはフォームをすべて放棄する可能性があります。一緒。

RussellUrestiの返信は、必須フィールドの横に「required」と書くだけで「Webフォームデザイン」に関するルークブロブレスキーの研究を繰り返したものであり(私の10年の経験では)、フォームで最高のスループットを実現し、混乱を最小限に抑えています。

関連して考慮すべき何か、フォームフィールドがオプションの場合、ユーザーに質問せずにロジックを自分で使用して回答を取得できますか?

たとえば、ユーザーが男性か女性かを知る必要がある場合、場合によっては、名前に選択したタイトル(ミス、mrsなどは女性を意味する)から回答を推測し、ユーザーから質問を削除することができます。

考慮すべきもう1つのポイントは、郵便番号を尋ねて郵便番号検索を実行でき、ユーザーが手動で住所を入力することを選択した場合、または郵便番号検索が失敗した場合にオプションのデータの多くを避けることができる場合に住所フィールドのみを表示する、住所フィールドのようなものです。これにより、フォームが実際よりも長く見え、ユーザーが離れることがあります。

私の経験では、多くの場合、フィールドがオプションの場合、フィールドを完全に削除するケースが多くあります。明らかにこれが常に実用的であるとは限りませんが、場合によっては、どのアプローチを採用する場合でも、視覚的な混乱を減らすのに役立つ場合があります。

4

別の解決策は、フォームを2つのセクションに分割し、すべての必須フィールドをまとめて、セクション全体に「必須」のラベルを付けることです。

3
Chase Seibert

私が見つけた最良の方法は、アスタリスクを内側に配置して右揃えにすることです。

Example of UX

3
Nijikokun

これは間違いなくこれを投稿する場所ではありませんが、「必須」の拡張定義を見逃さないでください。つまり、要素の必須性が別の要素の使用(選択、塗りつぶしなど)の条件付きである場合です。

たとえば、フィールドAはオプションです。ただし、フィールドAが実際にエンドユーザーによって入力されている場合、フィールドBは必須です。

それを示すために、要素フィールドにどのように注釈またはグループ化しますか?すべきか?

PS。色だけでは情報を伝えるための信頼性の低いチャネルであることを忘れないでください。私たちの中には、赤と緑を簡単に区別できない人もいます。赤は、異なる文化の人々に異なることを伝える場合があります。

3
CSSian

赤いアスタリスクは必要に応じて使用されることが多いため、クライアントに問題はありません。オレンジやサイトのデザインに合った色など、別の色を選択した場合は問題ありません。

2
James Buckley

私は、単純なアスタリスクの哲学に偏っています。

正接に関連するメモで、必須ではなく、入力されなかったフィールドのカスタムエラーマーカーを作成する例を使用して、しばらく前に書いた投稿を次に示します。これはかなり技術固有(Rails、Formtastic、jQuery)ですが、コンセプトは簡単に適応できます。

http://thestrake.com/post/459205965/show-n-tell-friday-custom-form-error-markers

1
blackant

まず、私はあなたがUXの専門家であることを前提としているため、クライアントはUXの問題を解決する方法を教えてはならず、解決策ではなく解決すべき問題を提示する必要があります。

ユーザーの観点から考えると、ユーザーがアスタリスクの意味を知っているとは限りません。疑わしい場合は、書き言葉を使ってできるだけはっきりと綴ってください。私はアスタリスクがウェブ全体で使用されることが少なくなっているのを見てきました。使用すると、通常、ページの下部に説明が続きます。より簡単な説明は、「必須」を使用することです。スクリーンリーダーもこれを認識し、サイトをよりアクセスしやすくします。

このシナリオで段階的な開示原則を適用することについても考えましたか?不要なフィールドも画面に表示する必要があります。後で非表示にしたり、ユーザーに表示したりできますか?この方法では、情報の過負荷が少なくなり、必要なすべてのフィールドが表示されるため、「必須」の必要がまったくなくなります。この説明の背後にある心理学に関するいくつかの詳細: https://www.nngroup.com/articles/progressive-disclosure/

0
lg365

私は反対の方向性を規定するユーザビリティの基準を見てきました-テキスト(optional)でマークされていない限り、すべてのフィールドが必須であるということです。 sumbitしようとした後、必要なフィールドが入力されていない場合、何が問題かを説明するテキストでマークする必要があります。

0
awe

ほとんどのユーザビリティトピックと同様に、フォームに含まれるフィールドの数とフォームで必要なフィールドの頻度に主に依存します。

私は通常、各必須フィールドの隣に単純な赤いアスタリスクを付けてから、脚注「*-必須フィールド」を選びます。

さらに、onBlur()イベントの後でフィールドが空のままであるか無効なままである場合は、フィールドの境界線を赤で強調表示します。ユーザーがすべての必須フィールドに入力せずにフォームを送信しようとした場合も同じように強調表示されます。 JavaScript onFocus()イベントでボーダーの強調表示が消えます。

0
wnathanlee