DiamondLightSource/SynchWeb

Add Container button in Shipment view is too big

Closed this issue · 2 comments

The Add Container button in the Shipment view is too big. It appears to be taking on the height of the "Dewar Details" label on the left. The button should be a normal size just like the "Add Dewar" button above it.

big-add-container

This is by design, and after feedback from users. The first thing they want to do after creating a shipment is to create a new container (dewars have already been created). Therefore this is large to draw their attention to the button.

That's not the best UI design, IMO. I don't dismiss the user feedback, but I don't think making the button bigger is the right solution. The button is a UI control just like any of the other controls. Making it bigger than the rest makes for a strange UI that feels inconsistent, IMO.

A different UI design might be to remove the Dewar Details section (and the Add Container button) from the bottom and instead have the user click on a Dewar to get a Dewar view, and then have the Add Container button on that view.

Another UI design that keeps the Dewar Details section at the bottom would be the Two-Panel Selector design pattern. (A typical example is an email client that has a list of emails in the top panel and the details of the selected email in the bottom panel.) Make the top Dewar list so that the user can select a Dewar. Then move the Add Container button to the top next to the Add Dewar button and it will act on the selected Dewar. The Add Container button could be enabled only when a Dewar is selected.

Or, also using the Two-Panel Selector pattern, clearly divide the page into two panels and have a toolbar area for the bottom panel that spans the width of the panel so that it's clear that the page is divided into two panels and that the user selects a Dewar in the top panel to display it in the bottom panel and that the toolbar for the bottom panel contains buttons that act on the bottom panel. Then in the toolbar area of the bottom panel, you could have the Add Container button at the normal size. (The confusion with the current design may be that it's not clear to the user that the page is really divided into two panels; it might just look like a vertical stack of tables or sections to the user.)