Create cta component

[jholt1]

Outcome

To create a call-to-action component that allows users to take action once they are ready for it

Scope

Properties

• Type
• Loading *
• Loading-message *
• Icon *
• Href

Attributes

• Role (button)

Token

• Type
• Loading-message
• Loading-icon
• icon-position
• Icon *
• Forbidden icons

State (active/focus/disabled/hover)

• Color
• Background
• Outline
• Border

Key: * = Optional

[jholt1]

Future work

• Only icon cta (should it be part of this component or it's own)
• Multiple icons (properties - icon-start, icon-end)

[RobTobias123]

Discovery work...

Rationale

Rounded corners

Rounded corners are not only easier for our eyes to process, but they also make information easier to process.
Rounded corners are easier on the eyes than a rectangle with sharp edges because they take less cognitive effort to visually process. The fovea is fastest at processing circles. Processing edges involves more activity in the brain. Therefore, rectangles with rounded corners are an easier process because they look closer to a circle than a regular rectangle.
Sharp corners point outward putting less focus on the contents inside the rectangle. Rounded corners make information easier to process by drawing our attention to the contents of an element.
They also make it hard to tell which of the two sides belong to which rectangle when two rectangles are next to each other. This is because each rectangle side is exactly a straight line. The sides of a rounded rectangle are unique because the lines curve towards the rectangle it belongs to.
Ref: uxmovement.com

Dark Grey, not Black

#333333 dark grey + #FFFFFF white is not as stark as using #000000 for slightly less contrast making it a bit easier on the eye for normal vision whilst still high enough to be fully AAA WCAG compliant.
Pure black text can cause eye strain. A survey found that “58 percent of adults in the U.S.” have experienced eye strain from working on computers.
Ref: uxmovement.com

Optimal size, 42px – 72px height

A study by Zhao Xia Jin (Honeywell, Shanghai) found that users had the lowest touch accuracy on buttons that were less than 42 pixels height. Buttons that were over 72 pixels also had low accuracy. This means that 42 pixels is the minimum and 72 pixels is the maximum button size that’s most optimal for users.

Open Sans Bold

Adds visual weight to the button, attracts attention and implies importance. Also helps legibility (particularly when reversed out) and reduces eye strain.
Open Sans is a clean and modern sans-serif typeface designed by Steve Matteson and commissioned by Google. It is specially designed for legibility across print, web, and mobile interfaces. It is also a web-safe font. Web-safe fonts are important for website design, ensuring it looks good across all devices.

Icons

The dimensions of each icon target are 24px sq. This passes the W3C’s WCAG Target Size Success Criterion.

States

Active state is the default state when a button is clickable.
Hover state is for desktop use when a mouseover event occurs. The grey becomes black, the text underlines and and becomes black on the secondary buttons, and the borders become deeper and turn black.
Focus state uses a meaningful colour outer border. It is ‘Muon Purple’ (#7700FF) to help distinguish it from the rest of the button and create clear identification of focus when tabbing.


Disabled state does not need to meet colour contrast ratios. The W3C states:
“1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:
Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
Logotypes: Text that is part of a logo or brand name has no contrast requirement.”

(Loading state is still to be looked into.)

[RobTobias123]

Update: Accent colour 'Muon Purple' now identified as #644BED. Sketch file updated...

[andij]

Here's a link to the Google Fonts page for Open Sans:
https://fonts.google.com/specimen/Open+Sans?query=open+sans

Download and install it to view the correct font in the Sketch file.

How to guide: https://support.apple.com/en-gb/guide/font-book/fntbk1000/mac

[RobTobias123]

Icons update:

The dimensions of each icon target are 24px sq. This passes the W3C’s WCAG Target Size Success Criterion. All icons are using SVG based Font Awesome 6 Free. You will need to download it and install in your fomnt manager to view them in the Sketch file. https://fontawesome.com/download

[RobTobias123]

Slightly adjusted icon size down to 20px with a 24px sq as there was no bounding box in font awesome meaning the larger icons were touching the edges. Now better balance with text. Also added the arrow-rotate for loading state example.

[RobTobias123]

Update - the text of the loading state should also change to indicate that something is happening...

...in combination with the rotational animation of the icon.

[RobTobias123]

Update to align with the agreement in Refinement around the meaning of the Active state...

Default state is the default state when a button is clickable but is not being interacted with.

Active state is shown at the moment a user clicks the button. Using Muon Purple contrasts against the previous state and is momentary (for the duration of the click).

[andij]

States

We can leverage the Chroma.js for colour conversions, which may help to implement the different states of the button.

Reference:

https://gka.github.io/chroma.js/

As an experiment I've introduced the colour midgrey with the value of #777777 in #60

Transforming this colour with 2.775 results in #000000 with darken and #FFFFFF when using brighten.

We should be able to use Chroma.js to generate the tokens for mid-steps of a colour.

It'll be a powerful addition to the colour and accessibility tooling.

Be aware that this uses L*a*b* colour space.

This can quickly get very complex.

Bidirectionally

Applying a reading direction to the document or the component with dir="rtl" should honour the expected behaviour of a right-to-left language.

Use of text-align should be replaced with a suitable technique to ensure this behaviour is not impacted.

Reference:

https://material.io/design/usability/bidirectionality.html#mirroring-layout

https://rtlstyling.com/posts/rtl-styling#introduction-to-rtl-styling

https://meyerweb.github.io/csstdg4figs/ (search for direction)

Consider Localisation if there's content that is displayed within assets. For example, if an icon displays a number to indicate a duration '30', then consider how this may be translated to other languages.

Reference:

https://material.io/design/usability/bidirectionality.html#localization

Icon

It will be necessary to change the direction of the arrow within the button when the reading direction is changed from ltr to rtl.

Windows High Contrast

Spending the time to test and design with Windows High Contrast is a responsible thing to do. It helps concentrate the design effort towards an inclusive result.

Microsoft spent time to standardise High Contrast features in Edge during the re-platform on top of Chromium.

Reference:

https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/

Offset

Include an offset to the outline when the button is in focus. This helps to identify that the button is in focus in High Contrast. Often the border and outline are both solid and display in the same colour.

Border

If the colour of the button is to be flat, choose the same colour for the background and the border. The border will display in High Contrast settings to identify the button.

Without including a border, it's most likely that the background of the button will be the same background of the page.

SVGs

At the time of writing, the colour of an SVG icon does not inherit the High Contrast system colour when using currentColor as it used to. (it was broken by a recent CSS specification change)
https://melanie-richards.com/blog/currentcolor-svg-hcm/

It looks like this will be fixed in a future release. It effects both Chrome and Edge. Firefox doesn't appear to respect Windows High Contrast in the same way.

[RobTobias123]

Thanks for the info Drew.

States
Yes, that’d be good to use Chroma.js for brighten/darken of colours on states - using L*a*b* (CIELAB not Hunter) is fine too - Sketch only supports Hex but I can convert the values for reference.

Bi-Dir
Absolutely - if Muon is to be language agnostic too, this must be considered. On the CTA the icon can be switched out with its opposite counterpart easily (eg. Arrow-left/arrow-right), but I will add an alternative start/end position variant too to demonstrate that option too.

Win Hi-Contrast
Initial design created with this in mind (eg. The primary variant looks flat shape but actually has a border of the same colour as its fill for this reason) but yes I will certainly test its performance in this mode to be sure.

SVGs
Icons being used are Font Awesome – technically a font, not a placed SVG. So will it behave as such in High Contrast Mode? We need to check this, but I think it may be easier to test with a built HTML component using the font?

[andij]

Thanks Rob,

The only point to mention is about the icons being SVGs and not a font. The Fontawesome icons are consumed by Muon as SVGs.

Here is where we provide the URL to the CDN for the icon component to consume:
https://github.com/centrica-engineering/muon/blob/feature/cta/packages/library/components/icon/src/token.json#L19

e.g.:
https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.1/svgs/solid/arrow-right.svg

[andij]

Here is a screenshot of Firefox with the first pass at styling the cta.

Here is Edge in Windows High Contrast.

[andij]

PR for cta enhancements and styling - https://github.com/centrica-engineering/muon/pull/67/files

[RobTobias123]

Updated designs for the buttons showing start/end icons, and 'spinner' loading state icon, updated minimum widths etc...in line with Drews coded examples.

[RobTobias123]

Hex colours used converted to LAB values for use in Chroma.js