I have a question it's kind of research and I have researched a few before posting but I want direct pros and cons for my concerns thus I am posting this question here.

I have a page which has a sort of gallery of recipes upon which if I click on a modal is opening for the detail in detail I have a recipe video, it's directions and ingredients then they have few tabs for nutrition values comments on the recipe.

My concern is which is best for the above layout a Modal or a new page? What are the pros and cons of having a modal here?

I got a sort of answer here and did a sort of research but they have listed for general concern I am looking for specific pros and cons.

Here is the rough sketch of my screen. Modal Layout Sketch

The comment will be on each recipe as you can see comments tab in the sketch. The Top portion will have a video of recipe followed by few user action like share timer for recipe etc., then there will be ingredients and steps following with all other details mentioned.

Thanks for the help :)

2 Answers 2


Having read your question and the thread you refer to I'd say "go for new page" for the following reason:

  • if the user wants to compare couple of products (recipes), they can open those in separate browser windows/tabs and perform the comparison

This would not be possible while using modals since the nature of the modal dialog is to block all underlying UI components.

However, this would be acting as a poor man's comparison feature that actually should be implemented within your page.
I agree with the accepted answer of your reference thread - go with an extendable list, a.k.a. accordion. Or, even better, provide some fixed area where the current recipe is displayed while the user can browse (scroll) through the other recipes. In the fixed area you can provide some links like add to comparison, open in new window and print version, see the mockup below:


download bmml source – Wireframes created with Balsamiq Mockups

EDIT: after the OP has added some more information I can give some more reasoning on the initial question.

  • modal window - this is, in my opinion, the worst option, and here's why:
    • pros:
      • displays the information
    • cons:
      • obscures (blocks) the underlying information
      • locks the user within the modal (back/forward functionality of the browser doesn't work as intended)
      • prevents items comparison (opening several modals side-by-side)
  • new browser window (new tab) - somewhat beter than the modal window, yet not the best solution, in my opinion:
    • pros:
      • displays the information
      • allows for several items opened side-by-side (quick switch between items or comparison)
    • cons:
      • returning from the opened item to the main page depends on the browser, thus not reliable
      • can cause a buildup of several browser windows/tabs when items are not closed after viewing
  • the solution I proposed (scrollable list with the recipes and fixed area for the selected one):
    • pros:
      • displays the information (surprise, surprise)
      • keeps the user within one page - ease of navigation
      • all content clearly visible
    • cons:
      • items comparison not directly possible, unless implemented (development issue)
      • requires more display space than the solutions mentioned earlier

I've tried to be as objective as possible when presenting the pros and the cons of the solutions you've asked for and the one proposed by me.

  • hey @Mike thanks for the valuable response, I liked the concept here which you have mentioned I have tabs in my current design but there are too many dynamic values and whole comment section, based on such data what would be the pros and cons? Commented Jan 9, 2019 at 5:17
  • @Mr.Pyramid - what are the comments related to? Each individual recipe or the whole website? Can you share some screenshots so we can get some more context?
    – Mike
    Commented Jan 9, 2019 at 6:50
  • hey @Mike - I have added a screenshot here the current layout which is supposed to be in a modal. Examine it and help me to figure it out which option would be best in UI/UX perspective. Pros & Cons on the same will help a lot in putting my points. Feel free to edit your answer. :) Commented Jan 9, 2019 at 7:45
  • @Mr.Pyramid - I've edited my answer to extend it with the information based on your additions.
    – Mike
    Commented Jan 9, 2019 at 13:12
  • 1
    @Mr.Pyramid - in this case yes, you can use the pros and the cons of my design. Or, in fact, you can OR the pros and AND the cons.
    – Mike
    Commented Jan 9, 2019 at 14:44

Use a new page if this a part of your normal flow, i.e. the happy path. Modal dialogs are highly interruptive and require an action to close them. They should be reserved for unexpected scenarios, which are not part of the normal flow, such as exceptions, alerts, error messages.

  • 1
    or when you're doing frequent modifications on objects on the parent page - eg admin interfaces or replying to Tweets in a Twitter feed
    – colmcq
    Commented Jan 9, 2019 at 14:27
  • @colmcq what is the advantage of modals and disadvantage of a separate screen for doing this ^ (frequent modifications, etc.)
    – ahron
    Commented May 10, 2021 at 7:42

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.