Feedback card: grey card with green button

[aviangel-NHS]

One of the options currently being explored by the ComCom team is a variation on the Do and Don't cards.
This variation uses a grey background with a green button

Styling
NHSuk card heading background colour: #4C6272
NHSuk card content background colour: #D8DDE0 with a border: 1px solid #AEB7BD
Green button: Primary button

The cards colours were changed to grey so that it visually differed from other components on the page. It uses the same light grey background as the footer with it's placement being located at the bottom of the page at the end of the page content. The combination of these factors, as well as the content, should hopefully help users identify that this is component is separate from the main content is used specifically to gather information from the user about the page they are viewing.

The grey and green feedback component tested well in both user interviews and the site wide survey experiment. Users were more likely to engage with this component than the blue and white one during comparative tests on the live site.

User feedback during user discovery interviews

• This looks more obvious to the eye – The link stands out more
  You’ve changed it to a little green button that looks more obvious to the eye, it does stand out a lot more.
• That's more prominent isn't it? It stood out more. I like the use of the colour green. It's like green equals Go. It just stands out and makes people more likely to click it. The bigger button is more helpful for elderly people with their aged sausage fingers!

Example of component on page
https://nhsuk-feedback-components.herokuapp.com/version3/in-page-component/in-page-component-option-2
Username: feedback
Pass: test

This github issue can be used to record additional insights into this component and ensure that there aren't any reason against it's wide-scale adoption.

[markasrobinson]

Definitely think it's good to make this component look less like other, more widely used components like care cards, do/don't lists and cards.

Has this component been tested on transaction start pages out of interest? My slight worry being that we regularly see users of start pages scanning the page quickly to look for the Big Green Button, so is there a risk people scanning quickly might see the survey button as the "start now" button on these pages? Would a different colour avoid this, if it is a genuine risk?

[sarawilcox]

See also:

• Ask users for feedback #482 which is part of our EPIC: Survey mechanisms and questions

[Tosin-Balogun]

Definitely think it's good to make this component look less like other, more widely used components like care cards, do/don't lists and cards.

Has this component been tested on transaction start pages out of interest? My slight worry being that we regularly see users of start pages scanning the page quickly to look for the Big Green Button, so is there a risk people scanning quickly might see the survey button as the "start now" button on these pages? Would a different colour avoid this, if it is a genuine risk?

@markasrobinson That was my first observation when looking at the presentation of this. It might collide with other items on the page if that page has another CTA that uses the green button, thereby creating a conflict of hierarchy. I was asking on slack if there was consideration for using lower priority CTA instead.

This is a shameless plug but it relates to an issue I have raised about our button hierarchy prior on issue #417

@aviangel-NHS Years ago when I raised the issue of the feedback mechanism, I started some rough sketch as I was speaking to Ben, Brie, Cameron, Lisa, Sara and Lauren about it. I'd share them here for you to consider if you find them useful

Mural board https://app.mural.co/t/nhsdigital8118/m/nhsdigital8118/1654775423253/ae402070bdb153ac59f6f0c98149965cb6037ddd?sender=u21096ca8c104d247c7525326

[davidhunter08]

Hey @aviangel-NHS, what does the current solution look like? and have you tested anything else?

I'm thinking does the information need to be in a box (and a new component variant)? Also are there other ways visually separate it from the main content?

GOV.UK use a horizontal rule to create that separation for their survey:

I quickly mocked up what it might look like on the NHS website:

[aviangel-NHS]

@davidhunter08 We tested a few variations which we tested with users, some of which have been used in the past to gather feedback
You can see then in the feedback prototype
https://nhsuk-feedback-components.herokuapp.com/
Username: feedback
Pass: test

The grey component with the green button performed better than the other options

[aviangel-NHS]

The GOV service manual suggests "Avoid using multiple default buttons on a single page. Having more than one main call to action reduces their impact, and makes it harder for users to know what to do next."

However if the user clicks the "Report a problem with this page" button at the bottom of the page a feedback form will appear at the bottom of the current page which also has a "Send" green button. This means there will be 2 green (default) buttons on the same page

We haven't tested the grey feedback component on any pages that have a start button. I'm not sure if it would ever be placed on a start page, it would most likely appear at the end of a service journey as users probably want to give feedback until they had completed what they wanted to.

[aviangel-NHS]

@davidhunter08

My logic for the grey component is that it would stand out against other components and the rest of the content. My only concern about using a divider and removing the background colour is that users would miss it. They may assume it was additional content linked to the page topic as it all looks similar especially on long pages.

I used the same grey as the footer for the background of the component. Given its proximity to the footer I hoped that users would understand that it did not relate to the page information but was a global component for gather feedback across any pages it was used.

[aviangel-NHS]

@nancyhalladay24

Nancy is currently exploring using this button for a survey banner on an outcome page on 111 online. They would like the survey to open in a new tab as they don't want any users to loose the service information and advice they have given them.

It's styling is closer to GOV.uk's feedback buttons for "Is this page useful?" and "Report a problem with this page"

It's worth mentioning that this button style doesn't appear in their service manual - Could be refered to as a quiet button

[Laurenlukasiewicz]

Just for visibility the CX/nhs.uk teams are looking to test this component on as many Wagtail housed website pages as possible towards the end of May 2024. It will be used to invite people to the site survey. We will of course be noting the above watch outs and looking out for CTA clash.