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.

New experimental build #214 kicked off @scblr. These are the design updates:

1. All root view condensed headers auto-hide upon scroll now.
2. Saved tab More button added
3. Fixed bottom gray area on iPad
4. Restored Article magnifying glass search button

You can see my list of remaining things to do in the description. I may have missed documenting some design feedback asks so feel free to add to the list if I missed anything.

A couple of things I'm blocked on:

Finalize Done button styles / behavior on all screens (see https://phabricator.wikimedia.org/T363606#10417646)

I need to know how you'd like me to change each of those screenshots - some of them are definitely buggy (double-done button, etc).

Left align iPad Wikipedia logo on Explore https://phabricator.wikimedia.org/T363606#10409759

I'm not having luck with left aligning the image unfortunately, the system nav bar reserves that space for only large title text labels. We may be able to get close if I just used the system large title label with a particular font (see screenshot example here with Georgia). Let me know what you think and if you have a particular font file handy.

In T363606#10417646, @Tsevener wrote:

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

ℹ️ Use Cancel instead of Done — otherwise, keep it as is.

2. Article > Editor

ℹ️ Use Cancel instead of Done — otherwise, keep it as is.

3. Article > Editor > Insert Media

ℹ️ Use Cancel instead of Done — otherwise, keep it as is.

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

⬅️ Move Done to the top left side

5. Settings > About the app > Libraries Used

⬅️ Move Done to the top left side

6. Profile > Log in

ℹ️ Use Cancel instead of Done — otherwise, keep it as is.

7. Profile > Log in > Create account

ℹ️ Use Cancel instead of Done — otherwise, keep it as is.

8. Profile > Log in > Forgot Password

ℹ️ Use Cancel instead of Done — otherwise, keep it as is.

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

ℹ️ Use Cancel instead of Done — otherwise, keep it as is.

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

ℹ️ Use Cancel instead of Done — otherwise, keep it as is.

11. Article > Article Description Edit

ℹ️ Use Cancel instead of Done — move it to the top left side

12. Article > Article Description Edit > Learn More

✅ Keep it as is

13. Article talk page > New topic button

ℹ️ Use Cancel instead of Done — otherwise, keep it as is.

14. Developer Settings

⬅️ Move Done to the top left side

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

ℹ️ Use Cancel instead of Done and move it to the top left side

16. Profile

⬅️ Move Done to the top left side

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

ℹ️ Use Cancel instead of Done — otherwise, keep it as is

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.

ℹ️ Hide all buttons except the top right Cancel button in edit mode. And yeah, you’re right; we discussed that new pattern here.

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

ℹ️ Use Cancel instead of Done and move it to the top left side

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

ℹ️ Use Cancel instead of Done and move it to the top left side

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).

ℹ️ Use Cancel instead of Done and move it to the top left side

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.

ℹ️ Change top left Done to Cancel and top right Done to Submit

22. Article > Page issues:

✅ Keep it as is

23. Settings:

✅ Keep it as is

24. Settings > My Languages:

✅ Keep it as is

25. Settings > My Languages > Add another language:

✅ Keep it as is

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

🤔 Can you use the Done label instead of X at the top left?

🤔 This one looks particularly off. Is there any chance of getting a Done label in this position? 👇

🤔 Can you use the Cancel label instead of X at the top right?

🤔 Can you use the Done label instead of X at the top right?

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

It was! Thanks for all your work listing this.

In T363606#10417662, @Tsevener wrote:

@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:

✅ Keep it as is (with Cancel)

Article History > Compare:

✅ Keep it as is (with Cancel)

@Tsevener

One of the things to note in the future:

• Whenever users are in edit flow, make changes or need to take an action on the current screen -- we should use Cancel instead of Done. In these cases, the top right action should then be reserved for things like Submit, Update, Continue, Next
• If the view is for information purposes only, we should use the Done label

I tried to apply these rules to the list of Done buttons you shared. Let me know what u think.

Great updates @Tsevener 👏👏👏

All root view condensed headers auto-hide upon scroll now.

I feel like this was the correct route to go!

Saved tab More button added

I love it. Also, the edit interaction with Cancel works well.

Fixed bottom gray area on iPad

👍👍👍

Restored Article magnifying glass search button

👍👍👍

Some more feedback for both iOS and iPadOS 👇

1) [iPadOS] Logo alignmnent

Left align iPad Wikipedia logo on Explore https://phabricator.wikimedia.org/T363606#10409759

I'm not having luck with left aligning the image unfortunately, the system nav bar reserves that space for only large title text labels. We may be able to get close if I just used the system large title label with a particular font (see screenshot example here with Georgia). Let me know what you think and if you have a particular font file handy.

Using just a typeface instead of a logo is not an option. In the worst case, we will leave it center-aligned on the iPad for now 🥺.

2) [iOS] Can the top UI be shown on any scroll-up interaction? Currently, it only shows up with a fast scroll-up gesture. Example video from the Instagram app.

