1

I have the following scenario in terms of navigation.

It's a dashboard admin layout. Some pages have sub-navigation. The Events menu item in the left-hand menu will render the Event List Page on the main/detail area. The Event List Page allows the user to navigate into an Event Detail Page. From this point, it has a set of navigation items that belong to the event management system itself - the News, Schedule and Maps.

The problem is, I don't know how to keep navigation consistent given the deep level model. The below mockup is the draft that I have so far, but I'm trying to choose a good approach in terms of UX (I'm not the UX guy by the way, I'm the knows nothing about UX programmer guy). It looks like a pretty good ideal but like I said, I'm not the UX guy therefore I'm not sure on it.

Anyways, is it a good approach? Is there a better approach?

mockup

download bmml source – Wireframes created with Balsamiq Mockups

  • I see a lot of white unused space on the left nav. – Fernando Jul 18 '17 at 20:53
  • Isn't this what tree hierarchy was designed for? – DarrylGodden Jul 19 '17 at 7:32
  • @Fernando Yes for while, but it'll bee filled up with lots of top navigation features. – lenilsondc Jul 19 '17 at 11:15
  • @DarrylGodden I think so, but in this case I think it is a tree navigation inside a tree navigation, that's way I've gotten stuck, It looks like I'm adding a page inside another page, if you know what I mean. – lenilsondc Jul 19 '17 at 11:20
  • I see someone has proposed a tree as an answer. – DarrylGodden Jul 19 '17 at 11:22
4

What you're talking about is a classic drill down approach. Given your stated limitations and the dynamic nature of your content, I think it's the best approach.

It's more common than you think. In the world of dashboards and admin tools, we talk about CRUD (create read update delete) apps all the time, but most actually follow the BREAD view pattern (browse read edit add delete) which has exactly what you're showing -- a list page leading to detail views. I've also seen this as CRUDI -- with I for Index. Personally I like the connotation of making BREAD over something CRUDI.

If you need a live example, Wordpress follows this pattern for pages. I generally don't recommend following their UX (which is dated and often clunky), but in this case, it makes sense.

To improve clarity and navigability, it can be worth adding breadcrumbs to the top of the main content area. Even if they only include links already reachable in the sidebar, they are closer to the user's current flow, and they will help you support more deeply-nested views (e.g., the news items in your mockup might have deeper content) if the need arises.

2

First of all, I have to say bravo to your effort and care to solve this problem even though you have no relation to UX.

Moving on, I think indeed that a multi-level "tree" navigation is the way to move forward for what you need.

Essentially you keep all your navigation options in the sidebar and you nest them accordingly under their parent navigation section.

Think of it like listing taxonomy. The simplest way to display that logic would be by like this: enter image description here

A more modern example can be found in this Patternfly article:

enter image description here

Plenty of apps/systems use the tree navigation. Think of any major e-commerce website (e.g Amazon) or even web-mail client (e.g Gmail) so this is a very familiar method of navigation for users.

  • 1
    Well, I used a lot of those admin/dashboard templates as an inspiration, there is plenty of examples out there I just couldn't find my exact scenario, so I started to think it could be a really bad idea if nobody is using it. However, the issue is, I have, in a certain level, a variation of a tree navigation, because the Events List Page yields dynamic content to navigate into, so it's not possible to couple directly in the main tree, it would be a mess. Then creating a new navigation context with a new tree navigation from there wouldn't be a problem, would it? – lenilsondc Jul 19 '17 at 11:33
  • Sorry, help me understand. Why it would be a mess if the nested options in the main tree navigation appear dynamically? This is an expected behaviour from the platform right? In the same way you see people showing up and disappearing at your facebook chat (example) it doesn't boggle your mind where the people went. Adding perhaps an extra page somewhere to see past events might help as well. – Socrates Kolios Jul 19 '17 at 11:36
  • I mean adding all the navigation at the top level (e.g., on the side nav), having the Event 1, Event 2 and Event 3 on the main side nav would be a mess, therefore I believe as it grows in number would damage the navigation. But, adding a listing page in the middle solves this issue, and when the user access one of the events' detail, a new tree is available to navigate. – lenilsondc Jul 19 '17 at 11:46
  • What I had in mind with my suggestion was that Even 1, 2 etc. would be under a main nav options called "Events". That option would expand only when the user selected it (think like a dropdown, only inside the nav). You can have a listing page but you are essentially forcing the user to first go to the Events page and then select the event they want from there. – Socrates Kolios Jul 19 '17 at 11:49
  • Interesting idea, but unfortunately the "dropdown area" is reserved to sub features only, the main pattern has this sort of nav->list/grid->[detail, edit, insert] standard. I got stuck when the model required something like detail->[News, Schedule, Maps]. – lenilsondc Jul 19 '17 at 12:06
2

Including a breadcrumb like: Events / Event 1 at the top or a "Back" button prior to the "Event 1" title or even an "X" close button on the top right corner of "Event 1" should be good solutions to your issue.

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.