Page MenuHomePhabricator

Improve discoverability of contribution options for experienced users in the new tabbed interface
Closed, ResolvedPublic

Description

Problem statement

Users with previous editing experience automatically land on the "View contributions" tab in the new interface, but this tab doesn't display the contribution options that have been moved to the "Contribute" tab. This creates a discoverability issue where experienced users might not find the various ways they can contribute.

Background:

We are rolling out a new contribute menu (T322740) with a tabbed interface containing two primary tabs:

  1. Contribute tab - Shows various contribution options/methods
  2. View contributions tab - Shows users' past contributions

Currently, the system directs users to different tabs based on their editing history:

New users (no prior edits) → "Contribute" tab
Experienced users (with prior edits) → "View contributions" tab

The issue is that experienced users no longer see contribution options by default as these options exclusively appear in the "Contribute" tab.

Proposed solution
  1. Add a "+ New contribution" button within the "Past contributions" tab.
  2. Update tab naming for improved clarity:
    • Change "View contributions" to "Past contributions" for better descriptiveness
    • Keep "Contribute" tab name as is, as it clearly communicates purpose
Implementation details:
Section 1.png (1×3 px, 306 KB)
Section 2.png (906×1 px, 75 KB)
  • Component: Button with:
    • weight: "normal"
    • icon: "add"
    • label: "New contribution"
    • size: "medium"
    • action: "progressive"
  • Placement: Insert below user account information and above the contributions list
  • Spacing: 16px top/bottom margins, aligned with the content container
  • Behavior: On click, navigate to "Contribute" tab
  • Tab labels: Update to "Contribute" and "Past contributions"

Derived Requirement

Update the new tabbed interface in the Contribute menu to improve discoverability for experienced users by:

  • Renaming the "View contributions" tab to "Past contributions".
  • Adding a "+ New contribution" button to the "Past contributions" tab.
  • Ensuring the button is visually styled and positioned according to specifications and redirects users to the "Contribute" tab on click.
Test Steps

Test Case 1: Ensure the tab label is renamed to 'Past contributions and ensure '+ New contribution' button is visible in 'Past contributions' tab'

  1. Log in to beta wiki with an account that has prior edits.
  2. Navigate to the Contribute menu interface (e.g., from user menu or toolbar).
  3. ✅❓❌⬜ AC1: Confirm that the tab previously labeled "View contributions" is now labeled "Past contributions" and confirm that a button labeled "+ New contribution" appears below the user info and above the contributions list..

Test Case 2: Ensure the button styling matches design specs

  1. Inspect the "+ New contribution" button.
  2. ✅❓❌⬜ AC2: Confirm the button has:
    • weight: normal
    • icon: add
    • label: "New contribution"
    • size: medium
    • action style: progressive
    • 16px margin above and below
    • aligned with content container

Test Case 3: Ensure the button redirects to 'Contribute' tab

  1. Click the "+ New contribution" button.
  2. ✅❓❌⬜ AC3: Confirm that the user is navigated to the "Contribute" tab and can see available contribution options.

QA Results - Test Beta

ACStatusDetails
1T391494#10861671
2T391494#10861671
3T391494#10861671

Event Timeline

PWaigi-WMF moved this task from Incoming to Prioritized on the LPL Hypothesis board.

@SGautam_WMF

Add a "+ New contribution" button within the tab showing past contributions on desktop only, ...

What do you mean by "desktop only" here? Should it be visible on vector but not on minerva? Or is it more about the space it takes on small screen so only visible from min-width: 640px or so?

...using Codex components.

Codex is not yet available in this context. It would have to be a regular OOUI button but it looks similar.

Change #1136435 had a related patch set uploaded (by Sbisson; author: Sbisson):

[mediawiki/core@master] Add "New contribution" button to Special:Contributions

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

@SGautam_WMF

Add a "+ New contribution" button within the tab showing past contributions on desktop only, ...

What do you mean by "desktop only" here? Should it be visible on vector but not on minerva? Or is it more about the space it takes on small screen so only visible from min-width: 640px or so?

...using Codex components.

Codex is not yet available in this context. It would have to be a regular OOUI button but it looks similar.

Thanks for pointing this out, looking into it.

Thanks @SBisson that feedback helped me think through the use of button for smaller devices. Earlier I thought that tab would be discoverable on smaller devices but then I didn't think through range of them so yeah so updated about them in the task description.

@SGautam_WMF about the button style, you can see the options for OOUI ButtonWidget. The closest is "progressive" but it's not identical. Should we use it as-is or custom style it to be just like your mock up?

@SGautam_WMF about the button style, you can see the options for OOUI ButtonWidget. The closest is "progressive" but it's not identical. Should we use it as-is or custom style it to be just like your mock up?

Sure, we can try using the progressive one and see how it looks. Will we be able to add "+" icon in there too?

Looks fine to me, can we try with normal weight of the text?

@SGautam_WMF yes, it took some specificity but this is what it looks like:

Screenshot 2025-04-15 at 10.10.16 AM.png (850×1 px, 195 KB)

@SGautam_WMF yes, it took some specificity but this is what it looks like:

Screenshot 2025-04-15 at 10.10.16 AM.png (850×1 px, 195 KB)

Looks good to me

Change #1136435 merged by jenkins-bot:

[mediawiki/core@master] Add "New contribution" button to Special:Contributions

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

@SBisson Confirmed "+ New contribution" button within the "Past contributions" tab. The only thing different from the gifs is that the Special: Contribute has Suggested edits. I will move this to Sign-off. Thanks for all your work!

Test Result - Beta

Status: ✅ PASS
Environment: Beta
OS: macOS Sequoia 15.5
Browser: Chrome 136
Device: MBA
Emulated Device: NA

Test Artifact(s):
https://en.wikipedia.beta.wmflabs.org/wiki/Special:Contributions/Georgemikesell

Test Steps

Test Case 1: Ensure the tab label is renamed to 'Past contributions and ensure '+ New contribution' button is visible in 'Past contributions' tab'

  1. Log in to beta wiki with an account that has prior edits.
  2. Navigate to the Contribute menu interface (e.g., from user menu or toolbar).
  3. AC1: Confirm that the tab previously labeled "View contributions" is now labeled "Past contributions" and confirm that a button labeled "+ New contribution" appears below the user info and above the contributions list..
Desktop- Experience UserDesktop- New UserMobile
2025-05-27_12-03-26.mp4.gif (1×1 px, 2 MB)
2025-05-27_12-01-35.mp4.gif (1×1 px, 1 MB)
2025-05-27_12-40-10.mp4.gif (1×994 px, 689 KB)

Test Case 2: Ensure the button styling matches design specs

  1. Inspect the "+ New contribution" button.
  2. AC2: Confirm the button has:
    • weight: normal
    • icon: add
    • label: "New contribution"
    • size: medium
    • action style: progressive
    • 16px margin above and below
    • aligned with content container
DesktopMobile
2025-05-27_12-07-25.png (1×1 px, 868 KB)
2025-05-27_12-34-31.png (1×1 px, 593 KB)

Test Case 3: Ensure the button redirects to 'Contribute' tab

  1. Click the "+ New contribution" button.
  2. AC3: Confirm that the user is navigated to the "Contribute" tab and can see available contribution options.

See AC1

GMikesell-WMF updated the task description. (Show Details)
GMikesell-WMF moved this task from Needs QA to Design Signoff on the LPL Hypothesis board.

I'm sorry for this late comment, but why isn't the button bolded? That way, it's neither consistent with other buttons nor intuitive. Furthermore, it's less readable. Therefore, I suggest bolding it.