The main types of user interface buttons
Buttons are one of the most famous interactive user interface elements. They play a very important role in creating user interaction and creating a positive experience. Continuing a series of posts on UI / UX design topics, this article has collected concepts and examples regarding the most commonly used types of buttons found on websites and mobile applications.
Previously, we published a note about the history of changes in the design of buttons on sites and in interfaces (starting from 2009), but now we will consider this element in terms of functionality, purpose and how it is implemented (triggered). This post is a translation of this article from Tubik Studio.
user interface buttons
What is a button in an interface?
This is an interactive object that allows you to get the desired response from the service / application after executing a specific command. In fact, the button is a control element that allows the user to directly communicate with the device and send the necessary commands to achieve certain goals, for example: send an email, buy some product, upload data to the registration form on the website, turn on the player, and also many other actions. One of the reasons for the popularity of buttons and their convenience for users is that they effectively simulate interaction with objects in the material world.
Modern user interface buttons are diverse and multifunctional. As a rule, they are an interactive zone that stands out from the rest of the objects, has a certain geometric shape and is supported by a text explaining the action being performed.
Today, web designers have to make a lot of effort and time to create effective and noticeable buttons that would stand out clearly and naturally fit into the stylistic concept of the website layout. This can be the addition of CSS hover effects that work on hover or a special more complex animation.
buttons in the interface
Next, we consider the types of buttons that are most widely used in mobile and web interfaces.
CTA (Call-To-Action) Button
Its main task is to encourage users to perform certain actions, turning them from passive users to active ones. Such “activities” are most relevant in the design of landing pages and are associated, for example, with the purchase of goods, subscription to newsletters, etc.
Technically, a CTA button can be implemented in various ways, but it must be supported by text with a specific appeal. Its main difference from all the other buttons around is its ability to attract attention. It stands out on the page / screen and encourages users to perform the necessary actions.
In the screenshot above is the main page of a company selling books for children over the Internet. There is one key action that displays the main purpose of the web page – subscription to the general newsletter. In this case, the button is designed in such a way as to be one of the most noticeable design elements – as soon as the user is ready to subscribe, he will be able to instantly see how to do it.
Everything is very clear here – this is a button with specific text. Moreover, the word / phrase is not highlighted in any form, tab or something similar, that is, visually the text does not resemble a button in the usual sense. Despite this, this control provides all the necessary features for interacting with the interface.
Such objects can often be highlighted or underlined through CSS. Very often they are used at the top of the template as a navigation that provides access to the main sections of the content. In this case, the buttons are not specially marked, since all (or most) of the elements in the header / header are interactive by default.
Also, the technique is used to create additional interactive zones that would not distract the user’s attention from more important controls / call to action.
This sleek design is designed for the online fashion store. As you can see, the interactive part of the interface is based on text links. Here, only one object with a call to action (Shop new arrivals) is represented by an easily recognizable button, and all the others in the header and tabs differ only in the text about the store’s offers. This design approach supports a lightweight and minimalist web page design.
Drop down button
When you click on it, a drop-down list of mutually exclusive items is displayed. This option is often used to enter the “Settings” section. The selected item from the list is usually marked as active, for example, using color.
Drop down button
This example illustrates the doctor-patient interaction process in the HealthCare application. By clicking on the buttons, drop-down lists of additional services are opened.