Page MenuHomePhabricator

Update the tab headers and search bars to utilize iOS 11 styles
Closed, ResolvedPublic

Assigned To
Authored By
cmadeo
May 25 2018, 9:31 PM
Referenced Files
F24182835: T195630 Search.PNG
Jul 26 2018, 11:59 PM
F24182833: T195630 Explore.PNG
Jul 26 2018, 11:59 PM
F24182836: T195630 Places.PNG
Jul 26 2018, 11:59 PM
F24182832: T195630 History.PNG
Jul 26 2018, 11:59 PM
F24182834: T195630 Saved.PNG
Jul 26 2018, 11:59 PM
F24035638: Saved - Add to reading list empty state.png
Jul 23 2018, 9:17 PM
F24035626: Saved - Reading list empty state.png
Jul 23 2018, 9:17 PM
F23390934: Saved - Add articles to reading list.png
Jul 6 2018, 6:47 PM
Tokens
"Mountain of Wealth" token, awarded by JMinor.

Description

NOTE: Please see Zeplin links for most up-to-date mocks

Why are we doing this?

iOS 11 included an update to typographical styles, with a focus placed on large headers.
Additionally, we currently utilize a mix of old and new search bars throughout the app, we would like to standardize the search bar style.

Designs

iPhone
Update to Saved screens
Reading list empty stateReading list viewAdd to reading list empty stateAdd articles to reading list
Saved - Reading list empty state.png (1×750 px, 87 KB)
Saved - Reading list view.png (1×750 px, 403 KB)
Saved - Add to reading list empty state.png (1×750 px, 68 KB)
Saved - Add articles to reading list.png (1×750 px, 195 KB)
https://zpl.io/V41BxZzhttps://zpl.io/anKJ4OQhttps://zpl.io/a8K04j4https://zpl.io/VOkG8NQ
iPhone scrolling down on detail views
iPhone scrolling behavior on Explore
Top of feedScrolling downScrolling back up
Top of feed B 1.png (1×750 px, 181 KB)
Top of feed B 2.png (1×750 px, 348 KB)
Top of feed B 3.png (667×375 px, 107 KB)
https://zpl.io/aBjY87Khttps://zpl.io/2yJp9Y9https://zpl.io/agn74RA
iPad
Design details
  • All views / tabs except for the Explore tab have a header in SFUI-Bold (24pt) at the top of the view / tab
  • Scrolling down on all tabs except for the Explore tab will shrink (20pt) and center the header
  • Scrolling down on the Explore feed will hide the top header
  • Scrolling back up from lower in the Explore feed will expose a smaller version of the header with an exposed search box and a centered wordmark

Related Objects

Event Timeline

cmadeo triaged this task as Medium priority.
cmadeo created this task.
JMinor raised the priority of this task from Medium to Needs Triage.Jun 18 2018, 6:45 PM
LGoto triaged this task as Medium priority.Jun 28 2018, 7:42 PM
Vvjjkkii renamed this task from Update the tab headers and search bars to utilize iOS 11 styles to 58baaaaaaa.Jul 1 2018, 1:07 AM
Vvjjkkii removed JoeWalsh as the assignee of this task.
Vvjjkkii raised the priority of this task from Medium to High.
Vvjjkkii updated the task description. (Show Details)
Vvjjkkii edited subscribers, added: JoeWalsh; removed: Aklapper.
CommunityTechBot renamed this task from 58baaaaaaa to Update the tab headers and search bars to utilize iOS 11 styles.Jul 1 2018, 7:16 AM
CommunityTechBot assigned this task to JoeWalsh.
CommunityTechBot updated the task description. (Show Details)
CommunityTechBot edited subscribers, added: Aklapper; removed: JoeWalsh.
CommunityTechBot lowered the priority of this task from High to Medium.Jul 3 2018, 2:08 AM
cmadeo added a subscriber: NHarateh_WMF.

@NHarateh_WMF just as an FYI I moved the word mark on the scroll back up on Explore to be left aligned instead of centered.

thanks @cmadeo 🙌 in Reading lists we have two bar buttons ("+" and "Edit"), if we keep the title left aligned, where do you want to put "+" that is now on the left? 🤔

Simulator Screen Shot - iPhone X - 2018-07-06 at 11.43.56.png (2×1 px, 107 KB)

