フォーカス上のプレースホルダーテキストの削除
- Chrome、Safari、Firefox 15以降では、ユーザーがテキスト入力フィールドで最初にキーを押すと、プレースホルダーテキストが削除されます。
- Opera、IE、Firefox 14以前では、テキスト入力にフォーカスした直後にプレースホルダーテキストが削除されます。
どちらのアプローチがユーザーにとってより良いのか、そしてその理由は何ですか？
jsfiddle 。のブラウザーでプレースホルダーをテストします
興味深いことに、 プレースホルダのw3仕様 はどちらの動作も可能にします。
要素の値が空の文字列であるか、コントロールがフォーカスされていない場合（たとえば、フォーカスされていない空白のコントロール内に表示し、それ以外の場合は非表示にする場合）、ユーザーエージェントはこのヒントをユーザーに提示する必要があります。
しかし、機能的に言えば、ユーザーが入力を始める前にそれをクリアする理由はほとんどありません。フォームをタブで移動するユーザーは、プレースホルダーテキストを表示する前にフィールドにタブで移動するため、フォームを表示できない場合があります。マウスユーザーは、クリックする前にプレースホルダーテキストを読み終えていない可能性があります。
フィールドがプレースホルダーを必要とするほど複雑である場合、おそらくいくつかの考慮が必要です。 「何を入力すればいいの？」と考えるのに最適な時間はいつですか？あなたがフィールドに集中しているときよりも？フィールドに集中しているが、何を入力するかについて混乱しているユーザーからそのヒントを奪うのはなぜですか？
邪魔にならないように、プレースホルダーテキストをできるだけ長く表示することを検討します。
Chrome=でそれが行われる方法は、私の意見ではより良いです。
ただし、すべてのブラウザーでこれを回避する方法を見つけました。
私が過去に行ったことは、フォーカスのあるプレースホルダーテキストを削除するだけでなく、ラベルを作成してそのテキストを再表示することです。 -タブとして表示されます。
たとえば、ここにフォーカスのあるフィールドがない私のフォームの一部です：
そして、これはフォーカスされたフィールドを持つ私のフォームの一部です：
このように、ユーザーはフィールドに正確に入力した内容について混乱することはありません。彼らは、フィールドに再び焦点を当てることで、確認することができます。
入力を開始するときに削除することをお勧めします
フォーカスが入力フィールドにどのように移動されたかによっては、プレースホルダーテキストがすぐに消える前に、ユーザーが必ずしもそのテキストを見るとは限りません。
はい手動でフィールドをクリックする前に読んでもかまいませんが、tab前の入力からのフィールドに。
また、ページが表示されるときに、最初の入力フィールドがデフォルトでフォーカスを取得する可能性もあります。その場合でも、プレースホルダーは表示されます。
change は、最近のFirefox 15リリースでフォーカスされたプレースホルダーテキストを保持するため、初めて見たときに混乱しました。私は実際にはフィールドが無効になっていると思いました。 Firefoxでは、プレースホルダーと無効のデフォルトのスタイル（テキストの色）は非常に似ており、Chromeとは異なり、デフォルトのフォーカスハイライトはありません。そのため、フィールドが編集可能であることを示す主な指標は、見落としやすいカーソルです。 。邪魔なテキストを強調表示したり削除したりできない場合、UIの慣れに慣れていない場合の最初の本能は、とにかく入力を開始する必要はありません。
フォーカスされたテキストを保持するための実用的な議論はいくつかありますが、反対の動作については（少なくともWindowsでは）多くの前例があります。 1つ commenter は、Windowsのスタートメニューの検索ボックスがこのように機能することを指摘し、Firefox自体にはフォーカスを明確にするいくつかのUIフィールドがあることを指摘しました。 Windowsのスタートメニューは、実際にはハイブリッドアプローチの例です。その検索ボックスは最初はフォーカスされており、デフォルトでテキストが表示されますが、ユーザーが手動でフォーカスすると、テキストは消去されます。ユーザビリティの観点からは、この種の妥協を好みます。
ただし、HTML環境では、CSSへのクリーンなマッピング（ override hacks の場合のみ）も重要であり、自動フォーカスとユーザーフォーカスのセレクターはありません。現時点では、すべてのブラウザベンダーがめったに合意していないようで、文句を言うのは少し遅れています。おそらく、Firefoxでのより単純な妥協策は、プレースホルダーテキストにデフォルトのフォーカススタイルを追加することで、プレースホルダーテキストをぼかし、ユーザーが、プレースホルダーテキストが途中であったとしても、フィールドが入力を受け入れることができるという強いフィードバックを得たでしょう。
特定のブラウザーでの実装の問題は別として、私の好みは、一般的にはフォーカスを隠すことです。その大部分は、私が慣れていることですが、まだ空白ではないスペースに書き込もうとする根本的な嫌悪もあると思います。手書き、タイピング（タイプライターで！）、およびコンピューティングの経験から、すでにそこにテキストがある場合は、まずそれについて何かをする必要があることがわかりました。始める前に、本能的に白紙のキャンバスを好みます。フォーカスの維持パターンに適応することはできますが、編集のためにフィールドにフォーカスしたときにプレースホルダーテキストが邪魔にならない限り、完全に快適に感じるのは難しいと思います。
最近ユーザーテストでこれを確認しましたが、ユーザーがクリックするとフィールドが空でなければならないことが明らかになりました。テキストがそこに残っている場合、彼らはこのフィールドを変更することはできないと思い、タイプさえしませんでした。
もう1つ：Nielsen NormanのUXコンサルタントが、ユーザーが空のフィールドを見ると何かを書く傾向があると報告したことを覚えています。したがって、プレースホルダーがないと、コンバージョンが増加する可能性があります。 :-)
ユーザーシナリオ：
- ユーザーが6つのフィールドのフォームへの入力を開始します（すべてプレースホルダーで埋められます）
- ユーザーは、フィールドに入力する前に毎回プレースホルダーを見て、何を入力する必要があるかを理解します
- ユーザーがフィールドをクリックすると、フォーカスがプレースホルダーを非表示にします。
- ユーザーがフィールドに入力し始める前に、ユーザーはメッセージまたはメールを受け取り、数秒間注意散漫になります。
ここで、ユーザーが戻ってきて、フォーカスがあり、プレースホルダーがないフィールドに入力します。ユーザーがプレースホルダーで見たものを忘れて、想定に何かを入力する可能性が非常に高いです。
したがって、入力を開始したときにそれを削除するのはよくありません
誰かがプレースホルダーテキストを数分間ハイライト表示して削除できるようにしようとしているのを見たので、フォーカスでの削除は、すべての範囲のユーザーにとって最もユーザーフレンドリーであると思います。
プレースホルダーテキストの色は、入力テキストと同じ色だったので、ここでは違いが出ていると思います。おそらく、ライトグレーなどの色でこの特定のユーザーを混乱させることはなかったでしょう。
ユーザーにとってどちらのアプローチが優れているのですか？その理由は？
より良いアプローチはデフォルトのアプローチです。ユーザーはブラウザを選択し、そのブラウザが実行する方法に慣れています。デフォルトを変更しないでください。
ユーザーがプレースホルダーテキストをハイライト表示または削除しようとしているのを見てGP89の回答を読むと、フォーカスのあるプレースホルダーテキストを削除した方がよいと強く思われます。
また、プレースホルダーテキストはとにかく小さなヘルプとして使用する必要があります。
人々がそれをreplacementとして使用しているのに問題があるようです。実際のコンテンツで再/事前入力される可能性のあるフォームは、もちろんプレースホルダーを置き換えるため、ラベルなしでは使用できません。送信後に検証メッセージが表示される場合、単純なログインフォーム（ユーザー+パスワード）でも事前入力されている可能性があります（おそらく不明なパスワードであり、そうです、これを行うための推奨される方法ではありませんが、今考えられる最良の例です）。上記の例のフォームは、まさにこの誤った使用法を使用しているようです... :(
最善の方法は、プレースホルダーテキストをまったく使用しないことです。多くの、多くのユーザーがそれがプレースホルダーであることを理解せず（例については上記の回答を参照）、混乱するという多くの証拠があります。これは悪いパターンであり、完全に不要です。
一般的に、Chromeの方が優れています。ただし、コンテキストにも依存します。プレースホルダーテキストが非常に重要になる可能性があるため、ユーザーが手動でテキストを削除することをお勧めします（エッジケース）。
ラベルを適切に使用すると、ユーザーが役立ち、フィールド内のデフォルト値に依存しないようになります。
ここでの回答のほとんどは、複数の入力を持つフォームを扱います。ページに入力が1つしかない（検索フィールドの入力を使用する）シナリオは確かにいくつかあります。
このような事態が発生した場合、フォーカスのあるプレースホルダーを削除した方がよいでしょう。ユーザーはそこに何があったかを知っており、そのままにしておくと混乱する可能性があります。