Modal or new Page for product description?

Question

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.

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 :)

Answer 1

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.

Answer 2

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.