web-dev-qa-db-ja.com

アイコンとプレースホルダーをラベルとして持つ入力フィールド

inputs for user

私は開発する予定の製品のいくつかの入力のプロトタイプを作成していて、ラベルとしてのプレースホルダーの使用を含む悪い習慣の問題について疑問に思っていました。私の質問は次のとおりです。アイコンを完全に使用すると、より良いアフォーダンスでより良い結果を得ることができますか?フォームのコンテキストで、プレースホルダとともにアイコンを使用してラベルを置き換えることはできますか?私はまた、他の2つのラベルの付いた例(最初と最後の例)を使って、どちらがより良いかを理解するのに役立つようにホッピングしましたが、私は自分のデザインにクリーンを求めることを念頭に置いています(ただし、アフォーダンスを失う気はありません)。 。ありがとう

1
lelukas

明確なアイコンが関連付けられていないラベルが付いた入力フィールドがあるとどうなるかというと、これは一般的なパターンではありません。

製品のフォームで作業しているので、かなり抽象的なフィールドに遭遇します。誰かに対応する方法(サー/ ma'm)、イニシャル、姓名などのフィールド。これらは、現実に相当する具体的なものがないため、アイコンで視覚化することは非常に困難です。

たとえそれがデザインを「きれいでなく」したとしても、明確なラベルを持つことは重要です。これは単に、ユーザーがラベルを特に探す傾向があるためです。彼らはそれらをスキャンします。プレースホルダーは同じように機能するように見えるかもしれませんが、多くのユーザーは最初はそれらを見落とします。事前入力された入力と間違われる可能性があり、空白スペースよりも目立たなくなる可能性があります。したがって、安全を期すために、適切なラベル付けを含め、ユーザーが探しているものを見つけるためにダブルテイクを実行する必要がないようにします。

すっきりとしたデザインはいいですが、製品フォームの主な優先事項はコンバージョンです。完了率

フォームは低入力にする必要があり、複雑な情報が必要な場合は、できるだけアクセスしやすくする必要があります。完了率はビジネスにとって重要であり、使いやすさについての気分はユーザーにとって重要です。

必要なものだけを尋ねてください

フィールドの数をできるだけ少なくするようにしてください。これにより、特にユーザーから多くの情報を要求する場合に、フォームの読み込みが少なくなります。

スキャン可能性の追加に焦点を当てます

ユーザーがフォームをすばやくスキャンできるようにする場合は、各フィールドの上にラベルを配置します。このレイアウトは、目がページをまっすぐ下に移動するのでスキャンが簡単です。ただし、ユーザーに注意深く読んでもらいたい場合は、フィールドの左側にラベルを配置してください。

グループ関連情報

関連情報を論理ブロックまたはセットにグループ化する必要があります。一連の質問から次の質問への流れは、会話によく似ています。関連するフィールドをグループ化すると、ユーザーが入力する必要のある情報を理解しやすくなります。

ラベルは整理され、フォームを明確にします。 デザイナーの観点から見ると、ビジュアルデザインが少し古くて制限があるように見える場合でも、ユーザーにとって非常に役立ちます。

2
Wendy Wojenka