Page MenuHomePhabricator

Variant C/D: smaller start module
Closed, ResolvedPublic

Description

For the variant tests in T246533: Variant tests: "initiation part 2" test (C vs. D), both variants have changes to the startup module in common.

Changes:

  • Remove the account, tutorial and startediting submodules, leaving only email
  • Simplify the email design to just the email icon, the user's email address, and a "confirm" link
  • On mobile, remove the two-stage structure (with a mobile preview that, when clicked, navigates to the full version of the module) and also just show the email address and a confirm link

Mockups: desktop, mobile.

Different states of the email (also shown across the Zeplin mocks for Var D desktop):

Email not set
image.png (52×664 px, 2 KB)
Unconfirmed email
image.png (52×664 px, 3 KB)
Confirmed email
image.png (52×664 px, 3 KB)

Note:

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

@RHo could you address this question?

What should the start module look like in each of the three email states? The mockups show the "email set but unconfirmed" state, but what should the "email set and confirmed" and "email not set" states look like?

either by commenting or by editing the task description

Should this only apply to variant C/D (but not variant A), or should we make this change globally?

@MMiller_WMF points out that this change is incongruent with variant A, because it would kill the call to action to initiate the suggested edits module (which is in the start module in variant A)

Should this only apply to variant C/D (but not variant A), or should we make this change globally?

@MMiller_WMF points out that this change is incongruent with variant A, because it would kill the call to action to initiate the suggested edits module (which is in the start module in variant A)

Yes, I would agree we should apply only to variant C/D.

  • Should the email address be obscured, as shown in the mockup? If so, what are the specifications for how it should be obscured?

This comes from a ticket in the backlog T237312 so perhaps we can handle it separately on that ticket?

  • What should the start module look like in each of the three email states? The mockups show the "email set but unconfirmed" state, but what should the "email set and confirmed" and "email not set" states look like?
Email not set
image.png (52×664 px, 2 KB)
Unconfirmed email
image.png (52×664 px, 3 KB)
Confirmed email
image.png (52×664 px, 3 KB)

Will also add to the task description.

I started looking at this but won't have time to get a patch up before vacation.

I think a good way forward might be to create a new module ("EmailCheck" module or whatever) and use that in place of the Start module. The existing Email module is too closely wired to the rest of the start submodule paradigm to make overriding it in PHP and CSS a simple thing to do.

Change 616810 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/GrowthExperiments@master] [WIP] Homepage: Add StartEmail module

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

I've fleshed out Kosta's patch and it's looking good on desktop, but I still have to fix some issues on mobile.

No emailUncomfirmed emailConfirmed email
Screenshot from 2020-08-10 21-32-42.png (240×536 px, 13 KB)
Screenshot from 2020-08-10 21-19-36.png (238×538 px, 16 KB)
Screenshot from 2020-08-10 21-30-58.png (251×531 px, 17 KB)

A couple of changes that diverge from the Zeplin mocks:

  1. the start-email module on mobile has a border, like the other modules.
    image.png (239×258 px, 15 KB)
    But the zeplin mock shows it without one. Should we keep the border for consistency? The desktop mock also shows it without a border (and the larger suggested edits module without a border), although the mobile mock shows suggested edits module with a border. So per the mocks, should it be: (desktop) start-email, no border, (desktop) suggested edits, no border; (mobile) start-email, no border, (mobile) suggested edits, with border?
    1. on mobile the width needs to be adjusted, and the alignment is off, but I think @Catrope plans to address this in a follow-up, as there are other layout issues when Special:Homepage is loaded in landscape orientation with the layout patch T258005
  2. The Zeplin mocks show the "confirm" and "change" text linked, but the surrounding parentheses are not linked. @RHo do you have a preference on this? I'm not sure if we have an existing convention in MediaWiki for whether the parentheses should form part of the link label.
  3. The "confirm" link in the mocks is red, while in @Catrope's patch it's blue. Red links are a thing in MediaWiki, but I think the standard blue color is more correct in this context, so I wanted to double-check with @RHo about that

Hi @kostajh - please see comments below:

