空の行の状態を表示するための優先的な動作
UIコンポーネントがビジネスアイテムのコレクション（この場合は貨物のマニフェスト）を管理するために使用されるコントロールの一部であることを考えると、コンポーネントの「状態」が現在存在しない場合の優先的な動作を調査しようとしています表示する貨物。
コンポーネントの典型的な例は次のようになります
このコレクションは親ビジネスオブジェクトの一部であり、このコンポーネントはより広いUIの一部を形成します。この親オブジェクトが作成されると、コンポーネントのデフォルトの状態は次のようになります。基本的に、コンテンツを含む準備ができている「空の」カーゴアイテムです。
貨物の入力用の新しい行は、右側の列にある[追加]ボタンと[削除]ボタンを使用して作成および削除できます。
私の問題は、このコレクションのすべての既存のラインアイテムが削除される状況にどう対処するかです。コンポーネントをどの状態で表示する必要がありますか？
ここでさらに複雑になるのは、このアプリケーションの大多数のユーザーが、主にキーボードを使用して移動する（フィールドをタブで移動するなど）ため、設計でキー操作を実行するためにマウスやタッチ操作を優先する必要がないことです。
私が見るように2つのオプションがあります-どちらにも長所と短所があります。
オプション1
最後のアイテムのDELETEアクションをクリックすると、UIがデフォルトの状態に戻ります。新しいコンテンツを入力できる空の行
[〜＃〜]長所[〜＃〜]
これはユーザーにとって馴染みのある状態であり、ユーザーを行の最初の要素に自動フォーカスすることで、ユーザーがアプリケーションにデータを入力し続けるために行う必要のあるそれ以上の対話（キーボードまたはマウス）はありません。
[〜＃〜] cons [〜＃〜]
[削除]ボタンの動作は、それがコレクションの最後のアイテムであるために変わります。コレクションに4つのカーゴがある場合、最初の3つのアイテムの[削除]ボタンをクリックすると、その削除が破棄され、UIから完全に削除されます。これが4回目と最後に変更されます。代わりに、行からコンテンツを削除します。
これはばらばらで混乱しているように感じます。
オプション2
これを明示的に示し、最初のアイテムをコレクションに追加することをユーザーに促す代替の空の状態
[〜＃〜]長所[〜＃〜]
ユーザーの混乱が少なくなります。コレクションの最後のアイテムを削除しても一貫性が保たれるため、行が破棄されると、前のアイテムと同様にUIから削除されます
[〜＃〜] cons [〜＃〜]
新しい行を作成するには、ユーザーからの追加の操作が必要です。つまり、[貨物を追加]ボタンをマウスでクリックします。このコレクションを含む親ビジネスオブジェクトが空であると予期することは非常にまれです。そのため、常に最低1つのアイテムが存在します。
空の状態は、ページが最初にレンダリングされ、コレクションが空のときのページのデフォルトの状態とは異なります。
この空の状態にはオプション2を使用できますが、上記と同じ理由で、私はKBの相互作用を最小限に抑え、可能な場合は必要なクリック数を減らしたいと考えています。これは重いデータ入力主導のアプリケーションであり、最も重要な場合は摩擦を減らすことができます。
だから、コミュニティの感想が最善のアプローチだと思うので興味があります。または、まだ検討していない3番目のハイブリッドオプションはありますか？
私は、両方のオプションを組み合わせるだけで優れたソリューションになることをお勧めします。これにより、ユーザーは空の貨物リストに気づき、すぐに新しい貨物の追加を開始できます。
私はBharath Selvarajに同意しますが、ハイブリッドアプローチとオプション1は、例とオプション2からUIにデータを入力する方法の予想と矛盾することを指摘しておきます。
質問の最初の例では、貨物の最後の行にすでに情報が入力されており、別の行を追加するためのボタンがあります。これにより、「行の追加」ボタンがクリックされると、ユーザーがデータを入力するための空行が表示されるという期待が設定されます。 つまり、最初に行を作成し、次にデータを入力する必要があります。
オプション1とハイブリッドアプローチでは、異なる期待が設定されています。ボックスはすでに空で、データを入力する準備ができています。ユーザーは、[Add Row]ボタンをクリックすると、これらの空のボックスに入力したデータが保存され、入力したデータの下に空の行が追加されることを期待できます。 この場合、最初にデータが入力され、次に行が作成されます。
空の行を最初に作成してからデータを入力するか、データを入力してから行を「保存」するかをサポートするデータがありません。ただし、空のケースと空でないケースは同じ手順に従い、同じ期待を提供する必要があります。ユーザーの大多数がキーボードを介してやり取りしている場合、「行の追加」ボタンが右側にあるため、データを入力してから行を追加する方がタブ順で流れやすくなると思います。