Spike results:

I made a few basic sample projects exploring different navigation options.

UIKit navigation, UIKit views
This option uses UINavigationControllers to navigate and pushes on UIViewControllers. This is how most of our app is already set up. Out-of-the-box the system supports hiding the navigation bar as you scroll, displaying an inline search bar, and displaying titles in large mode. It also supports a hidesBarsOnTap, in case we ever want to add a focused reading mode, however I found that it does interfere a bit with tapping an item to navigate. That could probably be smoothed over by manually calling setNavigationBarHidden and adding an additional tap gesture that activates on areas that shouldn't navigate you away.

I came across one layout bug where content would occasionally slip beneath a visible navigation bar, when slightly and slowly scrolling at the very top. I was able to catch it and reset it via the scrollViewDidScroll callback.

I also came across buggy navigation bar hiding upon scroll in iOS15. If needed we can disable this for iOS15-only.

SwiftUI navigation, SwiftUI views
This option uses NavigationView to navigate and pushes on SwiftUI views via NavigationLink. This almost worked, except I could not figure out a simple way to hide the navigation bar as you scroll. There are options to communicate up a scroll view offset using a preference key, where we could then try to manually hide it, but that doesn't work for List SwiftUI views. I would rather not go down the path of customizing this behavior too much, because then we will be right back where we started with something that will likely be kinda buggy in certain situations.

UIKit navigation, SwiftUI views
This option uses UINavigationControllers to navigate, and pushes on SwiftUI views embedded in UIHostingControllers. We already do this with some of our views. Interestingly, the embedded SwiftUI views I tested were either Lists, or LazyVStacks / LazyVGrids within ScrollViews. The UIKit navigation bar still showed and hid as expected, so the SwiftUI scrolling behavior automatically communicates that offset information up to it.

SwiftUI navigation, UIKit views
This option uses NavigationView to navigate and pushes on UIKit view controllers embedded via UIViewControllerRepresentables. Navigation feels a bit awkward, because in a didSelectItemAtIndexPath method, I have to set a boolean state flag. From there SwiftUI catches this change and pushes on a new view via NavigationLink's isActive flag. Once we can switch to NavigationStack with iOS16, this may feel less awkward. The same limitation of hiding a navigation bar in the all-SwiftUI demo exists here too.

I suggest we stick with UIKit navigation. This will (mostly) give us default navigation bar hiding, and it will be easier switch to a system navigation bar with our existing setup. Slowly we will be able to rewrite most of the internals with SwiftUI without issue.

For context, I last actively worked on this Tuesday May 28th, apologies for not moving this to the "Waiting" column at that point to reflect the pause. Moving to Waiting now, will pick it up when I'm back from OOO June 24th.

I'm still in the middle of working on a prototype branch for design feedback.

Something else we may be able to look into while we're touching launch flow for system navigation bar: T368448

@cmadeo @AlexHollender-WMF

I deployed a prototype of my work in TestFlight Experimental build 7.5.4 #132. I took some design liberties based on some limitations that I ran up against, so if you could leave feedback on how things feel so far that would be great!

Bugs that can be ignored at this stage:

1. iPad - I haven't swept through it yet, but at the very least I noticed the article table of contents are messed up.
2. Empty States - some of the empty state vertical centering is off due to old navigation bar height calculations. This will be fixed.
3. Loading states - I haven't added in the old blue loading progress bar yet.
4. Theming issues - I've only been testing in light theme but any color issues should not be a problem.

Things I'd like feedback on:

