web-dev-qa-db-ja.com

フォームレイアウトのベストプラクティスは?

フォームのベストプラクティスはありますか、それともフォームの長さに条件がありますか、それは何のためですか?

約10の異なる入力フィールドを持つ登録ページがあり、2つの列を並べて実行するのか、1つの列だけを実行するのかわかりません。

単一列

enter image description here

2列

enter image description here

美的喜び/ユーザーエクスペリエンスの面でどちらか一方が他方よりも優れていることを証明する調査はありますか?

23
Mike

あなたが持っている単一の列のレイアウトは間違いなく優れていますが、他のいくつかのオプションがあります。私のアプローチが最高だとは言いません。問題に適用して、結果を確認してください。

基本的に、いくつかのアイデアがあります:

  • 読みやすさを向上させる
  • フィールド名と入力値を混在させないようにしてください
  • フォームの長さを最適化する
  • 論理構造を導入する(必要な場合)
  • いくつかの助けを提供する
  • 検証を忘れないでください

通常は、長さを管理し、わかりやすい構造にするためにアコーディオンを使用しますが、これは好みの問題です。

enter image description here

36
Renat Gilmanov

以下の理由により、単一列レイアウトの方が優れています。

  • 彼らはより合理化されています
  • 必要に応じて、インライン提案を提供できます。
  • ラベルはよりスキャンしやすい
  • フォームに記入するための明確な順序を提供することで、ユーザーはあまり考えないようにします。覚えておいてください。 」
14
StupendousMan

Luke Wroblewskiが本当に良い記事を書いた: Web Application Form Design 。それは古いですが、まだかなり有効です。

彼は、縦型と横型のバリエーションを含む、さまざまなレイアウトタイプの長所と短所をレビューします。彼の分析には、注釈付きのフォームのスクリーンショットが含まれます。各手法の利点と影響について、非常に明確なポイントがいくつかあります。彼の締めくくりは、正しい選択を確実にするためのテストの必要性を示しています。

これらのガイドラインは、フォームを特定の目的に適切に配置するのに役立ちますが、レイアウト、視覚要素、およびコンテンツの適切な組み合わせを確認する必要がありますユーザーテストまたはデータ分析(完了率、エラーなど)による。

鉱山を強調します。

6
Grant Palin