タブ付きフォーム-水平に積み重ねられたセクション
タブに分割した製品編集フォームがあります。
画面に関する一般情報：
- こちらは商品編集画面です。作成は別の場所で処理されます。この画面では、すべての製品に少なくとも「一般情報」セクションがすでに入力されています（リストセクションは必須ではありません）。
- 縦スクロールを避けたい（アプリ全体のレイアウトがそのようになっている）
- 人々が「一般情報」を編集することは非常にまれです。ほとんどの場合、リストタブの1つで処理します。
- 「リスト」タブの情報はオプションであり、順次ではありません。
私はそれの2つのバリエーションを作成しました。
- 一般情報セクションは常に表示されます
このバージョンの好きなところ：
- 常に彼がどこにいるか（どの製品画面で）見る
- 常に一般的なデータを簡単に編集
私が潜在的に好きではないもの：
- 3つの水平に積み重ねられたセクションのこのフローがユーザーエクスペリエンスに摩擦をもたらすかどうかはわかりません
- アイデアは、垂直セクションのスタッキングを複製することでしたが、垂直スクロールを回避することを目的として、それを水平にしました
- すべてのセクションはタブにあります
このバージョンの好きなところ：
- その潜在的な摩擦を取り除き、2つしかない画面セクションがあります：タブおよび選択したタブに基づく専用フォーム
質問：
- 強力で重要なuxルールに違反しているバージョンはありますか？ある場合は、詳しく説明してください。
- いくつかのuxルールに基づいて、どのバージョンがはるかに優れていますか？ある場合、その理由を詳しく説明してください。
- どのバージョンも完全な製品を示していません。タブの1つが全体的な製品ビューである必要がありますか？その場合、1つのタブが「表示のみ」で、他のタブが「編集」されると混乱するでしょうか。
バージョン2の方が優れていますこれが理由です。
- より一貫性があるとより単純なフローを作成しました。これで、フォームのすべてのセクションが同じになります。
- ワークフローに忠実です。 ユーザーは、フォームの残りの部分に記入している間、個人情報を変更するために戻ることはありません。バージョン1のように、全体を表示しないのは理にかなっています。
- 画面の混雑が少なく、余白が増えます。ページに配置できる数が少ないほど良いです。
- バージョン2は小さい画面に適応しやすいです。 3列ではなく2列しかありません。