2

I am working on a website that hosts technical documentation. Some pages have sections of content that are specific to certain host operating systems, hardware configurations, etc. In total there are currently two or three options, each with three or four potential values (e.g. "Operating System" might have "Windows", "Mac OS" and "Linux"). I am currently attempting to figure out where the selection control should go and how it should operate on both PC and mobile.

Each page has some sections that are platform-dependent and some that are not. So, one of the options is to have tabs on each section and make that section visually distinct from the rest of the content. Presumably, clicking the tab on one section would change all the other sections as well. The problem I see here is that small sections of content that changes will lead to odd-looking tab areas, and having subsections that differ based on multiple separate options will end up with nested tab areas that look weird.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Note that there would likely be multiple of those tabbed sections scattered throughout the page; there may only be one, or there could be three or four.

The alternative is page-wide selection. I could have a control in the header or otherwise at the top of the page that changes the content of the page in-place, and not differentiate between platform-specific and generic content. This would essentially make it seem like there were multiple versions of the page. With this model, I would need to figure out a few specifics: I need to find an easy-to-use control that is noticeable and obvious yet small enough to hold all the option items while not taking up too much page space. I also would need to adapt this UI for mobile, which might be difficult as it needs to be easily visible without taking up the whole screen.

mockup

download bmml source

Note that in this mockup, the body of controls at the top might actually be expanded from a dropdown, and could be in the nav bar instead of below the page title. The idea here is that there is a set of controls at the top, and the combination of options selected changes the content on the rest of the page.

What is the most natural and easy-to-use mechanism to have here? Would the clarity of tabs outweigh their clunkiness, or would some sort of global option be best? Or maybe there is a different possibility? One of the big problems that I am struggling with is how to keep the controls usable in a small window or on mobile.

Improve this question
5
  • Welcome to the site, @Wasabi Fan. Can you add a mockup to clarify the two options you describe? At the moment they're a little hard to visualize. There's a icon at the top of the post-editing text field to add a Balsamiq mockup (just to the right of the icon to add an image).
    – Graham Herrli
    Jul 16, 2016 at 4:17
  • 1
    @GrahamHerrli Wow, I didn't know that one could embed mockups... that's great! I updated the question.
    – Wasabi Fan
    Jul 16, 2016 at 5:22
  • How much content is operating system dependent? Or, on the contrary, how much content is the same or only slightly different? If most of the content is common to all operating systems, your best bet might be to just write one page with notes for different operating systems. If the entirety of the content is operating system dependent (for example, an installation page) you may want to just put all three on one page under different headings
    – sneelhorses
    Jul 18, 2016 at 15:23
  • @sneelhorses it varies from page to page. On some of them, almost all the content would change; on others, there are some sections that are common and some that aren't. There are also a few where very little changes. That wide variation is what pushed me to go for a control that changed the page content instead of separate headings or sections -- doing it that way would at least make it consistent across pages. Additionally, I think that the large differences in platform-dependence make a case for the global selection, because that mode creates the illusion of separate documentation versions.
    – Wasabi Fan
    Jul 18, 2016 at 18:48
  • @WasabiFan in that event, I would use separate headings where the os-specific sections are small, and then use separate pages where all the content would change. Any user that is running the software on Mac would skip a page if the entirety of the page is titled Linux, and vice versa. I would recommend avoiding the tabs and dropdowns, since it is not common, but if you decide you must use an OS choice mechanism, I would stick with the buttons. This will likely be the most familiar to the user and is reminiscent of a website navigation bar, which most users will be familiar with.
    – sneelhorses
    Jul 18, 2016 at 18:58

1 Answer 1

Reset to default
1

Assuming I'm understanding the situation correctly, I will propose a few options

1) the best interface, is NO interface.. by detecting the browsers user-agent, you can determine what type of system they are on (and POSSIBLY skip one of the tab bar selections). I understand that you may not be able to do this in ALL cases. It will be VERY rare that someone is on a mac looking up information about a PC. However, it would be common for someone on an iphone to be looking up info about a PC. You understand your use case better than me, so think that through while considering the DOMINANT use case.

2) when space (the 2nd dimension) is an issue, consider using time (the 4th dimension)... when a user comes to the site and you are unable to determine their operating system or configuration, possibly ask them.. but just once. imagine, if when the person comes to the page, they just see 4 big icons for operating systems. After they have chosen one, you show the rest of the page with the single tab bar configurations.

3) combining the above suggestions.. I would do everything technically to correctly infer their operating system (and configuration if possible) automatically. Next I would provide a simple way that shows what you have inferred for their operating system while making it easy to change. Imagine just a few operating system icons at the top of the screen, where the one you inferred is highlighted. The single tab bar sounds fine to me for configurations, BUT do be sure that the user ACTUALLY understands WTF each configuration is.. if they do not, or MOST people have only one of the configurations, ditch the tab bar text selector, and just have the text. At the end of the text you could have a say, for more information about additional configurations: 'Config2' 'Config3' <- 2 buttons

Improve this answer
1
  • Although I do expect to auto-detect as best I can, I think I need to always allow the user to change the platform if necessary (especially because user agents aren't necessarily reliable). So, what kind of control do you think I should use to let the user choose? Put the sets of buttons in the header, or go with tabs? Or something else?
    – Wasabi Fan
    Jul 17, 2016 at 0:23

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.