Best practices
A service navigation provides consistent, cross-site utilities without overwhelming the UI. It should be used when clear global controls (language, site, support, etc.) improve user orientation or task completion, but skipped when it would duplicate content or clutter a simple interface.
When to use
- To switch between user roles or link back to main sites.
- To include a country or language selector if serving multiple countries or languages.
- To surface “Support” or “Contact” links. Ensuring these links align with user expectations – many expect “Contact” at the end of a menu for example.
When not to use
- Any other space than the absolute top on the site.
- As a replacement for the main navigation.
- As a replacement for bread crumbs.
Anatomy
- Navigation container
- Backdrop
- Link list
- Filter (optional)
- Default link type
- Icon link type (optional)
- Popover link type (optional)
Behaviour
The navigation supports two types of links, of which both can contain an icon. The regular type is a simple link that navigates the user. The popover type triggers a popover, displaying a list of regular links. Links in the popover have an additional “active/selected” state. When a popover is opened, a backdrop is displayed underneath, putting focus on the popover contents.
Link types
Popover link states
Filtering
The popover link list can be filtered. When the popover is displayed, the filter field is focused and a match is done for each character typed, giving users instant feedback in the results. If no match is made (could happen with inexact spelling), a message is displayed.
Responsive behaviour
The service navigation is embedded in the main navigation on the tablet and mobile navigation. This frees up vertical space while keeping the navigation grouped and accessible to users. Please review the Navigation component for more details.
Content guidelines
Using the service navigation for a Country selector
The country selector should be shared element and anchor point between the different sites in the Coloplast eco-system. It should look and act the same across. We are moving away from a tab/continent navigation for choosing country to a more best practice navigation using a filtering input field.
The flow
The user clicks the menu point “United Kingdom” sees a drop down with an input field and the full list of available countries. The user starts typing the name of a country and the list filters down to countries matching the input. The user selects a country and is directly moved to that site. The current country is now displayed in the service menu.
Important considerations
In the list of countries that can be filtered is it important that the user can filter by the english name for the country AND the local name for the country and both fill the right result. Example: User searches “Es” and “Spain” will appear. The user types “De” and Germany appear.
If a country supports multiple languages on their site (eg. Canada with english and french) all options will appear in the list: “Canada - french” AND “Canada - english” → the links will take the user to the chosen site with the chosen language option.
Using the service navigation for a language selector
If a site supports multiple languages a language selector should appear in the service navigation. Example: Canada has two official languages (french & english) and supports both options.
The flow
The user wants to change the language and sees the menu point in the service navigation. When the user clicks the language selector a drop down appears with a list of available languages. The current language is marked with “active state”. When the user clicks the other option the site will reload with the chosen language setting. The service navigation will now display the new language selection.
Important considerations
The list of languages available will be limited. Therefore there will be no input field for filtering - just the list. The languages should be written in the local languages. Eg: “English”, “Español”, “François”.
If only one language option exists the language selector should not be visible in the service navigation.
Using the service navigation for “Contact”
It is encouraged to use the service navigation for “contact” → moving to the contact page for the current site the user is on where they can get information on how to contact Coloplast.
It is not encouraged to link to a general contact page on another site. Eg. do not link from “contact” on Coloplast.dk → Coloplast.com/contact. Contact in the service menu does not tell the user that they will be moved to another site which can make them confused.
Using the service navigation for moving between Consumer site <> Coloplast Professional
It is encouraged to use the service navigation for giving the user an option to move between the consumer site and the HCP site in a market. If the user is on Coloplast.us they should get the option to move to coloplastprofessional.us from the service navigation.
Please use the same structure:
When on the consumer site use: “Visit Coloplast Professional”
When on the professional site use: “Visit Coloplast [market]”
|
✅ Do |
🛑 Don’t |
|---|---|
|
Keep the service navigation simple and focused |
Overfill the service with less important links that takes away focus from the important and fixed elements. |
|
Keep the service navigation as consistent as possible across sites. |
|
|
Use the service navigation for “Country selector”, “language selector”, “Contact” and “Consumer<>Professional” |
Use the service navigation for all sorts of links you might find important on a site - find other navigational options for those use cases if possible. |
Articles
https://www.smashingmagazine.com/2011/11/redesigning-the-country-selector/ - country selector