1. How navigation bar hiding upon scroll feels. So far I'm only hiding it in Explore and the Article view so far, but let me know if you feel like it should be in other areas (previously it was also in Notifications Center and Settings). It felt a little slow and clunky by default so I sped the animations up slightly so if feels a little more like the old one. I can't really control exactly when or how it hides anymore - the system listens to the scroll view and decides itself.
2. The segmented control view for "All articles" and "Reading lists" in the Saved tab. The system navigation bar has a feature called "search scopes" that embeds a segmented control. It looked close enough to our old custom tab view, so I'm using it here.
3. The "Sort" button on the Saved tab and Reading List Details view. I can no longer put any UI next to the search bar, so I moved the Sort button up to the top right in the navigation bar.
4. The "Map / List" toggle on Places. For toggling the map and list view, I leaned on the "search scopes" segmented control, since I can no longer put UI next to the search bar.
5. When Settings > Search > Show languages on search is toggled ON: Let me know how you feel Explore search and the Search tab feel with the language selection. I'm leaning on the scope segmented control again. It unfortunately no longer horizontally scrolls, so I'm limiting it to 5 languages. I also added a More icon in the top right for the Search tab, where a user can adjust their languages. This is one area where I think I could add the old horizontally control back in if you feel strongly about it.
6. No more snapping: Article Revision History, Diffs, and Talk Pages are an example of how the new headers act. Note they do not fade out or snap anymore. I could probably add fading if it's important, but I would recommend against trying to put snapping back in - in my experience snapping was a source of difficult bugs for us.

@Tsevener so sorry for my delay!
Feedback in-line below

1. How navigation bar hiding upon scroll feels. So far I'm only hiding it in Explore and the Article view so far, but let me know if you feel like it should be in other areas (previously it was also in Notifications Center and Settings). It felt a little slow and clunky by default so I sped the animations up slightly so if feels a little more like the old one. I can't really control exactly when or how it hides anymore - the system listens to the scroll view and decides itself.

Right now it can feel a little quick, but I think that has more to do with the loss of a slight fade vs. the actual speed. Additionally sometimes the nav gets a little stuck and then 'flies away' and takes a little time to come back. YouTube video: https://youtube.com/shorts/2PbMciG-4Rw?feature=share
On the explore feed there is also a similar glitch where sometimes the nav gets a bit 'sticky' and then is hard to retrieve: https://youtu.be/Bqg1v2W04lc additionally, it'd be good to trim the header space a bit when collapsing the nav so that it's just the nav itself cutting into the content vs. the little bit of white padding below it. This is all really specific, so if the videos and this description feel a bit too far out, let me know and I can hop on a call!

2. The segmented control view for "All articles" and "Reading lists" in the Saved tab. The system navigation bar has a feature called "search scopes" that embeds a segmented control. It looked close enough to our old custom tab view, so I'm using it here.

I like the use of this search scopes and it's nice to have search for reading lists now, too! Would it be possible at all to have a slight fade on the header title as it hides behind the smaller header?

4. The "Sort" button on the Saved tab and Reading List Details view. I can no longer put any UI next to the search bar, so I moved the Sort button up to the top right in the navigation bar.

Is it possible to add the sort capability to the reading list view now?

5. The "Map / List" toggle on Places. For toggling the map and list view, I leaned on the "search scopes" segmented control, since I can no longer put UI next to the search bar.

Looks good

6. When Settings > Search > Show languages on search is toggled ON: Let me know how you feel Explore search and the Search tab feel with the language selection. I'm leaning on the scope segmented control again. It unfortunately no longer horizontally scrolls, so I'm limiting it to 5 languages. I also added a More icon in the top right for the Search tab, where a user can adjust their languages. This is one area where I think I could add the old horizontally control back in if you feel strongly about it.

While I'm guessing it's unlikely that many people have more than 5 languages (could we check with @SNowick_WMF about this?), the current system with the cap at five doesn't feel super intuitive to me.

Perhaps more important though is I think the i18n on the current version feels a bit off to me as using the iOS codes even when your device is set to another language shows the codes and variant names in English

7. No more snapping: Article Revision History, Diffs, and Talk Pages are an example of how the new headers act. Note they do not fade out or snap anymore. I could probably add fading if it's important, but I would recommend against trying to put snapping back in - in my experience snapping was a source of difficult bugs for us.

While I personally feel like the fade is important for the article + explore navigation collapsing, the loss of the snapping and fade here feel more natural (eg. it reads as a part of the page that is being scrolled away).

New experimental build from the prototype branch: TestFlight Experimental 7.6.1 (175).

