Page MenuHomePhabricator

Homepage: link from Special:Contributions (mobile)
Closed, ResolvedPublic

Description

In most of our mobile homepage user tests and in some of our desktop homepage user tests, newcomers are attracted to the "Contributions" link as a place to get started with editing. They think, "I want to make a contribution. Maybe I can do it here." When they get there on mobile, they see blank contributions pages:

In this task, we want to add something to Special:Contributions when the user has zero contributions encouraging them to visit their homepage to get started.


The design for the mobile version of the empty state of the Special:Contributions page follows the exact same layout and styling of the current empty state of the mobile User page.

Specifications

  • Container:
    • background-color: colorGray14 / #eaecf0
    • border-radius: 2px
  • User contributions unactivated state text:
    • "You have not yet made any contributions."
    • Bold
    • 1em / 16px
    • colorGray2 / #222
  • Homepage introduction text:
    • "Visit your homepage to get started with editing!"
    • There should be no link to the word "homepage" in the text.
    • Regular
    • 1em / 16px
    • colorGray7 / #72777d
  • Button link to the homepage:
    • "Go to your homepage"
    • ButtonWidget (primary, progressive)

Mockups with more detailed design specs can be found in Zeplin.

Desktop version of this task is at T225328

Event Timeline

Cntlsn created this task.Jul 9 2019, 10:38 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 9 2019, 10:38 AM
Catrope updated the task description. (Show Details)Jul 11 2019, 1:05 AM

Change 521357 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] Add link to Special:Homepage on Special:Contributions

https://gerrit.wikimedia.org/r/521357

nray moved this task from Needs triage to Triaged on the Mobile board.Jul 15 2019, 7:58 PM

@Cntlsn @MMiller_WMF this will be in beta shortly.

Change 521357 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Add link to Special:Homepage on Special:Contributions

https://gerrit.wikimedia.org/r/521357

@kostajh thanks, it works good! I only have a little UI note, can we wrap

<div id="mw-content-text">...</div>

into

<div id="bodyContent" class="content">...</div>

just like in User:[username]? This way it should gain a bit of margin on the sides.

Also, the container of the text-box would better have <div class="cta-holder"> just like in User:[username], but that class seems to have no effect. Are we not loading it?

I just tried this out in beta, and it looks good to me. My only question is for @Cntlsn -- do you think that the word "homepage" should be a link, in addition to having the button? Is there a reason to have two links to the same place?

@kostajh thanks, it works good! I only have a little UI note, can we wrap

<div id="mw-content-text">...</div>

into

<div id="bodyContent" class="content">...</div>

just like in User:[username]? This way it should gain a bit of margin on the sides.

I agree that this is inconsistent, and Special:homepage also has a bodyContent div, but none of the mobile-specific special pages (Contributions, Watchlist, EditWatchlist, Diff, History) do. I think that's more likely to be a bug than a feature, but fixing it would be a structural change to the mobile site that would affect much more than just the homepage or the contributions page, so I think that's best left to the Readers-Web-Backlog team.

Also, the container of the text-box would better have <div class="cta-holder"> just like in User:[username], but that class seems to have no effect. Are we not loading it?

It looks like the cta-holder class and its styling are specific to the mobile userpage. I found these styles in a file called userpage.less, so it makes sense that that file is not loaded on the contributions page. I also don't see what that class would get us, other than slightly different padding and a border-radius (which we can add separately if you like). Instead, I'm using the warningbox class, which seems appropriate for the context.

@Catrope -- similarly to T225328, we want to remove the link in the text, leaving only the link on the button. Moving back to In Progress and changing the task description now.

MMiller_WMF updated the task description. (Show Details)Jul 18 2019, 9:37 PM

@Catrope -- similarly to T225328, we want to remove the link in the text, leaving only the link on the button. Moving back to In Progress and changing the task description now.

This was done in this patch and is ready for QA.

Note: 'homepage' is not capitalized e.g. 'Homepage'?

Users with Homepage enabled by default would see:

Users who not get Homepage by default (or not enabled it, or disabled it) would see the old no-contributions page:

@Cntlsn -- could you please prioritize the design review on this so that we can keep the feature rolling with this week's train?

@Etonkovidova -- that's correct. The name of the feature, "homepage", is not capitalized.

@MMiller_WMF -- per @Catrope's comment above T227575#5347835, the UI fixes I proposed won't go through. I will move the task to the "Needs PM Review" column, but how do we make sure this would make it to the Readers-Web-Backlog? Shall we create a separate task?

@Etonkovidova -- have you validated that EventLogging to homepagevisit works correctly for this and that the right thing goes into the referer_route field?

@Etonkovidova -- have you validated that EventLogging to homepagevisit works correctly for this and that the right thing goes into the referer_route field?

Yes, betalabs eventlogging HomepageVisit table records event_referer_route='specialcontributions and event_is_mobile=1 (needs to be checked in production too).

MMiller_WMF closed this task as Resolved.Jul 27 2019, 1:57 AM

Looks good to me in production.