SmartHub - How To Segment the Navigation Menu

Introduction

This article explains how to add segmentation to the navigation menu of a programme. Detailed examples of how segmentation can be used are included, complete with some use cases. An overview is provided which explains why segmentation is super useful when designing the menu navigation. 

Overview

Segmentation is an important part of our platform offering. It helps make the platform fresh, relevant and engaging by delivering the right content to the right people. This is especially the case for multi-location clients. We offer segmentation through segmented tiles, pages and also layouts. We can reflect this segmented content in the main menu items shown in the top navigation bar. This article is to explain how we do that in more detail.

Comprehensive and Relevant Menu

Why is it important to have a comprehensive and relevant menu?

The navigation menu reflects the underlying structure of the program creating multiple ways in which users can explore and make sense of the content within their platform.

• A navigation menu is visible and reachable from any page making it the most clicked on element alongside the search bar. It is the main way people navigate around the platform.

• A well-structured navigation menu is a core accessibility requirement. This is especially true for users reliant on screen-readers to explore websites.

A Three-Step Guide to Utilizing Segmentation in the Menu

Step 1: Accessing Segment Manager 

Set up your segmented pages, blogs and SmartHub layouts as normal using Segment Manager.

or from the segmentation option on the page/hub itself:

Step 2. Organizing Content

Go to the Menu editor and organize your content into a meaningful navigation.

• The menu can be created by dragging items from the right to the menu structure on the left. The menu structure on the left is then displayed in the same structure live on the platform. 
• Custom Items and Custom Menus are used to help organize the navigation of the menu, they are used to categorize pages and layouts and as such cannot be segmented themselves. 
• You can drag and drop pages and layouts to the menu structure. The menu will then react to any segmentation you've added to pages and hubs by showing or hiding the links to people that fall into or out of those segments.

Here's more detail on the visibility rules in the menu editor:

• Item/ Menu: Custom items and menus are used to organise menus in a more meaningful way, but they dont reflect any segmentation done to the pages / hubs. These are used more as organizing folders and are always seen by everyone. 
• SmartHub: Any SmartHub layouts that are segmented and added to the menu will reflect the visibility of the link based on the segmentation that the hub carries. 
• Smarthub Pages: Any SmartHub page that is segmented and added to the menu will reflect the visibility of the link based on the segmentation that the page carries. 

As an example, If you have a main Benefits custom menu visible to all. Nested within it you might have a segmented hub for UK employees and one for US employees. Add both of these hubs under the Benefits custom menu. Then if a US employee logs in they will only see the menu item for US benefits and if a UK person logs in they will only see the menu item for UK benefits.

Step 3. Testing 

That's all. The last step is to test the setup.

Results

Here are examples of how different menu structures are seen by the audience:

Example 1: 

Here we have a Custom Menu with one Menu Item nested within. The menu item leads to a page that is segmented with the rule: 

• First name is Sevil. 

As a result, everybody except Sevil sees the Segmentation Test label in the mega menu with nothing underneath.

Sevil on the other hand, sees Segmentation Test > Segmentation test - Sevi.

Example 2: 

Similar to the above, in this example, we have a Custom Menu called Segmentation test visible to everyone. Nested within it though we have a page segmented with rule:

• First name is Sevil 
• and another page with First name is Norberto. 

As a result, Sevil sees Segmentation Test > Segmentation test - Sevi and Norbie sees Segmentation Test > Segmentation test - Norbie. 

Everyone else sees only the custom menu Segmentation Test

Example 3: 

In this example, we have used directly the segmented page (First name is Sevil) and added it to the mega menu. Therefore, others sees nothing and Sevil sees Segmentation Test. 

Note: Adding segmented pages works the same in both a mega menu and drop-down format.

Example 4: 

Final example is when a segmented page (rule: First name is Sevil) is added directly to the navigation bar. In this case, everyone except Sevil sees nothing on the nav bar, whereas Sevil sees Segmentation Test as a top-level link. 

Example Use Cases

The right time to use segmentation will depend on the main goals and aims of the client platform and what solutions they have. Some examples of when menu segmentation would be especially relevant include:

• Global platforms: segmenting benefit information so that it is relevant to each country
• R&R education: managers will see different education to employees as there role is somewhat different, however both pages/ layouts can appear under 'How does it work?' etc 
• Location differences: often content will be relevant to a specific workplace eg at RG offices we could have a Custom Menu of 'Safety' and underneath information relating to all of our locations but due to the segmentation employees would only see the link relevant to their office.