web-dev-qa-db-ja.com

Webフォームのすべてのフィールドを同じ長さにする必要がありますか?

添付されているのは、私が構築しているWebアプリケーションのスクリーンショットです。これは、ユーザーが入力を入力して検索を実行できる場所を示しています。

私の質問:テキストボックス/コンボボックスはすべて同じ幅にする必要がありますか?

最も幅の広いステータスであるStatusはその幅です。これは、最も幅の広いエントリの幅です(プルダウンすると表示されます)。他のすべてのボックスをステータスボックスと同じ幅にする必要がありますか?

enter image description here

9
user52292

場合によります。

それらが少しずれている場合、そうです、純粋な視覚的な一貫性の観点から、それらはおそらくすべて同じ長さに調整する必要があります。

ただし、それらにまったく異なる値が含まれている場合は、意味がありません。

たとえば、ドロップダウンは州の略語であり、もう1つはTwinkiesラッパーで見つかった成分のリストです。おそらく、その状況で同じ長さに強制することはそれほど意味がありません。

また、選択フィールドを一部のオプションよりも短くなるように作為的に短くした場合、オプションを選択すると、視覚的に切り捨てられます。これは必ずしも悪いことではありませんが、考慮すべき点もあります。

テキストボックスについてはnoですが、すべて同じ長さにする必要はありません。

テキストボックスのサイズは、フォームへの入力を容易にするために必要なコンテキストを提供します。テキストフィールドのサイズは、何が期待されているかについてのヒントを提供する必要があります。

「郵便番号」というラベルの付いたフィールドが50文字の長さであると、かなり混乱する可能性があります。または、住所を要求するが5文字しか含まないフォームフィールドも直感的ではありません。

4
DA01

最初に、フォームのプレーンな垂直レイアウトがユーザーにとって適切であるという最初の想定を確認する必要があります。一部のフィールドは相互に関連しており、一部のフィールドは非常に短い入力が可能なため、同じ行にグループ化できます。

すべてのフィールドをフォームの別の行に配置する必要があると確信している場合は、フィールドのサイズが異なると不快に感じるので、この質問をします。これは、フィールドの境界にもユーザー向けの情報が含まれているために発生します。ユーザーがテキストを入力できる場所への視覚的なキーと、適切に選択されている場合は、このテキストの最大長に関するヒントです。フィールドの幅が異なる場合、この情報は整理されておらず、読みにくいように見えます。等しい幅を設定すると、フィールド境界の読みやすさが向上しますが、最大長に関するヒントが削除されるため、完全なソリューションではありません。別のオプションとして、同じ幅のフィールドを視覚的にグループ化し、幅で並べ替えることで、読みやすさを向上させ、フォームをユーザーにとってより快適にすることができます。これで効果がない場合は、最初の想定に戻り、別のレイアウトを試してください。

0
Ivan Gammel