To compliment the recently released ‘Modern UI’ we have introduced a ‘Vertical Navigation’ bar in this release. Changing to vertical navigation will further improve the look and feel of the learner dashboard, beautifully complimenting the ‘Modern UI’ and adding practical benefits such as improved signposting while keeping the focus on the contents of the page and the actions the learner needs to take.
Not ready to move to the ‘Modern UI’? Worry not, the ‘Vertical Navigation’ can be enabled for the existing dashboard layout too.
What it is
A brand new Vertical Navigation option has been added, improving the look and feel of the LXP. Vertical Navigation menu items such as ‘Dashboard’ and ‘Discover’ have moved to the left-hand side of the page, leaving more room for your content. The logout button has also been shifted left for ease of access. The slick navigation bar can be expanded and minimised to ensure users are clearly signposted while not taking focus away from the content on the page.
Why we have done this
Good navigation is critical to an amazing user experience. It’s great for distinguishing your brand and an organised, transparent structure acts as a roadmap and makes it easy for users to scan and locate exactly what they are looking for in seconds. The new Vertical Navigation is fundamental in encouraging users to pursue learning, become more engaged and have a positive experience. To learn more about the science behind all of our UX decisions, you can learn more in this blog post here.
How it works
‘Vertical Navigation’ can be enabled for either the existing or ‘Modern UI’:
- As an Org Admin, navigate to ‘Admin’ > ‘Settings’ > ‘Services’ > ‘UI/UX’
- Under ‘Advanced UI’ tick ‘Enable Vertical Navigation’
- Once enabled, the Vertical Navigation will display on the front-end
- The ‘Dashboard’, ‘Discover’ and ‘Logout’ menu items have been moved to the left navigation
- When minimised, the navigation bar will display icons for each item
- When expanded, the text labels will display
- You can change the navigation background colour
- Navigate to ‘Settings > ‘Theme’ > ‘Simple Theme Creator’
- Select ‘ Nav Bar Backgroud’
- Select desired colour & save
For further information on how this works, please see this video.