Design

Research and rationale

The design of our buttons follows patterns that were set out in the DTA. Further research was conducted into the size and style of these buttons based on NSW and Material design. Using the DTA as a foundation we added active states, increased the height slightly and more colour options and the ability to add leading and trailing icons.

Button size

Our Design System buttons use a height of 48px. There is no hard and fast rule that buttons must be exactly 48px in height, as the ideal button size can vary based on the context and design of the website or application. However, it is commonly recommend that you should use a minimum touch target size of 48px x 48px to ensure that buttons are easily clickable on both desktop and mobile devices (W3C, n.d.).

Material Design guidelines recommend using a minimum height of 36dp (density-independent pixels), which is equivalent to 48px on a standard display density (Google, n.d). However, this guideline is intended as a starting point, and the ideal button size may need to be adjusted based on the specific needs of the website or application .

Colour

Secondary buttons in our Design System can be coloured differently to primary buttons using the secondary action colour. We've done this as a way of being able to incorporate more brand colours into a design and to also align the web content accessibility guidelines which state that colour should be used to draw attention to important buttons and to create visual contrast between different types of buttons (W3C, 2018).

Style

We chose to continue the use of style and not size that was set out by the DTA as a method of visually distinguish the preferred choice among multiple options. This is also supported by Apples material design guidelines which say that when you use buttons of the same size to offer 2 or more options, you signal that the options form a coherent set of choices. If you want to highlight the preferred or most likely option in a set, use a more prominent button style for that option and a less prominent style for the remaining ones. (Google, n.d). There are multiple variations of our button component that also allow for different variations of visual loudness which can assist a user with low literacy so they can use visual loudness to help complete a task.

Buttons as links

Based on the recommendation from the DTA our buttons can also be implemented as links <a> or as buttons <button>. This gives users flexibility so they can make the most semantic markup possible. Using incorrect HTML in certain situations can cause accessibility issues (Digital Transformation Agency, 2018).

Underline on hover

Buttons have an underline on hover in order to address WCAG2.0 Criterion 1.4.1.

1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)

Note: Focus state isn't underlined as it’s conveyed using the global focus outline.

Round corners

The DTA discovered during usability observation that the secondary button and text inputs could sometimes be mistaken for layout or design elements with borders. The border width was increased, and a border radius was added to interactive elements (Digital Transformation Agency, 2018). Due to this we've opted to maintain this stylistic approach for the design of our buttons.