Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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

mockup

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?

share|improve this question

4 Answers 4

up vote 1 down vote accepted

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer

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.
share|improve this answer

Consider using a drag and drop model like this:

example

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.

share|improve this answer
    
It does not work for me. I need to select (or drag&drop, whatever) a group in my left section, so that my right section populates with a list of elements. Then I should select a subset of this list and add these elements to my summary ( or to my cart if you think e-commerce, whatever) –  Leths Mar 28 at 15:01

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:

Accounts and Repositories Screenshot

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

enter image description here

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.

share|improve this answer
    
Hey that could have been a nice idea but the problem with this design is that my action button Add Element (which is very important) will not always be dispayed, depending on my scrollbar. The bottom bar makes it possible to display important actions all the time –  Leths Mar 28 at 14:58
    
@Leths I don't know what framework/toolkit you're using, but it wouldn't actually scroll with the rest of the list - it would be pinned to the bottom of the list. I'll try to find another screenshot to explain what I mean. And if you can't pin it to the bottom of the list, try putting it outside right under the list. –  iBelieve Mar 28 at 15:42

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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