A couple of changes that diverge from the Zeplin mocks:

  1. the start-email module on mobile has a border, like the other modules.
    image.png (239×258 px, 15 KB)
    But the zeplin mock shows it without one. Should we keep the border for consistency? The desktop mock also shows it without a border (and the larger suggested edits module without a border), although the mobile mock shows suggested edits module with a border. So per the mocks, should it be: (desktop) start-email, no border, (desktop) suggested edits, no border; (mobile) start-email, no border, (mobile) suggested edits, with border?

– Yes, it should be per the Zeplin mocks please as you've mentioned, but perhaps the border is in the same pale blue as the background instead of no border if that makes more sense in the code change. I want to note though that the pre-initiated onboarding SE-module in variant D does have the base80 border.

A. on mobile the width needs to be adjusted, and the alignment is off, but I think @Catrope plans to address this in a follow-up, as there are other layout issues when Special:Homepage is loaded in landscape orientation with the layout patch T258005

– sgtm

  1. The Zeplin mocks show the "confirm" and "change" text linked, but the surrounding parentheses are not linked. @RHo do you have a preference on this? I'm not sure if we have an existing convention in MediaWiki for whether the parentheses should form part of the link label.

– Let's go with *not* linking the brackets as shown in Zeplin, since this appears to be the standard seen in Special:Preferences parenthetical links, and also "Edit" links on article headers:

image.png (1×892 px, 146 KB)
image.png (128×350 px, 9 KB)
  1. The "confirm" link in the mocks is red, while in @Catrope's patch it's blue. Red links are a thing in MediaWiki, but I think the standard blue color is more correct in this context, so I wanted to double-check with @RHo about that

– Yes, I wanted it red to imply that this email does not technically exist yet, to emphasize the need to confirm the email. For the purposes of finishing this task we can leave as is for now, but I have created a new "leftovers" item T260780 which is a proposal to make both the "Add email" and "Confirm email" versions a little more prominent so that users know to complete this activity.

– Yes, it should be per the Zeplin mocks please as you've mentioned, but perhaps the border is in the same pale blue as the background instead of no border if that makes more sense in the code change.

Border removed for the start module (leaving the SE module for T258704).

I want to note though that the pre-initiated onboarding SE-module in variant D does have the base80 border.

Thanks for pointing this out, I've added this to T258704 (although the border color is base70, not base80).

  1. The Zeplin mocks show the "confirm" and "change" text linked, but the surrounding parentheses are not linked. @RHo do you have a preference on this? I'm not sure if we have an existing convention in MediaWiki for whether the parentheses should form part of the link label.

– Let's go with *not* linking the brackets as shown in Zeplin, since this appears to be the standard seen in Special:Preferences parenthetical links, and also "Edit" links on article headers:

This came from me trying to reuse the i18n message for the existing (change) link in the variant A start module, where the parentheses are inside the link.

Screenshot from 2020-08-19 12-10-09.png (164×352 px, 12 KB)

But you're right that we don't generally do this, so I've changed it.

Screenshot from 2020-08-19 12-33-16.png (75×726 px, 5 KB)
Screenshot from 2020-08-19 12-48-30.png (79×724 px, 5 KB)
Screenshot from 2020-08-19 12-49-06.png (70×711 px, 2 KB)
  1. The "confirm" link in the mocks is red, while in @Catrope's patch it's blue. Red links are a thing in MediaWiki, but I think the standard blue color is more correct in this context, so I wanted to double-check with @RHo about that

– Yes, I wanted it red to imply that this email does not technically exist yet, to emphasize the need to confirm the email. For the purposes of finishing this task we can leave as is for now, but I have created a new "leftovers" item T260780 which is a proposal to make both the "Add email" and "Confirm email" versions a little more prominent so that users know to complete this activity.

Making it red was easy, so I've done that. I like the designs in the leftovers task, but since it's a leftover I will resist the temptation to implement them right away :)

  1. The "confirm" link in the mocks is red, while in @Catrope's patch it's blue. Red links are a thing in MediaWiki, but I think the standard blue color is more correct in this context, so I wanted to double-check with @RHo about that

– Yes, I wanted it red to imply that this email does not technically exist yet, to emphasize the need to confirm the email. For the purposes of finishing this task we can leave as is for now, but I have created a new "leftovers" item T260780 which is a proposal to make both the "Add email" and "Confirm email" versions a little more prominent so that users know to complete this activity.

Making it red was easy, so I've done that. I like the designs in the leftovers task, but since it's a leftover I will resist the temptation to implement them right away :)

