2

I am currently working on a project where we are discussing internally about the benefits between putting content inside of tabs versus stacking that content with anchor links above it.

It is a support details page for one product/service/solution out of many and the content considered in this question serves an index on the page. Examples of the content types are: A support page for a product has drivers, firmware, manuals and videos. And a vertical solution specific page (products, services, accessories). Now consider each content type could have between 1-5 items each.

What are the usability consideration I should be aware of?

I am inclined to show content in a stacked list with anchor links because it provides overview without forcing the user to only see one type of content at any time and imposing cognitive load by making each click on a tab explicit.

The opposing side of this argument is weak but mostly stems from the fact that "long pages" are bad.

Example:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

4
  • is the content of each tab, related with all the others? For example, on the first tab you have a video of a product, and when clicking the second tab a driver for the same product is going to appear right "over" it? Nov 19, 2014 at 2:43
  • @rewobs: Yes that is the case. I should have mentioned it. This appears on a product support page the content referenced above will be specific to one product. Nov 21, 2014 at 18:37
  • And is there any reason to not make a division by item instead of by video/driver/firmware? Why having the data of a product dispersed throw tabs instead of having it all together? Nov 21, 2014 at 18:57
  • My personal experience tells me that the second option is very confusing once you scroll to a section. In the first option you see only what you have clicked to see; in the second you see that, plus other info before and after which makes it complicated.
    – drabsv
    Aug 17, 2018 at 16:21

2 Answers 2

1

The argument of long pages and 'people don't scroll' has been heard many times and is debunked many times*. However, I think there can be more reasons to spread content over different pages and maybe relevant in this case. Looking at your examples, I see different types of content like software (drivers), documents (manuals), videos, etc. In your example you made all the list items appear the same and I think that's a dangerous generalization. The drivers for example, could use some user interaction like selecting the operating system and the system architecture (32 or 64-bit). Presenting all different drivers at once, can be confusing I think. If you also take different versions into account, you're interface will be even more complex and less suitable for a list.

Another advantage I can think of is visitors from Google. If you are looking for drivers, manuals or firmware, the most likely place to start the search is Google. A link form Google to the driver page directly, can save the user a lot of time and frustration. Same goes for manuals or firmware.

(*) I think this is a nice read about 'long pages and the fold': http://iampaddy.com/lifebelow600/

1
  • Thank you for the feedback but really the question is about the balance and usability issues between tabs and stacked content. Nov 21, 2014 at 18:36
1

More content: pages, less content: stack.

Items in category: pages, sequence or story: stack.

Each section needs call to action: pages, just one call to action per page: stack.

I would use tabs here, because products assortment in shops tends to grow typically, because this is a horizontal categorisation and because each section here would benefit from call to action, not from one universal call to action at the bottom of the stack.

By the way, I think Ruudt's answer about visitors from Google is quite relevant here.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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