web-dev-qa-db-ja.com

多くのフィールドを持つフォームを整理する方法は?

私が働いている場所には、いくつかのフィールドを持つ画面を持つシステムがあります。約50のフィールドがあり、すべてが重要で表示されます。

example of a screen with about 50 fields

// gimpで編集:D

見苦しく複雑に見えないようにフィールドを配置する方法についての提案はありますか?

20
Xosler

質問のために、すべてのフィールドが必要であると仮定しましょう。しかし、それは情報アーキテクチャの問題である可能性があります。最初に対処すると、フォーム内のフィールドの量が減り、簡単になります。 IAとWebフォームに関する優れた記事です

フォームの最も明白な「問題」は、リズムとバランスの欠如であり、実際には、既知のほとんどの 設計原則が壊れています

縦線 が多すぎることに注意してください。これは グリッドを使用 で修正でき、さらに 垂直のリズムで作曲 でもフォームに順序が付けられます。

enter image description here

最後になりましたが、すべてのフィールドが一度に表示されるわけではないため、複数ステップのフォームにすることができます。ここにQ&Aそれぞれを使用するタイミングの説明 および 進行状況を示す方法についてはこちら

22
Naoise Golden

enter image description here

シーケンシャルフォームがこの問題の効果的な解決策になると思います。 -それはユーザーがプロセスを完了するために各ステップを通過することを強制します。 -必須の手順が欠落することはありません。 (必須フィールドがあるタブの下に表示されないのはタブの問題です。そのため、すべてのタブを通過する必要があります)-データを分割/分割することにより、ユーザーの認知的負荷を軽減します。

これがお役に立てば幸いです。

5
Preyash

グループの代わりにタブを使用し、すべての入力フィールドを一定のサイズの列に配置すると、見やすくなります。

可能なアイテムが5〜7個未満のコンボボックスがある場合は、リストボックスに置き換えます。縦方向のスペースが増えますが、見栄えがよくなり、タブを使用するとスペースが増えます。

5
Danny Varod

不要なフィールドにはタブを使用します。

フィールドを個別の適切なタブに分割します(例:個人、財務、経理)。

人々があなたのフォームのすべてに記入する場合、人々が通常記入すべき情報を見つけてください。それは本当にUXではありません。それは本当にたくさんのフィールドだからです。商用アプリケーションでこれを使用している場合、ユーザーは混雑して困難であると考え、サポートコールを増やすことになります...おそらく、上司と一緒に調べて、どの情報を自動化/削除できるかを検討する必要があります。私が間違えていなければ、これは法的文書または契約です。それが契約である場合、住所、名前、番号、... /税金と情報を含む製品がすでにシステムにあるはずです。これにより、情報のオーバーフローが負担しやすくなります;)

派生フィールドもあります。ユーザーが都市を入力すると、郵便番号、地域、国を取得できます。彼らが通りを埋めるとき、あなたは以前のすべてを知っている(またはそれに基づいて選択をすることができる)と言ってください。ウィザードで分割することは、それに対処する1つの方法です。

通常、最初のタブが「グローバル」で、すべての必須フィールドがタブになっています。次に、タブを用途と使用法に分けます(=よく使用されます-はい/いいえ?)。

4
NicoJuicy