Page MenuHomePhabricator

Homepage: start module
Closed, ResolvedPublic

Description

This is a task for building one of the modules in the newcomer homepage: the start module.

Main audience: users who are not confident enough to just start being bold in editing an article, and prefer to have more guidance or practice.

Invision mockups: https://wikimedia.invisionapp.com/share/KUQV2QDJ8A7#/screens/353627437 (in places where the mockups and the specifications on this task disagree, the specifications take precedent.)

Summary: Our user tests (T218084) showed that after users create their account, many are looking for a clear pathway to get started. In this module, we make it clear what our recommendations are for the right ways for a user to complete their account and to learn to edit. At first the module gives the user some choices of how to start, but in the longer run, we may add options, allow more options to appear over time, or structure the ordering in which the user does them. In absence of intelligent task recommendations, this gives newcomers something clear and valuable to do when they arrive on their homepage.

The specifications below are detailed. If anything about these specifications is not performant, we can discuss how to alter them.

  • Overall
    • Module consists of four sub-sections, each of which operates completely independently of the others.
    • The sub-sections may each have multiple states.
    • Module is not dismissable.
    • Module has two states:
      • State 1: in which not all the sub-sections have been completed.
        • Title: "Start here"
        • Drop shadow: heavy
      • State 2: in which all the sub-sections have been completed.
        • Title: "First steps complete." (period is included)
        • Drop shadow: light
  • Section 1: account creation
    • This module only has one state, but its content does change over time.
    • Title: "Account created"
    • Icon: green checkmark
    • Next: avatar icon
    • Next line: [USERNAME]
    • Next line: number of edits, written like "0 edits", "1 edit", "2 edits", etc.
    • Next line: length of time the user has had an account, written like, "You've had an account for 3 days." This line should sensibly handle the way to phrase lengths of time, e.g. "1 year and 2 months" instead of "425 days"; "4 months" instead of "16 weeks". If standards do not exist for this and specific rules are needed, please ask.
  • Section 2: email
    • This module has three states: no email, unconfirmed, confirmed.
    • If the user has no email address...
      • Title: "Add your email"
      • Icon: gray email icon
      • Next line: "Recommended for account recovery"
      • Button text: "Add email"
      • Clicking on button takes user to Special:ChangeEmail
      • Button is blue.
      • When a user has a valid email address, the state of the module should change to "unconfirmed" below.
    • If the user has an unconfirmed email address...
      • Title: "Confirm your email"
      • Icon: gray email icon
      • Next line: "Check your email for a confirmation link, or send a new link."
      • Button text: "Get a new link"
      • Button is blue.
      • Clicking on button takes user to Special:ConfirmEmail.
      • Link under button: "Change your email address". This links to the "Email options" header in Special:Preferences.
    • If the user has a confirmed email address...
      • Title: "Email added"
      • Icon: green checkmark
      • Next line: "Your email has been confirmed. You can change your email settings in Preferences."
      • Button text: "Preferences"
      • Button is in non-blue state.
      • Clicking on button takes user to Special:Preferences.
  • Section 3: tutorial
    • We would like this module to have two states: its state before the user clicks the button and its state afterward. Is it possible to govern the state purely on whether a user has clicked on the button?
    • If a user has not clicked on the button...
      • Title: "Learn to edit"
      • Icon: gray book icon
      • Next line: "Follow a quick tutorial to learn how to edit Wikipedia."
      • Button text: "Tutorial"
      • Button is in blue state.
      • Clicking on button takes user to a tutorial page specified by the community. This is another instance, similar to help panel links, in which we will request a recommended tutorial link from each community. Those links will be listed as sub-bullets when we collect them from Czech, Korean, and Vietnamese Wikipedia.
    • If a user has clicked on the button...
      • Title: "Learn to edit"
      • Icon: green checkmark
      • Next line: "Follow a quick tutorial to learn how to edit Wikipedia."
      • Button text: "Tutorial"
      • Button is in non-blue state.
  • Section 4: user page
    • This module has two states: one when the user page does not exist, and one when it does.
    • If the user page does not exist...
      • Title: "Create your user page"
      • Icon: gray pencil icon
      • Next line: "Practice editing while building your public profile.”
      • Button text: "Create user page"
      • Button is in blue state.
      • Clicking button takes user to their uncreated user page with the editor open.
      • Link under button: "Guidelines for user pages". This links to the appropriate language version of https://en.wikipedia.org/wiki/Wikipedia:User_pages, which exists in 90 languages. If this does not exist in the language at hand, this links should not be shown at all.
    • If the user page does exist...
      • Title: "Edit your user page"
      • Icon: green checkmark
      • Next line: "Continue working on your public profile."
      • Button text: "Edit user page"
      • Button is in non-blue state.
      • Clicking button takes user to their user page with the editor open.
      • Link under button: "Guidelines for user pages". This links to the appropriate language version of https://en.wikipedia.org/wiki/Wikipedia:User_pages, which exists in 90 languages. If this does not exist in the language at hand, this links should not be shown at all.

