Design improvements - cc @JFernandez-WMF:

• "Find more events" button: Good callout that it may not be perceived as interactive. We can think about this a bit more, but perhaps it would be more clearly interactive if it was blue and maybe also bold.
• Ensure that the header is sufficiently informative. For example, it's currently displaying truncated address but not country.

In T403118#11130156, @ifried wrote:

• Ensure that the header is sufficiently informative. For example, it's currently displaying truncated address but not country.

Expanding a bit on this: technically it could display the country, but only if the address is short enough. I think it should display the country alone. We could maybe add a section or two to the header if needed. Information currently in the dialog but not the header is: organizers, meeting link, address and country for hybrid events, event types, wikis, topics, chat group, number of private participants (not saying we should show all of these, of course! But this should be the full list).

Also, organizers have a "Manage event" button that takes them to EventDetails already. I think that could be updated to point to EditEventRegistration. It'd be especially useful now that the registration form redirects to the event page upon submission (T378768), in case you want to quickly go back to the form.

@JFernandez-WMF, let's update the designs for this ticket so it is ready for sprint planning on Monday. Thank you!

Okay, I updated the designs! Some notes:

Information on header

In T403118#11132893, @Daimona wrote:

In T403118#11130156, @ifried wrote:

• Ensure that the header is sufficiently informative. For example, it's currently displaying truncated address but not country.

Expanding a bit on this: technically it could display the country, but only if the address is short enough. I think it should display the country alone.

I ended up designing a proposal for showing only the country. @ifried feel free to disagree!

Design proposal for e-mail confirmation

I removed this proposal from the task description, since it's not feasible to change Echo styling.

Manage event

Also, organizers have a "Manage event" button that takes them to EventDetails already. I think that could be updated to point to EditEventRegistration. It'd be especially useful now that the registration form redirects to the event page upon submission (T378768), in case you want to quickly go back to the form.

I added AC for this as well, but feel free to edit if I didn't capture it correctly.

Notes from Sept 10 meeting:

• We should include the country and address for both online and hybrid (i.e., online and in person events)
• This is because people will need to know both the country + address before deciding to register, and they should not need to go to EventDetails for this information. Instead, EventDetails should be more like a place to get bonus extra but not strictly necessary information.
• This information should be for both online and hybrid because many hybrid events can lean more heavily towards in person events in structure.

@ifried @JFernandez-WMF I'm a bit confused by the second AC, as it's about Special:EventDetails and not the event page.

• I understand that we want to add a register button there as well. What would clicking this button do? Take the user to Special:RegisterForEvent, or display the same registration dialog that we have (and will also keep) on the event page?
• The "visit the collaboration list" line is currently shown at the end of all tabs in Special:EventDetails. The replacement would be for the "event details" tab only. I think this is fine and I like the change, but I want to make sure it is intentional as it wasn't mentioned.
• And more generally, especially if we want to add a participant registration dialog here, can the second AC be moved out to a separate task?

Change #1197296 had a related patch set uploaded (by Daimona Eaytoy; author: Daimona Eaytoy):

[mediawiki/extensions/CampaignEvents@master] Update address formatting rule in registration header

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

For this AC:

• Given a user is viewing the Event Registration header,
  • And the address line is truncated,
    • When the user hovers over the address text on desktop or long presses it on mobile,
      • Then a tooltip must appear displaying the full address.

@JFernandez-WMF I was taking a look at the Codex documentation for Tooltip, but it looks like this isn't a standalone, but rather a kind of "add-on" that can be added to existing component, in VueJS only. The registration header uses OOUI though, so I'm not sure how easy it'd be to switch part of it to Codex. So, I'm wondering if there's an alternative implementation we could use instead. I was thinking about something like a button that you can click and it shows the rest of the address (kind of undoing the truncation), but 1) I don't know if we have anything like that in our design guidelines, and 2) I'm generally not sure if showing the full address in the header itself is a good idea. Even if we constrain the maximum width, it could still push stuff around and generally look weird, I think.

