enter image description here

After hover

I'm building a dashboard I'm stuck at one level whether keeping the title on the same line as the search bar (as highlighted below)? For example, I select Option1 from the list of drop-down (check the second image) below you will be having corresponding sublevel tabs as shown in the 1st image.

Is it good to place at the same level as per UX and in terms of usability?

  • 1
    Will there be Option 2 to Option N? Need to consider extendability – DPS Sep 20 '17 at 10:31
  • 1
    Can you elaborate further? I didn't get your point – NB4 Sep 20 '17 at 10:40
  • @NB4 - I think what DPS is asking is what if you have more tabs? Right now you have Option 1 > Items but what if there were 5 of them like Option1 > Option2 > Option3 > Option4 > Option5 > Items. You need to think about how you would handle that as well if it is a possibility – Shreyas Tripathy Sep 21 '17 at 6:01
  • @ShreyasTripathy Thanks for explaining it. Well, we will be restricting it only level 1. – NB4 Sep 21 '17 at 6:13

There are two potential approaches, but you have to have a consistent design approach/philosophy if you want to achieve the best user experience.

The search feature, if applied globally to the application, should sit at a level above the tabs so that the user isn't confused about whether the search results relate to the contents in the tabs or not.

However, if the search feature only retrieves results relating to what is in the tabs, then it can also make sense for it to sit in the same level, provided that you can manage the spacing. This can be done by common strategies used in browsers to manage tabs (when you have too many to fit on the screen, especially in devices with narrow widths) or create a more compact search call-to-action (e.g. icon that expands when clicked and collapses when not in use).

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.