Preferential behaviour for displaying empty row states

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

enter image description here

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.

enter image description here

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

enter image description here

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

enter image description here

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 ?

Tags: