Removal request - Tabbed Interface : Carousel

[MaryBethBaker]

Hello WET-BOEW community,

I'm writing to request we remove the tabbed interface: carousel from WET-BOEW.

Here's the research and it touches upon usability reasons that we shouldn't have carousels in our ecosystem:
https://twitter.com/CelesteCote/status/1280209644602953729

What's the process for removing something from WET-BOEW and the related systems that use it. Is there a formal process? How will I know the amount of time this might take? Need more research? Need some sort of formal request form? Let me know...

Thanks!
Mary Beth

cc @CelesteCote @pcwsmith @lisafast

[pcwsmith]

we certainly have research showing the problems w carousels. buried in GCpedia somewhere there is a substantial report that @lisafast put together on promo issues generally on Canada.ca, including problems with carousels. Will try to dig that out.

Also looping in @quidampepin as he manages the design system documentation at design.canada.ca.

[Christopher-O]

@MaryBethBaker I'm wondering what kind of alternative solutions could be done for something like Environment and Climate Change Canada's carousel in mobile.
https://weather.gc.ca/index_e.html
I'm not in that department, but I do find it convient on my phone to move through the slides and see the current conditions (mainly the weather and alerts for the most part). Tabs become expand/hides in mobile and I don't know if an accordion expand/hide of 5 different maps would be better or easier to navigate but I could be wrong.

[GormFrank]

@delisma

[MaryBethBaker]

@Christopher-O Great question - I'm planning to work with colleagues at DTO (@pcwsmith @delisma) to determine alternatives for use cases across the GC.

[CelesteCote]

@MaryBethBaker I'm wondering what kind of alternative solutions could be done for something like Environment and Climate Change Canada's carousel in mobile.
https://weather.gc.ca/index_e.html
I'm not in that department, but I do find it convient on my phone to move through the slides and see the current conditions (mainly the weather and alerts for the most part). Tabs become expand/hides in mobile and I don't know if an accordion expand/hide of 5 different maps would be better or easier to navigate but I could be wrong.

I think the best solution is to put promotional items at the bottom of the page (and out of the way of top tasks) like we do on the Canada.ca homepage.

and here is what it would look like on mobile:

[MaryBethBaker]

Hi Team - we found the research:
https://docs.google.com/presentation/d/1ONKdPYLfnOYSrwtwExpUF3ZeafbHGSiFEsxqyEVzJcQ/edit

Mary Beth

[MaryBethBaker]

Ok - so @delisma, @CelesteCote and I are working out next steps. We determined that supporting guidance needs to get updated to support departments with existing carousels to transition from the design pattern to more user-centric, task oriented and evidence based approach (such as Celeste's examples above). This shift involves content design, user-research and content prioritization too.

Once we sort through the next steps including what goes into GCWeb - proto, we'll give some updates to the WET-BOEW meeting.

If anyone has questions, post here. If anyone wants to support us, please self-identify here in the thread.

[quidampepin]

I have a few comments on this:

First, the "official" guidance for the GC is at design.canada.ca, not in the WET-BOEW documentation. In my mind, it would be more important to update https://design.canada.ca/common-design-patterns/carousels.html and https://design.canada.ca/recommended-templates/campaign-pages.html.

It's my understanding that decisions on the design system should come from the Chief of Standards and Guidance (@LPipes4 - Laura Piper) and the Chief of Product Design (@pcwsmith - Peter Smith). The place to discuss the guidance on patterns, IMO, is https://github.com/canada-ca/design-system-systeme-conception.

I actually disagree with removing it completely from the code framework, for a few reasons:

• it may create unnecessary headaches for departments who will have to devote resources and time on pages that are not that important in the grand scheme of things - I don't think having legacy carousels on some pages with very little traffic is a huge issue, and I would prefer they focused on top tasks
• there may be situation where the design works ok for some campaigns (when the bulk of it is for visuals and photos, like the renovations at Parliament Hill, for example)
• totally removing it may create unintended consequences on some pages - a full assessment of all pages using it currently would need to be done
• in this time where resources is scarce and devoted mostly to COVID related stuff, this would be a "make-work" project for several departments.

So, I think we should:

• leave the carousels in the WET-BOEW framework
• update the documentation on https://design.canada.ca/common-design-patterns/carousels.html to strongly suggest not using it
• writing a blog post to encourage departments to drop it on home pages, important campaigns, etc.
• consider not adding that functionality to the next code framework (WET5 or whatever will eventually replace WET)

My point is: yes, we know carousels are bad, but simply removing it from WET-BOEW may not be the best approach to conve that, and may force departments to work on things that shouldn't be a priority.

[delisma]

@quidampepin I think that we all agree that the guidance on Canada.ca will be the official guidance for the use of carousels. But the WET documentation about carousels has to be revised too. This actions should help avoid confusion from the community about where the authority comes from and make the guidance more relevant going forward.

The WET team have no intention to remove the plugin from the code framework as well for the reasons that you mentioned and more. This work is clearly considered as a "road trip", where PCO, DTO and PP will probably take shifts "driving" the whole thing in their spared cycles. Request for decisions will follow appropriate channels in order to clarify everything .

[delisma]

So, I think we should:

• leave the carousels in the WET-BOEW framework
• update the documentation on https://design.canada.ca/common-design-patterns/carousels.html to strongly suggest not using it
• writing a blog post to encourage departments to drop it on home pages, important campaigns, etc.
• consider not adding that functionality to the next code framework (WET5 or whatever will eventually replace WET)

@MaryBethBaker @CelesteCote I think that @quidampepin has laid out a pretty good next steps for us. I would just add a step where the WET-BOEW documentation strongly suggest not using carousels for accessibility concerns.

[CelesteCote]

Ok so I agree we shouldn't proceed in a way that would break things for anyone.

I also think this pattern the Australian government uses (https://www.australia.gov.au/) would be a suitable option to replace the carousel in the next framework (or as soon as humanly possible; it would be great to provide departments an alternative option sooner).

I also agree a blog post would be great —I've had several chats now about how it's not only the element itself, but a lack of understanding of how to use something like that strategically and in what context it is and is not appropriate, which reminds me of the blog post on avoiding FAQs with one exception.

That said, I'm concerned a blog post won't be enough for people to listen; it needs to be mandatory somehow. Happy to discuss further and recognize this is not a burning priority. It's just one that keeps coming up.

[CelesteCote]

I also think this pattern the Australian government uses (https://www.australia.gov.au/) would be a suitable option to replace the carousel in the next framework (or as soon as humanly possible; it would be great to provide departments an alternative option sooner).

Below is what it looks like on mobile, which only shows one item at a time. One of the problems with carousels is that people rarely click past the first item. I wonder if there is a way to randomize the order in which items show upon refresh (the way we do with some promos on Canada.ca and the PM splash page images work like this also)?

[Christopher-O]

@CelesteCote that's really funny you brought that up because in our intranet I did prototype something similar with our existing carousel by just changing a few classes around (no custom CSS at all)

We never went forward with it, and never really optimized it for mobile, though I something like an accordion expand/hide of some sort. Never got that far though.

[MaryBethBaker]

Adding this page of examples to the discussion, is there a way to coordinate the usability and design best practices into the examples on this page?
https://wet-boew.github.io/v4.0-ci/demos/tabs/tabs-carousel-en.html

[quidampepin]

If we will produce more guidance and examples about carousels, it should be within the design system space: https://design.canada.ca/common-design-patterns/carousels.html.

We're trying to unify all guidance under the design system umbrella, slowly but surely...