3) [iOS] Can you slow the animation speed for the header slide-up? The animation, e.g., Explore, feels more natural in the current production (compared to build #214). It’s too fast currently. You mentioned that the animation setting will affect other areas (such as the search active search bar animation), but that’s worth trying. It may be good to know the current ms setting to tweak it together.

4) [iOS] If the list content is short (as in this video example from the Search tab), the header area should likely stay fixed and not disappear. Likely, only the list content should be pushed up (not the header).

5) [iPadOS] Similar observations on iPad, see this video.

6) [iOS] FYI, this still exists and is not listed in the task’s description yet.

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

7) [iPadOS] Scroll up behavior and Wikipedia logo doesn’t feel too smooth yet (video). E.g. when users scroll and hold, the logo persists and overlaps with the content.

7) [iPadOS] I will provide more precise designs next week, but we should add a white background to the entire width of the floating tab bar at the top to avoid overlapping the content weirdly. Could you apply the same background as the status bar on scroll? (transparent white). Here’s an example video from Books for reference. They also applied a bit of top and bottom padding to the floating tab bar (likely 8px top and bottom)

Latest Experimental build is 7.6.3 (215).

Final PR for code review is here: https://github.com/wikimedia/wikipedia-ios/pull/5121

All remaining bugs / design review feedback has been split off into other tasks and documented in this task description. @scblr If there are any I missed, feel free to make a new task, thanks!

@scblr sorry, I didn't see your most recent feedback.

Using just a typeface instead of a logo is not an option. In the worst case, we will leave it center-aligned on the iPad for now 🥺.

I realize Georgia is not a good option, but could we try using the same font as the logo? I'll need a font file in that case. If we do that, it might also fix your Scroll up behavior and Wikipedia logo doesn’t feel too smooth yet bug as well. T383471

Can the top UI be shown on any scroll-up interaction? Currently, it only shows up with a fast scroll-up gesture. Example video from the Instagram app.

I might be able to do some extra handling to trigger the show animation upon any scroll up. I can't do the slow reveal like Instagram (and our current custom navigation bar). T383468

If the list content is short (as in this video example from the Search tab), the header area should likely stay fixed and not disappear. Likely, only the list content should be pushed up (not the header).

Yeah good callout, I think we might be able to disable navigation bar hiding if the scroll content isn't very large. T383469

Decrease the tabs spacing in Saved and Places so it feels coherent with the dense spacing in the headers.

Unfortunately I can't tweak the spacing in that area of the custom navigation bar, I don't have access to adjustments like that :/

I will provide more precise designs next week, but we should add a white background to the entire width of the floating tab bar at the top to avoid overlapping the content weirdly.

Sounds good T383470

Added these as separate tasks so that code review can commence.

@Tsevener

In T363606#10450542, @Tsevener wrote:

@scblr sorry, I didn't see your most recent feedback.

Using just a typeface instead of a logo is not an option. In the worst case, we will leave it center-aligned on the iPad for now 🥺.

I realize Georgia is not a good option, but could we try using the same font as the logo? I'll need a font file in that case. If we do that, it might also fix your Scroll up behavior and Wikipedia logo doesn’t feel too smooth yet bug as well. T383471

Ok! I created a font file with the Wikipedia logo:

https://www.dropbox.com/scl/fo/1lpyo6vptwvshapfho585/ACuohamcS7ZJqiCRFyQyK8I?rlkey=vfhuwz42njqos0xe6vhtqahq9&dl=0

I'm unsure what format you need, so I added eot, svg, ttf, woff to the folder.

Once added to the code library, you could copy and paste the logo from the demo.html (also in the folder).

Let me know if it works to left-align it!

Thanks

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

@ABorbaWMF You can test this one in the latest 7.7.0 build.

We did rounds of design review during development. @scblr will review this task as well and document any design review feedback I may have missed in a separate Phab task. Moving to QA!

@Tsevener thanks. I just reviewed this, and it looks like you captured them all.

Looks good on 7.7.0 (4838)

iPhone
✅ Article
✅Article > Article History view
✅Article > Article History > Revision Diff view
✅ Explore tab
✅ Explore > On this day list view (starting at bottom for me in 7.7.0 and 7.6.4, could be related to T284839)
✅ Editor > Insert Link and Edit Link flows
✅ Editor > Insert Media flow
✅ Places tab
✅ Saved Articles tab
✅ Saved tab > Reading list detail view
✅ Search tab
✅ Talk pages
✅ Notifications

iPad
✅ Article
✅ Article > Article History view
✅ Article > Article History > Revision Diff view
✅ Explore tab
✅ Explore > On this day list view (starting at bottom for me in 7.7.0 and 7.6.4, could be related to T284839)
✅Editor > Insert Link and Edit Link flows
✅ Editor > Insert Media flow
✅ Places tab
✅Saved Articles tab
✅Saved tab > Reading list detail view
✅ Search tab
✅ Talk pages
✅ Notifications