A new idea for survey banners

[schalkneethling]

After a lengthy discussion yesterday between the MDN Web docs team, we have changed how we will implement banners on MDN Web Docs going forward.

At the moment, we show a banner as a floating, fixed positioned element at the bottom of all pages. We also only show this on landscape oriented tablets and larger viewports.

The new implementation will show the banner as a banner at the top of all pages across all devices. The base functionality does not change, and this is largely a UI change. While we currently have a title, subtitle and action button, the new design is much more simplified.

We will have to decide what we will accommodate over and above what we show in the above screenshot. This is the jumping of point to get feedback and make a collaborative decision on the final implementation.

Should everyone agree, we can spin off an issue to implement.

[escattone]

I really like the change, and wanted to add that the new banner would not be a floating/fixed-position element, so it would move out of view as the user scrolled down the page (or the user could close it).

[chrisdavidmills]

+1 I really like this.

[dalexsy]

Yeah, the thinking behind moving the banner to the top of the page and allowing users to scroll past it is to make the experience less obtrusive, which hopefully would garner some good will and result in positive engagement from the community when we want their feedback :) It should also translate to mobile well.

I'm still wondering where the limit is height-wise, like how many lines can the banner be before it becomes a problem. The amount of content in the old banner would maybe be too much for a top banner.

[Ryuno-Ki]

+1 for being able to scroll past it!

I recall that there was a time, where a small rectangle appeared in the upper right corner of a page (so at the height of the summary paragraph) asking for feedback on today's MDN experience.

Was that considered, too?

[schalkneethling]

That was the task completion survey. I am not sure what we have decided about that. I think starting a discussion specifically around that makes a lot of sense.

[peterbe]

Please be very careful with considering how this would work. In particular, will the banner be overlayed on top or will it be part of the bottom layer? I.e. will the distance, in pixels, from the top of the logo to the browser chrome top, be constant or variable depending on the banner being present?

It matters greatly because it determines how we can choose to display it. For example, if the user hasn't clicked to close it and is part of the path and/or percentage of people who should see the banner, they could potentially get a layout shift if the banner isn't an overlay.

[schalkneethling]

Please be very careful with considering how this would work. In particular, will the banner be overlayed on top or will it be part of the bottom layer? I.e. will the distance, in pixels, from the top of the logo to the browser chrome top, be constant or variable depending on the banner being present?

I will vary depending on whether the banner is present or not. I totally get that this can cause CLS but, that would mostly be an issue if we rely on something like whoami to inform whether we show the banner or not. If it just forms part of the page, it will surely be in the HTML already when it comes from Node.

[peterbe]

Yes exactly. But if it's rendered in the server with the banner as part of the server-side HTML, what should happen if the user has pressed little "X" for closing it? It means, it will load it with the banner in place first and then, once the React hydration is done and we read the localStorage we suddenly remove the banner. That might cause a bit of yucky flickering.

[schalkneethling]

True, perhaps these do not need the ability to be dismissed. They are not as obtrusive as the current implementation and just scrolls away in the end.

[escattone]

True, perhaps these do not need the ability to be dismissed. They are not as obtrusive as the current implementation and just scrolls away in the end.

Good point @schalkneethling! I think that'll work just fine when showing the banner to everyone on either every page or sub-trees of pages. I guess it's more complicated if we have to support showing the banner to a random percentage of users.

[peterbe]

Drive-by comment; we could make it a X% of pages rather than X% of users.
Basically, you could do this in the Node React SSR code:

<div className="header">
  {Math.random() > 0.95 && <ShowBanner/>}
  ...
</div>

Anything to avoid lazy-loading the banner based on whoami because the lazy loading would cause serious CLS for the poor population that's targetted.