11

We're working on a new, responsive version of a large website and need to support the main navigation and sub-navigation that changes based on the department. Below is a mockup of how we are approaching this.

sidebar navigation moves to submenu toggle on mobile

Main navigation goes under the hamburger menu while the local sidebar menu becomes a toggle at the top of the page. Is there a better approach? Are there any major pitfalls to this approach?

We are also trying to decide on the label for the submenu toggle. If, for example, this is for a university website and the department is "Financial Aid," should the label just be "Financial Aid" or "Financial Aid Links" or something more generic like "Additional Navigation"? If it just says "Financial Aid," is it still clear that the toggle is sub-navigation? Thanks for any input.

1

I think your solution is decent, but I'd be wary of hamburger menus and hiding crucial information.

Luke Wroblewski writes about a dramatic decrease of key actions on a website after moving the navigation items from a top bar permanently visible solution to the hamburger menu [1].

It's kind of obvious though, that if something gets "hidden" behind another click less people will see and use it.

A potential solution could be to find out the most important actions (or call to action?) on your site and look to display them permanently.

[1] Obvious Always Wins by Luke Wroblewski - http://www.lukew.com/ff/entry.asp?1945

0

I'll address the second question. In my opinion, it's best to remove any unnecessary text. So "Financial Aid" instead of "Financial Aid Links." As long as the sub-elements are obviously clickable, there's no value in identifying them as links. It would be similar to a submit (also wording I dislike -- who wants to submit?) button with the label "Submit Button"

Also, it's better for smaller displays.

0

I think your layout approach is a common one, therefore usability issues would be minimum. Alternatively, you could nest the sub links inside the off-canvas menu too. This navigation layout gives the user a complete view of the site hierarchy and user can reach their destination with lesser clicks.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

We are also trying to decide on the label for the submenu toggle. If, for example, this is for a university website and the department is "Financial Aid," should the label just be "Financial Aid" or "Financial Aid Links" or something more generic like "Additional Navigation"? If it just says "Financial Aid," is it still clear that the toggle is sub-navigation? Thanks for any input.

As what Aaron said, "Financial Aid" should suffice, his explanation is valid. As for using more generic term like "Additional Navigation", I think that's a bit redundant.

I have came up with some mockup as to why:


mockup

download bmml source

To sum up your concern for submenu links, the links should be succinct yet descriptive of the target page the user is trying to access. If you are still not convince, you could perform some card sorting exercise with your users to determine the appropriate terms to use.

  • Thanks for the insight, and I appreciate the mockups. Will have to give your first suggestion some thought. The site's information architecture is large, so it's a challenge to incorporate the departmental navigation into the main navigation, but certainly worth considering the options there. Also, the problem we were having just calling the additional navigation "Financial Aid" is that that would also be the H1 heading for the main page, resulting a "Financial Aid" heading along with a "Financial Aid" label on the dropdown. – PartialObserver Feb 2 '16 at 21:20
0

Here are three examples based on what you want. I believe these are more user-friendly. However, whenever you are developing new ways, test it and if your target users like it. Then you have solved the problem. I have read that Hamburger menu increases conversion rate as for secondary menu, you can either combine them into the hamburger menu as below :

enter image description here

Or another idea could be as this : enter image description here

If I understood your requirement correctly, I would advice you to have a hover button that serves as secondary menu with sub-menu "animated".

enter image description here

I hope this post has helped you. Thank you

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.