@Daimona, I have written responses to your questions below, but I am also curious to hear what @JFernandez-WMF thinks!

@ifried @JFernandez-WMF I'm a bit confused by the second AC, as it's about Special:EventDetails and not the event page.

• I understand that we want to add a register button there as well. What would clicking this button do? Take the user to Special:RegisterForEvent, or display the same registration dialog that we have (and will also keep) on the event page?

Good question. I like the idea of displaying the same registration dialog that we have on the event page. This way, people don't need to go to a separate page to register.

• The "visit the collaboration list" line is currently shown at the end of all tabs in Special:EventDetails. The replacement would be for the "event details" tab only. I think this is fine and I like the change, but I want to make sure it is intentional as it wasn't mentioned.

We discussed this briefly in the Monday meeting today. I believe Julieta wrote this AC, so we can confirm with her if it was intentional. I don't have a strong preference.

• And more generally, especially if we want to add a participant registration dialog here, can the second AC be moved out to a separate task?

Are you referring to this? “And a progressive button labeled ’Find more events” must appear next to the “View event page” button, And the 'Visit the collaboration list...' link must no longer be present.” If yes, then I see no problem in making it a separate task.

We can wait to hear back from Julieta before making any final decisions. Thanks!

In T403118#11291606, @ifried wrote:

• And more generally, especially if we want to add a participant registration dialog here, can the second AC be moved out to a separate task?

Are you referring to this? “And a progressive button labeled ’Find more events” must appear next to the “View event page” button, And the 'Visit the collaboration list...' link must no longer be present.” If yes, then I see no problem in making it a separate task.

I meant the entire (top-level) criterion, starting with "Given a user is on the EventDetails page", with all of its children.

@Daimona, got it. Thanks! In that case, let's wait for @JFernandez-WMF to see what she says about the other points.

Updates after consulting with @JFernandez-WMF:

• We should have the register button on EventDetails, and it should use the same registration dialog that we have on the event page.
• We can keep the link to the collaboration list in all tabs, since it creates more visibility for the collaboration list (a good thing).
• Yes, we can have a separate ticket for the Register for event button (T407923).

Change #1197296 merged by jenkins-bot:

[mediawiki/extensions/CampaignEvents@master] Update address formatting in registration header

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

Thank @ifried. Then I'm mostly good with this, except for the remaining design question in T403118#11290812.

thank you! im waiting on other designers' opinions on this, so will respond ASAP

Apologies for yet other questions: in the design, the line that reads "Online participation available" has a globe icon next to it that is not mentioned in the AC. I'm wondering if we should indeed include the icon, and if so I'll update the AC. Noting that he same icon is used in Special:AllEvents for the country, not sure if the inconsistency is an issue though.

However, for online events, the event page header uses the map pin icon with text "Online event". Hence wondering if that case should be updated to use the same text and icon as hybrid events. In this case, in-person and hybrid events would be formatted as shown in the design specs above; and additionally, online events would be displayed as in the "hybrid" case but without the address stuff.

Change #1198536 had a related patch set uploaded (by Daimona Eaytoy; author: Daimona Eaytoy):

[mediawiki/extensions/CampaignEvents@master] Make "Manage event" button on event page link to registration form

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

Thanks for pointing this out, @Daimona!

I'll let @JFernandez-WMF chime in on this question of the icon. I'm generally neutral on icon design choices, but I think we should aim for consistency. Curious to know what she thinks!

In T403118#11308603, @ifried wrote:

I'll let @JFernandez-WMF chime in on this question of the icon. I'm generally neutral on icon design choices, but I think we should aim for consistency. Curious to know what she thinks!

I'm also for consistency. Do note that it's not just the icon (globe vs map pin), but also the text ("Online event" vs "Online participation available").

Change #1199006 had a related patch set uploaded (by Daimona Eaytoy; author: Daimona Eaytoy):

