Guidelines
The Sie Menu consists of three essential elements:
- Property selection, visible to clients with a portfolio, allowing them to choose from their properties.
- The main menu, which organizes families, categories, and sections for easy access to different areas of the platform.
- The user account, enabling users to access their profile and personal information.
The Side Menu will consistently overlay the content in scenarios where navigation occurs on tablet or mobile resolutions. This is due to the Side Menu's width in relation to the screen width, which precludes simultaneous coexistence.
Break down
Property selector
If an user has multiple profiles , they can utilize this selector to switch between their profiles. Given that each profile may possess distinct permissions, the primary navigation across properties can vary. Consequently, the navigation categories and sections dynamically adapt based on the specific property the user is currently accessing.
When clicked, the property selector displays a side menu listing the total number of properties the user has a profile for. This list can be filtered by using the search field.
For resolutions equal to or smaller than a tablet, the listing will be displayed as a sublevel over the previous one, while consistently retaining the "back" link to facilitate user navigation. This approach ensures optimal user experience by adapting the content hierarchy based on screen real estate, allowing seamless backward movement if desired.
Main menu
This main menu serves as the platform's navigation backbone, providing a simple and organized way to explore categorized content. Additionally, it acts as the navigation map that users will become familiar with over time.
Family
These are utilized to group similar categories under a unified concept. They do not execute any actions and remain visible solely when the menu is expanded. Moreover, they enhance readability when the navigation menu contains many categories.
Category
As a top-level navigation item, it acts as a container for content sections underneath, and therefore, it does not offer a direct means to navigate to any specific content.
Category
collapsed
When the side menu is collapsed, the category icon remains visible. Users can click on this icon to reveal a floating submenu containing second-level items or sections.
Section
It provides users immediate access to content. Since there are no subsections available, if the content of a section requires more space than a single screen, it should either be divided into tabs within the content area or moved to a new section.
Section
collapsed
When the Side Menu is collapsed, the category label is relocated to the submenu. However, the category icon remains visible, allowing users to click on it and reveal a floating submenu containing second-level items or sections.
User account
Within the user account, users can access and manage various settings related to their profile. These settings are global and independent of any specific property, covering details such as full name, profile picture, password, and security preferences.
Upon clicking the user account, a side menu is presented, showcasing the available settings for this particular profile. In the case of tablet and mobile resolution, this side menu comes up over the previous one together with a back link above. This happen because we don’t have enough space to show both at the same time. It’s pretty important to show a back link in order to keep guiding the users.
Content
Items in the side menu use labels to indicate where they lead. Keep the labels short and clear, allowing users to quickly scan the menu and find what they need.
Do
- Keep labels short and clear, 3 words or less.
Do not
- Use prepositions like “My” or “Your” before labels.