web-dev-qa-db-ja.com

プレーンテキストを含むフォームの入力フィールドの配置

情報と入力フィールドのリストを同時に含む詳細ページがあります。セクションは、情報フィールドと入力フィールドが交互に表示されます。

データのアラインメントについて議論しています。オプション1は、情報を入力ボックスの左側に揃えます。オプション2は、テキストを相互に揃えます（入力ボックス内かどうかに関係なく）。

この調整を行う正しい方法はありますか、またはこれはより意見に基づいていますか？.

enter image description here

formsinput-fieldsgridalignment
8
Jason McFarlane

通常、テキストコンテンツではなく、フィールドの左揃えにします。

enter image description here

これにはいくつかの理由があります：

  • より良い配置。ボックス化された入力要素（つまり、アウトライン、境界線、または影付き）の場合、垂直|ボックスの端は、左の列を下にスキャンするときに目を引く傾向があるため、その垂直線が左揃えされている場合、フォームはより整理されたものとして認識されます。

  • 空白の正しい使い方。レイアウトのようなグリッドに配置された列の場合、目は列の横の余白の余白を使用して列自体を認識します。そのホワイトスペースに侵入する要素は、ユーザーに対してずれていると感じ、認知的不協和音を作成します。以下は、侵入がいかに顕著であるかの例です（レイアウトはまだ整理されているように感じられますが、もはや列のようには感じられません）。

enter image description here

  • フィールド自体のより良い区別。入力フィールドがテキストと異なります。ユーザーが段落を読んでから入力フィールドを最初に認識するようにしたいので、フィールド全体をテキスト段落に揃えると正しい視覚的意味が提供されます（つまり、「これはプレーンテキストとは異なるインタラクティブな要素 "）プレースホルダーまたはテキスト値を読み取る前。

  • ビジュアル階層。ラベルが入力ボックスの上部に表示される従来のフォームデザインでは、入力ボックスのエッジからのプレースホルダーのわずかなオフセットにより、フォーム全体のスキャンラインと編成に役立つラベル->入力視覚階層を提供できます。

プレーンテキスト+フィールドの左揃えの実際の例...

  • Apple iTunes支払いフォーム enter image description here

  • Googleサインアップフォーム enter image description here

  • Facebookサインアップフォーム

    enter image description here

繰り返しになりますが、これは一般的なルールであるため、特定のUXの理由（不協和音、色あせたアウトラインなどの意図的な使用）や異なるウィジェットのデザイン（単一の下線入力ボックスなど）には例外がある場合があります。

フォームデザインに関するより完全な記事については、Luke Wroblewskiの フォームデザインに関するプレゼンテーション の概要をお勧めしますが、他にも多くのリソースがあります。

12
tohster

これはむしろ意見に基づいていると思います。テキストボックスに揃える情報、つまりオプション1のほうが一般的だと思います。

ただし、質問のほかに、テキストボックスの上にあるラベルも検討する必要があると思います。これは使いやすいようです http://uxmovement.com/forms/faster-with-top-aligned-labels/

これもかなり詳細なガイドです http://www.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/

0
Ameen Akbar

これはデザインスクールでよくある質問です。答えは非常に簡単です。段落またはコンテンツのブロックの左端を入力フィールドの左端に揃える必要があります。基本的に、パディングを含むコンテンツブロック（ブロック引用符など）で作成された例外は、すべてのテキストを目的の配置オプション（左、右、中央）に従って配置する必要があります。

これを証明するのは非常に簡単です。スタイルをまったく設定せずにHTMLを記述するだけで、何が起こるかがわかります。これは多くの理由で発生しますが、考えてみてください。入力の内部コンテンツを段落に揃えると、入力フィールドが空の場合は行から外れます。または、0パディングボックスでは、入力がコンテナーをオーバーフローします。等々。

要するに、あなたの最初のオプションはデザインの面で正しいものです

0
Devin