I have 7 products. The site has a lot of content(text) pages. At the bottom of each content page I want to list my products as thumbnails.
Version A: Click on a thumbnail opens a modal with the product information
Version B: There is a product page that lists all products with its information above each other. Click on a thumbnail takes the user to the product page, where the page auto scrolls to the related product information.
Which version would be more usable and why?
Option C: Expand the card to reveal more info.
I favour this method over modals, as I find modals break the flow of the interaction - switching focus to potentially a different part of the page (not so much on mobile, but it's still breaking your context).
Expand the thumbnail itself - you know the user is already looking here so it all part of the same flow. The thumbnail itself can cover the other thumbnails, or they could all expand into a space below their container. Up to you.
The advantage of not going to a new page is that the user can peek at the content before choosing to switch page. Your expanded thumbnail can include a link to the product page, or not - depends on what you want them to be doing.
Hope that helps :)
The general rule I apply to modal v's switching to a page is the following.
If the information or transition is temporary and the focus of the user is to be returned to the page after they have assimilated the information or interacted with a small form and the focus won't change, then a modal form is the right way to go.
If the link or form takes the user out of the current flow and they are not expected to return to the original flow then moving focus to the new flow by transition to the new flow pages, is the right way to go.
I'd go for version B, separate page. Modals don't scale well, adding more information tends to break them. Also a separate page allows you, and visitors, to link directly to the product information.
Modals don't scale well. As soon as the content of a modal exceeds the height of the screen you need to add scrollbars, or chop the content. On mobile that happens quickly. The typical design that users recognise as a modal (probably don't call it that but he!), is a full screen overlay with a box in the middle. Clicking the overlay closes the box. That doesn't really work anymore when there is too much content.
Some examples: left is a bad modal, right is a good modal.
The only right way to answer your question is to understand how your users are using your application and interacting with your products.
Both of your suggestions assume that your products need attention.
Modals are a good fit if your users often switch between products and the interactions are limited.
New page is a good fit if the interactions are various and somewhat complex, but you do not ease switching to other projects.
The technology used to build the website plays an important role in choosing the layout of the website.
If using a separate page for each product that takes more time to load the page makes the user wait will not be a better user experience. Whereas the models with a lot of scrollable information will also look bad on a website.
Using technologies like the Single Page Application (SPAs) loads the data when the site loads for the first time and instantly displays information when needed without loading the page. This helps the user to keep track where they are and from where they reached this page.
My conclusion is using multiple pages in a single page application would be appropriate.
