Create / Modify in a modal window

Question

Suppose we are in a backend admin website and we are in the page that show us the list of products. Now we want to insert a new one product. The insert/update form should appear:

• A) in a modal window

• B) or is better to redirect the user to a new page

In the solution A) the window will contain only the title ("Update product" or "Create new product") and the form. If the user change idea and don't want to modify/create the new item can simply close the modal window and return to the original window without the need of reload anything.

In the solution B) the page, in addiction to the form, will contain the website menu and the breadcrumb menu. All this elements are not related to the action "update/create product".

Wich solution is the better? The same solution will apply to the "Create new" and to the "Update"?

Answer 1

I think you can make a huge difference there if you implement a concept the user can see through and accept when using your forms. There are facts to modal windows you should consider to make that concept & decision:

Concerning Modal Dialogs / Forms:

• Non-Javascript Accessibility: You will have to have a separate form anyway for users with JS disabled (unless you're not planning to support them)

• Disrupting the normal page workflow: Modal Windows mean you want the user to be occupied exclusively with the content the modal window is serving.

Concerning Normal Page Dialogs / Forms:

• Urgency of the task ahead: If the form is too big, too cluttered or hard to get, the user might just switch off and visit somewhere else on your site.

Develop A pattern the user can understand or at least does not mind

For example, I for myself established some rules for use of modal dialogs.

• Use modal dialogs if either the user made a decision where he indicated clearly what the next step will be: For example, if he clicked sign in, a modal dialog to enter the users credentials can appear, because the user is expecting exactly this type of form.

• Use modal dialogs if the task ahead is too important to go unnoticed, and it is of our highest interest for the user to complete the task without any disturbance: For Example, If the user clicks on Checkout and enters his credit card credentials.

• Use modal dialogs if some already accomplished task needs additional attention: For Example, if the user clicks delete on an account, confirmation and entering of a reason could appear in a modal form.

• Use modal dialogs if the user cannot advance anyway without completing the modal form: For example, a sign in form requires certain credentials, and without them no sign in can be made.

• Use modal dialogs only if the user can easily complete the form without needing any other resources from your page: For example, If the user has to fill a complex form (like a profile on stackexchange), he might want to open a page to see how the other guy they know filled his profile. But just to enter an email and a password, the user won't need to do this.

• In any other case, use normal forms.

As I said, these rules are mine and not to be considered general rules. I also am eager to learn more and how others use modal forms. It's just to show you how you could base your decision on what you actually want from the user.

Answer 2

I also prefer to maintain the user in context.

A different approach I find less disruptive is to be able to modify an entity (product in your case) directly in the list page. Maybe an icon in the upper-right corner that, when clicked, would turn labels into text fields, for example.

Of course this only works if all the information needed to be edit is already shown in the product element.

To create a new product I would add to the end of the list (or the beginning, if you want to give predominance) an element about the same size of a product element with a plus sign that would turn into a product element in edit mode when clicked. Something like this:

Answer 3

Personally, I always (when possible) prefer the Modal way, because it is less jumping between pages and the user can concentrate on what he is doing...

But If you change page to save (say, your form action is another page and it reloads each time they save from the form), the point of staying in the mood is lost. You should go with AJAX forms if you want to be the most useful with modal...

If you don't want AJAX in your form, or your data is too sensitive, you're better with different pages and pass them with POST, as AJAX javascript, your whole server sending code will be accessible to users.

So, for short answer, I'd say AJAX => Modal otherwise, the modal part is completly useless.

Answer 4

I'm not a huge fan of modals in general, I feel like they are jarring and break up the flow. This can be a very effective attribute for warnings and messages, but I try to avoid them in the general flow of a system.

That being said, if there are a lot of fields when creating a new product then I would take them to a new page. If there is a minimal amount of fields (5 or less? You'll have to use your best judgement there) I would just allow them to edit or add them inline.

Answer 5

For bulk-edits when users need to make changes to multiple products, full page edit can be more efficient if you can display the product information in a tabular format with all the input fields. This would let the users make changes across multiple product quickly, and submit all the changes at once is usually more efficient. (vs making one product change at a time)

Also, there's no reason why you can't provide both methods. Modal Edit for quick changes. And Full page Edit for bulk edits.