wellcomecollection / wellcomecollection.org

🪟 Wellcome Collection's website and services that support it
https://wellcomecollection.org
MIT License
39 stars 5 forks source link

Cookies banner design #7275

Closed DominiqueMarshall closed 6 months ago

DominiqueMarshall commented 2 years ago

Problem to be solved

In line with recent GDPR rulings re: cookie consent, we need to make our cookie opt-in process explicit.

We need to aim to bring our cookies banner in line with the wellcome.ac.uk version for organizational alignment.

Related to: #7264 and #4816

Acceptance Criteria

jamesgorrie commented 2 years ago

A reference to an issue we had with the overlapping design of the banner that's worth considering https://github.com/wellcomecollection/wellcomecollection.org/issues/6185

DominiqueMarshall commented 2 years ago

@cbowskill @alicerichmond -> Various cookie banner placements as shown this morning are linked below, with the colour variations discussed:

Teal: https://zpl.io/V1Ldj1J - current cookie banner colour Yellow: https://zpl.io/VqMeBL6 Purple: https://zpl.io/aM30ZRm

In each screen, the bottom 3 are the ones that I feel would be worth creating initial prototypes of to gauge people's perception and usage (based on our conversation), but let me know what you think 🙂

cbowskill commented 2 years ago

I'm really not sure about the purple. To the point I'm not sure it's worth testing. Is it worth mocking up a side version instead of doing the purple colour testing? (https://ico.org.uk/)

@GarethOrmerod - would be good to get your thoughts on colourway in relation to the cookies banner (particularly as you've been working through the issues with colours)

DominiqueMarshall commented 2 years ago

Side panel version: https://zpl.io/293e5lz (I adapted the text from the main preferences page)

DominiqueMarshall commented 2 years ago

@cbowskill banner updates below...

1) Banner with "manage preferences" option: https://zpl.io/2jKdwmr

2) Cookie banner option with an explicit decline button: https://zpl.io/bA3wEon Clicking the "Find out more" link would take you to a secondary panel: https://zpl.io/VQ34Ejn / https://zpl.io/agE5NYO

3) For mobile, I'd like to test a version with the banner in the header area to see how that affects/doesn't affect any integral UI: https://zpl.io/VqM4wGm

After talking this through with Tacey and Alice, having the "accept/decline" banner option as an AB test (with the existing cookie banner as the control) feels like the approach to take as a first iteration.

cbowskill commented 2 years ago

Thanks Dom.

I feel the first step, before A-B testing is still understanding the best positioning for the banner (and this can be done pre-dev through some low-fi testing). The purpose is to really define the best positioning before we optimise the wording / button choices within.

In terms of the low-fi testing, have you got a view of which of the variants to test? I'm thinking:

I'm not too concerned about colour choices for the testing, maybe retain the same colour, wording and buttons across all of them just to ensure we're testing positioning only.

DominiqueMarshall commented 2 years ago

For the user panel test, a centre-aligned banner was used.

cookie-banner1

cookie-banner2

Research summary:

The level of understanding of what cookies they are consenting to when they click "Accept" varies. They'll either:

Low-fi prototype unmoderated testing isn't an ideal choice if we want to include those with accessibility needs. One participant wasn’t able to complete the tasks because it wasn’t a live website; they couldn’t use keyboard navigation like they’re used to doing.

Secondary test A version of the cookie banner in the header was also tested with Wellcome staff:

header-cookie-banner

While participants found this to be a good position as it didn’t obstruct anything on the main pages, I feel this approach won’t be feasible on the Wellcome Collection website due to a potential clash with the yellow 'important notice' banner.

Next Steps:

taceybadgerbrook commented 2 years ago

Google has changed their banner to Accept all/Reject all/More options (see post)

rcantin-w commented 6 months ago

Closing in favour of the cookie work that's being done with Civic UK