web-dev-qa-db-ja.com

アスタリスク(*)の使用と必須

長い間、フィールドが必要な場合、フィールドラベルの後に赤いアスタリスク "*"を付けるのが標準でした。現在、ラベルの後にアスタリスク記号を「(必須)」という単語で置き換えるシフトが見られます。

ブートストラップ:

Bootstrap

財団:

Foundation

角材:

Angular Material

Angular Material required style。I :)が本当に好きです。

アスタリスクの使用と必須の使用の違いについて質問しています。

何がシフトを促進しましたか、それはより良いユーザーエクスペリエンスですか? 2つに対する長所と短所は何ですか?

EDIT:この質問はすでに尋ねられている可能性があることが指摘されました( Webフォームの必須フィールドを強調表示する最良の方法は何ですか?提出前? )、しかしそれは私の質問についてではありません。

  • 必要に応じて必要な入力にラベルを付ける方法を尋ねていません。
  • 私はアスタリスクが標準であるかどうか尋ねていません。
  • オプションの入力を省略すべきかどうかは尋ねていません。

あなたがそれについて議論しているなら、あなたは要点を逃しています。 :D

20
Radi

アスタリスク(*):

  • メリット:スペースを取らない
  • 短所:それは意味しません何か

"必須":

  • 欠点:より多くのスペースを必要とします
  • プロ:それが意味するものを正確に伝えます

「規範」は決して赤いアスタリスクではありませんでした。初期の多くのWebページではアスタリスクが使用されていましたが、必ずしも赤であるとは限らず、フォームの上部近くに「* =必須」と伝えるキーが常に必要でした。いくつかのサイトは何か違うことをしました。結局、それはmost人々がそれが何を意味するかを理解できるほど十分に一般的になりましたが、それは事前の知識がなければ事実上無意味でした。

実際には、「*」ではなく「required」としてラベル付けする必要がある場合、使いやすさの観点からは絶対に優れています。危険なときに「危険」なものにラベルを付けるのと同じように、図像を提供する代わりにthinkは意味があります...誰かがそれを別の方法で解釈して怒っている霊長類の指を失うまで。

30

美的および使いやすさの改善は別として、変更の理由の1つ(最も重要ではないにしても)は、アクセシビリティの問題です。

スクリーンリーダーは、デフォルトの設定ではタイポグラフィシンボルを(ほとんど)読みません。アスタリスクやプラス記号などの記号は、ハンディキャップまたは弱視のユーザーには基本的に役に立ちません。設計者は通常、フィールドが必須であることを示すメモをアスタリスクに追加する必要があります。

10
adamsoh

背後にある理由は、過去10年間にUIの実践で変更された多くのものと同じです。 UIの意味するシンボルに暗黙の仮定を使用する代わりに、UIデザイナーは作業をより明確にしようとしました。これを考慮してください。「*」記号が必須フィールドを指定するために最初に表示されたとき、赤い色の注記「*でマークされたフィールドは必須です」が頻繁に付いていました。 。

ある時点で、設計者はこれが悪い習慣であることを理解しました。何が必要で何が必要でないかを暗黙的に示すのではなく、「*」に気づき、フィールドを見逃さないように注意するように人々に強いていました。

ところで、あなたの質問のような形式では、私はしない必要な指示をまったく持っていることを好みます。オプションのものがあれば、登録時に収集しないでください。それでも必要な場合は、後で提供するようユーザーに勧めます。たとえば、プロファイルの完全性インジケータを使用します。

したがって、すべてのフィールドから「必須」/ *を削除して、画面をよりきれいにしてください。ユーザーは、すべてのフィールドが必須であると想定し(そうでない場合、なぜそこにあるのか?)、データを入力します。

編集

コメント欄で受け取った素晴らしいフィードバックに応えて、私のポイントを明確にしたいと思います。フィールドには、必須、オプション、および条件付きで必須の3つのカテゴリがあります。データが存在する場合、条件付き必須フィールドは必須です。オプションのフィールドとの違いは、後者をスキップしてもアプリケーションがその主要機能を実行することを妨げないが、前者をスキップするとブロッカーになることです。たとえば、住所2のフィールドは条件付きで必須のフィールドです。これは、ユーザーがアパートに住んでいて、住所2が提供されていない場合、システムは機能しないためです。ただし、ユーザーが家に住んでいる場合、住所2は不要です=>条件は家またはアパートです。条件付きで必須のフィールドが必須とともに表示され、オプションのフィールドはスキップされる場合があります。

私は、ユーザーがすべてのフィールドに入力することを奨励しているため、フィールドが必要であるかどうかの指示がないデザインの支持者です。これはまた、オプションのフィールドを追加することを楽しむデザイナーの幻想を抑制し、画面を乱雑にします。ユーザーは、システムから設計したものを取得するために必要なデータのみを提供する必要があります。他に何か必要な場合は、目標をユーザーの目標に変えてデータを収集する方法を考えてみましょう。

5
mikryz

私の意見では、それらを次のように組み合わせる必要があります:必須*

アスタリスクのみを使用すると、ユーザーの大部分がこれが何を意味するのか不思議に思うままになり、アスタリスクのためにページのどこかを見て詳細情報を表示します。本では、いくつかの単語にアスタリスクがある場合、ページの下部に追加の説明があります。私の意見は、アスタリスクのみを使用しないようにすることです

より良い解決策

なぜ必須フィールドではなく、オプションフィールドのみを表示しないのか。ほとんどの場合、必須フィールドはオプションフィールドよりも多く、同じ単語の繰り返しが少なくなるため、オプションフィールドのみにラベルを付ける方が効率的です*必須。

optional vs required fields

画像クレジット xmovement.com

このようにして、視覚的な混乱を減らすことができます 自発的な過剰開示に関する研究 によると、ユーザーはオプションのフィールドを入力する可能性が高くなります。人々が何かを強いられたとき、彼らはいつもそうではない自発的な仕事をしているとき、彼らは通常最低限のことをします。人間心理学。詳細については、これをお読みください 必須フィールドに関するuxmovementの記事

4

注意IMOを作成するのは、実際にはアスタリスク自体ではなく、赤色です。赤くなかったら個人的にはその分野に関係のある脚注に繋がると思います。

質問については、「必須」のテキストを入れると見栄えがよくなると思いますが、その形ではありません。赤(または注意を引く他の色)で、さらに目立つようにする必要があります。

1

デザイナーとしての責任は常に共感することです。つまり、ユーザーの生活を楽にするためにユーザーの立場に身を置くことです。

私の意見では、フィールドで「必須」という単語を使用することは考慮を示し、支援的であり、最も重要なことには、ユーザーの知識のレベルを想定していません。

ますます多くの設計が「想定」し、時間が経つにつれてこれは危険な構造物になります。 「* =必須フィールド」について説明されている付録に多くの人が触れていますが、多くのサイトではその説明を中止しました。

KISS(Keep it simple愚かな)が進むべき道です。あなたが望むものを人々に伝え、それを明確でフレンドリーにします。

0
YorkshireDave