Page MenuHomePhabricator

System Nav Bar [Design Review] - Hide floating tabbar upon scroll for iPad
Closed, ResolvedPublic3 Estimated Story PointsFeature

Description

Task:
  • Hide the floating toolbar in Article view after scrolling down
  • Display it again after scroll up (along with other navigation)

Nice to have:

  • Also hide floating tab bar upon scroll down, reappear on scroll up for Explore, Saved, History, and Search.

Feature summary (what you would like to be able to do and where):
-Introduce a setting in the iOS/iPad Wikipedia app that allows users to disable the floating toolbar (the "Explore/Places/Saved/History/Search" pill).

Use case(s) (list the steps that you performed to discover that problem, and describe the actual underlying problem which you want to solve. Do not describe only a solution):
-Users who find the floating toolbar visually distracting or aesthetically displeasing can disable it to restore the app's clean and minimalistic look.
-Helps users who feel the toolbar adds unnecessary padding or breaks the visual design, particularly on larger screens like iPads.
-Maintains consistency for users accustomed to the phone app interface, which doesn’t have this floating toolbar.

Benefits (why should this be implemented?):
-Improves the user experience for those who prefer a less cluttered interface.
-Gives users more control over the app’s appearance and layout.
-Reduces potential frustrations for users who find the floating toolbar disruptive or intrusive.

Engineering notes

https://developer.apple.com/documentation/uikit/uitabbarcontroller/istabbarhidden
Listen to scrolling event for article scroll, should be easy to do with UIKit. Listen to scroll event on article, and if it's been scrolled down set the flag to true, and if it's scrolled back up, set it to false.
As you add more nice to haves it gets more difficult, especially since Search is becoming SwiftUI, so it may be even harder. It's hard to find the content offset and listen to the scroll event with SwiftUI.

Event Timeline

It sounds like the user problem is: the toolbar causing distraction within Article view.
Another potential solution to explore: hiding the toolbar after a user scrolls on article view (and showing it again once they scroll up)

HNordeenWMF renamed this task from Improving the toolbar on the iPad (Add Option to Disable Floating Toolbar) to Improving the toolbar on the iPad (Add Option to Disable Floating Toolbar, or hide on scroll).Jan 15 2025, 10:09 PM
HNordeenWMF renamed this task from Improving the toolbar on the iPad (Add Option to Disable Floating Toolbar, or hide on scroll) to Options for hiding the toolbar on the iPad .Jan 15 2025, 10:14 PM
HNordeenWMF updated the task description. (Show Details)
Tsevener renamed this task from Options for hiding the toolbar on the iPad to [System Nav Bar] Hide floating toolbar upon scroll for iPad.Jan 15 2025, 10:49 PM
Tsevener updated the task description. (Show Details)
Tsevener updated the task description. (Show Details)
Tsevener renamed this task from [System Nav Bar] Hide floating toolbar upon scroll for iPad to System Nav Bar [Design Review] - Hide floating toolbar upon scroll for iPad.Jan 15 2025, 11:18 PM
Tsevener renamed this task from System Nav Bar [Design Review] - Hide floating toolbar upon scroll for iPad to System Nav Bar [Design Review] - Hide floating tabbar upon scroll for iPad.Jan 16 2025, 2:28 PM
HNordeenWMF raised the priority of this task from Low to Medium.Feb 4 2025, 10:24 PM

@HNordeenWMF — here you go (Figma):

Article
image.png (2×1 px, 1 MB)
Article on scroll down
image.png (2×1 px, 1 MB)
Article on scroll up
image.png (2×1 px, 855 KB)
Default stateEntire header disappearsEntire header reappears

@Tsevener, please verify if this behavior is what we discussed — sometimes, design talk is lost in translation! :)

@scblr Thanks! That looks expected to what I thought for Article, note that for 7.7.1 the scroll bar will only appear if it's a part of the A/B test in T383828, otherwise you will just see the magnifying glass icon in the nav bar.

Do you only want this tab-bar-disappearance-upon-scroll only for Article or for other views as well? If it takes custom handling it may become a huge task for every possible view (diff, talk pages, etc.). If we can list out the priority screens to try this on that would be helpful for estimation.

Whoops - ignore my previous comment, the screens are listed right there in the task description. 🤦‍♀️

@scblr Moving this one to design review - Toni noticed this behavior, could you let us know if this is a blocker? Or anything else you notice?
It can be tested on Wikipedia Experimental 7.7.2 (222).
Thanks!

@Mazevedo, thanks for flagging. I think it should be fixed, though!

Thanks @scblr, I'll work on it. Feel free to add any additional feedback that you have

Thanks @Mazevedo – excited that we’re tweaking iPad!

HNordeenWMF lowered the priority of this task from Medium to Low.Apr 16 2025, 11:27 PM

Can be retested on Wikipedia Experimental (with the black icon) 7.7.7 (261)

Now, when the content is short, the tab bar doesn't hide.
When the content is scrollable, it hides when scrolling down and reappears when scrolling up.

SChekfa-WMF subscribed.

Looks good to me, thank you for sharing the recording Marina!

ABorbaWMF subscribed.

Fixed on 7.7.7 (5447)

Tested on iPad on iPadOS 18.5. Tested the scrolling behavior all over, including the case Toni found in search.