@RHo, I commented on the patch but perhaps we should just make it a normal blue link. What I wrote on the patch:

This doesn't play nicely with MobileFrontend's initRedlinksCta() code, which looks for red links and loads a drawer with a call to action to create a page rather than taking you directly to it.

So, after you tap "confirm" you'd see:

image.png (468×785 px, 44 KB)

We could add code to MobileFrontend to special case this type of situation but for now a regular blue link is the easiest thing to do.

  1. The "confirm" link in the mocks is red, while in @Catrope's patch it's blue. Red links are a thing in MediaWiki, but I think the standard blue color is more correct in this context, so I wanted to double-check with @RHo about that

– Yes, I wanted it red to imply that this email does not technically exist yet, to emphasize the need to confirm the email. For the purposes of finishing this task we can leave as is for now, but I have created a new "leftovers" item T260780 which is a proposal to make both the "Add email" and "Confirm email" versions a little more prominent so that users know to complete this activity.

Making it red was easy, so I've done that. I like the designs in the leftovers task, but since it's a leftover I will resist the temptation to implement them right away :)

@RHo, I commented on the patch but perhaps we should just make it a normal blue link. What I wrote on the patch:

This doesn't play nicely with MobileFrontend's initRedlinksCta() code, which looks for red links and loads a drawer with a call to action to create a page rather than taking you directly to it.

So, after you tap "confirm" you'd see:

image.png (468×785 px, 44 KB)

We could add code to MobileFrontend to special case this type of situation but for now a regular blue link is the easiest thing to do.

SGTM @kostajh - maybe this can be looked at with the T260780 leftovers task.

Merging the patch as is, although it needs some more work due to the layout on mobile for variant C / D users:

image.png (129×496 px, 7 KB)

Change 616810 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Homepage: Add StartEmail module

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

Merging the patch as is, although it needs some more work due to the layout on mobile for variant C / D users:

image.png (129×496 px, 7 KB)

@Catrope I'll leave this layout fix for you, ok?

Change 626519 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] Homepage: Fix mobile summary styling when not wrapped in a link

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

Change 626519 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Homepage: Fix mobile summary styling when not wrapped in a link

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

Etonkovidova subscribed.

For Design Review:

(minor) Note: on Desktop - 'Add email' - may be make it bold? All other links on the page are bold. It'd look more stand out e.g.

Screen Shot 2020-09-15 at 5.51.56 PM.png (98×627 px, 6 KB)

(for illustration - no issues)
Desktop

Email not set
Screen Shot 2020-09-15 at 5.41.35 PM.png (847×812 px, 95 KB)
Unconfirmed email
Screen Shot 2020-09-15 at 5.44.46 PM.png (606×1 px, 158 KB)
Confirmed email
Screen Shot 2020-09-15 at 5.43.16 PM.png (662×1 px, 196 KB)

Mobile:

Email not set
Screen Shot 2020-09-15 at 5.39.14 PM.png (422×438 px, 36 KB)
Unconfirmed email
Screen Shot 2020-09-15 at 4.24.17 PM.png (476×424 px, 43 KB)
Confirmed email
Screen Shot 2020-09-15 at 4.26.35 PM.png (515×451 px, 47 KB)

Change 627621 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/GrowthExperiments@master] Revert "Homepage: Fix mobile summary styling when not wrapped in a link"

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

The changes look good for variation C/D, but for variation A users there are some problems, so I've created a revert of the patch although it may will be easier to just make a new patch which fixes the issues; I'll leave that up to @Catrope.

image.png (174×369 px, 9 KB)

image.png (624×375 px, 31 KB)

image.png (269×415 px, 58 KB)

Change 627911 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] Homepage: Fix styling for mobile start module

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

Remarkably, all three of these fairly disparate-looking styling issues were because of one silly CSS mistake. The attached patch fixes it.

Change 627911 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Homepage: Fix styling for mobile start module

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

Change 627802 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@wmf/1.36.0-wmf.9] Homepage: Fix styling for mobile start module

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

Change 627621 abandoned by Catrope:
[mediawiki/extensions/GrowthExperiments@master] Revert "Homepage: Fix mobile summary styling when not wrapped in a link"

Reason:
Superseded by https://gerrit.wikimedia.org/r/c/mediawiki/extensions/GrowthExperiments/ /627911/

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

