1
  1. Is it good design if in the below form, in which I require user input, the plus button gets disabled if there is no input yet?

  2. I prefer this rather than hiding it but are there any better alternatives to introducing a disabled state? On a second note, what would be an appropriate color in the below for a disabled state for the green button?

  3. Is it good design to have the input being saved without some sort of confirming as user like pressing the green button? I found testers wondering if the input is used without confirming anything (like pressing the green button). How to make this experience better?

Dynamic Form Fields

4
  • why is the button above red and minus? – Mike M Apr 13 '19 at 14:39
  • You can remove this field again by clicking the red - button – Nico Müller Apr 13 '19 at 15:12
  • Please add some description of what you try to achieve: What can be entered here? Free text vs. selection from list? Why/when are buttons (or fields?) en-/disabled? What should happen when the buttons are pressed? Why those colors? I just don't understand your question... :-( – virtualnobi Apr 26 '19 at 6:39
  • this question is unclear. I think you're asking what should the state be of the unfocussed field? – colmcq Apr 26 '19 at 8:58
3

Is it good design if in the below form, in which I require user input, the plus button gets disabled if there is no input yet?

Disabling it is better than hiding it - this way the user knows the button is there, but just can't be pressed yet. The problem with this solution though is that the user could theoretically get confused with why it is disabled. To solve this, you could offer a tooltip or a popup on click to provide more information for the user to understand why the button is disabled.


I prefer this rather than hiding it but are there any better alternatives to introducing a disabled state?

Disabling controls should be a recognizable pattern – it is a pretty common thing. Even here, composing a reply on Stack Exchange, the "redo" button is disabled until you have something to redo.


On a second note, what would be an appropriate color in the below for a disabled state for the green button?

Disabled controls are usually grayed out, if it's possible, you should consider system-wide color for disabled controls. Material design guidelines, for example, suggest making disabled controls 38% the opacity of enabled one.

On a side note, talking about colors, you should probably reconsider making "remove" button stand out less - red color grabs user's attention the fastest and if there is no reason why it should be more emphasized than "add" button, it shouldn't be red.


Is it good design to have the input being saved without some sort of confirming as user like pressing the green button? I found testers wondering if the input is used without confirming anything (like pressing the green button). How to make this experience better?

This one really depends on the context and "the cost" of change - how easy it is to undo the save? does saving it start some other action, so the user should really think before saving it? Generally, UI is moving towards trying not to disrupt the user with confirmations when they are not needed, it's usually better to let the user undo the damage easily than to ask for confirmation modally.

1
  • 1
    Excellent answer, many thanks for your guidance! – Nico Müller Apr 18 '19 at 7:44

Not the answer you're looking for? Browse other questions tagged or ask your own question.