Page MenuHomePhabricator

Newcomer tasks: intro and difficulty overlays
Closed, ResolvedPublic

Assigned To
Authored By
MMiller_WMF
Oct 17 2019, 12:56 AM
Referenced Files
F31552864: image.png
Feb 7 2020, 12:10 AM
F31487078: Screen Shot 2019-12-23 at 6.21.44 PM.png
Dec 24 2019, 2:25 AM
F31487074: Screen Shot 2019-12-23 at 6.10.18 PM.png
Dec 24 2019, 2:25 AM
F31064838: image.png
Nov 13 2019, 10:52 PM
F31064807: image.png
Nov 13 2019, 10:52 PM
F31064825: image.png
Nov 13 2019, 10:52 PM
F31064805: image.png
Nov 13 2019, 10:52 PM
F31064833: image.png
Nov 13 2019, 10:52 PM

Description

In T232419, there are specifications for a "difficulty overlay", which is a single overlay that users see when they initiate the suggested edits module. Later designs, based on user testing, break the "difficulty overlay" into two separate overlays:

  • Intro overlay
  • Difficulty overlay

A note on topic matching: in v1.0, there will be no topic matching, and so these overlays do not address initial topic selection. But in v1.1, there will be topic selection, and that topic selection step will be combined into the intro overlay, not the difficulty overlay. See this mockup for what that will look like.

  • Intro overlay: after initiating suggested edits by clicking the call-to-action in the start module, the intro overlay appears on top of the newcomer homepage.
    • The top of the overlay says "1 of 2" along with two dots, with the first one filled in.
    • The overlay's header is "Suggested edits to get started".
    • The overlay has two buttons: "Cancel" and "Continue". "Cancel" closes the overlay and the homepage is unchanged from before the user initiated the overlay. "Continue" advances the user to the difficulty overlay.
    • This overlay's content depends on a user's welcome survey responses. All users have a certain set of default content, but if users answered the welcome survey question about "why they created their account", they have additional personalized content.
    • Users with no survey response (desktop mockup and mobile mockup):
      • Under the header is a large heart graphic.
      • icon check-square color=green} Then there is a second header that says, "Wikipedia is built by people like you working together."
      • Then there is a paragraph that says, "Your edits help improve Wikipedia and further the mission to share free knowledge with the world. Continue to start with small suggested edits."
    • Users with survey responses (desktop mockup and mobile mockup):
      • The additional content appears below the default content. The copy for each of these scenarios is listed in this sheet, and is keyed to different welcome survey responses as follows:
        • Users who respond "To fix a typo or error": "Intro overlay subheader 1 typo or error"
        • Users who respond "To add a photo or image": "Intro overlay subheader 1 image"
          • This text comes along with a link (as specified in the copy). Below are the specific links for each of our target wikis.
        • Users who respond "To create a new Wikipedia article": "Intro overlay subheader 1 new article"
          • This text comes along with a link (as specified in the copy). Below are the specific links for each of our target wikis.
        • Users who respond "To add or change information": "Intro overlay subheader 1 add or change"
        • Any other response receive the default intro overlay as if they had no survey response.
      • Each of those scenarios should be shown along with the corresponding graphic.
  • Difficulty overlay: this overlay is the same for all users; no personalization. (desktop mockup and mobile mockup)
    • The top of the overlay says "2 of 2" along with two dots, with the second one filled in.
    • The overlay has two buttons: "Back" and "Get suggestions". "Back" returns the user to the intro overlay. "Get suggestions" completes the initiation and returns the user to the homepage where the suggested edits module is now displayed and the page is rearranged accordingly.
    • Copy for this overlay is in this sheet.

Event Timeline

MMiller_WMF renamed this task from Newcomer tasks: intro overlay to Newcomer tasks: intro and difficulty overlays.Oct 17 2019, 1:00 AM

@Catrope -- this is a new task about overlays because of the latest designs that split the difficulty overlay into the "intro overlay" and the "difficulty overlay". Hopefully a lot of this work was already completed when you worked on the original difficulty overlay specifications in T232419. But all overlay specifications are now unified here.

