インライン検証アイコンの使いやすさ

Question

私はBootstrapの入力フォームの検証のスタイリングを検討しており、インライン入力検証に使用されるアイコンが配置される特定の理由があるかどうか疑問に思いました。

Bootstrapの標準はそれを入力フィールド。

検証アイコンが配置されている場所の使いやすさ/実用性の側面を示すために、いくつかの例や参照がありますか？

Answer 1

モバイル画面では、キャンバスのサイズが制限されています。美的で実用的な値のために、ほとんどの入力フィールドは画面の幅全体に広がり、入力フィールドの左右に余白を残しています。これにより、チェックマークアイコンが入力フィールドの外側にある余地がなくなります。

^{download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム}

美的および実用的な価値について説明します。実用的な値は、左側の入力フィールドにより、目に見える入力のための余地が増えることです。右側では、大きな入力が国境の外に出る可能性があります。これは、入力が長い通りの名前または複数の姓である場合に発生する可能性があります。
美的価値は、左の例が右の例よりもバランスが取れていることです。チェックマークアイコンを考えないと、右の例では役に立たない白い境界線が表示されます。

Answer 2

Luke WroblewskiとEtreはいくつかの インラインフォーム検証の研究 を行い、22人の平均的なユーザーでさまざまなアプローチをテストしました。検証をフィールド内外に配置することに関して、前者に大きなメリットは見られず、検証をすべてのフィールド内に配置することはできないため、一貫性がないと指摘しました。

フォームフィールド内に検証を表示しても、大きなメリットはありませんでした。これらのメッセージの配置には、必ずしも一貫性がありませんでした。 （検証メッセージをフォームフィールド内に表示することは可能ですが、標準のドロップダウンリスト内に表示することははるかに難しいため、これらの要素の外に表示しました。）フィールド内検証フィールドの外に表示されるメッセージよりも目立ちませんでした。