You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This issue documents the current mobile navigation experience on kubernetes.io/docs/* pages and highlights several interaction patterns that create ambiguity and add friction for users (especially compared to the desktop version in some areas). The intent is to capture the observed challenges and inefficiencies on mobile in order to clarify opportunities to improve the usability and navigational efficiency of Search and the Table of Contents (TOC) on small screens.
I have a live PR that systemically resolves all of the issues here through a revamped mobile UX architecture: #54023
TOC hamburger icon ambiguity
As noted in #22021, the TOC trigger on mobile is a hamburger icon, which makes it visually and semantically unclear that it opens the Table of Contents rather than the main navigation. This is further complicated by being a close duplicate of the main menu's own hamburger icon and them both appearing on screen together relatively close by, creating uncertainty about what each one does.
Notice the two similar hamburger icons close together on screen on mobile, different only in size and color
Search and TOC placement
The search bar and TOC hamburger icon are currently positioned awkwardly on mobile, sitting toward the middle-left portion of the screen. This feels visually off-balance and inconsistent with the rest of the mobile layout patterns used across the site.
Notice the whitespace to the right half of the page around the search bar and TOC hamburger compared to the other top level elements and containers that span nearly the full page width (consistent with the rest of the sites layouts)
Navigational friction from scrolling to top
On mobile, users must scroll all the way back to the top of the page each time to perform core navigational actions such as search or opening the TOC, which adds recurring friction during reading. Desktop keeps both persistently available in the fixed sidebar, while mobile does not have the same type of convenience. This highlights a gap where mobile could better match the desktop navigational efficiency and reduce friction for users.
Chevron TOC tap ambiguity
Two issues add friction to the navigation experience by creating a confusing relationship between the tap targets, making the TOC feel error-prone and inconsistent on mobile.
(1) The TOC chevron accordions are small and close to the text links, making it easy for users (especially ones with bigger thumbs) to mis-tap the text link and open a new page when the intent was only to expand the accordion.
(2) The chevron accordion appears visually tied to the text, suggesting they might behave as a single unit and expand or collapse together, but instead the chevron alone expands or collapses sections, and the text links opens a new page and thereafter expands the chevron accordion at that text link's level when you navigate back to the TOC.
Notice roughly similar thumb tap positioning (tapped from the side of the thumb on an angle) in the first press opens a new page and the second and third opens an accordion.
accordion-tap-BEFORE.webm
Abrupt expand/collapse behavior
The TOC accordions expand and collapse instantly, which can feel abrupt and jarring on mobile devices, particularly when the list is long and the viewport shifts dramatically. A smoother, gradual transition animation would improve the overall feel of the interaction.
Notice half the page instantly changes upon expanding or contracting an accordion with a long list
Summary
This issue documents the current mobile navigation experience on
kubernetes.io/docs/*pages and highlights several interaction patterns that create ambiguity and add friction for users (especially compared to the desktop version in some areas). The intent is to capture the observed challenges and inefficiencies on mobile in order to clarify opportunities to improve the usability and navigational efficiency of Search and the Table of Contents (TOC) on small screens.I have a live PR that systemically resolves all of the issues here through a revamped mobile UX architecture: #54023
TOC hamburger icon ambiguity
As noted in #22021, the TOC trigger on mobile is a hamburger icon, which makes it visually and semantically unclear that it opens the Table of Contents rather than the main navigation. This is further complicated by being a close duplicate of the main menu's own hamburger icon and them both appearing on screen together relatively close by, creating uncertainty about what each one does.
Notice the two similar hamburger icons close together on screen on mobile, different only in size and color
Search and TOC placement
The search bar and TOC hamburger icon are currently positioned awkwardly on mobile, sitting toward the middle-left portion of the screen. This feels visually off-balance and inconsistent with the rest of the mobile layout patterns used across the site.
Notice the whitespace to the right half of the page around the search bar and TOC hamburger compared to the other top level elements and containers that span nearly the full page width (consistent with the rest of the sites layouts)
Navigational friction from scrolling to top
On mobile, users must scroll all the way back to the top of the page each time to perform core navigational actions such as search or opening the TOC, which adds recurring friction during reading. Desktop keeps both persistently available in the fixed sidebar, while mobile does not have the same type of convenience. This highlights a gap where mobile could better match the desktop navigational efficiency and reduce friction for users.
Chevron TOC tap ambiguity
Two issues add friction to the navigation experience by creating a confusing relationship between the tap targets, making the TOC feel error-prone and inconsistent on mobile.
(1) The TOC chevron accordions are small and close to the text links, making it easy for users (especially ones with bigger thumbs) to mis-tap the text link and open a new page when the intent was only to expand the accordion.
(2) The chevron accordion appears visually tied to the text, suggesting they might behave as a single unit and expand or collapse together, but instead the chevron alone expands or collapses sections, and the text links opens a new page and thereafter expands the chevron accordion at that text link's level when you navigate back to the TOC.
Notice roughly similar thumb tap positioning (tapped from the side of the thumb on an angle) in the first press opens a new page and the second and third opens an accordion.
accordion-tap-BEFORE.webm
Abrupt expand/collapse behavior
The TOC accordions expand and collapse instantly, which can feel abrupt and jarring on mobile devices, particularly when the list is long and the viewport shifts dramatically. A smoother, gradual transition animation would improve the overall feel of the interaction.
Notice half the page instantly changes upon expanding or contracting an accordion with a long list
accordion-expand-BEFORE.webm