ビジネス文書の複雑なフォームをどのように構成するのですか？
エンタープライズ管理ソフトウェアでは、フォームを使用して、顧客、請求書、注文、タスク、製品などのドキュメントを記録します。フォームをハードペーパーバージョンのように見せたかったのです。
以下は引用例です。
編集ボタンをクリックすると、各フィールドが編集可能になり、ページが同じ構造のフォームに切り替わります。
製品フォームなど一部のフォームには多くのフィールドがあるため、フィールドをグループ化してフォームを構造化しますが、これは非常に複雑に見えます。
私たちの現在のアプローチは悪くないと思いますが、いくつかの UXパターンを尊重していません ：
- フォームで複数列を避ける
- 各フィールドの上部にラベルを配置します。フィールドの左側にラベルを配置する場合は、入力フィールドの近くで右揃えにする必要があります。
そのような複雑なフォームを構造化するためのより良いアイデアがあるかどうか知りたいですか？
ベンが言ったように、UXパターンは神聖ではなく、特定のシナリオのために存在します。
複数列を回避することは、次のような状況で、完了までのパスの混乱（人のジグザグ）を防ぐことを目的としています。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
あなたのケースでは、ユーザーを案内する強い垂直エッジがすでにあり、2つの列を少し離れて配置すると、さらに強くなります。
右揃えは、ユーザーがラベルをフィールドに関連付けるのを支援するためのものです。これは、短いラベルがフィールドから切り離されているように見える長いラベルがある場合に役立ちます。
あなたの場合、少なくともこの画面ではそれは本当に問題ではありません。他の画面では問題になる可能性がありますが、ラベルを右揃えすると、セクションのタイトルが左揃えである必要があるため、はるかに大きな問題が発生し、混乱を招きます。言うまでもなく、右揃えのラベルを使用すると、2列のレイアウトはひどく見えます。
ドロップダウンの幅が広すぎます。各セクションに縦の仕切りは必要ありません。その[更新]ボタンについて何かしますが、それ以外の場合は問題ありません。
エンタープライズアプリケーションユーザーはスクロールを好まないため、適切な情報密度が生産性にとって重要です。したがって、空白をうまく利用しているため、レイアウトに問題はありません。
キーボードのタブの順序については特に注意が必要です。たとえば、製品のスクリーンショットでは、ユーザーが「価格」セクションに移動する前に、まず「調達」セクションをキーボードでタブできるようにマークアップを構成できます。
しかし、レイアウトは4列のテーブルで構成されているように感じます。つまり、タブの順序が調達と価格の間で変動することになります。それは理想的ではないかもしれません。
複数列のページをレイアウトするときは、常に次の2つのことに注意します。
- ユーザーの予想されるタブ移動順序。
- ブラウザーの自然なタブ順序なので、「tabindex」属性を使用する必要はありません