@HNordeenWMF @scblr ^

Nice updates, @Tsevener — I haven’t looked at iPad yet, but this is going in the right direction. Thanks for the initiative on this! Here’s some feedback in random order:

1) Can we remove this line (cleaner look)

2) I noticed some bugs in dark mode (it switched to dark theme during testing):

Explore	Saved	Settings

3) Agreeing with @cmadeo’s feedback:

Right now it can feel a little quick, but I think that has more to do with the loss of a slight fade vs. the actual speed. Additionally sometimes the nav gets a little stuck and then 'flies away' and takes a little time to come back. YouTube video: https://youtube.com/shorts/2PbMciG-4Rw?feature=share
On the explore feed there is also a similar glitch where sometimes the nav gets a bit 'sticky' and then is hard to retrieve: https://youtu.be/Bqg1v2W04lc additionally, it'd be good to trim the header space a bit when collapsing the nav so that it's just the nav itself cutting into the content vs. the little bit of white padding below it.

https://share.icloud.com/photos/0c9U_YIUGVHuQCmbdJ42bYIpQ

4) As @cmadeo — I like the segmented search as well:

The segmented control view for "All articles" and "Reading lists" in the Saved tab. The system navigation bar has a feature called "search scopes" that embeds a segmented control. It looked close enough to our old custom tab view, so I'm using it here.

I like the use of this search scopes and it's nice to have search for reading lists now, too! Would it be possible at all to have a slight fade on the header title as it hides behind the smaller header?

The search doesn’t seem to work yet for "Reading lists" – right @Tsevener?

https://share.icloud.com/photos/0adjY1cSCwAm-vKJK9kVicNpw

5) Standardize the color for the labels at the top right:

Places	Saved	History

Let’s go with the link color for all.

6) Can we use the same type style for "Sort" (the one from "Edit") ? And give them a bit more in-between? (increasing their tap target size to at least 44×44 pt).

The "Sort" button on the Saved tab and Reading List Details view. I can no longer put any UI next to the search bar, so I moved the Sort button up to the top right in the navigation bar.

7) +1 to @cmadeo’s question re: sorting in reading lists 👇

The "Sort" button on the Saved tab and Reading List Details view. I can no longer put any UI next to the search bar, so I moved the Sort button up to the top right in the navigation bar.

Is it possible to add the sort capability to the reading list view now?

8) It seems like the Places search bar has a different background color than, e.g., "Explore" and "Saved." Can we use the same color (from Explore) for all?

9)Cancel button is not shown anymore within Places, when selecting "List", then tap the search bar, then going to "Map"

10) Update search field placeholder to "Search Wikipedia"

11) I like the segmented search, but agreeing with @cmadeo that the current solution with the cap of five languages doesn’t feel good. Also, that language selection is unavailable when, e.g., coming from the Explore feed is currently suboptimal. Long story short: We’ll need a separate design task to improve language selection and the language cap OR we keep the language scroll as it is currently.

6. When Settings > Search > Show languages on search is toggled ON: Let me know how you feel Explore search and the Search tab feel with the language selection. I'm leaning on the scope segmented control again. It unfortunately no longer horizontally scrolls, so I'm limiting it to 5 languages. I also added a More icon in the top right for the Search tab, where a user can adjust their languages. This is one area where I think I could add the old horizontally control back in if you feel strongly about it.

While I'm guessing it's unlikely that many people have more than 5 languages (could we check with @SNowick_WMF about this?), the current system with the cap at five doesn't feel super intuitive to me.

Perhaps more important though is I think the i18n on the current version feels a bit off to me as using the iOS codes even when your device is set to another language shows the codes and variant names in English

For this reason, I think it'd be preferred to go back to the old scroll.

7. No more snapping: Article Revision History, Diffs, and Talk Pages are an example of how the new headers act. Note they do not fade out or snap anymore. I could probably add fading if it's important, but I would recommend against trying to put snapping back in - in my experience snapping was a source of difficult bugs for us.

While I personally feel like the fade is important for the article + explore navigation collapsing, the loss of the snapping and fade here feel more natural (eg. it reads as a part of the page that is being scrolled away).

