0

I just got across this thread:

Allowing the user to add input fields

As I am in similar situation I would like to ask from UX perspective, what happens when the user clicks 4 times to add field and then he enters some value and press delete on filled input. Does it just delete or is there any confirmation? Are there any real-life examples in programs to see this in action and how other companies have done this?

2 Answers 2

1

There are really only 3 viable methods for handling the deleting of data:

  1. Prompt a confirmation, and make it loud!
  2. Soft delete the data so it can easily be recoverable if needed (this is much more work to implement though)
  3. Have an "undo" function. This is mainly only applicable to document editing types of features, and again is a lot of extra work

Never just delete data from a single click. It's far too easy for it to accidentally happen.


With that in mind, let's look at your specific scenario...

You have 2 main use cases, and I will give my suggestion for both.

  1. User has added new field, typed a value, and saved it to the database. In this case, you most definitely want to prompt for confirmation to ensure the user doesn't accidentally delete existing data.

  2. User has added new field, typed a value, but not yet saved to the database. This is less important for you to need to prompt for confirmation, but still should be considered. I would say you need to make a judgement call based on the type of data your input fields accept. You need to weigh up "annoying the user with needless prompts" vs "annoying the user with loss of entered data".


In summary, I will suggest that you always prompt for delete if the input contains a value. If a good enough reason appears down the line to remove the prompt then wait for that reason, don't try to preempt it.

I won't provide examples but I think you will find almost every application that's worth using will have some way to either confirm deletion, or provides an easy recovery/undo feature.

3
  • I agree that accidents happen. But if user clicks 10 times because he knows that he will enter that much data under one label, and later delete 3, isn't a bit much work to be confirming 3 fields every time? And there is no save option, the user just fills the form and send it. Is there any real-life examples I could see good UX for things like this? Is this kind of forms in any programs? I can not think of any. Aug 6, 2020 at 6:59
  • 1
    @user2762414 I think you should just make a decisions based on what you think works best for your application, and what you think your users will want. Yes 3 confirmations would be annoying, but why would the user add them and fill them in? I suggest you just pick either confirmation or no confirmation and then wait for feedback on it.
    – musefan
    Aug 6, 2020 at 7:20
  • Indeed. If the user clicks 10 times and only needs 7 rows, the last 3 should be empty and need no confirmation. Also, if users are regularly adding that many rows, it would be good to add an "add __ fields" button with a number picker. It's slow and difficult to click exactly the number of times you want above two or three. Aug 31, 2021 at 3:20
0

Here's what I would focus on when designing a solution for an form requiring dynamic number of input fields:

  1. Assuming that at least one entry is mandatory, when only one input field exists, the user should be permitted to only add more fields and shouldn't be able to delete the field.
  2. When there are more than one fields, the user should be able to delete any of the fields as long as at least one field is left after deletion.
  3. When the user deletes a field, the field could be immediately removed with an option to rollback the deletion, or deleted upon confirmation, depending on the requirement. My preferred approach would be to delete the field immediately and show a toast message with embedded action that would allow the user to undo the deletion if needed (reactive confirmation).

enter image description here

This is an unobtrusive approach as it allows the user to react if they wish to rollback their last action, but stays out of their way if no further action is needed. Asking for a confirmation before deleting an entry every time (proactive confirmation), on the other hand, would force one additional click per entry for the form field.

As a bonus, you can also add a stepper and text field to the Add Rows section to allow the user to add multiple rows simultaneously.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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