28

In my application, I have pages that show lists of some objects, for example "People" or "Contracts". From these pages, the user may create a new object. Often these objects only have a handful of properties, maybe 4 or 5. My question is about the best approach for the forms used for creation of new objects.

Sometimes I have used a separate page, especially when the number of properties is greater than 5-6. Sometimes I have used a modal dialog. I have even seen some applications that insert an empty row into a table and you fill-in the values. (I will not be doing that!)

Any UX-preferences or suggestions for what approach to take? Also- is it important to be consistent between different types of objects? Or is a mix of approaches OK?

The technology of my application (Ember.js, single-page app) allows me to navigate to a different page instantly, so any timing difference between approaches is not a factor. In fact, the animation of the Bootstrap dialog takes longer than the page transition. The application is a back-office administrative system for insurance companies.

Improve this question
3
  • Will the user need to remember some detail or context from the screen before they are presented with the new form? For example, noting the contract-end date of the last contract so as to specify the contract-begin date of the new contract.
    – Erics
    Commented Jan 15, 2014 at 2:27
  • Any particular reason you won't be using the "add row to list" design pattern?
    – Erics
    Commented Jan 15, 2014 at 2:28
  • No, the forms don't typically have a need to cross-reference the page below. In cases where that situation comes up, my pattern has been to provide an 'action' on the other object like 'create new contract' and defaulting the dates based on the source of the action. I shouldn't diss "add a row"- after all, it's great for spreadsheets and data-entry apps. But mine is neither of those.
    – Steve H.
    Commented Jan 15, 2014 at 2:39

2 Answers 2

Reset to default
22

Modal dialogs assume slightly different interactions, compared to a separate page.

  1. Modals are good for small and quick interactions, like confirmation, signing in, subscribing, feedback, image viewing, etc.

    Fast task execution within a modal dialog allows easy return back to previous view and restoring the context.

  2. Modals provides less real estate. It's good for small tasks, but could be pain for a rich UI.

  3. Modals provides easy exit, with close button, ESC, or clicking outside. So there is a danger of accidentally closing it and losing data.

  4. Modals cannot be nested. Although it's possible, it brings bad UX.

Although a tool allows to do something easily, you shouldn't do it in blind way. And the atomic object of a single-page app is a page, you could consider it.

Improve this answer
3
  • Thanks for your comments- points all well-taken. In regard to the small interactions, another pattern that I have used is using a dialog with the minimum information needed to create a new object and having buttons "Save" and "Save and edit"- the latter going to a full page with a richer UI.
    – Steve H.
    Commented Jan 16, 2014 at 1:09
  • 1
    Another consideration: will the modal window still work as well on a small mobile screen? Decide if you want and need to have two separate designs or one.
    – Richard
    Commented Apr 6, 2016 at 11:22
  • I would also add that often, showing a modal does not take into consideration the URL, like "/new", which can cause troubles when sharing links.
    – Cyril N.
    Commented Jun 23, 2020 at 7:45
1

I have worked on a similar project with the similar scenario and requirements. We had to create an object multiple times while staying on a page. We have used a JavaScript Modal window to accomplish that because of following reasons.

  • Modal was ajax controlled and was rather quick to load VS loading a new page over and over again.
  • In Modal, we only displayed a form with few input elements but had it been the new page, the new page must had loaded several visual elements (styles) that was turnarounds intense.
  • Modal doesn't refresh your page and your eye doesn't feel tired but when it has to move back and forth between pages rapidly and over n over again, it feels like flickering and tiresome.
  • When you use Modal as standard creation/editing approach, this reduces the number of pages your application has and the app is perceived easy to use.
  • Considering the economy of real estate, it makes sense load small window (Modal) vs a complete new page.

I hope this will help you make a decision.

Improve this answer
1
  • Thanks for your feedback. The thing about this app is that it does not call the server to show a new page- the speed of new page vs. dialog are equivalent. I do appreciate your comment about the jarring effect of moving between pages rather than the relatively low impact of the dialog. I think the "focus" effect is nice, especially with Bootstrap so you have a transparent mask covering the screen below, but still visible to give you context.
    – Steve H.
    Commented Jan 16, 2014 at 1:06

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.