I am thinking on the following task:

I have a document with the content for the web-site. Document is structured with Level 1 headers. Under each header there is relevant content. One of the top level headers - "Services". Its' content has three Level 2 headers:

  • "For Startups",
  • "For Enterprise",
  • "For Venture Capital Investors".

Each of these Level 2 headers filled in with text.

The problem:

I want to avoid sub-menus. Only top-level menu that will include Level 1 headers from the content document. At the same time I want to show "For Startups", "For Enterprise", "For Investors" (at least these names) on the top of the "Services" page so the user will embrace that there are three kinds of services without scrolling down the page.

The question:

What are the known practices of achieving sub-menu effect without actually using sub-menus?

Reference web-page: http://gspd.mobi/new/

  • 2
    It would be helpful if you could explain why you're avoiding sub-menus, and it might also help if you explain a little more about the context of your app, and what you've already tried. There are probably infinite ways to expose users to the child categories without submenus, so it would help if we knew more about the constraints you're dealing with. (Tabs, master/detail, a simple list of links to other pages, anchor links to content down the page, filter controls that alter which content shows up on a page, adding the child-level links to the top-level menu e.g. "services for investors"…) – Nate Green Jun 24 '16 at 12:41
  • It would be helpful to see the layout you are considering and go from there. – UX Research May 19 '17 at 19:11

I assume that by submenus you want to be able to view the contents without having to use an additional click to expose the content?

These days there are many different types of design patterns that can be used to create interactions that show/hide content, but it really depends on why you want to do this and what impact it is going to have on the user.

You won't necessarily be able to avoid the user having to scroll down the page because they could be viewing the content on a mobile device without much horizontal space, so the better strategy is to design a flow/layout that shows enough content for the user to decide what they want to do next.

I would look into the layout, interactions and user flow in coming up with a solution.

Menus are effectively a way to organize the content in a way that matches your users' mental models of that content. You haven't explained why you'd like to avoid sub-menus, who your users are, your use cases, or what problem you're solving by segmenting the content in the way that you are, but assuming a whole lot, including that the segmentation you've shared is what you eventually will end up with quite a few options:

  1. you could revert to using good old search. That's the most organic way to let users find content if your metadata and content hierarchy really works
  2. In-page nagivation -- in the form of left-navigation, in-page tabs, or some other mechanism in which the user is presented with navigation options after selecting the top level navigation. This solution is limited by its shallowness: as soon as you try to add sub-items within the second level, you run into IA issues that are harder to resolve than is usually worth.
  3. Reconsider your entire navigation. It seems that you're thinking about it as a very linear/nested navigation, but depending on the scope of your project you may have other options. Check out these examples: http://www.oracle.com/webfolder/ux/middleware/alta/patterns/Navigation.html I'm thinking that the hub-and-spoke might help you achieve the sense of "shallow but flexible" navigation that might address your problem.

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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