| HNordeenWMF | |
| Mar 1 2024, 6:41 PM |
| F44558611: oelement.png | |
| Thu, Apr 4, 11:09 PM |
| F42942047: IMG_3552.png | |
| Mar 21 2024, 11:28 AM |
| F42397397: image.png | |
| Mar 5 2024, 3:02 AM |
| F42301156: image.png | |
| Mar 1 2024, 6:41 PM |
Create onboarding flow according to Figma reference
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Open | None | T344258 [Main Epic] 2023-2024 Enhancements to Editing on the iOS app | |||
| Open | None | T355270 [Sub Epic] Image Recommendations - Add an Image on iOS | |||
| Open | None | T355271 [Engineering Epic] iOS - Image Recommendations - Add an Image main flow and actions | |||
| Open | None | T358896 [M] Create onboarding screen for Image Recs |
Hi @Dmantena, the FAQ link in the task description was incorrect (my error), here is the correct one:
https://www.mediawiki.org/wiki/Wikimedia_Apps/iOS_Suggested_edits#Add_an_image
Hi @OTichonova this is ready for design review (Wikipedia Experimental 7.4.9 (94) in TestFlight). It leverages our existing Onboarding component, and the steps to see it when Suggested Edits is turned on in your Explore feed settings are detailed here: https://github.com/wikimedia/wikipedia-ios/pull/4778
Hi @Dmantena, looking good! Couple of things:
| Notifications |
 |
2)The leading/line height of the text seems tall. Based on typography guidelines I think for Title 1 the leading is 34 pts and for Subhead the leading is 20 pts.
3)Looking back at the onboarding screens from the last couple of features I see that the spacing varies between title & text and between text sections. Can the spacing between title & text stay as it is and the space between text sections be 24pts?
The text "Learn about add an image" doesn't sound totally grammatical in English :)
It should probably be rephrased to one of these:
Or maybe something else.
hi @Dmantena, we discussed Amir's feedback this in slack with @Tsevener and @OTichonova.
Please update the link at bottom from Learn about add an image to Learn more about suggested edits
Hi @Dmantena, looking good! Couple of things:
- Can the area with the Button and link be sticky to the bottom and have the scroller show up when people access the page just like we have it for the Notifications onboarding page?
Notifications 2)The leading/line height of the text seems tall. Based on typography guidelines I think for Title 1 the leading is 34 pts and for Subhead the leading is 20 pts.
3)Looking back at the onboarding screens from the last couple of features I see that the spacing varies between title & text and between text sections. Can the spacing between title & text stay as it is and the space between text sections be 24pts?
@OTichonova Updates to the onboarding component for review are up in Experimental build 7.4.11 build 105.
Note that this only updates our new onboarding component itself (which is used for image recs), not all previous non-component based implementations of onboarding views we've done for features in the past. Could you take a look at the image recs feature onboarding view for design feedback purposes? You might have to delete and reinstall the app to see the onboarding again.
The big change is that the button stack now stays pinned to the bottom of the view as you scroll, akin to our previous onboarding views in app and the generally accepted style of these. Also, the inter-item spacing has been updated to 24 pts and the text styles remain Title 1 for the titles and Subheadline for the body copy. Happy to adjust whatever still seems off in this latest revision.
The above work is up in this branch: https://github.com/wikimedia/wikipedia-ios/tree/onboarding-refactor.
Hi @Dmantena, updates are looking good thank you!
2 small things.
Thank you for updating the copy in the link!
Thanks for checking it out.
- For consistency with notifications screen could we add the vertical scroll bar on the side to indicate that there is more content?
Currently it appears we are showing scroll indicators using the system available way for SwiftUI scroll views. If the amount of content is such that iOS decides it will span multiple vertical "screens", it enables the display of the scroll indicators in the scroll view as the user scrolls. We could artificially pad the bottom of the scroll view with more invisible content to force scroll bar visibility, but I don't think this kind of hack would be desirable behavior over the default behavior. Depending on the device size you are using and the content presented in an onboarding view, this may explain why they appear different in that regard.
- The line heigh for the text still seems too big. I think the line height for subhead text is 20 pts and it looks like it is 22 pts at the moment.
RE: the line height, I just want to confirm how things are laid out now so we have a shared understanding so I can precisely change the elements you'd like me to. Each onboarding "cell" has two text view elements, the element's title and the body. The titles are set in the iOS body text style with bold (17 pt) and the body in the subheadline text style (15 pt) per https://www.figma.com/file/YFtut34Eaq3vwS0lJQPbbE/iOS-Watchlist?type=design&node-id=897-17271&mode=design&t=cvQSa48ZLoHzEeXC-0. Between the title and body text view elements there's currently a default system spacing applied, but I've included an example of what it looks like expressly setting that system spacing to 0. We are not currently specifying any custom line spacing for either either of these text views, but instead rely on the text view's default behavior which it bases on the font/text style applied to the view.
Hi @Dmantena,
Thanks!