Page MenuHomePhabricator

Determine location of 'enable registration' in skins that are not new vector
Closed, ResolvedPublic

Description

Background: The link to 'enable registration' in the prototype only works for the New Vector skin. How should we place the link for the other skins available via Preferences > Appearance > Skins? Note that we shouldn't think about it skin by skin. Instead, there should be a single solution that works for all skins. Skins provide some entry points where extension code can add elements, and we should use one of those entry points. The presentation of the element itself is left up to the skin. More details are available at T308577#7935698, with the caveat that we're not very familiar with MW skins and there may be more options than the ones we listed. There you will also find an example with indicators: there's a single entry point for adding indicators across all skins, and it's up to each skin to determine how and where the indicators should be shown.

Resources:

Acceptance Criteria:

  • Provide guidance for where the engineers should place the 'Enable registration' button for the other skins (Vector legacy, MinervaNeue, Monobook, Timeless)

Event Timeline

ifried moved this task from Backlog to Following on the Campaign-Tools board.
ifried moved this task from Following to Campaign-Design on the Campaign-Tools board.
ifried edited projects, added Campaign-Tools (Campaign-Design); removed Campaign-Tools.
ifried updated the task description. (Show Details)

Note that we shouldn't think about it skin by skin. Instead, there should be a single solution that works for all skins. Skins provide some entry points where extension code can add elements, and we should use one of those entry points.

The presentation of the element itself is left up to the skin. More details are available at T308577#7935698, with the caveat that I'm not very familiar with MW skins and there may be more options than the ones I listed. There you will also find an example with indicators: there's a single entry point for adding indicators across all skins, and it's up to each skin to determine how and where the indicators should be shown.

Thank you, @Daimona! I have added your comment into the information in the ticket.

@Daimona @ifried For the vectors where we can not find any feasible sensible location for the Enable Registration button, we can put it below the title as it is on mobile/Minerva skin. I can work on a desktop design for this.

Screenshot 2022-05-30 at 18.56.03.png (1×1 px, 220 KB)
Enable registration button on mobile/minerva.

For the new vector, is there any other workaround to placing it in the current position it is in the prototype?

@Jdlrobson Hi! We have a couple questions about skins, but I'm not very familiar with them. Given your expertise with skins, would you be willing to let us know what you think about it? The questions:

On some pages (=event pages), we would like to add a button that lets users add that specific event to our system. We're doing that with the CampaignEvents extension. In the current prototype for new vector, the button is located next to the language selector, as you can see here (the "Enable Registration" button; ignore the dialog):

Screenshot 2022-03-25 at 16.31.01.png (1×2 px, 484 KB)

As I wrote at T308577#7935698, it doesn't seem to be possible to inject elements in that position in Vector 2022, and this would also not work for other skins. I also listed some possible alternatives in that same comment, would you say that the list is accurate?

Finally, would you be able to answer Gregory's question above?

For the new vector, is there any other workaround to placing it in the current position it is in the prototype?

Thanks in advance!

For the new vector, is there any other workaround to placing it in the current position it is in the prototype?

No. From a technical point of view, I would not recommend adding the button to the left of the language button. Many gadgets/user scripts use this area, there is no stable API and there are lots of changes planned in this area already, so what works now, may not work in a month's time. From a design point of view, I also don't think that is a good idea, but that would require a conversation with Alex Hollender.

Not sure if you've seen this prototype: https://di-article-tools-da959.web.app/Humpback_whale but using the tools menu (which will be soon moved to the right-hand side of the screen) may be worth considering.

Screen Shot 2022-05-31 at 12.36.52 PM.png (752×2 px, 391 KB)

@Daimona @ifried For the vectors where we can not find any feasible sensible location for the Enable Registration button, we can put it below the title as it is on mobile/Minerva skin. I can work on a desktop design for this.

Screenshot 2022-05-30 at 18.56.03.png (1×1 px, 220 KB)
Enable registration button on mobile/minerva.

For the new vector, is there any other workaround to placing it in the current position it is in the prototype?

No problems with this design. Could the same design be used with Vector? e.g. placing the banner at the top of the content? Technically you can use OutputPageBeforeHTML to achieve that (call OutputPage::addSubtitle).

For the new vector, is there any other workaround to placing it in the current position it is in the prototype?

