My intention is to present installation instructions for a software to the user. The document has 3 versions, the second of which has 5 sub-versions:

  1. Binary installation (default for windows and OSX, possible only there)
  2. Source installation (default for linux, possible everywhere)

    1. Ubuntu/Debian
    2. Arch
  3. Development installation (possible everywhere)

And I want it so that only one consistent and relevant version of the document document is seen (and can be linked to) at once, e.g. “Binary installation” or “Source installation for Arch”

Here is what I have now (It’s cropped so ignore the wonky purple header,a nd i already fixed the indentation in the second code sample):

nested tabs

I like it except that (a) I should switch the long-form description (“Installing from source (…)”) to text instead of a header, and (b) it’s not clear that switching between the binary/source/development tabs replaces everything until “Running the notebook”.


  1. Is there better UX that more clearly shows that you can switch out the whole “Installation” section? Putting a frame/shadow around it (like in the nested tab area) would fix it but look bad imho.
  2. I don’t think that nested tabs in general are a bad idea, but some people seen to think so. I think this is a valid use case for them, except for the shortcoming mentioned in the first question. Do you agree?

2 Answers 2


I see you are stacking 2 sets of tabs on top of each other. Have you considered using a different UI for selecting the installation method? Listing the Installation methods in a list with a Radial Button selector is an option.

I'm also noticing at the top, underneath the top-most tabs you have your description. You are hiding the descriptions behind the tabs.

Offering the description alongside or within the top selectors may help people make a decision. With the UI you have chosen, a user needs to select a tab, then read description. Rather, the user could just read descriptions and choose the most relevant one, and move forward from there.

Check out the ZURB Foundation download page. They included descriptions with the name, and just include a button. http://foundation.zurb.com/sites/download.html/

  • Good points! The nested (OS) choice however is only relevant if the user has decided on a installation method. ZURB’s method also doesn’t apply since we have no downloads there: only a few lines of instructions for every method. Sep 19, 2016 at 9:25

Make the three options more obvious to the user

Have you considered adding a specific screen with the three installation options, each explained in a brief paragraph? This way the user will have a clear idea that three options are available, choose a suitable one, and browse the info (just as you're showing it, without tabs) on the next screen with a "Back" button.

Should be way more transparent!

  • i agree about the transparency, but i think multiple screens are overkill here. this page should be a quick guide with all three parts (requirements, installation, first run) on it, and my idea was to make the middle (installation) part switchable without extracting it to a new screen. maybe something like a combobox or radio buttons within the “installation” header? Jul 24, 2015 at 13:08
  • Oh, sure! Depends on how critical the experience is. Then maybe just three collapsed headers would do the trick? Like those we frequently see at FAQ pages. Jul 27, 2015 at 12:39
  • hmm, so basically an accordion? Jul 27, 2015 at 13:44

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.