First-Run Experience: Make "Preferences" affordance more obviously clickable
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	• ppelberg
	Nov 18 2021, 1:19 AM

Description

This task represents the work involved with iterating on the design of the Preferences affordance within the Automatic Topic Subscription first-run experience (T262103) to make it more obviously clickable.

User Story

As someone who is seeing the Automatic Topic Subscription first-run experience, I want to know what to do to visit "preferences", so that I can adjust my notification settings.

Approach

Borrowed from the ideas @Esanders and @Ryasmeen shared in Slack.

Approach #1: Adjust the affordance's language to make it more action-oriented
- E.g. Change the language from Preferences --> Edit Preferences.
Approach #2: Add a frame to surround the Preferences affordance
Approach #3: Change the color the Preferences text
- E.g. Change the affordance's text color from black to blue.

Mockup

Mockup to be posted here once an ===Approach is decided upon.

Done

An ===Approach for making the Preferences affordance more obviously clickable is decided upon
A design is posted to the ===Mockup section for the ===Approach that is decided upon
The ===Mockup is implemented

Details

	Subject	Repo	Branch	Lines +/-
	Make preferences button in auto-subscription popup more obviously clickable	mediawiki/extensions/DiscussionTools	master	+7 -3

Customize query in gerrit

Related Objects
Search...

Status	Assigned	Task
Open	None	T233447 [OKR] Increase response rates
Resolved	• Whatamidoing-WMF	T295428 [Announcement] Make Volunteers Aware Automatic Topic Subscriptions are Available
Resolved	matmarex	T295946 First-Run Experience: Make "Preferences" affordance more obviously clickable

Event Timeline

• ppelberg renamed this task from Make "Preferences" more obviously clickable within first-run experience to First-Run Experience: Make "Preferences" affordance more obviously clickable.Nov 18 2021, 1:19 AM

• ppelberg removed • Whatamidoing-WMF as the assignee of this task.

• ppelberg created this task.

• ppelberg moved this task from Backlog to Triaged on the DiscussionTools board.Nov 18 2021, 2:53 AM

• ppelberg added a project: Goal.Nov 25 2021, 12:39 AM

Next steps

@iamjessklein to review ===Approaches and comment which – if any – she thinks we should move forward with

I mocked up all the approaches and D (which would be to treating more like community tech did for the watchlist time period but I think B. is the way to go because:

We want to teach contributors about the page so we wouldn't want option D where it's embedded.
We want it to feel like a link more than an action.

In B, I changed the copy to "Edit preferences" and the button to quiet progressive.

Just for ease-of-comparison, here's the current appearance:

Going to move forward with "B."

In T295946#7538425, @ppelberg wrote:

Going to move forward with "B."

Sounds good to me.

In T295946#7538261, @iamjessklein wrote:

I mocked up all the approaches and D (which would be to treating more like community tech did for the watchlist time period but I think B. is the way to go because:

We want to teach contributors about the page so we wouldn't want option D where it's embedded.

We want it to feel like a link more than an action.

In B, I changed the copy to "Edit preferences" and the button to quiet progressive.

I agree with @iamjessklein on this to go for Option B and make it a link rather than a button. I assume, this approach would also avoid button text/label overflow when it's translated in some other languages?

Ryasmeen mentioned this in T284836: [Implementation] Automatic topic subscriptions (DiscussionTools).Dec 8 2021, 10:31 PM

Ryasmeen mentioned this in T262103: Design automatic topic subscription first-run experience (DiscussionTools).Dec 14 2021, 8:51 PM

Change 747640 had a related patch set uploaded (by Bartosz Dziewoński; author: Bartosz Dziewoński):

[mediawiki/extensions/DiscussionTools@master] Make preferences button in auto-subscription popup more obviously clickable

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

gerritbot added a project: Patch-For-Review.Dec 16 2021, 12:11 AM

In T295946#7538905, @Ryasmeen wrote:

I assume, this approach would also avoid button text/label overflow when it's translated in some other languages?

Yes, I had to change how the text is laid out to fit "Edit preferences" on one line (it is now allowed to overlap the image slightly), which will also affect other languages. We shouldn't count on that though (users might use different fonts and text sizes), and everything is flexible so the dialog still looks okay with longer text.

Just to illustrate, I highlighted in pink the areas where the text is laid out:

Before	After

Example screenshot of the German translation, which has longer text:

Before	After

Change 747640 merged by jenkins-bot:

[mediawiki/extensions/DiscussionTools@master] Make preferences button in auto-subscription popup more obviously clickable

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

ReleaseTaggerBot added a project: MW-1.38-notes (1.38.0-wmf.16; 2022-01-03).Dec 17 2021, 4:00 PM

Maintenance_bot removed a project: Patch-For-Review.Dec 17 2021, 4:10 PM

matmarex moved this task from Code Review to QA on the Editing-team (Kanban Board) board.Dec 17 2021, 5:02 PM

matmarex added a project: Editing QA.

Test wiki created on Patch demo by JKlein (WMF) using patch(es) linked to this task:

https://patchdemo.wmflabs.org/wikis/899efc408d/w/

In T295946#7574216, @matmarex wrote:

In T295946#7538905, @Ryasmeen wrote:

I assume, this approach would also avoid button text/label overflow when it's translated in some other languages?

Yes, I had to change how the text is laid out to fit "Edit preferences" on one line (it is now allowed to overlap the image slightly), which will also affect other languages. We shouldn't count on that though (users might use different fonts and text sizes), and everything is flexible so the dialog still looks okay with longer text.

Just to illustrate, I highlighted in pink the areas where the text is laid out:

Before After

Example screenshot of the German translation, which has longer text:

Before After

Thanks @matmarex for the tweaks.

Ryasmeen edited projects, added Verified; removed Editing QA.Jan 4 2022, 8:02 PM

Thanks I think the change works well. Nice catch @Ryasmeen and @matmarex

• ppelberg closed this task as Resolved.Jan 8 2022, 12:24 AM

Restricted Application added a project: User-Ryasmeen. · View Herald TranscriptJan 8 2022, 12:24 AM

Test wiki on Patch demo by JKlein (WMF) using patch(es) linked to this task was deleted:

~~https://patchdemo.wmflabs.org/wikis/899efc408d/w/~~

	F34885453: image.png
	Dec 16 2021, 12:13 AM

	F34885455: image.png
	Dec 16 2021, 12:13 AM

	F34885464: image.png
	Dec 16 2021, 12:13 AM

	F34885466: image.png
	Dec 16 2021, 12:13 AM

First-Run Experience: Make "Preferences" affordance more obviously clickableClosed, ResolvedPublicActions