[mediawiki/extensions/CampaignEvents@master] Drop "more details" dialog in favour of link to Special:EventDetails

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

the line that reads "Online participation available" has a globe icon next to it that is not mentioned in the AC. I'm wondering if we should indeed include the icon

let's drop the icon — looks more readable without it and less visually dense. thanks!

Do note that it's not just the icon (globe vs map pin), but also the text ("Online event" vs "Online participation available").

hm, good point, thanks for raising it! perhaps 'Online event access available' or 'Online event option available'...? is it too wordy? @ifried what do you think?

Maybe we just say "Online and in-person event," since this is what we already say for hybrid? And then we use "Online event" for online event?

In T403118#11314337, @ifried wrote:

Maybe we just say "Online and in-person event," since this is what we already say for hybrid? And then we use "Online event" for online event?

i think that makes sense, however i wonder if that copy could feel repetitive, since the location already implies in-person. but just a nit

@Daimona, are there any other design questions that i haven't answered? as for the tooltip, since we are going to improve spacing in another task, maybe let's keep the text truncated with no tooltip (but they can see the full address in eventdetails), and hopefully we can work on the improvements soon-ish. cc @ifried

Change #1198536 merged by jenkins-bot:

[mediawiki/extensions/CampaignEvents@master] Make "Manage event" button on event page link to registration form

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

Thank you both! No more questions for me, I would just like to confirm what the header would look like in all 3 scenarios (in-person, online, hybrid; the last two in particular), and I'll implement that change. For the address, I am keeping it truncated as before, and I can look into the follow-up later.

ok!

• online: label for location element should still be 'online event', still using the pin icon
• in-person: location element should have: address (truncated for now), country on a second line.
• hybrid: location element should have: address (truncated for now), country on a second line, and "Online and in-person event" on a third line. also still uses pin icon (and not globe)

structure for in-person:

structure for hybrid:

Change #1200363 had a related patch set uploaded (by Daimona Eaytoy; author: Daimona Eaytoy):

[mediawiki/extensions/CampaignEvents@master] Show address for hybrid events in event page header

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

Thank you @JFernandez-WMF, I have updated the AC accordingly, plus added one bullet point about the no-address scenario, and removed the one about the tooltip because it will be addressed in a separate task. So, everything is now ready for review.

Change #1200363 merged by jenkins-bot:

[mediawiki/extensions/CampaignEvents@master] Show address for hybrid events in event page header

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

Test wiki created on Patch demo by MHorsey-WMF using patch(es) linked to this task:
https://82f35f84e6.catalyst.wmcloud.org/w/

Change #1199006 merged by jenkins-bot:

[mediawiki/extensions/CampaignEvents@master] Drop "more details" dialog in favour of link to Special:EventDetails

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

Acceptance criteria:

• Given a user clicks the “More details” link in the Event Registration header,
  • ✅ Then the user must be taken directly to the EventDetails page,
    • ✅ And the interim “More details” modal must no longer appear.
      

• Given a user is viewing the Event Registration header,
  • And the event is in-person only,
    • ✅ Then the header must display one line with the venue address (truncated if necessary), and a second line with the country.
      
      
      

• Given a user is viewing the Event Registration header,
  • And the event is a hybrid event (with both physical and online participation),
    • ✅ Then the header must display one line with the venue address (truncated if necessary), a second line with the country, and a third line with the text: “Online and in-person event”.
      
      

• Given a user is viewing the Event Registration header,
  • And the event is in-person or hybrid
  • And it has a country but no address
    • ✅ Then everything is as above but without the first line for the address
      
      

• Given the current viewer is an event organizer,
  • When they click the “Manage event” button in the Event Registration header,
    • ✅ Then they must navigate them to the EditEventRegistration page,
      • ✅ And not to the EventDetails page.
        

All AC met 🎉
sending to design sign off.

I created T410323 while testing this, but I don't believe it is directly related to this ticket.

this is great! thank you! moving to product sign off