When designing dashboards, consider how users will explore data and navigate the information. Organize the content by categories on different pages, and maintain consistent filter strategies across all dashboard stories.
This article includes a sample dashboard page to help you get started. Upload it and explore the different navigation styles. You can customize elements to better suit your needs.
In this article
1. Dashboard Navigation Design
Navigation can take you to other pages in the dashboard, story views, Harmoni projects, the same page with different filters applied, documents, or other websites or online applications.
Consider different navigation strategies when designing your dashboard. Below are some examples, along with the advantages and disadvantages of each approach:
Full Menu Navigation
A user-friendly approach to navigation is to have full menus on each page that allow users to move freely around the dashboard without needing to return to a central landing page.
| PROS | CONS |
|
|
Central Navigation
Using the landing page as a central navigation page that users land on, navigate away from, and then back to, is a simple way to achieve navigation throughout the dashboard solution.
| PROS | CONS |
|
|
Next, Previous and Home
Taking the users through a defined path using Next, Previous and Home buttons on each page is another simple way to navigate through the dashboard.
| PROS | CONS |
|
|
2. Start your Dashboard with a Template
Building a dashboard from an existing page can help you to get started. You can duplicate a dashboard page, download it to share with your team, or upload a shared dashboard page file as a template. Customize the page by replacing charts, updating images, tweaking styles or making other changes to fit your needs.
Sample Dashboard Page
To help you get started, download the sample dashboard page below. This sample page includes some interactive navigation styles, such as hover buttons, website links, image animations, and different dropdown menus. Upload it to your dashboard to try it out and explore by reviewing and copying the HTML code.
Steps to access the Dashboard Sample:
- Download: Click the link below to download the Dashboard Showcase Page.
- Upload: Once downloaded, upload it to your Dashboards area.
- Interact: Explore the dashboard and its navigation.
- Edit: In edit mode, you can review the code and formatting to help you recreate the features.
- After downloading the sample, in the Dashboards area, click upload
- Select the downloaded file and click OK
- Load the sample dashboard and interact with the features
- Enter edit mode to review the code and formatting
Review the Sample Dashboard Page
The examples in the sample dashboard are created using custom HTML code. To see how the navigation elements are structured, select the container and open the HTML editor. You can copy and customize similar elements for your dashboard.
- In edit mode, select the container that contains the navigation elements you want to explore.
- Click the Edit HTML button
to open the HTML editor and view or copy the code.
- In a new dashboard page, create a text container.
- Access the HTML editor and paste in the copied code.
- Make the any required changes to the code.
- Save and test the navigation to ensure it functions as expected.
- In edit mode, select the container and click the Edit HTML icon
- The code editor opens upon clicking, allowing you to review the code
- Select all the code and right-click to copy it
To recreate the element, create a text container and paste the code into the HTML editor.
- Create a text container and click on Edit HTML
- Paste the copied code
- Adjust the code with updated labels and links
- Save
Where to from here?
Learn more about Harmoni:
Download the Dashboard Sample Page