#5 The Making of a Button

The Making of a Button

On the surface, buttons are simple. Everybody knows that if you click it, something might happen. 

We do it dozens of times a day. In the real world, a button may light up on press or make a sound. On our devices, buttons have their own set of features that help bring that real life “click” affirmation to the user interface. That affirmation helps tell the user that the element on the user interface can be interacted with, and once it has been clicked – the user needs affirmation that the interaction has happened.

Maybe buttons are not that simple after all?

So… why are we talking about a button? The button is the single most important element when designing a trading flow. It is what the user clicks to execute that RFQ, or place that million dollar trade. Therefore, creating functional, cohesive and accessible buttons is a vital aspect of the workflows we design, significantly influencing the daily operations of our end users.

Let’s dig into everything that goes into a button.  If we’re starting with a regular old rectangle, what do we need? Let’s say we have a label and main color - blue, these are the visual attributes of a button. We also know that a button is something that you click, so it will need to visually show that the user can interact with that rectangle they see on the page. Lastly, we need to ensure the button is accessible, not just visible in the interface but also through keyboard navigation and screen readers, so that it is easily discoverable on the page.

The Appearance of a Button

We briefly mentioned above how a button should look; it is a rectangle, has a label and a main color of blue. When you read that, you probably formed some sort of idea in your mind of what it could look like… but each individual's interpretation of how an element looks can be different, unless there are a set of design principles that can be followed and everyone is speaking the same design language.

How do you create consistency within the Design System/UI Toolkit? 

When designing components, we have to apply a set of overarching design attributes that can be utilized to ensure that all elements within a design system, including buttons, all look and feel the same. These attributes include things like color, height, font size, padding (the spacing within the button), or border radius (if the corners should be rounded or not) that help to create a visual aesthetic that will become associated with all of the buttons in the user interface.

Let's think about this scenario:

Imagine a workflow where a trader receives a quote, they have two options: Accept or Reject. The trader has 30 seconds to review the quote, make a decision and respond.

With a click of a button, they respond. But what happens if the trader presses the wrong button? That could cost them millions. This is why the appearance of a button is so important. 

How can buttons help drive the users’ workflow? 

Having a design system with several different button styles (Primary, Secondary, Tertiary) can enable designers to have a choice of which style to use when creating and designing a workflow. The overall look and feel of the buttons will remain cohesive, using the overarching design attributes and states - yet the color, or some other visual attributes, can be different to help users easily differentiate between choices they need to make in their workflow.

Making Buttons Interactive

Now that we understand how the appearance of the buttons will look, let’s think about how the interactive elements of a button will work. Each button will find itself in a variety of “states” when a user interacts with it. States are something that allow for users to intuitively interact with elements on the UI. By having different "states", buttons can have a different appearance/affordance as someone's mouse moves over it or a user clicks and releases…the element changes. 

For example: When hovering over a button, the background color changes. There could be a slight shadow behind the button for example to help the user see that it is accessible and has the ability to be interacted with. Each state has its own color styles, as well as animated transition effects within the design system (a collection of reusable UI components). The color of the button will transform as the user interacts with it. Having these types of state changes on interactive UI elements help to demonstrate which elements can be clicked and interacted with on the screen.

Accessibility

When building a design system, accessibility is always a main area of focus, particularly for elements like a button. All elements must be discoverable, both literally and in the visual sense. A button must be “focusable”, meaning a user can navigate to it with the keyboard. This is required for assistive software like screen readers, and also a must for the average capital markets user. 

In the US, there are specific accessibility requirements defined within the  Americans with Disabilities Act (ADA), which organizations are legally bound by. In other parts of the globe, it is common practice to follow the Web Content Accessibility Guidelines (WCAG).

ADA compliance provides standard definitions for the following:

• Color Contrast

Ensure that the contrast between the button's color and text meets accessibility standards to ensure that it is easily visible for all users. This involves a shift in color and transition.

• Interactive Element Labels
  

Known as ARIA labels, these are used to provide additional information to assistive technology users about what an interactive element’s role is on the page.

• Focus States
  

Ensure that the focus state is clearly visible and distinguishable from the other states of the button to aid in keyboard navigation.

• Keyboard Navigation
  

Ensure that the button can be discovered and activated using the keyboard. 

• Labeling
  

Use clear and descriptive text on the button that clearly conveys its purpose and the action it triggers to ensure that all users can understand its functionality.

• Size and Shape
  

Ensure that the size and shape of the button are large enough to be easily clickable and legible for all users.

When using Adaptive’s UI Starter Kit, these accessibility principles and practices are baked in from the start. However, design teams still find it important to test and validate that the button is compliant by testing component designs for accessibility using a variety of design tools and adhering to common design principles. Developers build in compliance testing as part of pipelines, which test the components in an actual browser.

The Button is Ready For Release: now what?

Now that we have seen all of the different aspects that go into designing a button, we must think about how the button must also function as a part of a larger, cohesive design system. When building a design system, our expert designers focus on creating elements that are usable, cohesive, scaleable and accessible. This ensures that when new elements are added to a trading application, it fits into the grand scheme of things. 

While this level of detail and thought goes into each component, Adaptive’s experience and expertise in this area makes this detailed approach second nature. This detailed approach is utilized when our team built out the Adaptive UI Starter Kit.

I hope you enjoyed this deep dive into the world of buttons. If you choose to bring this inclusive design driven approach to all elements on the screen, your users will notice it. 

View our earlier blogs:

#1: Creating successful products, quickly!

#2: The Crucial Role of Design Systems and UI Kits in Financial System design

#3: Introducing Adaptive’s UI Starter Kit Accelerator: Fueling Seamless Design Transformations

#4: Unveiling the Mechanics: A Technical Intro into Adaptive’s UI Starter Kit

Author: Chuck Danielsson, Head of UI Practise - US and Cortney Stauffer, Head of UX Practise - US