Change 627802 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@wmf/1.36.0-wmf.9] Homepage: Fix styling for mobile start module

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

Mentioned in SAL (#wikimedia-operations) [2020-09-16T23:37:39Z] <catrope@deploy1001> Synchronized php-1.36.0-wmf.9/extensions/GrowthExperiments/: Fix styling for mobile start module (T258008); Revert wider task card on desktop (T263042, T258704); Fix width of sidebar modules in narrow mode in variant A (T263068) (duration: 01m 09s)

The issues mentioned in this comment - have been fixed.
One thing to take a look at - the arrows look kind of big (it's in production)

Screen Shot 2020-09-18 at 1.38.37 PM.png (495×741 px, 73 KB)

Moving again to Design Review - the screenshots in my comment still need to be reviewed. Also I went through usual cross browser compatibility checks - looks fine.

Thanks @Etonkovidova - the arrows are actually larger on the new desktop version, but you're right about "Add email".
Moving back "needs more work" to fix the following:
*"Add email" should be bold (per the task description).

  • Text (for all states - Add email, unconfirmed, and confirmed email) should be vertically centered with the icons.

The issues mentioned in this comment - have been fixed.
One thing to take a look at - the arrows look kind of big (it's in production)

Screen Shot 2020-09-18 at 1.38.37 PM.png (495×741 px, 73 KB)

Moving again to Design Review - the screenshots in my comment still need to be reviewed. Also I went through usual cross browser compatibility checks - looks fine.

! In T258008#6464944, @Etonkovidova wrote:

For Design Review:

(minor) Note: on Desktop - 'Add email' - may be make it bold? All other links on the page are bold. It'd look more stand out e.g.

Screen Shot 2020-09-15 at 5.51.56 PM.png (98×627 px, 6 KB)

(for illustration - no issues)
Desktop

Email not set
Screen Shot 2020-09-15 at 5.41.35 PM.png (847×812 px, 95 KB)
Unconfirmed email
Screen Shot 2020-09-15 at 5.44.46 PM.png (606×1 px, 158 KB)
Confirmed email
Screen Shot 2020-09-15 at 5.43.16 PM.png (662×1 px, 196 KB)

Mobile:

Email not set
Screen Shot 2020-09-15 at 5.39.14 PM.png (422×438 px, 36 KB)
Unconfirmed email
Screen Shot 2020-09-15 at 4.24.17 PM.png (476×424 px, 43 KB)
Confirmed email
Screen Shot 2020-09-15 at 4.26.35 PM.png (515×451 px, 47 KB)

Change 630970 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] StartEmail: Styling fixes

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

Change 630970 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] StartEmail: Styling fixes

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

  • bold for the link Add email - corrected.

Screen Shot 2020-09-30 at 5.59.47 PM.png (232×736 px, 24 KB)

Text (for all states - Add email, unconfirmed, and confirmed email) should be vertically centered with the icons.

Please review

.growthexperiments-homepage-module-startemail .growthexperiments-homepage-startemail-address-wrapper {
    vertical-align: middle;

Screen Shot 2020-09-30 at 5.56.13 PM.png (195×699 px, 19 KB)

Screen Shot 2020-09-30 at 5.53.41 PM.png (440×1 px, 141 KB)
Screen Shot 2020-09-30 at 5.55.48 PM.png (316×747 px, 35 KB)

hi @Catrope and @Etonkovidova - unfortunately it looks like the font-size and icon size has gotten bigger than expected now, presumably related to the base change that was made to fix the other items on the onboarding screens.

Actual
image.png (454×652 px, 49 KB)
image.png (488×854 px, 60 KB)
  • Icon larger than expected (should be 20x20px)
  • Font-size is larger than expected – it's expected that this should use the OOUI 'tag' font style for smaller UI text, which on Desktop is font-size:13px, and on Mobile is font-size:14.8px
  • Icon colour for unconfirmed and confirmed email should also be Base20 instead of Base10 (unrelated to the font-size issue)

Change 633285 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] StartEmail: Styling tweaks

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

  • Icon larger than expected (should be 20x20px)

It was 20x20 on desktop, and larger on mobile proportional to the base font size. I've fixed it to be 20x20 on both.

  • Font-size is larger than expected – it's expected that this should use the OOUI 'tag' font style for smaller UI text, which on Desktop is font-size:13px, and on Mobile is font-size:14.8px

Fixed. It looks small though.

  • Icon colour for unconfirmed and confirmed email should also be Base20 instead of Base10 (unrelated to the font-size issue)

That icon wasn't even base10, it was pure black. Changed to base20 (or, technically, 65% opacity).

Screenshot from 2020-10-09 19-28-02.png (569×675 px, 32 KB)
Screenshot from 2020-10-09 19-28-32.png (524×666 px, 96 KB)

Change 633285 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] StartEmail: Styling tweaks

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

