web-dev-qa-db-ja.com

フォーム上の情報アイコンの最適な場所はどこですか?

Webアプリのフォームを作成しようとしています。これには、情報要素を追加する必要があります。一般的に、私は使用しているフレームワークの documentation を参照します(これは、私の場合、Bootstrap役立つ情報)。

ドキュメンテーションを読むときはいつでも、与えられた要素の必要性に関する情報を見つけることができないようです。 (便利なのは、Bootstrapというフレームワークのアイコンを使用している可能性があることだけです:glyphicon-info-sign)。

私はSEで見つけた この質問 で与えられた答えに似たものを使用している可能性があります。

オプション1:

Option 1 form

オプション2:

Option 2 form

オプション3:

Option 3 form

情報アイコンの配置場所に関して、ベストプラクティスと考えられるものは何ですか?ラベルの直後にアイコンを配置する必要がありますか?ラベルとアイコンの間に十分なスペースがあることを確認する必要がありますか?アイコンは入力フィールドの後にあるべきですか?

1
Barrosy

オプション1を提案したいと思います。また、アイコンをクリックしなくても情報を表示できます。また、私の意見では、すべてのフィールドに情報アイコンは必要ありません。ゲンター、誕生日など。ユーザーが混乱する情報アイコンを配置するようにしてください。

そして、これらは私の提案です enter image description here

1
Yasintha

オプション1を使用します。これは、情報を提供するアイテム(ラベル)の近くにあるためです。

1
Guy Hack

最初に、可能であれば、追加の情報が必要ないように十分に明確なラベルを提供します。これが不可能な場合もありますが、この場合はそのような情報アイコン(ツールのヒントが表示されると思います)が役立ちます。

全体的なレイアウトは、アイコンを配置する場所に影響を与えます。情報アイコンをラベルの近くに置くと、ユーザーコンテキストがわかります。オプション2は、一見すると視覚的により魅力的ですが、一見するとアイコンがコンテキストから外れていることがあります。ジェンダーで。オプション3でも同じ問題が発生する可能性があり、モバイル画面で問題になる可能性のある入力フィールドのスペースが失われます。

だから私はオプション1で行くことをお勧めします。

別の考え:例のラベルが非常に明確であるため、ツールヒントの情報はどうなるのだろうと思います。ツールヒントを使用して、フィールドの入力方法(最小文字数、パスワードルールなど)を指示することを考える場合、ツールヒントは間違ったパターンです。この場合、フィールドの下に情報を入力する必要があります。

0
BrunoH