web-dev-qa-db-ja.com

フォーム内のすべての入力コントロールを同じ幅にすると便利ですか?

フォームデザインに関するこの質問では、すべての入力コントロールが同じサイズです: 右揃えのフィールドラベルの方が良いのはなぜですか?

私の質問は、それが何かに役立つのか、それとも単に好みの問題なのかです。

たとえば、他の要素と同じサイズの10文字の入力のみを受け取るカレンダーウィジェットがあると、無駄になりませんか?

8
elias

フィールドのサイズ(長さ)は、ユーザーに価値あるアフォーダンスを提供できるという点で、使いやすさの問題です。

次の例を見てください。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

ラベルがなくても、フィールドが何であるか推測できます。

mockup

bmmlソースをダウンロード

義務的なWroblewskyの引用(上記の例は、彼の本のCh。5からのもの Web Form Design (p。73-74)):

アフォーダンスは回答を構成する方法についての貴重な手がかりを提供するので、人々は入力フィールドへの入力方法を考えるときに自然にそれらの手がかりを検討します。その入力フィールドのサイズが任意である場合は、それが何を意味するのかを理由もなく考えてしまう可能性があります。 [...]別の言い方をすると、この入力フィールドは長いが私の答えが短い場合、質問を誤解していますか?人々に考えすぎないようにし、代わりに、明確なアフォーダンスから利益を得ないすべてのフィールドに一貫した長さを使用することをお勧めします。

質問に関して、いいえ、all入力フィールドを同じ幅にすることは役に立ちません

ユーザーが入力するデータのコンテキストに応じて、幅を可変にすることは理にかなっていますが、それらの幅は任意であってはなりません。代わりに、フィールド幅は代わりに、適切な場合にフィールドに入力する必要があるものについての手掛かり(アフォーダンス)をユーザーに提供する必要があります。

8
Charles Wesley

それは主にデザインの問題であり、使いやすさではありません。主な問題は、それらが左揃え(左から右の言語の場合)であり、すべて同じ長さではないことです。

ただし、コンテンツ(ポストコードなど)の長さがわかっているフィールドは、コンテンツの長さと同じくらい長くする方がよいと主張します。長くすると、入力が長くなることが予想され、混乱が生じる可能性があります。

要約すると、入力の長さがわかっている場合は、設計上の理由がない限り、入力を少しだけ長くしてください。

4
JohnGB

フォーム要素は扱いにくいため、論理的にグループ化し、視覚的にグループ化し、同時に視覚的に区別する必要があります。視覚的にグループ化されたフォーム要素は、 近接 の法則に従います。近接性が良い場所では、使いすぎると視覚的な「刑務所」になります。これらの例を見てください。

近接しないフォーム

An over use of Proximity

過度に使用された近接 A form with over-use of proximity - the other side of bad example

Something Right Something right.

- 要約する -

  • 視覚的にグループ化する前に、フォーム要素を論理的にグループ化します。論理グループが機能している場合は、視覚的なグループ化の必要性はほとんどありません。
  • 異なるフォーム要素に「等幅」を適用する必要がある場合は、4つを超えるフォーム要素に同時に適用しないでください。すべての要素が同じタイプ(たとえば、すべての入力ボックス)である場合、その幅を同じに保つことができます。

  • 個人的には、この「視覚的な刑務所」を壊すために、フォーム要素内に定期的なスペースを導入するのが好きです。このアプローチは機能し、あなたの場合にも役立つかもしれません。 A personal work example

3
Salman Ehsan

私の意見では、あなたに尋ねる最も重要な質問は、それらがすべて同じサイズである必要があるかどうかではなく、入力が制約/検証される必要があるかどうかです。

入力に制約や検証がない場合は、それを可能な限りきれいに整理するための美学の問題です(そして、それらをすべて同じにすることは、特にきれいにするための1つの方法です)。

制約または検証がある場合、入力に共通のパターン(サイズと入力フィールドのタイプを含む)を使用すると、最高の使いやすさが提供され、ユーザーのエラーを減らすのに役立ちます。

1
Michael Lai