Buttons are used to interact with the application (e.g., to submit forms) or navigate between pages.


Introduction

In 2021 the button still remains one of the most essential elements of the user interface. Since the ‘80s, this basic component has been evolving along with other technologies which became available (such as the mouse or a touch screen) and current design trends. In this chapter, we attempt to draw a different view of the button - more universal and detached from trends that come and go.

Fig. 1. Selected examples of buttons as they evolved throughout time: (1) MacOS 9.0 button, (2) Popular button style after 2010, (3) Contemporary button.

Fig. 1. Selected examples of buttons as they evolved throughout time: (1) MacOS 9.0 button, (2) Popular button style after 2010, (3) Contemporary button.

Technically a button is simple in its form. It is relatively easy to create a sophisticated style (often overwhelmingly so) by using different gradients or a combination of shadows, but is this what’s the clue here? Its looks may be perceived as the most important feature of a button, and indeed it is crucial, but here, most of all, we want to present a well-designed, coherent structure of buttons with clearly defined functions.

Let’s shed some light on buttons and their anatomy, usage contexts, semantic meaning, and how they coexist to help answer the following questions:

By the way — isn’t it ironic that while we’re trying to grasp the idea of a virtual button, touchless interface technologies are growing in strength? Perhaps in the coming years, we will try to classify elements of voice or gesture-controller interfaces? Who knows? Anyway, today we suggest we focus on the most contemporary issue of UI buttons.