0

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?

1 Answer 1

0

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.

4
  • being sure to keep controls and details that are site-wide located in the same locations in each template. - are you saying that a given control (ex. the 'men' navigation item in the global header) should exist in the same location in each template or it should remain in the same location ACROSS ALL templates?
    – Daveh0
    Nov 30, 2022 at 19:15
  • All—thanks, I updated my response. Nov 30, 2022 at 20:32
  • ok so you're saying that (in the scenario I described), there shouldn't be a mix of full-width header for some pages and fixed-width for others regardless of the width of the page body? even if it's between "application" pages (those displaying categories, product lists or product detail or login/checkout) and "marketing" pages?
    – Daveh0
    Nov 30, 2022 at 21:46
  • Yes. I elaborated my reasoning in my response above (last paragraph). However, since I don't know the specifics of your project I can only speak generally. If you have justifiable reasons that call for changing header width from one page or section in the same site then you ought to do that. Nov 30, 2022 at 22:24

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.