Dropdown execute action onChange

Question

I currently have a dropdown that adds a selected section to the page. Originally, the dropdown had a button associated with it to execute the addition of the section. I've since changed it to execute when the selection is made and thus removing the button.

There is some concern that users could accidentally add a section. Each of the added sections do have delete buttons.

My question is whether or not I should keep the addition of the selection onChange or would it be more appropriate to add the button.

Answer 1

Whatever you do, be mindful of keyboard users as well. I'm not 100% sure of the situation cross-browser, but if you go with the onChange event, you need to make sure it isn't firing each time the up/down arrows are pressed, otherwise when a keyboard user tries to navigate through the list, it'll fire each time they land on an option.

Edit 03/06/2015:
In Firefox, the event will be fired when 'Return' is hit or the input loses focus. In Chrome and IE (<= 11), it fires as soon as the up/down arrow is pressed, so poses an accessibility problem.

http://jsfiddle.net/simonhudson/f4kr1Ld7/1/

Answer 2

My suggestion would be to retain the button to add the module as users might accidently click on a selection and find it has been added to a page. This is in violation to Nielsen's heuristics since you are accidently allowing a person to make an error. To quote the heuristic

Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.

Also since I dont have any visual context, I am assuming there is a possibility that the module could be added at the bottom of the page which users might not notice.

If you do want to have an option to add a module to a page on selection, think of a drag and drop approach or highlight the area where the module has added so that users have some visual indication of the interaction.

Here is an example of how dotnetnuke does it.