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:

image.png (703×380 px, 34 KB)

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)

Screenshot 2019-07-04 14.14.15.png (1×752 px, 132 KB)

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

Desktop version of this task is at T225328

Event Timeline

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

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 Web-Team-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.

@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:

IMG_8153.PNG (1×640 px, 73 KB)

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

IMG_8152.PNG (1×640 px, 72 KB)

@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 Web-Team-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).

Looks good to me in production.