Page MenuHomePhabricator

Improve call to action in block drawer
Closed, ResolvedPublic3 Estimated Story Points

Description

(As proposed in T189717#6214941)

Problem
The only call to action is "OK" (aka "Oh well").

mobile-block-not-parsed (2×1 px, 191 KB)

Proposed Solution
After T259773 is resolved there may also be a "See reasons/details" CTA, but as someone who just wants to edit, there should really be a direct CTA to get around the issue, i.e. "Create an account" (provided account creations aren't blocked as well). We can then either link the words "signing in" and "creating an account", or provide separate buttons at the bottom of the drawer.


All buttons to be right aligned (left in RTL).

You have been blocked from editing this site.Okay (primary, progressive)
Your IP address has been blocked from editing this site.Okay (primary, progressive)
You have been blocked from editing this page. Try editing another page.Take me to another page (quiet, progressive)
Your IP address has been blocked from editing this page. Try editing another page.Take me to another page (quiet, progressive)
Your IP address has been blocked from editing this page. Try logging in if you have an account.Log in (primary, progressive)
Your IP address has been blocked from editing this page. Try logging in or creating an account, or try editing another page.Register (quiet, black), Log in (primary, progressive)
Your IP address has been blocked from editing this page. Try logging in if you have an account, or try editing another page.Log in (primary, progressive)

Event Timeline

Prtksxna subscribed.

The button Take me to another page would go to Special:Random. I am not happy with that label. Suggestions are welcome!

Your IP address has been blocked from editing this page. Try logging in or creating an account, or try editing another page.Register (quiet, black), Log in (primary, progressive)

Three buttons might not work as well for languages with longer words:

image.png (315×313 px, 30 KB)

Would the login button alone do, since Special:UserLogin has its own call to action for registering?

The button Take me to another page would go to Special:Random. I am not happy with that label. Suggestions are welcome!

How about just "Random page"? Also, here's a screenshot to show how the quiet button looks:

image.png (291×307 px, 24 KB)

Change 622199 had a related patch set uploaded (by Tchanders; owner: Tchanders):
[mediawiki/extensions/MobileFrontend@master] Add call to action links in the block message drawer

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

Three buttons might not work as well for languages with longer words:

Right I didn't consider the Details button. This might change in T261178.

Would the login button alone do, since Special:UserLogin has its own call to action for registering?

I guess that'd be okay for now, but we might have to change this.

How about just "Random page"? Also, here's a screenshot to show how the quiet button looks:

That is better, yeah. I am thinking though if we could include a verb since its a call to action.

Thanks for the screenshot, yep that looks right (again the Details link might go away)

Change 622199 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Add call to action links in the block message drawer

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

@Tchanders The login button looks weird for me on https://en.wikipedia.beta.wmflabs.org

mobile_buttons.png (369×512 px, 22 KB)

Error in the console:

mediawiki.jqueryMsg: login: Parse error at position 0 in input: {{#ifeq: {{SERVERNAME}} | secure.wikimedia.org
| Secure log in
| Log in
}}

Looks fine on my local environment, though.

@Tchanders The login button looks weird for me on https://en.wikipedia.beta.wmflabs.org

It looks like the message has been overridden on beta:
https://en.wikipedia.beta.wmflabs.org/wiki/MediaWiki:Login

Not sure if we should support that or not.

Change 623001 had a related patch set uploaded (by Tchanders; owner: Tchanders):
[mediawiki/extensions/MobileFrontend@master] Use custom messages for block message drawer button

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

Thanks for looking into that @dbarratt. I think we should use custom messages to guard against this sort of thing - the latest patch does that.

I think we should use custom messages to guard against this sort of thing - the latest patch does that.

The downside of using new messages is you put more of a burden on translators meaning many smaller wikis won't benefit from translations. Many of the messages in MobileFrontend never get translated. On the other hand all those core messages are translated.

@Tchanders The login button looks weird for me on https://en.wikipedia.beta.wmflabs.org

It looks like the message has been overridden on beta:
https://en.wikipedia.beta.wmflabs.org/wiki/MediaWiki:Login

Not sure if we should support that or not.

I'm not sure what the beta cluster modified that message https://en.wikipedia.beta.wmflabs.org/wiki/MediaWiki:Login?action=edit but I've reverted that change as that message is using syntax that's not supported on JS client. It would be much better to update the qqq code for the message in core to say that it shouldn't use such syntax. Updating the qqq message in core would make these messages more useful for everyone, so I'd urge you to consider that rather than rolling your own.

Thanks for looking into that @dbarratt. I think we should use custom messages to guard against this sort of thing - the latest patch does that.

Another way to handle this would be to send the parsed message to the client, but that doesn't seem like common practice. This seems like an edge case.

@Jdlrobson Thanks for fixing the message on beta. I guess a downside with reusing messages is that they might be for a range of use-cases, so it can be less flexible... But if translations are a problem in MobileFrontend, we can use the core messages instead for these buttons.

Change 623001 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Use custom messages for block message drawer button

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

Login:

mobile_login.png (371×510 px, 20 KB)

Random page:

mobile_random.png (372×511 px, 21 KB)

OK:

mobile_ok.png (379×519 px, 20 KB)

Tested on https://en.wikipedia.beta.wmflabs.org MediaWiki 1.36.0-alpha (0e9937c) 07:48, 31 August 2020.