I am designing a multiple tab system to replace an accordion. Each section of the accordion now holds a tab system with lists.

I mocked a solution, but have no contact with final user to run the two options I have in mind:

1) Product description on the left, Link1 (the tabbed system on the right). When user choses Link2 or Link3 from the menu, the chosen list would replace List 1.

2) Make all the Lists static and have the page scroll.

What would create a better UX?

Attached the mock on balsamiq.

enter image description here

  • Related: We've had some other questions about multiple levels of tabs too, like: ux.stackexchange.com/questions/21912/…
    – Ben Brocka
    Oct 17 '12 at 18:43
  • I'm not sure I understand your design... So the top right corner is dynamic but the two lists at the bottom always remain the same? What kind of website is this? Is there really a need to have all four boxes on a single page (especially since the bottom two are below the fold)? Will users really need to see the general info, List 2 - Tab 3, List 4 - Tab 1 and List 5 Tab 6 at the same time? Why do you need to replace the accordion? Would be great if you updated the question with more info. Oct 18 '12 at 6:27


The issue i see with your design is that the link 1 is located too far from the content that it displays. If i understood your design correctly, when you click link 1, only the right part of the screen will re-render to show the content.

I would suggest considering vertical tabs, for Link1, Link2... This way user will easier navigate thru the content.


download bmml source – Wireframes created with Balsamiq Mockups

  • Nice case study for Grouping in UI Design Nov 14 '15 at 12:35

Your Answer

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