Git Product home page Git Product logo

Comments (2)

stufisher avatar stufisher commented on June 8, 2024

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.

from synchweb.

jlmuir avatar jlmuir commented on June 8, 2024

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.)

from synchweb.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.