New Buttons, now more buttony

[rnickr]

To be read in a radio advert voice

Are your buttons suffering from a lack of button recognition? Do people sometimes skip past them without realising that a world of clickable adventure awaits?

Well, our button's did. That why we came up with.... New Buttons.

New Buttons are a revolution in Button design, leveraging the latest in button building technology. Gone are the flat buttons of the past. Utilising the power of corner radius and box shadow, New Buttons now look more like... real buttons.

"I never realised these square things we're clickable. Now, with New Buttons, i'll never miss a newsletter sign up again." - User 1

We're so confident in the ability of New Buttons we're going to test them out.

---

Normal service resumes

So we are looking to run an A/B test on our Button pattern. Info on the A/B test is here: https://nicedigital.atlassian.net/wiki/spaces/NDS/pages/2201551050/A+B+test+-+Button+style+for+Design+System+pattern

The idea is that our buttons could be more buttony. They are currently 'flat' - no indications of depth which can help users understand that it is a button that is clickable (like a real world button). Likewise there are some suggestions that rounded corners can help users understand buttons are buttons.

NHS digital had a similar issue with their button style: https://service-manual.nhs.uk/design-system/components/buttons

Variations
I've created some button variations here: https://xd.adobe.com/view/4a0a2266-759d-432b-ba3b-bad2690e73eb-1f59/

The new variations are based on the current button styles (https://nice-digital.github.io/nice-design-system/foundations/buttons/) but add a 3px corner radius, and various shadow styles. We need to agree what style/s to test. If you have an idea for a button design yourself then please mock it up. Based on research and best practice buttons tend to come down to the 2 basic styles i've created.

Some thoughts on the various styles
Looking around, most buttons don't have a border on them. Ours do at the minute - this seems to helps when buttons are placed on different coloured backgrounds, seems sensible to keep this as is. The border does interfere a bit with the solid shadow style though.

The 'solid' shadow style seems to work better on different coloured backgrounds than the blurred shadow, but this type of shadow is less realistic (less like real world shadows).