Page MenuHomePhabricator

For smaller screens (SE) ensure that the ability to scroll is visible to users
Closed, ResolvedPublic

Description

Why are we doing this?

On the SE size the fundraising banner is scrollable, but currently there is limited affordance to allow users to know this. As the CTA to donate can be below the fold, it's important that we ensure that scrollability is visible and understandable for users.

Design suggestion

Add a bottom blur similar to on the iOS onboarding screens.

Testing Notes

Note: This can be tested starting in the main Wikipedia app TestFlight 7.4.5 (2781)

  1. Fresh install app on device.
  2. Change device region to Italy or the Netherlands in iOS Settings.
  3. After first launch, background the app, foreground and pull to refresh on Explore feed. Visit an article on EN, NL or IT wiki. Confirm fundraising modal appears.
  4. Confirm you can see a bottom blur on iPhone (screenshots here)
  5. Repeat steps 1-3 on iPad.
  6. Confirm iPad does not show a blur, but shows a more square modal (before it was tall and skinny like iPhone).

Event Timeline

Hi @cmadeo, I have some screenshots on this one for your review - this is trying to improve on the screenshots in https://phabricator.wikimedia.org/T348278#9231617. I added a fade to the bottom of the campaign modal for iPhones only (because landscape of even the largest sizes will likely scroll). The gradient height where the second Italian button began to show a noticeable fade on SE was 40pts for me:

Screenshot 2023-11-01 at 6.00.12 PM (1×625 px, 403 KB)

And here's how it affects EN:

Screenshot 2023-11-01 at 6.00.23 PM (1×625 px, 395 KB)

Of course anything here could affect what is or isn't covered by the gradient - different text, different dynamic font size, etc. So there's no guarantee that this will work in all situations, but it may improve some. Here's what it causes in an iPhone 15 landscape, when it goes over the donate button it's a little gross.

Screenshot 2023-11-01 at 6.08.16 PM (627×1 px, 246 KB)

I also updated the max width of iPad modals to 600pts, because I thought the iPhone-style widths looked weird on iPad (see https://phabricator.wikimedia.org/T348278#9231617 for how it looked before):

Screenshot 2023-11-01 at 6.04.21 PM (800×1 px, 367 KB)

Screenshot 2023-11-01 at 6.04.24 PM (1×747 px, 456 KB)

Screenshot 2023-11-01 at 6.05.12 PM (867×1 px, 419 KB)

Screenshot 2023-11-01 at 6.05.14 PM (1×814 px, 490 KB)

Tsevener updated the task description. (Show Details)
Tsevener updated the task description. (Show Details)
Tsevener updated the task description. (Show Details)
Tsevener updated the task description. (Show Details)
Tsevener updated the task description. (Show Details)
Tsevener removed ABorbaWMF as the assignee of this task.
JTannerWMF claimed this task.