@scblr @HNordeenWMF

I'm kicking off a new Experimental build (#195) with a few fixes. The system nav bar shadow is mostly removed, and it isn't as sticky on Explore and Article. It still works best on iPhone light theme. but none of the other bugs pointed out so far jump out to me as not being fixable. I just didn't want to spent too much time fixing at this early stage.

I also added the search bar to the top of Article, and removed the search icon. I'd like to get both of your early thoughts on this approach for Navigation V2 changes.

https://drive.google.com/file/d/1NHC5r3rKtNgWADJ0T7atxMFrMybvU979/view?usp=sharing

Thanks for showing us this so quickly, @Tsevener ! I really love the search bar on top of the article. It feels like less of a transition when searching, compared to the current experience when you click the search icon and the search slides in from the right.

It looks good @Tsevener. We must ensure users don't mistake the visible global search bar at the top for a "find in page" function. I'm thinking of some quick usability tests for this. Also to consider:

• Consistent Wikipedia or W logo across all screens for a more cohesive experience
• Explorations/setting to move the search bar to the bottom of the screen
  

CC @HNordeenWMF

Adding the items from T347999#10354798 to remember:

2) While testing again, I noticed that the two screens are inconsistent:

Log in	Create a new account

Could you update the Create a new account navigation bar to be like the one from Log in?

3) And I don’t think the separator line is needed for both screens:

Answers from Spike:

1. Is it possible to remove the "stickyness" of hidden navigation bars on Explore and Article?
   
   A: Yes, this is improved in the latest.

2. Is it possible to fade out navigation bar as it hides on Explore, Article, and Saved?
   
   A: Unfortunately no, I cannot find an easy way to do this. We do not have easy access to the large navigation bar title for fading out while the user is scrolling.

3. Is it possible to add sort capability to reading lists tab?
   
   A: Yes, this is done in the latest.

4. Can we bring back the old horizontally scrolling languages bar on Search?
   
   A: Yes, this is done in the latest. Note we plan to change the search tab further in Navigation Round 2 changes, so we may need to do a final spike on that to see how SwiftUI handles it. But based on my observations in https://phabricator.wikimedia.org/T363606#9786926, we should be able to embed a SwiftUI view here with round 2 changes. The system navigation bar will still respond to scroll events in SwiftUI and shrink the navigation title as-needed.

Latest Experimental build is 7.6.3 (205). This has iPad article fixes, search tab languages bar fixes, missing toast fixes, and fixed Saved tab sorting and searching.

@scblr @HNordeenWMF

Just a heads up about some limits I'm coming across so far after investigations:

1. I have not been able to find an easy, system way to either move the large navigation bar title up or move the navigation bar buttons down. We are limited to the buttons living up higher on their own line. The buttons will align with the title only once the content is scrolled down a little and the navigation bar switches to a compact state:

❌

❌

✅

2. I have also not been able to find an easy, system way to hide the search bar upon scroll down, then bring it back upon scroll up. What we can do is hide it when the user scrolls down, then it is gone until the user scrolls all the way up. Our options:
   
   Hide search bar on scroll down, reveal again when scrolled to very top: https://drive.google.com/file/d/117ErK43za2h_6Se5eWjCCKQul-HuWotm/view?usp=sharing
   
   Hide entire navigation bar on scroll down, reveal again on scroll up: https://drive.google.com/file/d/1HmsFVl5470r-CglzX8y1oO5EAEZEonoB/view?usp=sharing
   
   Do not hide at all: https://drive.google.com/file/d/1oKMk2VatyRAv5CmVWGLDSkE2rfpx_Lsk/view?usp=sharing

I will switch to doing cleanup in other areas of this task, but wanted to give y'all a heads up in case it changes anything for you.

@Tsevener thanks for these explorations

1. I'm fine to stick with the original design of icons above on their own line, I think the white space will look less large when viewed with the notch / camera cutout.

2. My preference the article view is to match current behavior, which is:

