Page MenuHomePhabricator

Homepage: add user email and email preferences link to "unconfirmed email state" of start module
Open, Needs TriagePublic

Description

As part of mobile homepage design we noticed how harder it is to reach preferences from the Homepage, when compared with desktop view.

It would be nice to bring back the link to email preferences to the unconfirmed email state of the start module, so that we can offer users a shortcut to eventually change their email to get a new confirmation link.
For consistency we're adding the user email and email preferences link to both the desktop and mobile versions of the start module.

Specifications:

  • Intro copy for the "Unconfirmed email state" of the module stays the same: "Check your email for a confirmation link, or send a new link."
  • In a new line a sentence introduces the user email address and displays a link to change it: "Current email address (change):". The word "change" links to the "Email options" header in Special:Preferences
  • In a new line the user email address will be displayed in bold
  • When the email address is longer than the available space, it will get truncated and an ellipsis will be displayed
    • Desktop: hovering on the truncated email address will display a tooltip displaying the full email address
    • Mobile: no special behavior, there is enough space to show a pretty long email address, eventually the user could always tap on change to view their email address in Special:ChangeEmail

Desktop mockup:

Mobile mockup:

Event Timeline

Cntlsn created this task.May 14 2019, 10:33 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 14 2019, 10:33 AM
Cntlsn renamed this task from Homepage mobile: bring back email preferences link in unconfirmed email state of start module to Homepage: bring back email preferences link in unconfirmed email state of mobile start module.May 16 2019, 1:10 PM
Cntlsn updated the task description. (Show Details)
Cntlsn added subscribers: JTannerWMF, Catrope, SBisson and 6 others.
Cntlsn added a comment.EditedMay 16 2019, 1:14 PM

Here is the up-to-date mockup:

@MMiller_WMF please review

we decided to add the link in both mobile and desktop versions of start module.
if the measurements show that users are not clicking it we will remove it.

Cntlsn renamed this task from Homepage: bring back email preferences link in unconfirmed email state of mobile start module to Homepage: add user email and email preferences link to "unconfirmed email state" of start module.May 27 2019, 1:41 PM
Cntlsn removed a project: Mobile.
Cntlsn updated the task description. (Show Details)

@MMiller_WMF -- while updating the mockup for the desktop version of the start module I noticed the wording and layout could have been clearer. I have slightly changed the copy and layout adding a new paragraph between the intro sentence and the button (please check both mockups below and updated specs in the task description -- if OK I'll update the invision and zeplin projects and we can move from the column).

Mobile version

Desktop version

Cntlsn reassigned this task from Cntlsn to MMiller_WMF.May 27 2019, 1:48 PM

@Cntlsn -- what if we also removed the text that says "Current email address"? I think if we display an address with the link "change", users will know that it's their current address. How would that look?

Cntlsn added a comment.Jun 4 2019, 2:45 PM

@MMiller_WMF
I think that adding the "Current email address" text would make it more clear, but this version should work fine as well

@Cntlsn -- thanks. I like the newer design better because it has fewer words. I have two final thoughts:

  • What if we made the email address bold? Would that look better, to distinguish the email address from other kinds of text?
  • What if they email address is longer than the width of the module? What should happen?

Please go ahead and update the task description with specifications and mockups, including whatever you think are the right solutions to make two points above. We also need to note that the "change" link needs to be instrumented.

MMiller_WMF reassigned this task from MMiller_WMF to Cntlsn.Jun 7 2019, 9:10 PM
JTannerWMF moved this task from Needs triage to Triaged on the Mobile board.Jun 12 2019, 2:42 AM
Cntlsn updated the task description. (Show Details)Jun 12 2019, 7:52 AM
Cntlsn removed Cntlsn as the assignee of this task.Jun 12 2019, 7:55 AM
Cntlsn removed a project: Growth Design.
MMiller_WMF updated the task description. (Show Details)Jun 12 2019, 9:39 PM

Change 528302 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] Homepage: Add email address and (change) link when email is unconfirmed

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

Change 528302 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Homepage: Add email address and (change) link when email is unconfirmed

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

@Cntlsn - there are two things to notice

  • in your mockup the parentheses around (change) link are black - on Homepage the parentheses are part of the link:
<a class="growthexperiments-homepage-email-change-link" href="/wiki/Special:Preferences#mw-prefsection-personal-email">(change)</a>
  • the (change) link color looks different in Mobile vs desktop. The color changes when you switch from Vector (default) skin on desktop to MinervaNeue - from #0645ad; to #3366cc; and it's not because the links were visited.

Thanks @Etonkovidova, it looks good to me.
About the issue with the text color, actually all links are currently #0645ad on Vector. See T213845