Preferential behaviour for displaying empty row states

Question

Given a UI component is part of a control used to manage a collection of business items - in this case cargo's in a manifest - I'm trying to explore the preferential behaviour for the component when it's "state" is such that there are currently no cargo's to display.

A typical example of the component might be like the below

This collection is part of a parent business object, which this component forms part of a wider UI for. When this parent object is created the default state of the component looks like the below - essentially an 'empty' cargo item ready for population with content.

New lines for the input of cargo can created and removed using the ADD and DELETE buttons in the right hand column.

My quandary is how I handle the circumstance where in ALL existing line items in this collection are deleted. What state should I show the component in?

The additional complexity here is that the majority of users for this application predominantly navigate using their keyboards - e.g tabbing through fields - and as such the design needs to not prioritise mouse or touch interactions to perform key actions

There are two options as I see it - both of which have strengths and weaknesses.

Option 1

On clicking the DELETE action for the final item we return the UI to the default state - ie. an empty row which can be populated with new content

PROS

This is a familiar state for the user, and by auto focusing the user to the first element in the row, there are no further interactions - Keyboard or mouse - which the user needs to make to continue entering data into the application

CONS

The behaviour of the DELETE button changes simply because it's the last item in the collection. If you have 4 cargo's in the collection, hitting the DELETE button for the first 3 items will destroy that remove - removing it completely from the UI. The fourth and final time this will change - instead removing any content from the row.

This feels disjointed and confusing.

Option 2

An alternative empty state which explicitly states this and encourages the user to add their first item to the collection

PROS

Less confusing to the user. Deleting the last item in the collection remains consistent so once the row is destroyed it will disappear from the UI like previous items have

CONS

It requires an additional interaction from the user to create a new row - i.e. a mouse click on the ADD CARGO button. It's going to be extremely rare the parental business object containing this collection would expect it to be empty so there will almost ALWAYS be a minimum of 1 item.

The empty state is different from the default state for the page when it's first rendered and the collection is empty.

Whilst we could use option 2 for this empty state; for the same reasons above I'm keen to minimise KB interactions and reduce the number of clicks needed where possible. This is a heavy data-entry led application and reducing friction where we can is paramount.

SO, with all that said I'm interested to see what the community feels is the best approach to take. Alternatively is there a third - hybrid - option I haven't even considered yet ?

Answer 1

I would suggest simply combining both of your options would be a great solution, in this way the user can be aware of the empty cargo list and start adding a new cargo right away.

Answer 2

I would agree with Bharath Selvaraj, but I want to point out that the Hybrid Approach and Option 1 conflict with the expectation of how data is input in the UI from your example and Option 2.

In the first example from your question, the last row of cargo already has its information filled in, and there is a button to add another row. This sets up the expectation that once the "Add Row" button is clicked, an empty row will appear for the user to input data. In other words, a row must be created first, and data may be entered second.

Option 1 and the Hybrid Approach set up a different expectation. The boxes are already empty and ready for data to be input. Your users may then expect that the data they input into these empty boxes will be saved once the "Add Row" button is clicked, which will add an empty row beneath the data they just entered. In this case, data is entered first and a row is created second.

I don't have data to support whether an empty row should be created first and then data entered into it or data should be entered and then the row is "saved". However, your empty case and non-empty case should follow the same steps and provide the same expectations. I would guess that if a majority of your users are interacting via keyboard, inputting data then adding a row would more easily flow in tab order, since the "Add Row" button is on the right.