2

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

Improve this question
2
  • Related: We've had some other questions about multiple levels of tabs too, like: ux.stackexchange.com/questions/21912/… Commented Oct 17, 2012 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. Commented Oct 18, 2012 at 6:27

1 Answer 1

Reset to default
1

Brisa,

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
1
  • Nice case study for Grouping in UI Design Commented Nov 14, 2015 at 12:35