replace ghost buttons with sticky navbar at home
This MR removes ghost-button-navbar and adds sticky navbar as a recommendation/suggestion
Closes #13 (closed)
A sticky navbar not only aligns with modern UX principles but also enhances accessibility, usability, and user engagement. It provides a more consistent, intuitive, and visually clear experience making it a superior choice compared to ghost buttons for navigation.
Correct Use of UI Elements
In UI/UX design, buttons are typically used for actions like submitting forms, signing up, or initiating a process, because they imply that something will happen when clicked. Links, on the other hand, are traditionally used for navigation—directing users to different sections or pages. A sticky navbar uses links appropriately for navigation, aligning with user expectations and making the interface more intuitive.
Ghost buttons, despite being visually styled as buttons, are being used as navigational elements in your current setup. This can create cognitive dissonance for users, as buttons generally suggest an action rather than a simple navigation. This can lead to confusion and degrade the overall user experience. By replacing ghost buttons with a sticky navbar, you respect the conventional roles of buttons and links, making the interface more logical and user-friendly.
Consistency and Accessibility
A sticky navbar provides consistent access to navigation links no matter where the user is on the page. This is crucial for user experience because it ensures that users can easily navigate to other sections without needing to scroll back to the top or reach the bottom.
With ghost buttons placed only at the top and bottom, users have to scroll through the entire content to find the navigation options again. This can be frustrating and may cause users to leave the site if they can't find what they need quickly.
User Engagement and Reduced Friction
By having the navigation always available, users are more likely to explore other sections of the website, leading to better engagement. The reduced friction in navigation makes for a smoother, more intuitive experience.
The need to scroll to the top or bottom to navigate can create unnecessary friction, disrupting the user journey and potentially leading to lower engagement.
Implementation in detail
I had to adapt the layouts, to match with the navbar. I removed some unused ones (home layout and navbar_side component)
There are two layouts now:
default Is the default layout for everywhere. It has a container element, and a nested main
no_sidebar: Could be renamed to docs, as it is only used for the docs. It has no container, only a main component.
The footer takes the full width and contains the sponsor logos that lived in the sidebar before.
The docs now look also good on small screens: The navigation on the left is hidden.
Screenshots
