Creating the perfect landing page (for example, successful sites)
There is nothing more exciting in working on a site than when all the specialists join their own efforts to create a new ideal landing page or the main page…

Continue reading →

Gamification on the site: what is it and why is it necessary?
Currently, on a variety of sites, including business sites, you can find elements of the so-called gamification (gamification, gamification) - a technique that turns user interaction with the site into…

Continue reading →

Jpg image optimization
So, the graphics for your pages are ready. But it's too early to upload it to the server, as it has already been said more than once - if the…

Continue reading →

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.

CTA Button
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.

Text button
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.

Text button
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.

Furniture site design
Immediately after the publication of the post with the best examples of furniture sites, we came across an interesting English-language article with a similar theme. It contains a selection of…

...

Effective website footer design
Developers often overlook that the footer for a site (translation from English footer / basement) is one of its basic elements. It can provide more complete information about the company,…

...

Web Design Trends 2015
Many areas of activity are subject to the influence of fashion, including web design. And, for example, even before the onset of 2015, both web design specialists and potential website…

...

How to make a menu for a site? The main features of the menu selection
Whatever the site, without which it certainly cannot do, is without a menu. And often on one site there are several menus at once - for the main and additional…

...