Jan-Eimertenbrink
commented
1 month ago Problem with Sticky Tabs
In general, I don't think making UI elements sticky is the best solution. We may encounter usability and accessibility issues that we don't want to deal with. I found an article on this topic, and I share its opinion. Here are some key excerpts:
Sticky menus are always visually accessible, but in reality are far away for keyboard users navigating with the tab key.
Users who navigate back up the page by keyboard may end up focusing on a link that’s obscured by the sticky menu.
source: https://adamsilver.io/blog/the-problem-with-sticky-menus-and-what-to-do-instead/
Additionally, I don't think we're at the point where making the tabs sticky is necessary. In my opinion, we first need more content in the planned "Development" and "Guidelines" tabs. Some components may not even have as much content as "Button" or "List," so I would wait for now.
Alternative Solutions
The mentioned article also offers suggestions for alternative solutions:
- Keep pages short: Sticky menus are a symptom of long pages so fix the root cause.
- Just let users scroll: It’s a myth that scrolling is a problem. Even on mobile, the top of the page is a flick or 2 away mostly.
- Put relevant links in context: For example, add a subscribe form to the end of a post or add a CTA to a pricing section.
- Use a back-to-top link: They’re relatively unobtrusive (but only do this once you exhaust the other options).
Another possibility would be to place a "Next Page" button or link at the bottom of each page, which would make users aware that there are more pages or tabs available.
Interesting Articles on the Topic
https://uxdesign.cc/things-to-consider-when-designing-sticky-ui-elements-10aef22dac3d https://www.smashingmagazine.com/2023/05/sticky-menus-ux-guidelines/ https://adamsilver.io/blog/the-problem-with-sticky-menus-and-what-to-do-instead/
Nickzlos
Description
We have received multiple feedback indicating that the tabs (especially "Overview" and "Guidelines" on the component pages) are often overlooked. To address this issue with a quick win, we propose making these tabs sticky so they remain visible at the top of the screen while scrolling.
Request
Make the tabs sticky when scrolling, ensuring they stay at the top of the screen. To prevent the tabs from appearing cramped, they should maintain an 8px distance from the top edge of the screen. The sticky tabs should overlay any content that scrolls behind them to maintain.
Expected Outcome
Improved visibility of the tabs, enhancing user navigation and awareness. Enhanced overall user experience by keeping essential navigation elements within easy reach during scrolling.