web-dev-qa-db-ja.com

ドロップダウン：プレースホルダーと空白

「非選択」状態にはどちらが良いですか？

A）プレースホルダー

ユーザビリティテストでは、このオプションを使用すると、このフィールドは省略されます。彼らはそれが必要でないか、それがすでに選択されていると考えているようです。

enter image description here

B）ブランク

これに関するユーザビリティテストはまだありませんでした。白い空のスペースはそれを埋める緊急の必要性を引き起こしているようです。これの実際の欠点は何ですか？

Dropdown with blank state

その他の考慮事項

  • プレースホルダーには、「選択...」、「---」、「---選択---」などの他のオプションもあります。
  • プレースホルダーのテキストの色が問題かもしれませんか？暗すぎてフィールドが空であることがわかりますか？
dropdownplaceholderempty
8
Maciej Sawicki

テスト後の結論

質問で述べたさまざまなオプションを試して、ユーザビリティテスト中にそれらを試した後、最良のトレードオフは、「...」で非常に軽いプレースホルダーを使用し、「選択してください... 」

enter image description here

どうして？

  • 非常に薄いテキストでも、フィールドが空であるように感じますが、空のドロップダウンフィールドよりも視覚的に満足できます。内部のテキストは読むのに重要ではないので、コントラストがアクセス可能であることはそれほど重要ではありません。暗すぎるよりも淡すぎるようにしてください。
  • フィールドは空に見えるようにテキストを短くする必要があります
  • 最後の "..."省略記号は、ドロップダウンが必須であるという感覚を追加します
  • テキストは、「選択...」などのアクションを要求する単語で始まる必要があります
  • プレースホルダーの接頭辞としてハイフンを追加しないでください。

オプションとしてリストされていないプレースホルダー

可能な選択オプションの1つとしてプレースホルダーを追加しないでください

enter image description here

1
Maciej Sawicki

NNGroupには、フォームフィールドのプレースホルダーテキストのいくつかの異なるシナリオに言及する1つの記事があると思います。 NNGroupのコンテンツは、ユーザーの調査とユーザビリティテストにも基づいているというのが良い点です。ただし、1つの注意点として、この調査ではドロップダウンではなくテキストフィールドが主に言及されているように見えるため、この調査がシナリオにどの程度適用されるかについては少しわかりません。これは私がこれについて見つけることができた最も近い種類の研究です。 100％確実にするために、非常に軽量なユーザビリティテストを実行して、デザインが機能するかどうかを確認することをお勧めします。

上記の記事から引用した7つの理由、フィールドラベルを置き換えるときにラベルとしてのプレースホルダーを使用しない理由は次のとおりです。

  1. プレースホルダーテキストが消えると、ユーザーの短期記憶が緊張します。
  2. ラベルがないと、ユーザーはフォームを送信する前に自分の作業を確認できません。
  3. エラーメッセージが発生したとき、人々は問題を修正する方法を知りません。
  4. カーソルがフォームフィールドに置かれたときに非表示になるプレースホルダーテキストは、キーボードで移動するユーザーにとって不快です。
  5. 中にものがあるフィールドは目立ちません。
  6. ユーザーは、自動的に入力されたデータをプレースホルダーと間違える可能性があります。
  7. ユーザーがプレースホルダーテキストを手動で削除する必要がある場合があります。

これは、ラベルに加えてプレースホルダーテキストが使用されている特定の例について、同じ記事が言っていることです。

ラベルに加えてプレースホルダーテキスト

プレースホルダーテキストをフォームラベルと組み合わせて使用​​することは、正しい方向への一歩です。フォームフィールドの外側のラベルは、常に重要な情報を表示しますが、フォームフィールド内のプレースホルダーテキストは補足情報用に予約されています。ただし、ラベルを使用する場合でも、重要度の低いヒントではありますが、重要なヒントや指示をフォームフィールド内に配置すると、上記の7つの問題が発生する可能性があります。一部のフィールドで、フォームを正しく入力するために不可欠な追加の説明が必要な場合は、そのテキストをフィールドの外側に配置して、常に表示されるようにすることをお勧めします。

この問題の解決策の1つは、代わりにテキストをフィールドに近接させることです 。Placeholder next to label and form field

5
Andreas Johansson

フォントの色とスタイルは、空のボックス内のプレースホルダーまたはヘルプテキストを区別できます。フォントの色を明るくして、Italicsを使用して実際の値と区別できるようにすることができます。これは標準的なガイドラインであり、ユーザーはこれと混同しないでください。

ユーザーインターフェイステキストについては、Windowsデスクトップガイドラインを参照してください。

https://msdn.Microsoft.com/en-us/library/windows/desktop/dn742478.aspx

enter image description here

2
Saadia

ドロップダウン には、プレースホルダーではなく、常にデフォルト値が必要です。空の文字列、またはユーザーに別の値を選択するように求めるラベルなど、デフォルトを決定するのはあなた次第です。

1
Vladimir Georgiev

コンボボックスに「--Select--」項目を配置すると、フィールドにデフォルト値がないことが示唆されますが、フィールド自体は必須です。

私は次のアイデアを思いつきました。 「--Select--」アイテムをコントラストの薄い色と「無効」属性で表示したままにしておくと（したがって、選択できなくなります）、別のアイテムを選択すると、この「--Select--」アイテムが表示されるとどうなるでしょうか。消える？このアイテムを保持する唯一の方法は、「展開」ボタンを使用してコンボボックスを開き、何も選択せずに同じ方法で閉じることです。

これは、特定の提出が必須であり、まだ入力されていないことをユーザーが優しく示すのに非常に役立ちます（ユーザーがフォームをスクロールするときのリアルタイムのフォーム検証または送信前の検証）。

0
Mike