guardian
Implement new edition switcher
Updated 20 June. Now simplified and good to pickup
We handle editions in a potentially confusing way.
A UK-edition user, visiting theguardian.com/us will see the us-front, but not necessarily understand what it is they're looking at.
Design is working on a new element to make this clearer to users, and give them the option to go back to their default front if they've ended up there by accident (or been sent there incorrectly by a search engine).
The idea is to show this to users who are viewing a network front which isn't their network front. So a UK edition user viewing /us for example. If they've chosen to switch editions via the switcher, this does not apply.
Mobile:
https://www.figma.com/proto/WnlDynuImNeWe0b28BkT1L/Editions-Switch-Banner?node-id=227-9633&t=HqZX6GFk89l8uE5o-0&scaling=min-zoom&page-id=157%3A31814&starting-point-node-id=227%3A9633&show-proto-sidebar=1&hide-ui=1
Desktop: https://www.figma.com/proto/WnlDynuImNeWe0b28BkT1L/Editions-Switch-Banner?node-id=334-13639&t=HqZX6GFk89l8uE5o-0&scaling=min-zoom&page-id=157%3A31814&starting-point-node-id=334%3A13639&show-proto-sidebar=1&hide-ui=1
– You see this if the network front you are on is not the default for the edition you are on – If you click the button, you switch page – if you dismiss it, you stay on the same page – if you then visit that page, you see it again - regardless of whether or not you a) didn't interact, b) clicked OK, or c ) dismissed
Note in particular:
- This bar is to be shown when a user is viewing another network front (not their network front)
- In this situation on the desktop, the Edition switcher on the top right reads just "Edition" instead of "[current] Edition"
- There is a sticky behaviour as the user scrolls.
- Can we put some tracking on the act of clicking any of the buttons please.
Additional features for editorial:
- For internal use only we'd like a way to opt-out of seeing this message. Maybe a url they could visit that sets a long-lived cookie that suppresses this message?
- We'd like to not show this in preview in the fronts tool.
We shouldn't release this without giving editorial a heads-up!
Chat with @ashishpuliyel if you have any questions
Sticky with no close button?! What if the user is intentionally viewing a different network front? I can see those users finding this banner very annoying.
The only way to view a different network front is to know the url (or be sent there by google acting strange). If you use the edition switcher to view it - which is the only interface we have at present - you also change edition. The way our site is at present, the fact that you can view a different network front without changing editions is more a side effect of them having different urls than an intentional choice.
Our current expectation is the vast majority of users who see this banner will not understand without it that they're viewing a different network front than they expect.
@domlander based on your personal feedback it's now got a close button.
@ashishpuliyel Regarding this requirement:
In this situation [where we show the banner] on the desktop, the Edition switcher on the top right reads just "Edition" instead of "[current] Edition"
This does result in a small amount of CLS and a flash of content as, for example, "US edition" is updated to "Edition". This is because the edition is rendered on the server and we only know whether or not to show the banner on the client. Should I proceed with this requirement?
I'm happy to accept flash of content. Less thrilled about shift, but this is going to be horizontal, not vertical right? Presumably "US Edition" is taking up the same vertical space as the new "Edition"? I think I'm prepared to accept it for now.
Question: Why do we not know about the banner server-side? All three: geo, any edition cookie, and the requested page are available server side?
Oh I thought the user's preferred edition cookie wasn't available server-side as it goes through Fastly. If we can access that cookie server-side then those problems go away!
Good news, we can access that cookie server-side 🙌
This does mean that users with the "hide the banner" cookie will see a flash of content, as the banner will render server-side and we access this cookie client-side.
For internal use only we'd like a way to opt-out of seeing this message. Maybe a url they could visit that sets a long-lived cookie that suppresses this message?