Page MenuHomePhabricator

Newcomer tasks: intro and difficulty overlays
Open, Needs TriagePublic

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.
      • 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.

Details

Related Gerrit Patches:
operations/mediawiki-config : masterGrowthExperiments: Configure intro links for suggested edits
mediawiki/extensions/GrowthExperiments : masterStartEditingDialog: Implement intro panel and progress indicator
mediawiki/extensions/GrowthExperiments : masterStartEditingDialog: Implement redesign of difficulty panel

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

MMiller_WMF updated the task description. (Show Details)Fri, Nov 1, 11:47 PM
Restricted Application added a subscriber: revi. · View Herald TranscriptFri, Nov 1, 11:47 PM

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?

Tgr added a comment.Tue, Nov 5, 6:43 PM

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)

Etonkovidova updated the task description. (Show Details)Fri, Nov 8, 1:51 AM
Etonkovidova updated the task description. (Show Details)Fri, Nov 8, 3:03 AM

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

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

To fix a typo or error in a Wikipedia article
To add or change information to a Wikipedia article
To add a photo or image to a Wikipedia article
To create a new Wikipedia article
I'm participating in a program, class, or event (To read Wikipedia, Other)

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:

Difficulty overlay:

Mobile screenshots with notes

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;}

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

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

(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}

(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;}

(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.