Color codes

  • checkmark icon color is #fff
  • checkmark icon bg color is #00AF89
  • normal state icon color is #54595D
  • normal state icon bg color is #D5FDF4
  • normal state icon border is 1px solid #C8CCD1
  • profile avatar icon color is #fff
  • profile avatar icon bg color is #54595D
  • CTAs color is #36c
  • error color is #d33

Future: a list of capabilities that may be needed in future versions, listed here for planning purposes.

  • We may want to allow the various sub-sections to cycle through different calls-to-action as users complete them, instead of remaining there in a "completed" state. For instance, if someone has done the tutorial, we might want to suggest another one. Or if someone has made their user page, we might suggest that they edit in their sandbox.
  • Sub-sections might contain specific task recommendations at some point -- in other words, it may turn out that our design for the task recommendations module involves this module evolving into task recommendations as the user completes the sub-sections that are in it by default.
  • Another sub-section might be completing the welcome survey (for users that skipped or abandoned it). Or perhaps just showing one question at a time from the survey. This idea first ticketed in T212021.
  • This module might one day show some kind of percentage or progress bar of how much a user has accomplished in terms of its sub-sections.
  • We may want to add tooltips at some point for little question mark icons, to help clarify what the section is talking about.

Related Objects

Event Timeline

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

Change 499508 had a related patch set uploaded (by Catrope; owner: Catrope):
[operations/mediawiki-config@master] Set $wgGEHomepageTutorialTitle on beta labs for testing

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

Change 499497 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Account module: don't show days when account is older than a week

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

Change 499508 merged by jenkins-bot:
[operations/mediawiki-config@master] Set $wgGEHomepageTutorialTitle on beta labs for testing

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

@Catrope @SBisson @kostajh

color codes for the start module are listed below. ask for more if needed!

  • checkmark icon color is #fff
  • checkmark icon bg color is #00AF89
  • normal state icon color is #54595D
  • normal state icon bg color is #D5FDF4
  • normal state icon border is 1px solid #C8CCD1
  • profile avatar icon color is #fff
  • profile avatar icon bg color is #54595D
  • CTAs color is #36c
  • error color is #d33

invision mockups updated to latest version!

I added the color codes to the task description.

I updated the task description to match the changed business rules in the mockups.

@Cntlsn -- I think the only remaining changes to make in the mockups are:

  • I think we decided that the header of the module is blue until all the tasks are completed.
  • The text for the email error is: "Please enter a valid email address." (including the period).

@MMiller_WMF
the mockup is up-to-date with new email error message copy.

about the blue header, there are a few reasons for not going with it:

  • during design review it came out it is a bit too strong (I ran a quick poll and got around 80% votes against)
    • it could take attention away from the CTAs
    • plus the same hierarchy level can be reached with a lighter visual treatment (drop shadow weight)
  • it would need more logic to work (check if all the tasks have been completed)

do you feel strongly about it from a product point of view?

Change 499793 had a related patch set uploaded (by Sbisson; owner: Sbisson):
[mediawiki/extensions/GrowthExperiments@master] [wip] Tracking whether tasks are completed and icon styling

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

Change 499261 abandoned by Catrope:
API: Add setemail module

Reason:
On reflection, this would be more work to implement properly than I have time for, and we don't need it for what I'm currently working on (yet)

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

Change 499793 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Tracking whether tasks are completed and icon styling

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

Change 499234 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Homepage email module

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