@NHarateh_WMF ooh! Good catch! I'm working on some new mocks now!

@NHarateh_WMF Updated the ticket to include mocks for Reading list views.

This is looking, so, so good! THANK YOU!

Just a few small tweaks and questions:

  • All of the headers feel a touch close to the status bar on non-iPhone X devices. Can we have 30pts of padding between the status bar and the tab headers?
  • On the All articles Saved view there are two HRs missing. There should be one under the view tabs and one below the search box. Normally we won't have an HR above the first list item, but in this case it needs some visual distance from the search box.
  • Will the shrinking of the text on scroll be addressed in a different ticket or is it out of scope for now?
  • Currently the first date header (Today) on the feed feels a bit too close to the search box, would it be possible to increase this distance to 60pts?
  • Can we use the same header treatment as the other tabs when Settings is a tab?

Not related to the ticket title, but related to mocks in this ticket (feel free to tell me this should be moved to somewhere else!):

  • On the 'Add article to reading list' popover, the HR below the 'create a new list' list item is darker than the other HRs. The Create a new list text should also be semi bold and have a '+' in front of it (I reexported from Zeplin so it should be available here: https://zpl.io/anKJ4OQ)
  • On the Reading list view the same feedback as the bullet above

On the All articles Saved view there are two HRs missing. There should be one under the view tabs and one below the search box. Normally we won't have an HR above the first list item, but in this case it needs some visual distance from the search box.

Would it make sense to achieve the visual distance from the search box with more spacing to match the other tabs? I asked about removing the HRs before to match the other tabs and thought you gave the thumbs up but I think I phrased it as "shadow consistency" instead of "HRs" - my bad

Will the shrinking of the text on scroll be addressed in a different ticket or is it out of scope for now?

It might be out of scope - does the height of the bar shrink as well or just the text?

Can we use the same header treatment as the other tabs when Settings is a tab?

This is potentially out of scope because settings is intertwined with the old nav system, but can look at it.

Everything else should be doable

Would it make sense to achieve the visual distance from the search box with more spacing to match the other tabs? I asked about removing the HRs before to match the other tabs and thought you gave the thumbs up but I think I phrased it as "shadow consistency" instead of "HRs" - my bad

Sorry, I misunderstood you. This search bar has a different visual treatment from the other search tabs as it sits below the header and is only visible on the 'All articles' view of the tab. I'd consider it more closely tied to the '+ create new list' button on the 'Reading lists' view than the other tab search bars (eg. it's searching just a subset of the tab and is more of a list item inside of that view).

Also we're showing the top HR on the Reading lists view but not on the All articles view right now.

It might be out of scope - does the height of the bar shrink as well or just the text?

Yes, the bar height should shrink slightly for Saved and for Places list view and History the bar should shrink and the search bar should be hidden. Right now we don't have the search bar available in History though. This isn't high priority, so let me know if this is out of scope and I'll make a design backlog ticket for it.

This is potentially out of scope because settings is intertwined with the old nav system, but can look at it.

This also isn't high priority, so let me know if this is out of scope and I'll make a design backlog ticket for it.

@cmadeo status bar spacing for non-X devices, shrinking header, & settings treatment punted for now - feel free to make separate tickets for those. The remaining fixes should be in the next build 1457 or higher

Looking good, I'll write up and parent child the tickets for status bar spacing, shrinking headers and settings. Thanks @JoeWalsh!

Testing on iPad mini 2 with Retina display and iOS 11, and the app build of this writing Wikipedia 6.0.0 (1460). I took slo-mo videos and screencaps in case they are of help; Explore, Saved, and History appears to work as expected, but Places header doesn't hide or change size when scrolled, and Search header hides instead of shrinking.

The WMVs I took of the scrolling are still very large files so I will start by sharing them with @ABorbaWMF first on my cloud, @JMinor @JoeWalsh and @NHarateh_WMF if you are interested I will invite you to them too.

T195630 Places.PNG (2×1 px, 482 KB)
T195630 Search.PNG (2×1 px, 321 KB)
T195630 Saved.PNG (2×1 px, 230 KB)
T195630 Explore.PNG (2×1 px, 329 KB)
T195630 History.PNG (2×1 px, 171 KB)

LGTM on a few build and also the latest 6.0.0 (1463)

JMinor awarded a token.