User interface on sites

Buttons are one of the more well-known interactive user interface elements. They play a very important role in organizing the interaction with the user and creating a positive experience for him. Continuing a series of posts on UI / UX design, this article has collected concepts and examples regarding the most commonly used types of buttons that are found on websites and mobile applications.

Previously, we published a note about the history of changing the design of buttons on sites and in interfaces (since 2009), but now we will consider this element in terms of functionality, purpose and method of its implementation (triggering). This information will be a useful addition to tips for effective button design in interfaces.

It 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 site, turn on the player, and also many other actions. One of the reasons buttons are so popular and user-friendly is that they effectively simulate interactions with objects in the physical world.

Modern user interface buttons are diverse and feature rich. As a rule, they represent an interactive area that stands out noticeably from other objects, has a certain geometric shape and is supported by text that explains the action being performed.

Today, web designers have to put in a lot of effort and time to create effective and visible buttons that stand out clearly and fit naturally into the stylistic concept of a website layout. This can be adding CSS hover effects on hover or custom more complex animations.

buttons in the interface

Next, let”s take a look at the types of buttons most commonly used in mobile and web interfaces.

CALL-TO-ACTION BUTTON

Its main task is to encourage users to perform certain actions, turning them from passive users into active ones. Such “activities” are most relevant in the design of landing pages and are associated, for example, with the purchase of a product, subscribing to a newsletter, etc.

Technically, a CTA button can be implemented in many different ways, but it must be supported by text with a specific call. Its main difference from all the other buttons around is its ability to attract attention. It stands out noticeably on the page / screen and encourages users to take the necessary actions.

The screenshot above is the home page of a company selling books for children over the Internet. There is one key action here that reflects the main purpose of the web page – subscribing to a general newsletter. In this case, the button is designed to be one of the more visible design elements – once the user is ready to subscribe, they can instantly see how to do it.

Everything is very clear here – this is a button with a specific text. Moreover, the word / phrase is not highlighted in any form, tab or something similar, that is, visually the text does not in any way resemble a button in our usual sense. Despite this, this control provides all the necessary capabilities to interact with the interface.

Such objects can often be highlighted with color or underlining via CSS. Very often they are 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) of the elements in the header / header are interactive by default.

It is also used to create additional interactive areas that would not distract the user”s attention from more important controls / calls to action.

Text Button

This sleek 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 recognizable button, and all the rest in the header and tabs differ only in the text about the store offers. This styling approach supports a light and minimalist web page design.

DOWNLOAD BUTTON

Clicking on it displays a drop-down list of mutually exclusive items. This option is often used to enter the Settings section. A selected item from a list is usually marked as active, for example, with a color.

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