@Cntlsn -- I did not feel strongly about the blue header. It's good to know about the reasons for taking it away. Those reasons make sense to me.

So what about the drop shadow? Should that go away once all the tasks are completed? The way we were going to have the blue header go away?

@MMiller_WMF -- Exactly, that's the desired behavior. Now I notice I forgot to add that to the specs, can we update? Thanks!

@MMiller_WMF - only the checkmark state is missing for 'Learn to edit' - is it out of scope now?

The screenshots below illustrate the present (testwiki wmf.24) state of Start module on Special:Homepage on. I've added some comments (there are no bugs).

(1)

  • Email is not added - Create user page

Screen Shot 2019-04-03 at 1.44.31 PM.png (254×737 px, 47 KB)

  • Unconfirmed email - Create user page

Screen Shot 2019-04-03 at 1.44.31 PM.png (254×737 px, 47 KB)

  • Confirmed email - Edit User page

Screen Shot 2019-04-03 at 1.42.08 PM.png (299×749 px, 50 KB)

(2) Learn to edit (betalabs only) .

Screen Shot 2019-04-03 at 3.17.29 PM.png (233×734 px, 41 KB)

@SBisson

Link under button: "Guidelines for user pages". This links to the appropriate language version of https://en.wikipedia.org/wiki/Wikipedia:User_pages, which exists in 90 languages.

In testwiki and in betalabs the link points to a different page - is it because of testing consideration?

<a href="https://www.wikidata.org/wiki/Special:GoToLinkedPage/testwiki/Q4592334" data-link-id="userpage-guidelines">Guidelines for user pages</a>

Change 501353 had a related patch set uploaded (by Sbisson; owner: Urbanecm):
[mediawiki/extensions/GrowthExperiments@master] Change wording of growthexperiments-homepage-email-button-unconfirmed

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

@MMiller_WMF There's a patch from Martin (based on a discussion with Benoit) about changing the wording of the Email module button when the user has an email but it is not confirmed.

The proposed change is to go from New link to Get a new link

Let us know if you want it merged.

We discussed about it in the emails about qqq documentation so as in the meeting with Martin. I've tried to translate the two terms, and the "get a new ink" one gives much more sense and is easier to understand in the context.

@SBisson

Link under button: "Guidelines for user pages". This links to the appropriate language version of https://en.wikipedia.org/wiki/Wikipedia:User_pages, which exists in 90 languages.

In testwiki and in betalabs the link points to a different page - is it because of testing consideration?

<a href="https://www.wikidata.org/wiki/Special:GoToLinkedPage/testwiki/Q4592334" data-link-id="userpage-guidelines">Guidelines for user pages</a>

The reason we know that Wikipedia:User_pages exists in 90 languages and we can navigate between them is because they are all linked to wikidata item Q4592334.

