The product I'm currently working on has multiple levels of navigation, breadcrumb and action bar content on the screen. This actually reduces the screen real estate of the screen.


download bmml source – Wireframes created with Balsamiq Mockups

How can I reduce this bars with proper UX.

  • 1
    As a user, I really dislike menu items that only exist as icons. – Tim Huynh Dec 1 '15 at 7:52
  • 1
    Too abstract, IMO. How often users will click that buttons? Is top bar space available? Can you merge breadcrumb and actions? Will user accept a menu? What's typical screen-size? Will you have much horizontal space but little vertical space? – Adriano Repetti Dec 1 '15 at 8:29
  • I don't know the details, but just in case: are you REALLY sure this is the correct information architecture you need? It looks a bit awkward to me, but then again, I don't know the details and it might be correct – Devin Dec 5 '15 at 0:55

The hierarchy implied by multiple levels of navigation can be very important - the very top bar is global, and nested within that is contextual navigation (breadcrumbs that are contextual to where you are, and the action bar that is contextual to the screen below). How big are these bars? If they are only 40 - 60 pixels each, that isn't a bad use of screen real-estate (and the breadcrumb section probably doesn't need to be more than 30 pixels if breadcrumbs are the only item in that horizontal section).

  • The bars are each 50px so as per you, they should be okay. What I wonder is, is there any way to merge these contexts, maybe the breadcrumb and the action bar. I know we can't merge the global and the breadcrumbs cus of the context differences. – Imesh Chandrasiri Dec 7 '15 at 11:18

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.