テキストフィールドをインラインで書き込むようにしても問題ありませんか？
私のデザイナーは、白い背景にカーソルを合わせるとドロップダウンするテキストフィールドを実装し、フィールドを定義するための下部の境界線のみを設定したいと考えています。また、ボックスがドロップダウンすると、テキストフィールドに点滅するカーソルがすぐに表示されるようにしたいと考えています。これは、フィールドが編集可能であることをユーザーに示します。したがって、基本的にフィールドはインラインでの書き込みのようになります。
私の考えでは、視覚的な分離が十分ではないか、フィールドが編集可能であることが示されていません。特に白い背景に対して。これを考えるのは間違っていますか？このボックスには別の設計アプローチをお勧めしますか？
設計スキームを詳しく見ないで質問に答えるのは難しいですが、とにかくガイドラインを示します。
あなたの質問は、アフォーダンスの問題についてです。アフォーダンスは、アクションを意味する視覚的な手がかりです。例：ソーダマシンの薄いスロットは、ユーザーがコインを挿入する場所を示し、車のドアのプルレバーは、ユーザーがドアを引いて開く必要があることを示しています。これらの視覚的な手がかりを削除すると、機器の使用方法に関してユーザーを混乱させる可能性があります。
Webデザインでは、要素がどのように見えるかについて、いくつかの根拠のある規則があります。テキストフィールドの場合、規則は、白い背景を持つ灰色の枠線のボックスです。これらの要素の1つ以上を削除すると、フィールドのアフォーダンスが低下します。 ユーザーがテキストフィールドであることをユーザーが認識しにくくなるため、混乱とフラストレーションが生じると予測しています。あなたのデザイナーもそれを知っていると思います。そのため、他の追加の手がかり（点滅するカーソル）を提案しました。
しかし、それを私の言葉にしないでください。 簡単で使いやすいテストを作成します。このWebサイトのデザインに関与していない3人のユーザーに行き、現在のデザインのスクリーンショットを見せて、「検索を実行する」ように依頼します。彼らが検索フィールドを認識しているかどうかに気付かないでください。彼らがそれを探すのにかかる時間、彼らがそれを探している間に彼らが言っていること（「その神d ***検索フィールドはどこですか？！」）、そして彼らが最終的にそれを見つけたときの彼らの反応に注意してください）。彼らが苦労していると感じたら、デザイナーに戻って、フィールドをもう少し慣習的にするように依頼してください。
*例外は、このウェブサイトが革新のメッセージを伝えようとし、「ルールを破る」ことである場合です（たとえば、インタラクティブスタジオのウェブサイト）。それが事実であり、他の要素も目的に合わない非従来型である場合は、非従来型のテキストフィールドにも従う必要があります。
この方法でフォームフィールドを管理する少なくとも1つの一般的なツール、37signals ' Basecamp が考えられます。
この効果は、すでに表示しているものの名前を編集するときに特に興味深いものになります。たとえば、特定のプロジェクトの場合：
プロジェクトの名前または説明をクリックして、インラインで編集可能にすることができます。
これにより、フィールドは最終的な実行の視覚的なデザインを共有できるようになります。シナリオによっては、ユーザーが最終的な実行で使用する正確な単語を選択するのに役立つ場合があります。
ただし、いくつかの重要な考慮事項があります。
- 「新しいプロジェクト」画面では、ラベルの代わりにプレースホルダーテキストを使用しています。これは、そのフィールドの意図した目的を説明し、フィールドがテキストの場所であることを明確にするのに役立ちます
- それらはhighlightプレースホルダーテキストであり、編集可能であることを確認できます。
- プレースホルダーテキストを入力しない場合（メールフィールドなど）、それらのフィールドに入力する内容を非常に明確に指示する必要がありました。
デフォルトでテキストエリアを非表示にして、「検索」ボタンの領域を増やすことができます。ユーザーが検索したいが明らかな検索フィールドが見つからない場合、「検索」ボタンをクリックする可能性が高く、テキストエリアを表示して、ユーザーのクエリを送信する本来の目的を再開します。
編集モードがオンの場合、ボックスに明確に焦点を合わせる必要があります、あなたが言ったように、いくつかの視覚的な分離があるはずですボックス用。ユーザーが数秒または数分間ページを離れて戻ってくる可能性があるため、ユーザーは離れた場所に簡単に戻ることができます。
これは、テキストボックスの一番下の線の色を強調表示し、テキスト領域に視覚的な違いをほとんど与えないことにより、デザイナースタイルでも実行できます。
私の提案は、入力フィールドのより良い：focus状態を設計することです。多くの設計者は、これらの便利なセレクターを忘れています。
したがって、フォーカスがなければ、境界線は1pxのみになります。
要素に：focusが設定されたら、ボーダーを追加し、入力要素の周囲にライトボックスシャドウを追加します。
このテーマは、実際にはAndroidベースのネイティブアプリケーションに推奨されます。ユーザーはテキストフィールドの外観をすでに知っているためです。デスクトップWebページで使用するサイトはほとんどありませんが、ユーザーフレンドリーではありません。