Using Special:GoToLinkedPage from wikidata is a trick to be able to go to the right version of that page for every language without having to hardcode or configure it ourselves (it's already configured in wikidata).

This is similar to using Special:MyLanguage/<PageTitle> to go to the right version of a translated page.

It's understandable that testwiki doesn't have an entry for that page. You can replace testwiki with kowiki or cswiki in the URL to check if it will work for those target wikis.

@Cntlsn -- I changed the specifications to indicate that there is a heavy drop shadow when the Start module is incomplete, and no drop shadow when it is complete.

@Etonkovidova -- I updated the specifications around the email module to accurately describe the behavior when someone has no email address -- since they will not be able to set it directly from the module.

@SBisson -- yes, we should change the words on that button to "Get a new link", and I changed it in the specifications.

I am putting this back in @Etonkovidova's column to take another pass with the updated requirements and updated layout. @Etonkovidova -- how do you test the email functionality if Beta can't send emails?

@Cntlsn -- I changed the specifications to indicate that there is a heavy drop shadow when the Start module is incomplete, and no drop shadow when it is complete.

@MMiller_WMF Thanks. Actually when it is complete there is a light drop shadow

Change 501353 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Change wording of growthexperiments-homepage-email-button-unconfirmed

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

I have updated mockups on InVision and Zeplin according to style guide fixes (primary button style, links position) @Catrope @MMiller_WMF

I have a question about the "Change your email address" link (in the unconfirmed email address state), has it been removed for a reason?

Adding this to In Progress so that @Catrope can update it according to @Cntlsn's changes in InVision and Zeplin.

I tested the module out today, and I have these notes:

Bugs or issues for @SBisson, @kostajh, @Catrope

  • Long usernames that don't have spaces run along the page instead of wrapping or having a "..." at the end. See screenshot below.

image.png (322×447 px, 29 KB)

  • When the module is complete, the heavy dropshadow should be replaced by a light dropshadow. In the screenshot below, all the icons are green checkmarks, but the shadow is still heavy.

image.png (328×869 px, 47 KB)

  • There is indeed a link missing in the email module. It's in the written specifications but not in the mockup, which is probably why it was easy to miss. This is the specification: Link under button: "Change your email address". This links to the "Email options" header in Special:Preferences. The idea is that when someone's email is unconfirmed, there should be a link to change their address (in addition to the big button to get a confirmation link. This is in case someone put a junk email in in the first place, but now wants to have a real address. The link should be style the same way as the "Guidelines for user pages" link in the user page module.
  • Since the "Guidelines for user pages" link only exists in 90 wikis, we want to not sure the link at all if the page doesn't exist. Since it doesn't exist for testwiki, I wanted to ask whether (a) we made an exception for testwiki so that the link would show up in testing or (b) we haven't implemented that logic yet.

Questions for @Etonkovidova

  • Why do you have red for Button text: "Add email"? That seems alright to me.
  • Why do you have orange for When a user has a valid email address, the state of the module should change to "unconfirmed" below."? That one also seems alright to me.
  • The tutorial module's state does change to green when I click the "Tutorial" link in Test Wiki. So maybe we can mark that specification as okay?

Design thoughts for @Cntlsn

  • As I played with this module, I realized that the email module's transition from "Add your email" to "Confirm your email" is probably too subtle. Since it's just words that change, it's hard to notice that I've made progress on the module. This would not be for the initial release -- but do you agree? And do you think there could be a way to indicate that the user has accomplished the first part of that module?
  • In general, I felt like the modules transition from incomplete to complete really quietly. Like, I notice that I've completed a module when I return to the homepage and notice that the checkmark is green. Again, not for the initial release, but I wonder if there is a way to animate or indicate or congratulate that the user accomplished one. I could imagine an animation when the user returns to the homepage, or a toast for the moment they complete it.

Moving this to In Progress so the bugs/issues can be worked on.

  • There is indeed a link missing in the email module. It's in the written specifications but not in the mockup, which is probably why it was easy to miss. This is the specification: Link under button: "Change your email address". This links to the "Email options" header in Special:Preferences. The idea is that when someone's email is unconfirmed, there should be a link to change their address (in addition to the big button to get a confirmation link. This is in case someone put a junk email in in the first place, but now wants to have a real address. The link should be style the same way as the "Guidelines for user pages" link in the user page module.

@MMiller_WMF As per comment below (https://phabricator.wikimedia.org/T217105#5129999) I was asking if the link was already part of the specification. I intentionally removed it from the last mockup iteration because I didn't see it in beta.
I can put it back, I'd just want to point out that we might have a positioning issue with that link, because as per "style-guide consistency iteration" the links have been moved above the CTAs, but for the sake of better UX that specific link should be placed below the CTA...

Design thoughts for @Cntlsn

  • As I played with this module, I realized that the email module's transition from "Add your email" to "Confirm your email" is probably too subtle. Since it's just words that change, it's hard to notice that I've made progress on the module. This would not be for the initial release -- but do you agree? And do you think there could be a way to indicate that the user has accomplished the first part of that module?

Agreed, I noticed that too and I was trying to come up with a solution. We might turn the icon's background to primary action blue in that scenario, so it's clear that confirming your email is the action you should take next.

  • In general, I felt like the modules transition from incomplete to complete really quietly. Like, I notice that I've completed a module when I return to the homepage and notice that the checkmark is green. Again, not for the initial release, but I wonder if there is a way to animate or indicate or congratulate that the user accomplished one. I could imagine an animation when the user returns to the homepage, or a toast for the moment they complete it.

Yes, the idea was to animate the icon from normal state to checkmark state when going back to the page after completing the task.
I just didn't push it for this first release.

Change 506320 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] Homepage: Add link to change email to email module in unconfirmed state

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

Change 506324 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] [WIP] Homepage: Make email icon blueish when unconfirmed

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

The first patch adds the link as requested. I wasn't sure what color blue to use for the second patch (the standard "progressive" blue, #3366cc is quite dark), so I improvised and used a lighter blue (#a9d4fd). Let me know what color you want and I can easily put it in. We can also invert the icon and use a darker blue, if you want to that, although I would argue that it'd be better to reserve dark backgrounds and inverted (white) icons for completed states.

Screenshot from 2019-04-24 14-39-10.png (289×1 px, 48 KB)

Change 506320 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Homepage: Add link to change email to email module in unconfirmed state

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

@Catrope Thanks for pointing that out!
I have updated the mockup on both InVision and Zeplin.

To make it easier I'll list below what changed:
Unconfirmed email state

  • icon will have #36c background color and #fff icon color
  • a link to Email options header in Special:Preferences with copy "Email settings" is added above the CTA

User page submodule

  • the "Guidelines for user pages" link should be placed above the CTA

also adding @MMiller_WMF for updating the specs in the task description
also adding @Trizek-WMF for pinging the translator about the copy change

@Catrope Thanks for pointing that out!
I have updated the mockup on both InVision and Zeplin.

To make it easier I'll list below what changed:
Unconfirmed email state

  • icon will have #36c background color and #fff icon color

I've amended my second patch to do this.

  • a link to Email options header in Special:Preferences with copy "Email settings" is added above the CTA

In the text you quoted from Marshall, it said the link was "Change your email" and should go to Special:ChangeEmail, so that's what I implemented on Wednesday. This is already merged, and you can see it in beta labs. Can you confirm that you want to change this to "Email settings" and that you want the link to go to Special:Preferences instead?

User page submodule

  • the "Guidelines for user pages" link should be placed above the CTA

I'll work on this (and on moving the email link above the CTA) later.

This is what the blue email icon looks like with the patch.

Screen Shot 2019-04-26 at 4.07.08 PM.png (450×950 px, 48 KB)

Is it blurry or is it me?

Change 506324 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Homepage: Make email icon white on blue when unconfirmed

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

In the text you quoted from Marshall, it said the link was "Change your email" and should go to Special:ChangeEmail, so that's what I implemented on Wednesday. This is already merged, and you can see it in beta labs. Can you confirm that you want to change this to "Email settings" and that you want the link to go to Special:Preferences instead?

@MMiller_WMF confirmed?

This is what the blue email icon looks like with the patch.

Screen Shot 2019-04-26 at 4.07.08 PM.png (450×950 px, 48 KB)

Is it blurry or is it me?

Other icons also look a little blurry to me, but it's not an issue with the bg color. (same icons look same in OOUI demos too)

Just a note:

  • the confirm email state for the icon should also have border-color: @colorProgressive

thx!

Change 507013 had a related patch set uploaded (by Sbisson; owner: Sbisson):
[mediawiki/extensions/GrowthExperiments@master] Homepage: UI fixes

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

Change 507013 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Homepage: UI fixes

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

We decided to remove the "Email settings" link to Special:Preferences

Change 507085 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] Homepage: Remove footers for start module submodules

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

Change 507085 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Homepage: Remove footers for start module submodules

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

Re-checked the specs that were marked with the exclamation points.

The Tutorial module correctly displays the complete state after clicking on 'Tutorial":

IncompleteComplete
Screen Shot 2019-05-02 at 11.44.13 AM.png (248×214 px, 13 KB)
Screen Shot 2019-05-02 at 11.44.28 AM.png (254×216 px, 13 KB)

The 'Email' module has three state:

Add you emailConfirm your emailEmail added
Screen Shot 2019-05-02 at 11.48.07 AM.png (252×210 px, 13 KB)
Screen Shot 2019-05-02 at 11.49.41 AM.png (251×211 px, 15 KB)
Screen Shot 2019-05-02 at 11.49.03 AM.png (255×216 px, 18 KB)

Change 514027 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/GrowthExperiments@master] Remove reference to non-existent module

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

Change 514027 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Remove reference to non-existent module

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