Web上の「フローティングラベル」と「固定の小さなラベル」の違いは何ですか。
小さな画面のデバイスでは、プレースホルダのテキストのサイズは小さなラベルのテキストよりもかなり大きくなる傾向があり、後者はフィールドの参照として機能するため、小さな画面 floating labels は読みやすさを向上させることができます。塗りつぶされ、プレースホルダーは表示されません。けっこうだ。
しかし、デスクトップ上のフォームの使いやすさを向上させる方法はわかりません。おもう：
- 人々はそれらに慣れていません。
- これらは、アニメーションと入力のさまざまな状態（オプションのフィールドがある場合はさらに多く）に不必要な認知的負荷を追加します。
- プレースホルダーは、コントラストの低い感度の人に好意的ではありません。
ラベルとプレースホルダーに関するN.N.の参照 は、ラベルとしてのプレースホルダーの欠点を示しており、このパターンでは、まだいくつかの問題が残っています。
それらの中にものがあるフィールドはあまり目立ちません。
ユーザーは自動的に入力されたデータのプレースホルダーを間違える可能性があります。
あなたのウェブが主にデスクトップから使用されている場合、固定された小さいラベルの代わりにフローティングラベルを使用する理由はありますか？
1.テキスト入力を事前入力すると、認知負荷が増加します
テキスト入力の機能は、ユーザーからテキストをgetすることです。どのようなテキストを期待しているかをユーザーに伝える必要があります。これは、ラベル、プレースホルダー、インラインヒントなどを使用して行うことができます。
テキスト入力のすぐ上のラベル は、ユーザーが入力する必要があるものを伝えるための最良の方法です。すでに述べたように、プレースホルダーテキストは誰にとっても簡単に見ることはできません。ユーザーがプレースホルダーテキストを読むことができたとしても、今対処する必要のある他の質問があります...
- これは私または他の誰かによってすでに記入されていますか？
- これは私が入力する必要があるものの例ですか？
- テキストが灰色なので入力が無効になっていませんか？
私たちは常に、ユーザーの認知負荷を軽減する方法を探しています。これは、空想的な言い方ですこれをより直感的にするために何ができるかしたがって、ユーザーはそれほど深く考える必要はありませんか？
縦のレイアウトでは、固定ラベル、固定ヘルプテキスト（プレースホルダーの代わり）、および検証エラーメッセージの使用を決定しました。さまざまなパーツのフォントサイズとパディングは画面サイズに基づいて変化し、見やすく、操作しやすくなりますが、位置は変わりません。
2.何も含まれていない入力は空であることを人々は理解している☺
ほとんどのユーザーは、画面を見ただけでメールアドレスを入力することを期待するテキスト入力を見ました...
3.入力がフォーカスを失ったときに検証する
テキスト入力を操作しているときに方法のエラーを表示すると、不満を感じる可能性があります。このため、入力がフォーカスを失うまで何も検証しないです。
4.肯定的な検証により、ユーザーを安心させることができます✔
ユーザーが何かを正しく行うときにユーザーを安心させることで、認知負荷を軽減することもできます。小さなチェックマークは、アプリケーションがThanks, I got it!
これは長い議論です。手始めに、これはモバイル主導のソリューションであり、「モバイルファースト」シナリオのほとんどすべてと同様に、これらのモバイルソリューションの文字どおりの翻訳を攻撃または防御する声がたくさんあります。
まず、作成者が floating label pattern を作成した理由と方法を読むことを強くお勧めします。ご覧のとおり、これを構築するには多くの考慮事項があり、最初の展開後に他の人々によって拡張されました。ただし、デスクトップについてはまったく言及されていません。
これは、デスクトップでこれを使用してはいけないという意味ですか？
まあ、そんなに簡単なことではないと思います。個人的には、モバイルを可能な限りデスクトップに変換する傾向があるので、偏見があるかもしれませんが、ほとんどの人は日常的にモバイルに慣れており、一般的なデスクトップのアフォーダンスはモバイル革命によって簡単にオーバーライドされます。これと、明確な長所や短所のないものにより多くの時間（=お金）を費やすかどうかを考慮すると、多くの「モバイル専用ソリューション」がデフォルトであり、デスクトップに変換されると見なされます。 フローティングラベルは、デスクトップで使用したいソリューションの1つです。
これについて考えてください。フローティングラベルは、モバイル画面のスペース制限の解決策として浮上しています。つまり、論理的には、「そうです、私はデスクトップ上により多くのスペースを持っています」と言うことができます。しかし...それは本当ですか？レスポンシブデザインを使用すると、ほとんどの要素はグリッドに基づいてサイズ変更や配置の変更を行います。すべてのことを言うと、ほとんどの場合、要素（つまりフォーム）内でほぼ同じサイズで終わることに気づくでしょう。 さらに、私にもっと不動産がある場合、それをフォームに使用する必要があるということですか？では、（私は物事のマーケティング側に主に取り組んでいるので、これを少々の塩でとってください。しかし、私にとって、フォーム入力は最終的な目標です。ほとんどの携帯電話に収まるようにフォームフィールドを360pxより広くすることはありません。スペースがある場合は、それを使用して、ユーザーに実際にFILL THE FORM。ご覧のとおり、ほとんどの場合、スペースは問題ではなく、必要に応じてデスクトップでフローティングラベルを簡単に使用できます。画面のサイズに関係なく、常に同じです。
上記のすべての非難は、なぜ私が個人的にフローティングラベルに問題がないのかを説明し、プロジェクトで必要なときにそれらを使用するか、静的ラベルを使用することです。しかし、実際の実装に行きましょう。下記参照：
ご覧のとおり、Nielsenが その記事 について言及していることのほとんどはオーバーライドされており、さらに使いやすくするためにいくつかの視覚的な手がかりが追加されています。確かに、フィールドが本当に複雑な場合にこれらのラベルをプレースホルダーとして使用するなど、まだいくつかの問題がありますが、それはケースバイケースの考慮事項です。長所と短所を確認するには、 Floating Labels by Brad Frost をご覧ください。
フロートラベルプロ
- ユーザーはコンテキストを保持します
このパターンの主な利点は、ユーザーがフォーカスして値を入力した後もフィールドのコンテキストを維持できることです。これにより、よりアクセスしやすく、イライラの少ないエクスペリエンスが提供されます。
- デフォルトでクリーンでスキャン可能
このパターンにより、デフォルトでクリーンなインラインラベルエクスペリエンスが可能になり、ユーザーが入力した後は、少し乱雑になります。
- エレガント
言う必要があります：このパターンはセクシーです。通常、フォームについてそれを言うことはできません。見た目も良く、アニメーションも微妙に感じられます。
フロートラベルの短所
- それでも、ラベルとプレースホルダの両方にスペースはありません
ラベルはプレースホルダーと同じスペースを占めているため、ヒントを追加する余地はありません。
- 小ラベル
ラベルは小さくなり、読みにくくなる可能性がありますが、同時にそれほど大きな問題ではありません。ユーザーが入力を操作すると、ラベルは指示ではなく参照になります。
- コード悪用の可能性
私が見たいくつかのデモに基づいて、アクセシビリティとセマンティクスを破壊する可能性があります。
（...）最終的に、このパターンはインラインラベルの多くの欠点を克服するための優れた方法だと思います。さらにコンセプトが取り入れられるのを待ちきれません。
要するに....
これは、ケースバイケースで、ニーズに応じて考慮すべき要素だと思います。疑わしい場合は追加の追跡と調査が必要になるかもしれませんが、それでもそれは素晴らしい解決策だと思います
- このパターンは、ラベルとプレースホルダーの両方をサポートすることはできません。
- プレースホルダーテキストは、ブラウザー/バージョン間で異なってレンダリングされます。コーディングには追加の労力が必要です。
参考： http://www.webaxe.org/floated-labels-still-suck/
https://blog.marvelapp.com/floating-labels-problematic/
ラベルとプレースホルダーの両方をサポートするこのパターンを試すことができます。
インタラクションはあなたが記入するものの説明が正しいところにあるので、それらは完璧な解決策だと思います。それは可能な限り近いので、編集を開始するためにどこをクリックするかについて混乱はないはずです。最も自然なマッピングです:-)
出典：
https://en.wikipedia.org/wiki/Natural_mapping_（interface_design）
過去4か月にわたってGoogleマテリアルデザイン（GMD）の仕様を詳しく調べた結果、すべてのデスクトップでGMDを使用し、Android設計作業、およびiOS固有の作業ではテーマを変更することにしました。
デスクトップでGMDの実現可能性と使いやすさについて多くのことを考えた後、GMD入力の「塗りつぶし」バージョンを使用することにしました。
テキストフィールドボックスは、透明な長方形の塗りつぶしを使用してラベルと入力テキストを囲むことにより、テキストフィールドの識別可能性とスキャン可能性を高めます。
テキストフィールドボックスは、主要なアフォーダンスとして長方形の塗りつぶし（10％白または6％黒）を使用し、入力行の端をマスクします。ホバー状態とプレス状態でリップルモーションが発生します。
これは両方の長所です。入力がより簡単に発見され、フローティングラベルパターンが適用されます。