What is a button in the interface?
CTA button
Text button
This example shows how a doctor interacts with a patient in HealthCare. Clicking on the buttons opens drop-down lists of additional services that the doctor can include in the client’s bill. When you select the option you want, the large button disappears, leaving only the selected option and the small plus button in case you want to look through the list again.
Hamburger button
This button opens the menu list. This implementation got its name from the image of three horizontal lines in the hamburger menu icon, which visually resembles a burger. Currently, it is a widely used interactive technique for mobile and web interfaces, however, heated debates about its advantages and disadvantages are still ongoing. We’ve looked at the alternatives to the hamburger menu and their benefits before.
Hamburger menu button
Here’s an example of a web project using this feature. As you can see, it allows you to hide the extended menu of options 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 / hints about this function. It frees up space noticeably, making the interface even more minimalist and lightweight + saves space for other important layout details. With its help, it is possible to implement a responsive design with hidden navigation elements and an interface that looks harmonious on different devices.
The arguments against the hamburger menu are based on the fact that it can be confusing for people who do not visit websites as often – they can be misled by a sign that looks too abstract. This in turn will cause navigation problems and lead to bad experiences 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 button is still one of the controversial aspects of modern design of websites and mobile applications, it is quite widely used.
Button-plus
By clicking on it, the user will be able to add some content to the system. Depending on the type of application, it can be: new message, contact, location, note, item from the list – everything that is basic actions for a digital device.
Plus button
In some cases, the plus button allows the user to navigate directly to the content creation modal, and sometimes there is also an intermediate step that allows additional options to be selected, which makes adding content more specific.
SELECTOR BUTTON
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 for the design of mobile interfaces for devices with a small display size.
Option button
The example shows a Travel Planner application, where the central interactive element on the tab bar is the plus button (discussed in the previous paragraph) that allows a person to add a new excursion or new service to a specific tour. However, to simplify the work, it is converted into a set of additional buttons corresponding to certain types of content. This allows the visitor to make the right choice at the very beginning and quickly find the desired screen.
SHARE BUTTON
Due to the high popularity of social networks, chatting in instant messengers and e-mail, a type of buttons has been developed that simplifies the process of interaction of an application or website with users’ social profiles. These tools make it easy to distribute content or find company accounts on social networks.
To make the connection process convenient and understandable, icons are used that correspond to easily recognizable logos of certain social services. Even if sharing content is not the key action expected from a visitor on the page, the Share buttons still don’t look like regular ones – they don’t have a special shape, they are not highlighted, they are not underlined, etc.
The person just sees the icons on the page, which are interactive. This solution maintains a minimalist style and promotes efficient use of free (negative) space. It also helps to focus on the main functions / tasks of the application, but at the same time clearly see icons for quick access to social profiles