Change 547686 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] StartEditingDialog: Implement redesign of difficulty panel

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

Change 547686 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] StartEditingDialog: Implement redesign of difficulty panel

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

Change 547828 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] StartEditingDialog: Implement intro panel and progress indicator

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

I just added URLs for the "add photo" and "create new article" links in the intro overlay.

Change 547831 had a related patch set uploaded (by Catrope; owner: Catrope):
[operations/mediawiki-config@master] GrowthExperiments: Configure intro links for suggested edits

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

Change 547828 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] StartEditingDialog: Implement intro panel and progress indicator

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

How the specific links are handled in configuration? Are they easy to change by the communities?

Easy as in it just takes an admin edit. Not easy as in user-friendly (it's a big JSON blob and you only see the effect of your edit once you have saved it).

Easy enough to be done by people tech savvy enough is okay. I was afraid of a big config change pushed on Gerrit (which would be safer, but not easier)!

Change 547831 merged by jenkins-bot:
[operations/mediawiki-config@master] GrowthExperiments: Configure intro links for suggested edits

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

Mentioned in SAL (#wikimedia-operations) [2019-11-07T12:31:18Z] <urbanecm@deploy1001> Synchronized wmf-config/InitialiseSettings.php: SWAT: 19034af: GrowthExperiments: Configure intro links for suggested edits (T235723) (duration: 01m 00s)

For Design review - A slight deviation from the mockup (marked with )

The overlay's header is "Suggested edits to get started".
Then there is a second header that says, "Wikipedia is built by people like you working together."

MockupCurrent implementation
Screen Shot 2019-11-07 at 7.06.31 PM.png (532×660 px, 99 KB)
Screen Shot 2019-11-07 at 6.21.00 PM.png (472×696 px, 87 KB)

Screenshots for Design review - Personalized content based on user answers on Welcome survey:

To fix a typo or error in a Wikipedia article
Screen Shot 2019-11-07 at 6.19.09 PM.png (497×707 px, 129 KB)
To add or change information to a Wikipedia article
Screen Shot 2019-11-07 at 6.19.39 PM.png (526×714 px, 137 KB)
To add a photo or image to a Wikipedia article
Screen Shot 2019-11-07 at 6.20.04 PM.png (501×698 px, 132 KB)
To create a new Wikipedia article
Screen Shot 2019-11-07 at 6.20.31 PM.png (529×708 px, 137 KB)
I'm participating in a program, class, or event (To read Wikipedia, Other)
Screen Shot 2019-11-07 at 2.42.23 PM.png (599×1 px, 153 KB)

When the Welcome survey is skipped, navigated away, submitted without selecting the option in "Why did you create your account today?" - the screenshot is as following:

Screen Shot 2019-11-07 at 2.42.23 PM.png (599×1 px, 153 KB)

Mobile screenshots with notes

IMG_8407.PNG (1×640 px, 131 KB)
IMG_8406.PNG (1×640 px, 109 KB)
IMG_8404.PNG (1×640 px, 163 KB)
IMG_8405.PNG (1×640 px, 103 KB)

hi @Catrope - there's a few minor style issues on the desktop version of the overlays which I've listed below (will keep all style issues for the mobile version of overlays tracked on the T236854).

Intro overlay

(1) Subheader text should be slightly smaller and have a greater line-height across all versions: .mw-ge-startediting-dialog-intro-general-subheader {font-size: 16px; line-height: 1.375;}

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

(2) Bit more padding around the module: .mw-ge-startediting-dialog-intro-general { padding:24px;}

image.png (1×2 px, 423 KB)

(3) More padding around the buttons in the dialog footer: .mw-ge-startediting-dialog-actions { padding:24px;}

image.png (456×1 px, 93 KB)

(4) The "Suggested edits to get started" general title (class .mw-ge-startediting-dialog-intro-general-title) should be above the image.

Difficulty overlay

(5) Reduce the padding around the banner image and text: .mw-ge-startediting-dialog-difficulty-banner {padding: 2.5em 1.5em 2.5em 9.5em}

image.png (1×2 px, 431 KB)

(6) Subheader text should be slightly smaller and have a greater line-height: .mw-ge-startediting-dialog-difficulty-banner {font-size: 16px; line-height: 1.375;}

image.png (1×2 px, 364 KB)

(7) All text that is currently in the Difficulty overlay as #000 should be #222 – ie., .mw-ge-startediting-dialog-difficulty-header, .mw-ge-startediting-dialog-difficulty-legend-description-header, and mw-ge-startediting-dialog-difficulty-legend-description-body.

I just tested and confirmed today that the correct personalization is happening with each welcome survey response. The text in the start module changes appropriately.

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

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

hi @Catrope - there's a few minor style issues on the desktop version of the overlays which I've listed below (will keep all style issues for the mobile version of overlays tracked on the T234854).

Intro overlay

(1) Subheader text should be slightly smaller and have a greater line-height across all versions: .mw-ge-startediting-dialog-intro-general-subheader {font-size: 16px; line-height: 1.375;}

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

Font size reduced to 1.15em (=16.1px). For both this and the line-height, I'm going with the assumption that that should be consistent in the entire overlay, and so I'm applying it to all four paragraphs in the overlay: the title (which doesn't wrap in English, but could in other languages), the general header (which doesn't wrap in the general-only version of the overlay, but does in the version with survey-specific text because the image is next to it), the general subheader (as you identified) and the survey-specific text (which has no header vs subheader, it's bold text followed by non-bold text in the same paragraph).

Or did you mean for the header text to remain at 16.8px and only the subheader text to shrink to 16px?

(2) Bit more padding around the module: .mw-ge-startediting-dialog-intro-general { padding:24px;}

image.png (1×2 px, 423 KB)

Done. This also required adjusting the padding on other elements in the same overlay, including the progress indicator ("1 of 2"), which then also affected the difficulty overlay.

(3) More padding around the buttons in the dialog footer: .mw-ge-startediting-dialog-actions { padding:24px;}

image.png (456×1 px, 93 KB)

Done

(4) The "Suggested edits to get started" general title (class .mw-ge-startediting-dialog-intro-general-title) should be above the image.

Had already been fixed before.

Difficulty overlay

(5) Reduce the padding around the banner image and text: .mw-ge-startediting-dialog-difficulty-banner {padding: 2.5em 1.5em 2.5em 9.5em}

image.png (1×2 px, 431 KB)

Done. Note this reduces the vertical padding but increases the horizontal padding; I think that was intentional but just wanted to call it out.

(6) Subheader text should be slightly smaller and have a greater line-height: .mw-ge-startediting-dialog-difficulty-banner {font-size: 16px; line-height: 1.375;}

image.png (1×2 px, 364 KB)

I applied this to the entire banner div, so that it affects both the header and the subheader. The font size change also means that the padding tightens up a little bit (because it's expressed in ems, and the font size was already being set on the banner div rather than the individual paragraphs).

(7) All text that is currently in the Difficulty overlay as #000 should be #222 – ie., .mw-ge-startediting-dialog-difficulty-header, .mw-ge-startediting-dialog-difficulty-legend-description-header, and mw-ge-startediting-dialog-difficulty-legend-description-body.

Done.

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

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

I've updated the task description - removed the green exclamation points icons which indicated nod done items. Moving to the Design Review.
I checked all newly added code by @Catrope - all reqeusted adjustments are in place (and nicely illustrated by the screenshots).

Here are two general screenshot of how the intro looks now:

Screen Shot 2019-12-23 at 6.10.18 PM.png (556×700 px, 86 KB)

Screen Shot 2019-12-23 at 6.21.44 PM.png (752×802 px, 114 KB)

The intro overlay is no longer in use, but the difficulty overlay looks fine. Thanks!

image.png (1×1 px, 202 KB)