(1)

  • Icon larger than expected (should be 20x20px)

It was 20x20 on desktop, and larger on mobile proportional to the base font size. I've fixed it to be 20x20 on both.

Desktopoverall look
Screen Shot 2020-10-13 at 5.21.49 PM.png (407×743 px, 58 KB)
Screen Shot 2020-10-13 at 5.21.59 PM.png (474×724 px, 37 KB)
Mobileoverall look
Screen Shot 2020-10-13 at 5.09.39 PM.png (281×381 px, 39 KB)
Screen Shot 2020-10-13 at 5.20.14 PM.png (604×375 px, 53 KB)

(2)

  • Font-size is larger than expected – it's expected that this should use the OOUI 'tag' font style for smaller UI text, which on Desktop is font-size:13px, and on Mobile is font-size:14.8px

Fixed. It looks small though.

Note: It does look small, but it seems to be passing the accessibility test.

DesktopMobile
Screen Shot 2020-10-13 at 5.12.32 PM.png (345×563 px, 53 KB)
Screen Shot 2020-10-13 at 5.11.36 PM.png (395×417 px, 63 KB)

(3)

  • Icon colour for unconfirmed and confirmed email should also be Base20 instead of Base10 (unrelated to the font-size issue)

That icon wasn't even base10, it was pure black. Changed to base20 (or, technically, 65% opacity).

Screenshot from 2020-10-09 19-28-02.png (569×675 px, 32 KB)
Screenshot from 2020-10-09 19-28-32.png (524×666 px, 96 KB)
.growthexperiments-homepage-module-startemail .oo-ui-iconWidget:not(.oo-ui-image-progressive) {
    opacity: 0.65;
}

@Catrope provided the screenshots - betalabs UI is the same.

Thanks all, LGTM!

(1)

  • Icon larger than expected (should be 20x20px)

It was 20x20 on desktop, and larger on mobile proportional to the base font size. I've fixed it to be 20x20 on both.

Desktopoverall look
Screen Shot 2020-10-13 at 5.21.49 PM.png (407×743 px, 58 KB)
Screen Shot 2020-10-13 at 5.21.59 PM.png (474×724 px, 37 KB)
Mobileoverall look
Screen Shot 2020-10-13 at 5.09.39 PM.png (281×381 px, 39 KB)
Screen Shot 2020-10-13 at 5.20.14 PM.png (604×375 px, 53 KB)

(2)

  • Font-size is larger than expected – it's expected that this should use the OOUI 'tag' font style for smaller UI text, which on Desktop is font-size:13px, and on Mobile is font-size:14.8px

Fixed. It looks small though.

Note: It does look small, but it seems to be passing the accessibility test.

DesktopMobile
Screen Shot 2020-10-13 at 5.12.32 PM.png (345×563 px, 53 KB)
Screen Shot 2020-10-13 at 5.11.36 PM.png (395×417 px, 63 KB)

This is right and per spec.

(3)

  • Icon colour for unconfirmed and confirmed email should also be Base20 instead of Base10 (unrelated to the font-size issue)

That icon wasn't even base10, it was pure black. Changed to base20 (or, technically, 65% opacity).

Screenshot from 2020-10-09 19-28-02.png (569×675 px, 32 KB)
Screenshot from 2020-10-09 19-28-32.png (524×666 px, 96 KB)
.growthexperiments-homepage-module-startemail .oo-ui-iconWidget:not(.oo-ui-image-progressive) {
    opacity: 0.65;
}

@Catrope provided the screenshots - betalabs UI is the same.

Thanks, good catch.

RHo closed this task as Resolved.EditedFeb 18 2021, 6:42 PM

Resolving this completed design task.