Page MenuHomePhabricator

Topics: Empty State
Closed, ResolvedPublic

Assigned To
Authored By
Tsevener
Jun 29 2022, 2:43 PM
Referenced Files
F35631585: wikidtata-scroll.mov
Oct 26 2022, 3:18 PM
F35631580: commons-scroll.mov
Oct 26 2022, 3:18 PM
F35565192: IMG_6132.PNG
Oct 12 2022, 9:11 PM
F35562981: Talk page onboarding sheet.png
Oct 11 2022, 4:20 PM
F35562979: IMG_9307 1.png
Oct 11 2022, 4:20 PM
F35562954: empty state.png
Oct 11 2022, 4:20 PM
F35562953: IMG_9306 2.png
Oct 11 2022, 4:20 PM

Description

This task represents displaying an empty state on the talk page. Please see parent task for requirements.

Event Timeline

LGoto triaged this task as Medium priority.Jul 18 2022, 6:42 PM
LGoto moved this task from Needs Triage to Product Backlog on the Wikipedia-iOS-App-Backlog board.
Tsevener moved this task from Needs Code Review to Waiting for Build on the ios-app-v7.0 board.
Tsevener added a subscriber: Dmantena.

Hi!
Doing design review for the empty states.

  1. For the empty state for an empty talk page:
    • Currently, the CTA button is below the fold in smaller screen sizes. In the new design, I decreased the padding around the text and the image size (updated in the Figma file too) to ensure that the button is visible without scrolling.
in appnew design
IMG_9306 2.png (667×375 px, 59 KB)
empty state.png (667×375 px, 49 KB)
  1. For the onboarding screen when tapping on the '+' for the first time:
    • After tapping on the '+' the topic screen appears first and then a short while after the onboarding screen appears. I was wondering if we could have the onboarding pop-up first?
    • Similarly, on smaller screen sizes the last line that states 'Please be kind, we are all humans here', appears below the fold. In the original designs, the image was much smaller to prevent that (I decreased it, even more, to keep it consistent with the size in the empty state.)
    • In the designs, some of the text is bolded, but it is not bolded in the app. It would be great to bold the appropriate words shown below.
    • The padding around the left/right side of the text is less than it should be, it should be 32pts.
in appdesign
IMG_9307 1.png (667×375 px, 45 KB)
Talk page onboarding sheet.png (667×375 px, 31 KB)

Thanks!

Hi!
Doing design review for the empty states.

@OTichonova Thanks for reviewing this work! I'm happy to make these design changes. Just wanted to point something out though - while these updates might make this content appear in a more ideal presentation for this particular device size, there is still possible presentational imperfection inherent in the variety of devices the user may be using or settings they may have enabled.

If the user's using a language that is dramatically more terse or verbose, a dynamic text size that is not at default, a device size that isn't this one in the screenshots, viewing an article with a longer title in the header, or any combination of these, we're back in a situation where the actual presentation is not the desired as designed presentation and may require scrolling (or present excessive whitespace) to view the call to action or interesting text.

I don't immediately have sales figures to reach for, but my previous understanding was that these smaller screen devices are no longer as popular/the norm amongst iPhone users. My recommendation for our future work is to base our ideal presentations on the by majority most popular screen device size.

Hi @Dmantena,
I hear you, there are many reasons why the CTA might fall below the fold. I would still appreciate it if the changes were made as the 375x667 is a well-known size and designing for smaller screens helps to ensure that the designs are visible on all the following screen sizes.
Going back to things being hidden below the fold - I was speaking with Carolyn and she mentioned that in the past they have added a blur & a flash of a scroller when there was information hidden below the fold. Examples are shown below.
I was wondering if it would be possible to adjust the size of the text/illustration as mentioned in the above comment and add the UI from the examples to help indicate to people (eg. using dynamic type) that there is information below the fold?

Eg. of fading text & flash of scroller
IMG_6132.PNG (2×1 px, 375 KB)

Video of the page found here

On Wikidata and Commons, the scroll view doesn't scroll properly to hide the header and allow the user to tap the button. It doesn't seem to occur in Wikipedia projects.

Mazevedo moved this task from Doing to Needs Code Review on the ios-app-v7.0 board.
ABorbaWMF subscribed.

Looks good to me on 7.0.0 (2005)

JMinor claimed this task.