Hide entire navigation bar on scroll down, reveal again on scroll up: https://drive.google.com/file/d/1HmsFVl5470r-CglzX8y1oO5EAEZEonoB/view?usp=sharing

I think we should match the scrolling behavior for other views to whatever we decide for article view.

Thoughts @scblr ?

Thanks @Tsevener for the update. I agree with @HNordeenWMF’s preferences/suggestions! 🎯

@HNordeenWMF @scblr New build incoming, Experimental #207

I have made progress standardizing the navigation bar buttons (close button, back button, profile button) and navigation bar titles. Note that for the root views, I am attempting to use a more compact approach per a suggestion from Robin, where the title is aligned to the left. This does cause some strangeness with iPadOS 18 floating tab bar. For those situations, I may be able to hide the navigation title entirely for Places, Saved, History, and Search, since it feels like duplicated info, being so close to the tab bar title. But I can't remove any extra spacing the floating tab bar causes above the search bars.

There are still some theming bugs and smaller screens where I haven't applied the new standard yet. I also intend to fix a bug where the "Back" label appears when coming from the Saved tab.

This bug is fixed: https://phabricator.wikimedia.org/T363606#10386302
I think all of these bugs are fixed: https://phabricator.wikimedia.org/T363606#10301172

Let me know what you think!

One more - #208 should fix the swipe back gesture to get back to the previous screen.

Wow, this is exciting, @Tsevener – the compact navigation bar with the big titles works well on iPhone! 🤩

This bug is fixed: https://phabricator.wikimedia.org/T363606#10386302
I think all of these bugs are fixed: https://phabricator.wikimedia.org/T363606#10301172

👍👍👍 — I left some more feedback below.

1) This is how I see Places (missing big titles, search bar, filter and tabs)

iPhone 15 Pro with iOS 18.1.1	iPad Mini with iOS 18.2

2)

I may be able to hide the navigation title entirely for Places, Saved, History, and Search since it feels like duplicated info, being so close to the tab bar title. But I can't remove any extra spacing the floating tab bar causes above the search bars.

The additional space looks off even if the titles are removed next to the floating tab bar. And I guess the titles like that won’t work in more character-heavy languages.

If feasible, we show the titles at the original spot on iPad, as it looks more balanced and screen estate isn’t that limited:

Implementation	vs	Suggestion

I still really LOVE the compact iPhone view:

Can we combine the concepts with minimal hacking? 🫶

3) Examples of instances where < Back could indicate the user’s origin:

3.1. < History

