Product Description Pages and Header vs Page Body Width

Question

NOTE; I know there are some questions already asked about this, but most are from many years ago. I'm trying to get the latest and greatest thoughts on the matter... which have probably evolved over the years

My client's current e-commerce website uses a full-width header (containing global navigation with mega menus attached to several of the shopping category navigation items). The page body for some pages such as product/category listing pages is full-width whereas the body of product detail template maxes out at 1200px. We are doing a review/audit to evaluate whether or not we should convert the product description pages to be full-width as well.

I feel that since the header is a frequently-used method for users to find products and the growing number of users surfing at 4k resolutions with larger monitors that there are probably a good amount of users with a browser window well over 1200px wide... making it harder than it should be to interact with the mega menus in the header.

2 Potential solutions have been discussed:

1. On pages where the width of the body maxes out at 1200px, apply the same max-width to the header
2. Modify the pages using the 1200px max-width body to display at full width (or at least a max-width larger than 1200px

In looking at hundreds of sites selling products similar to my client's (hair and skin care), it looks like most go with the #1 approach.

I would LOVE to be implement #2 in order to take advantage of some of that horizontal space potentially available these days, but I've yet to see it done spectacularly. The ones doing it best display their product images with 2 per row. This is potentially viable however without reshooting (or re-cropping it could be gotten away with), which is not an option), it is very likely that on the initial page load, the product images (side-by-side) would dip below the fold. Is requiring the user to scroll to see the entire product shot considered bad practice?

Even using the 2-per-row-product-image-technique, I still see a bunch of other places where page elements (or the entire UI) potentially would not display ideally. With that said, I am leaning towards #1 (probably bumping both up to max out at 1440px).

Does anyone have any data (or real-life)-based thoughts on either of the potential solutions?

Answer 1

Consistency of the user interface is important. Users not being able to anticipate where a particular control is located increases their cognitive load having to hunt for it.

In addition to UX, having different structural layouts increases the work and complexity of programming and design reducing opportunity to refactor code and simplify maintenance.

Develop templates suited for the various purposes on your site: home page, categories page, details page, order page, information page...being sure to keep controls and details that are site-wide located in the same location across all templates.

When reference and control elements that are common to all pages are not consistently located and depicted it's harder for the user to use those elements. When an element people use often is fixed they quickly "learn" the psycho-motor process to access that element—glance, mouse move, click, type, tab, enter—move on. If some part of that element changes from one page or section to another—location, color, size, keyboard shortcut—much more user attention needs to go to re-calibrate their mental model of your site and perform the action.