Web UX: what are the practices of content segmentation without sub-menus?

Question

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/

Answer 1

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.

Answer 2

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.

Answer 3

use tab content for secondary level menu items in the service page.

reference: https://material.angular.io/components/tabs/examples