Main types of user interface buttons on websites and apps
Buttons are one of the most well-known interactive elements of the user interface. They play a very important role in creating interaction with the user and creating a positive experience for them. Continuing a series of posts on the topic of UI / UX design, this article has collected concepts and examples related to the most commonly used types of buttons that are found on websites and in mobile apps.
Previously, we published a note about the history of button design changes on websites and in interfaces (since 2009).now we will look at this element in terms of functionality, purpose, and how it is implemented (triggered). This post is a translation of this article from Tubik Studio.WHAT IS A BUTTON IN THE 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 communicate directly with the device and send the necessary commands to achieve certain goals, such as sending an email, buying a product, uploading data to the registration form on the site, turning on the player, and 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 multi-functional. They are usually an interactive zone that stands out from the rest of the objects, has a certain geometric shape, and is supported by text explaining the action being performed.
Today, web designers have to put a lot of effort and time to create effective and noticeable buttons that would clearly stand out and naturally fit into the stylistic concept of the website layout. This can be adding CSS hover effects triggered by hovering or a special more complex animation.
buttons in the interface
Next, let’s look at the types of buttons that are most widely used in mobile and web interfaces.
CALL-TO-ACTION BUTTON CTA (CALL-TO-ACTION)
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 related, for example, to purchasing a product, subscribing to a newsletter, etc.
Technically, the CTA button can be implemented in different ways, but it must be supported by text with a specific call. Its main difference from all other buttons around is its ability to attract attention. It stands out prominently on the page / screen and encourages users to perform the necessary actions.
The screenshot above shows the main page of a company that sells books for children over the Internet. There is one key action that displays the main purpose of the webpage-subscribing to the General mailing list. In this case, the button is designed to be one of the most visible design elements – as soon as the user is ready to subscribe, they can instantly see how to do it.
Here everything is very clear — this is a button with a certain text. Moreover, the word / phrase is not highlighted by any form, tab, or something similar, that is, the text does not visually resemble a button in the usual sense for us. However, this control provides all the necessary features for interacting with the interface.
Such layouts can often be highlighted in color or underlined using CSS. They are often used at the top of the template as navigation that provides access to the main sections of content. In this case, the buttons are not specifically marked, since all (or most) elements in the header / header are interactive by default.
This technique is also used to create additional interactive zones that do not distract the user’s attention from more important controls/calls to action.
This elegant design is designed for an 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 recognized button, and all the others in the header and tabs differ only in the text about the store’s offers. This approach to design supports a light and minimalist web page design.
BUTTON WITH A DROP-DOWN LIST
When you click on it, a drop-down list of mutually exclusive items is displayed. This option is often used to log in to the Settings section. The selected item from the list is usually marked as active, for example, using a color.
Button with a drop-down list
This example shows how a doctor interacts with a patient in the HealthCare app. Clicking on the buttons opens drop-down lists of additional services that the doctor can include in the client’s account. When you select the desired option, the large button disappears, leaving only the selected option and a small button-plus in case you want to view the list again.
Use this button to open the menu list. This implementation gets its name from the image of three horizontal lines in the hamburger menu icon, which visually resembles a Burger. Currently, this is a widely used interactive technique for mobile and web interfaces, but there is still a heated debate about its advantages and disadvantages. We have already considered alternatives to the hamburger menu and their advantages.
Hamburger menu button
Here is an example of a web project that uses this feature. As you can see, it allows you to hide the extended options menu, so as not to distract visitors from the stylish visual design and key information.
Active Internet users know in advance that the hamburger button hides various categories or additional content, and they do not need explanations or hints about this feature. It significantly frees up space, making the interface even more minimalistic and light + saves space for other important layout details. It allows you to implement an adaptive design with hidden navigation elements and an interface that looks harmonious on different devices.
Arguments against the hamburger menu are based on the fact that it can confuse people who do not visit websites as often-they can be misled by a sign that looks too abstract. This, in turn, will cause problems with navigation and will cause the formation of an unsuccessful experience when visiting the site. Thus, the decision to use the hamburger button should be made only after researching the target audience and determining its capabilities and needs.
And although the use of this type of buttons is still one of the controversial points of modern design of websites and mobile devices.of course, it is widely used.
When you click on it, the user can add some content to the system. Depending on the type of application, it can be: a new message, a contact, a location, a note, an item from the list — all that are basic actions for a digital device.
In some cases, the plus button allows the user to go directly to the modal content creation window, and sometimes there is also an intermediate stage that allows you to select additional options, which makes adding content more specific.
BUTTON WITH A CHOICE OF OPTIONS
After clicking it, a set of available options opens — this is another way to set the desired type of interaction without overloading the screen, which is especially important in the design of mobile interfaces for devices with a small display size.
Button with a choice of options
This example shows the Travel Planner app, where the Central interactive element in the tab bar is the plus button (discussed in the previous paragraph), which allows a person to add a new tour or service to a particular tour. However, to simplify the work, it is converted into a set of additional buttons that correspond to certain types of content. This allows the user to make the right choice at the very beginning and quickly find the desired screen.
THE BUTTON “SHARE»
Due to the high popularity of social networks, messages in messengers and e-mail, a type of buttons has been developed that simplify the process of interaction between an app or website and users ‘ social profiles. These tools allow you to easily distribute content or find company accounts in social networks.networks.
To make the connection process convenient and clear, use icons that correspond to easily recognizable logos of certain social services. Even if sharing content is not the key action expected of a user on a page, the “share” buttons still don’t look like normal ones – they don’t have a special shape, are not highlighted in color, are not underlined, and so on.
A person simply sees icons on the page, which are interactive. This solution supports a minimalist style and contributes to the effective use of free (negative) space. It also helps you focus on the main functions/tasks of the app, but still clearly see icons for quick access to social profiles.
In the elegant and minimalistic layout of the construction company’s website, icons for corporate social accounts are located in the lower – left corner. They are quite noticeable, but they do not distract attention from the key navigation and the object with a call to action.