I have case in which user can choose location of service clicking on tabs. enter image description here

In second, step if user choose to use option on right, he can choose managed type of VPS service or unmanaged VPS service. But, simply stacking (nesting) tab menus second under first, is somehow redudant and it doesn't make and distinct.

enter image description here

What would be better and elegant approach to this UI problem?

  • You are just going to get opinions from this community. Why not test this with your users to learn what they think? – SteveD May 5 '16 at 10:03
  • Also Tabs should be used as a grouping mechanism but it sounds like you are trying to use them to reflect choices, i.e. data. This might cause some confusion. – SteveD May 5 '16 at 10:08

I think the tabs aren't the best solution for the second step.
You can try to use a select.
Maybe something like this with a natural language:
select solution


So I think essentially you are trying to provide a UI with multiple steps of selections. I think tabs are fine, but separate each tab/option a little bit to make them more like selectable options; and have separate rows for each selection, with a title (optionally a subtitle) explaining what is the selection about.

Screenshot below is from Apple online store. Not exactly what you need, but I think it has some similarity. If your second selection depends on the first, you may mask the second initially, and perhaps use some scrolling to indicate the transition.

enter image description here

Your Answer

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

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