2

mockup

We have a modal that is used for an action to Add an item and Edit an existing item. It also has a button to delete the item all together.

I am trying to determine the best way to handle the button and navigation between the tabs. Right now it is set up as:

  1. You can click between the tabs to change the view
  2. You can click on the x to close the modal
  3. When editing (not adding) "delete" shows up on all the tabs
  4. For the other buttons we change them depending on which tab you are on:
    • Tab 1: Delete, Cancel, Next
    • Tab 2: Delete, Back, Next
    • Tab 3: Delete, Back, Save

Some specific questions I am struggling with:

  1. Is this the proper UX to handle this?
  2. Should "delete" be on only the first only or last tab only or is it ok to have it on all tabs?
  3. Should we allow navigation via the tabs too or just buttons?
  4. Should the buttons change between tabs?
  5. Should we save between tabs or wait until the end?

Any feedback would be very appreciated. Thanks!

Improve this question
4
  • Is this a step thru, as in a sequence that each tab represents a step forward / backward?
    – Mike M
    Commented Jan 25, 2021 at 21:32
  • Have you considered creating multiple smaller edit modals, one for each section, to keep it simpler? I'd put the delete option on the page directly, rather than having to click edit to delete which users might not expect.
    – Martyn
    Commented Jan 25, 2021 at 23:13
  • Thanks for the comments! @MikeM yes correct, we are basically letting the user add a new item into a list but there are different values to add for this new item which are separated into the 3 tabs in the modal.
    – husseinSD
    Commented Jan 26, 2021 at 13:26
  • @Martyn we did but really it's more of a wizard and the user needs to update all 3 sections. I thought about not doing it in a modal and having a new page instead but seems overkill. I do like the idea of putting the delete option outside of the modal tho.
    – husseinSD
    Commented Jan 26, 2021 at 13:27

1 Answer 1

Reset to default
1

I wouldn't suggest using Tabs unless you allow users to skip steps. You may like to use a progress bar/ step progress slider to indicate which step of the wizard which the user is currently at. One example I took from the internet illustrates this idea.

example showing steps in a modal

This being said, to answer your questions,

  • if the delete button pops up during an edit, users will assume the button as a cancel action but be confused by the button text on whether their action will delete the entry. Delete button should be in the main view where an entry can be selected and deleted
  • tabs navigation (in my opinion) is fine only if you allow users to jump steps, e.g. 1 to 3, and then back to 2, and fast forward to 4 and going back to 1 before finish off at 5
  • buttons should stay consistent between tabs
  • saving at each tab is a good practice, and warn the user when exiting the modal without completing the task
Improve this answer
1
  • 1
    Thanks, solid advice. In our case jumping tabs is ok. I can see users confusing delete for cancel. We will move it to the main view.
    – husseinSD
    Commented Jan 28, 2021 at 23:01

Your Answer

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

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