フォームラベルを入力ボックス内に配置し、邪魔にならないようにスライドさせる必要がありますか？
スライドラベルは完全に不必要です。邪魔にならないようにスライドするのではなく、なぜ常に邪魔にならないのですか？
彼らがフィールドの外にとどまるのに十分なスペースがない場合、彼らはフィールドにとどまることができますが、フィールドに集中すると消えます。
スライドラベルの例には、他のすべての巧妙なラベル移動/フェードハックと同じ問題があります：dragの場合は機能しませんフィールドにテキストを入力してください。試してみてください。
どちらかを論じている証拠に関しては？知りません。
意見/見たことに関して...入力されたデータが容易に識別できる場合（つまり、電子メールアドレスが電子メールアドレスのように見える場合）、問題はありません。
フォームの外観を視覚的に短くするために非常に長いフォームで使用しましたが、それでも、アドレスブロックなど、データがかなり自己識別可能になるフィールドまたはフィールドのグループでのみ使用しました。 Appleは、チェックアウトフォームでこの形式を使用します。
そのルートをたどる場合は、必ず実際のLABELタグを使用して完全なアクセシビリティを維持し、CSSおよび（おそらく）少しのJavaScriptを介してフィールド内に配置してください。フィールド値を事前に入力しないでください。
更新：
回答を書いた時点では、データには気づいていませんでしたが、最近、ユーザーテストを行って、意外なデータが返ってきました。ラベルがフィールド内にあるかフィールド上にあるかには無関心である圧倒的多数があり、どちらも他よりも有意に良い/悪いということがわかりました。
繰り返しますが、非常に特殊なシナリオ（つまり、その内容によって容易に識別できるデータのブロック）で使用しており、このスレッドで最初に提案されたスライドを実行していません（私が同意するのはかなり無意味です）。しかし、少なくとも私たちのテストグループでは、それが本当に問題ではないことに驚きました。
更新2：
ネイサンの質問に基づいて、私はおそらく私たちが使用している方法を明確にする必要があります。
デフォルトでは、標準のマークアップをレンダリングしています。これは、適切なLABELタグと入力タグを意味します。
<label for="myField">Label Text</label>
<input type="text" id="myField"></input>
次に、CSSを介して入力の上にラベルを配置します（これにより、フォームフィールド内にラベルの外観が表示されます）。
Javascript onclickを介して、ラベルをフェードバックし、キーを押すと、データを入力できるように非表示にします。
彼らがデータを削除した場合、ラベルを返します。
言い換えると、ラベル自体として機能するように入力自体に値を事前に入力するのではなく、これは私が実行しないことをお勧めします。
- それはスペースを節約します。 - それは良い
- クリックすると、ラベルが消えたと思います。 - それは良くないね。
- それはより豊かな相互作用です-それは良いことです。
「送信」というボタンが個人的に好きではありません。ボンデージS＆Mサイトでない限り。
全体としては、それほど問題ではないと思います。グラフィックデザイナーはそれを選択肢のパレットに入れるべきです。
1）私の懸念は、表示されていないラベルタグです。技術的には、スクリーンリーダーを使用してスクリーンリーダーから外すこともできますが、視力のあるユーザーには表示されません。 IDにリンクされている必要があります。そうでない場合、アクセシビリティに失敗します。
2）グレンの懸念、彼らはフォーカスの価値を示さないようにスクリプト化されなければならない、そうでなければ私にとっては失敗する
見た目はきれいですが、使用可能でアクセス可能にするために、追加のコーディング手順を実行する必要があります。ほとんどのユーザーが何度も何度も見ているので、送信は問題ありませんが、他の条件の方が好きです。
アイデアとそれに対する多くの応答は要点を逃しています。
ユーザーはフォームを好まない。彼らは、何か他のもの、つまり製品やサービスにたどり着くためにそれらに記入するだけです。したがって、私たちの目標は、デザイナーと開発者がフォームをできるだけ早く、簡単に、そして苦痛なく通過できるようにすることです。
調査によると、フォームに入力するときの人々の行動は、他のWebベースの相互作用とは大きく異なります。 フォームフィラーはフィールドフォーカスです （SlideShareプレゼンテーション）。彼らは、十分な答えを提供できるようにするために、周囲のテキストを必要以上に見ないようにします。
この「スライドラベル」アプローチとフィールド内のラベルの配置は、このユーザーの行動を妨げます。
- フィールドは空ではなく、入力する準備ができています
- フィールド間を移動するため、不要なアニメーションに気を取られてしまう
- ラベルが読み取れるようにするには、アニメーションが完了するのを待つ必要があります。
さらに、UXマターの "Do n't Put Hints into Text Boxes in Text Forms in Web Forms" のように、十分な証拠がたくさんあります。検証エラー。
これは、すべての実装とアクセシビリティの問題にさえ触れていません。
簡単に言えば、見た目はおしゃれ、セクシー、かっこいいと思うかもしれませんが、ユーザーにとって、現在の慣例よりも悪い体験を生み出します。したがって、自分のために何かを設計または開発しているのでない限り、それを考慮すべきではありません。
それは良い考えではないと思います。私が見る問題は、ユーザーがフォームへの入力を完了し、最終的なエラーがないかスキャンすると、どのフィールドが何を意味しているかをユーザーが認識できないことです。
もちろん、ほとんどのフィールドで明らかであり、おそらく単純なフォームでは問題なく機能しますが、より複雑なフォームでは問題になる可能性があります。
また、テキスト入力フィールド以外にフォームに何かある場合は、ラベルを付ける必要があることに注意してください。これにより、一貫性が失われます。 （左側にラベルがある場合、空白スペースがあり、ユーザーは注視しているものを実際に知るために視線を左から右にシフトする必要があります。上部にラベルがある場合、奇妙な間隔になります。フィールド間。）
心配する価値はありません。同じフォーム構造を2つ配置します。1つは使用する、1つは使用しない、多変量テストは、使用する特定のサイトのエビデンスをテストします。1つで完了率が高い場合、せいぜい暫定的で、それはあなたが行くべきものです。
証拠はここで重要です。見た目や感じが少し悪いと思いますが、それは主観的なものです。ユーザーが私のようなたくさんの人々であるならば、あなたはよりゆるいです。本当に興味深いのは、そもそもフォームの必要性を超えてエンゲージメントを推進する場合です。しかし、私たちは質問をしなければならない干し草であり、フォームはそれを行う簡単な方法のようです。
これは、テキストボックス内にラベルをうまく配置したい場合に何をすべきかについて説明した洞察に満ちた記事です。価値のある読書。
http://uxmovement.com/forms/how-to-pull-off-putting-labels-inside-textboxes
私はここで興味深いアプローチを見てきました：
Quickenは、この手法を使用した最初のアプリケーションです。彼らはそれを記入可能なチェックフォームに使用しました。
2002年にこの動作を模倣するDelphiカスタムコントロールを作成したことを覚えています。
個人的には、Webの場合は好きではありません。デスクトップの場合は問題ありません。
この質問は理論についての詳細であり、おそらく回答をサポートするデータを探していることを理解していますが、ゴースト化された示唆的なラベル JLabel 、jqueryプラグイン、機能を取得良い基準に基づいてニースの追加オプション（ニースフェードなど）を使用して、少なくとも将来/現在のユーザーでテストできます（これはおそらくとにかくあなたの質問に答える最良の方法、そうですか？）
幸運を ：）
私は、フィールド自体にフィールドのラベルを配置することの、美的で視覚的なクリーンなマッピングが好きです。
これは、クラッタや視覚的なノイズを減らすのに最適だと思います。
ただし、ラベルが常に表示されていない場合、どこかで、現在フォーカスのあるフィールドで予期される入力のタイプを視覚的に思い出させるものがないため、経験の浅いユーザー/訪問者の多くは不満を感じることがわかりました。
したがって、ラベルはユーザーがフォームフィールド内をクリック（またはタブ）する前にのみ重要であるため、ラベルをフォームフィールドの右側に永続的に移動するだけで問題を解決しました。彼らがフィールドを空にしない限り、ラベルを左に戻すだけです。
テキストは、ユーザーが入力した値よりも色が薄いため、ユーザー入力と衝突しません。これは、本当に狭いフォームフィールドがない場合にのみ機能します。ただし、この手法を使用したフォームフィールドは、少なくとも従来のラベルオンザアウトサイドbretherenより長くないことがわかったので、ほとんどの場合機能します。
いつものように、すべての場合に単一の解決策はありません...しかし、私のフォームがはるかに視覚的に整理され、雑然としていないという事実が気に入っています。
また、入力をどのような構造にするかをユーザーにどのように伝えるかについて今すぐ疑問に思っている人のために...私は常にjavascriptを使用してユーザーのこれの重みを取得し、必要な場所に配置することを確認します...コードで。有効な電話番号になるのに十分な桁数がある限り、好きな方法で電話番号を入力できるようにしたいのですが、コードでそれを実行して、ユーザーに「有効な電話番号は（XXX）XXX-XXXX）でなければなりません。
ここに私が話していることを示す短いフォームへのリンクがあります。
長い形式でも機能しますが、すべての長い形式では機能しません。
乾杯！