3.2. < Saved`

Probably this:

I also intend to fix a bug where the "Back" label appears when coming from the Saved tab.

3.3. < Explore

Featured article

Top read

Places

In the news

On this day

Random article

4) Replace X with Done in Settings. To be consistent, I favor replacing X with Done in all full sheets in the app.

Rules:

1. If there’s no navigation bar title, show Done on the top left side of the screen (see example #1)
2. If there’s a navigation bar title, show Done on the top right side of the screen (see example #2)

1.	2.

5) In the floating tab bar, can we use the magnifying glass icon instead of the Search label?

@scblr New build, Experimental 209

1.

This is how I see Places (missing big titles, search bar, filter and tabs)

This is hopefully fixed now

2.

Modified iPadOS18 to use the large style, everything else still uses compact leading style. Let me know how it feels.

3.

Back buttons now use default system handling (shows a specific title when possible, and "Back" when there's not enough room for the title).

4.

Replace X with Done in Settings. To be consistent, I favor replacing X with Done in all full sheets in the app.

I have pushed a commit replacing the shared X buttons I have so far with "Done". I have not adjusted their alignment yet according to your rule.

5.

In the floating tab bar, can we use the magnifying glass icon instead of the Search label?

TBD - I made progress with the switch, but it broke our programmatic navigation from search results (tapping no longer did anything). For now I reverted it and will revisit if there's time at the end.

Great updates @Tsevener 👏 🥰👏

1.

This is how I see Places (missing big titles, search bar, filter, and tabs)

This is hopefully fixed now

It works well now! 👍

2.

Modified iPadOS18 to use the large style, everything else still uses compact leading style. Let me know how it feels.

Yeah, it feels good in general!

a) Can we only make the search bars sticky when scrolling (not the tabs) on iOS and iPadOS? It feels too heavy (the UI takes away too much space).

iPadOS:

Before	vs	After

iOS:

Before	vs	After

Alternative thought if this is not an option: Should all main view headers be hidden entirely on scroll down (same as Explore currently)?

c) Decrease the tabs spacing in Saved and Places so it feels coherent with the dense spacing in the headers. The space is currently 17px, and I decreased it to 10px

Example from Saved

Before	vs	After

c) Left align the Wikipedia logo on iPadOS:

3.

Back buttons now use default system handling (shows a specific title when possible, and "Back" when there's not enough room for the title).

Perfect – yeah, let’s keep it that way!

4.

Replace X with Done in Settings. To be consistent, I favor replacing X with Done in all full sheets in the app.

I have pushed a commit replacing the shared X buttons I have so far with "Done". I have not adjusted their alignment yet according to your rule.

Ok, thanks — I can create an inventory of all instances later if that’s helpful.

5.

In the floating tab bar, can we use the magnifying glass icon instead of the Search label?

TBD - I made progress with the switch, but it broke our programmatic navigation from search results (tapping no longer did anything). For now, I reverted it and will revisit if there's time at the end.

Ok, that makes sense.

6) Can we use a white background (paper color) in the home bar area on iPadOS? I'm not sure if it’s related to the changes for nav.

7) Labels:

a) Align the Places search label with the other search labels:

b) Update search label copy to use sentence case:

• Explore: Search Wikipedia
• Places Search places
• Saved:
  • Search saved articles
  • Search reading lists
• Search: Search Wikipedia

Hi @scblr:

Here's an audit so far of Done and how they're looking in the latest build. Please let me know if you need any changes. A couple of them are problematic. I haven't addressed your latest feedback yet, I will look at that tomorrow.

1. Year in Review > Donate via Other Payment Method

2. Article > Editor

3. Article > Editor > Insert Media

4. Explore Feed > 3 dot button on a card > Customize Explore Feed

5. Settings > About the app > Libraries Used

6. Profile > Log in

7. Profile > Log in > Create account

8. Profile > Log in > Forgot Password

9. Profile > Log in > Two factor triggered upon login

10. Profile > Log in > Change temp password triggered upon login

11. Article > Article Description Edit

12. Article > Article Description Edit > Learn More

13. Article talk page > New topic button

14. Developer Settings

15. Year in Review > Donate > Donate with Apple Pay

16. Profile

17. Explore card > Save article > Add to Reading list > Pick reading list > Tap toast that says "Article added to {reading list name}":

This one seems like a problem because you can tap "Edit", which then switches to edit mode and shows Cancel:

But maybe it will be fine if we bury Sort and Edit in a More menu.

18. Reading list detail > Edit > Pick articles > Move to... / Add to...

19. Saved > Edit > Choose article > Add to list > Create new list

20. Article Editor > Link button in formatting toolbar > de-focus search bar:

(This is probably a bug on my side, I don't think a user should be able to see this blank screen).

21. Article Editor > put cursor in link > Link button in formatting toolbar:

This is an issue - One "Done" will essentially cancel the edit link operation, the other "Done" will update the link.

22. Article > Page issues:

23. Settings:

24. Settings > My Languages:

25. Settings > My Languages > Add another language:

I still kept some X's, some I tweaked to use an SFSymbol, others I left as-is:

This may not be entirely comprehensive 😅 let me know if there are any that I missed!

@scblr Here's a couple of more screenshots that I haven't changed but wanted to point them out to you. "Cancel" feels similar to "X" / "Done", so if they need a particular treatment let me know.

YiR survey:

Article History > Compare:

New experimental build #211 kicked off.

tonisevener opened https://github.com/wikimedia/wikipedia-ios/pull/5121

New experimental build #212 kicked off. Updated task description with "Known Bugs" and "Design feedback Todo" sections.