Webアプリのフォームを作成しようとしています。これには、情報要素を追加する必要があります。一般的に、私は使用しているフレームワークの documentation を参照します(これは、私の場合、Bootstrap役立つ情報)。
ドキュメンテーションを読むときはいつでも、与えられた要素の必要性に関する情報を見つけることができないようです。 (便利なのは、Bootstrapというフレームワークのアイコンを使用している可能性があることだけです:glyphicon-info-sign)。
私はSEで見つけた この質問 で与えられた答えに似たものを使用している可能性があります。
オプション1:
オプション2:
オプション3:
情報アイコンの配置場所に関して、ベストプラクティスと考えられるものは何ですか?ラベルの直後にアイコンを配置する必要がありますか?ラベルとアイコンの間に十分なスペースがあることを確認する必要がありますか?アイコンは入力フィールドの後にあるべきですか?
オプション1を使用します。これは、情報を提供するアイテム(ラベル)の近くにあるためです。
最初に、可能であれば、追加の情報が必要ないように十分に明確なラベルを提供します。これが不可能な場合もありますが、この場合はそのような情報アイコン(ツールのヒントが表示されると思います)が役立ちます。
全体的なレイアウトは、アイコンを配置する場所に影響を与えます。情報アイコンをラベルの近くに置くと、ユーザーコンテキストがわかります。オプション2は、一見すると視覚的により魅力的ですが、一見するとアイコンがコンテキストから外れていることがあります。ジェンダーで。オプション3でも同じ問題が発生する可能性があり、モバイル画面で問題になる可能性のある入力フィールドのスペースが失われます。
だから私はオプション1で行くことをお勧めします。
別の考え:例のラベルが非常に明確であるため、ツールヒントの情報はどうなるのだろうと思います。ツールヒントを使用して、フィールドの入力方法(最小文字数、パスワードルールなど)を指示することを考える場合、ツールヒントは間違ったパターンです。この場合、フィールドの下に情報を入力する必要があります。