Controls in the bottom bar of a modal popup vs. user's expectations

Question

I work on an application where there are a lot of modal popup/windows. A lot of menus and functionalities can only be triggered through a modal popup. Some modal are big and require a scrollbar. For this reason we have a bottom bar with action button that stays fixed in every modal popup, like in the illustration below

^{download bmml source – Wireframes created with Balsamiq Mockups}

After some user tests where people had to book different elements in different groups, I noticed that some people think that clicking on Add elements will close the modal popup at the same time. So they are afraid about clicking on it.

The problem in this design is that I cannot add elements separately: for each Group/subgroup selected, I need to Add a set of elements.

So I am wondering how to convey the idea to the users that they can Add their set of elements for Group 1, then they can continue and add another set of elements for group 2, and to make them sure that it won't close the popup and it is an iterative process.

Any idea?

Answer 1

Within my specific constraints, I found a way to avoid the confusion.

Some of the other answers suggest to use 'add' button in the list, or to pin it below the list .

I cannot pin a fixed 'add' button at the end of my list because if the user scroll out of the list, another section has to be displayed below. So my only real option to show the button regardless of the scroll-bar status is to append it in the fixed-bar at the bottom of my modal pop-up.

The solution, which is a little dirty but seems to avoid the confusion, is to add another button 'Add elements and close' in the bottom bar.

So I have a display like below. It seems that listing the action to add and close as a possibility will remove the confusion on the add button.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 2

A modal dialog box creates the expectation that clicking on any of the buttons in the bottom row will close it. This further implies that all the buttons shown on that row are alternatives--you can only choose one or the other.

I would suggest making this a normal window, with an X in the title bar to close it. The reasons being:

• It is designed to allow the user to perform multiple actions, rather than one quick action.
• There are no alternatives to choose from; the only option is closing the dialog.

Answer 3

Consider using a drag and drop model like this:

This allows users to perform more than one action at once and provides a focus for the buttons to be the final step.

I would change the buttons to Save Changes and Cancel in this case.

Answer 4

From what I understand of your question, the add button is tied to the current content of the list on the right. So what about putting it in or right next to the list? Perhaps like the following screenshot:

You don't have to put the Add button inside the list. It could be something like this:

This should clearly indicate to the user that it interacts with the current contents of the list, and also doesn't give the impression that it might close the dialog since it isn't in the footer of the dialog.