No. From a technical point of view, I would not recommend adding the button to the left of the language button. Many gadgets/user scripts use this area, there is no stable API and there are lots of changes planned in this area already, so what works now, may not work in a month's time. From a design point of view, I also don't think that is a good idea, but that would require a conversation with Alex Hollender.

Thank you for these details!

@Daimona @ifried For the vectors where we can not find any feasible sensible location for the Enable Registration button, we can put it below the title as it is on mobile/Minerva skin. I can work on a desktop design for this.

Screenshot 2022-05-30 at 18.56.03.png (1×1 px, 220 KB)
Enable registration button on mobile/minerva.

For the new vector, is there any other workaround to placing it in the current position it is in the prototype?

No problems with this design. Could the same design be used with Vector? e.g. placing the banner at the top of the content? Technically you can use OutputPageBeforeHTML to achieve that (call OutputPage::addSubtitle).

I'm also in favour of putting it there. We're already using the ArticleViewHeader to add info for pages that are already in our system, more precisely for this header:

Screen Shot 2022-04-13 at 1.19.42 PM.png (1×2 px, 570 KB)

so it would be very easy to display a button instead, if the page is not tracked.

@gonyeahialam & @CKMIE89 : Hello! It looks like there is a general recommendation (in the comments above) to place all 'enable registration' links below the page title rather than to the left of language selector. I know this goes against the designs we tested, and I really do hate to make any more changes. But it may be worth considering this alternative. We have learned that many gadgets and scripts use the area to the left of the language selector, and there may be more changes to the area in the future. If we keep the 'enable registration' link next to the language selector, it may require us to move it in the future anyway. For this reason, the engineers are advocating to have the link below the title (from my understanding). What do you think?

Coud we have an example of what that would look like? If it is more reliable (ie, less subject to changes in the future° and works for all skins, Im sure we can make a design that works in that configuration:

@cmelo & @Daimona, is there an example of how the 'enable registration' link below the page title would look like (so Gregory and Camille could check it out)? Thanks in advance!

@cmelo & @Daimona, is there an example of how the 'enable registration' link below the page title would look like (so Gregory and Camille could check it out)? Thanks in advance!

I guess this is more of a question for @gonyeahialam... The position is the same as that of the registration header, but I also haven't seen a wireframe with the new version of the button.

Okay, thanks @Daimona. We will await a response from @gonyeahialam.

I haven't fully explored various options for this but we can use this for V0. @Daimona @ifried

Screenshot 2022-06-13 at 14.27.20.png (872×2 px, 449 KB)

But if we have something as visible as this permanently there we may not need the pop-up.

Thank you so much, @gonyeahialam! This new version has a description of the user ("You are an organizer") and of the action ("Event page: Enable on-page registration so participants can register for your event directly on the page"). Is there any reason that the new version has this additional text, but the old version only had the "Enable Registration" link? Is it so that there isn't arbitrary white space with the addition of the "Enable Registration" button below the title? Also, one quick language note: It seems a bit redundant to say "on-page registration" and "directly on the page." If we decide to keep the additional language, maybe we can just use "directly on the page" since it seems more clear?

Pinging @CKMIE89 since she requested an example in a previous comment -- any thoughts?

And @Daimona -- any thoughts on the example provided by Gregory?

And @Daimona -- any thoughts on the example provided by Gregory?

No specific thoughts -- as long as the thing (be it a box, a button, a link) is in that position, we can implement it.

Thank you so much, @gonyeahialam! This new version has a description of the user ("You are an organizer") and of the action ("Event page: Enable on-page registration so participants can register for your event directly on the page"). Is there any reason that the new version has this additional text, but the old version only had the "Enable Registration" link? Is it so that there isn't arbitrary white space with the addition of the "Enable Registration" button below the title? Also, one quick language note: It seems a bit redundant to say "on-page registration" and "directly on the page." If we decide to keep the additional language, maybe we can just use "directly on the page" since it seems more clear?

Pinging @CKMIE89 since she requested an example in a previous comment -- any thoughts?

And @Daimona -- any thoughts on the example provided by Gregory?

I really like this.

I would change the texte to " You are an organizer of this event"
And I agree on the redundance, and would suggest "Enable registration so participants can register to your event directly on this page."

Discussed 2022-06-14: we will use this design T309337#7998575 and keep the pop-up.

When "page tools" are implemented, we can change this placement if needed.