I'm in the process of designing the layout of content on a product page of an Ecommerce website. Included is information such as product details, specifications, fine print, shipping, returns, etc.

I've noticed that a lot of ecommerce websites divide their content up through the incorporation of tabs (see below) enter image description here

But i've also noticed that content is also laid out in visible sections on the page, like below

enter image description here

Any suggestions as to which layout might be better?


The decision might depend on two things:

  • How large is the content behind each tab and
  • How important is it to make the user notice each of the sections.

If the content behind every section is very large the user probably won't notice each of the sections in the version without tabs. This is because not everyone will scroll down to finish reading this section. But if you hide your content behind tabs also not everyone will see the sections when scrolling down and the tabs get out of the viewing range.

This is my proposal: If the content behind every section is not too large so that it would hide important parts at the foot of the page then combine both versions. Make a click on each tab scroll down to the selected section. This way the user will notice each of the tab-headlines and none of the sections get visible only on click. It's something like the scrollspy example from bootstrap. This might be improvable by showing the tabs fixed (on the right or left of the page) when they get out of the viewing range again.


Split test it. You know what they say about opinions, right? ;)

Make two variations. Run a test for a few days and see which one converts better.

  • ^^^^this!!!!!!!! – colmcq Oct 2 '14 at 9:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.