How to create a button: 7 tips to click on it

Successful or unsuccessful results are reduced to one click. And whether a click (or clicking on the sensor) will be affected by many small factors.One small factor that plays a big role is the design of the buttons themselves.

They are everywhere: on e-mail, home pages, various sites, contact forms and shopping carts of online stores. Most of the 4,000,000,000 pages on the web have navigation buttons.

Designers do not always agree with the design of the button at the stage of website development , but there is a lot of research on this topic. We list seven types of button design for the site.

1. Use of inducement words

First of all, every click of each button is a metaphor for action. Therefore, the button should contain phrases that prompt actions. They should begin, preferably with verbs. Such a word will clearly explain to the visitor what actions will occur if you click on the button.

It turns out that, buttons without verbs, such as:

• Subscription to the newsletter;
• Download descriptions;
• Additional Information.

… will become more effective when the verb is added …

• Subscribe to the newsletter;
• Download description;
• To learn more.

2. Your button matches the WYLTIWLT test (Would You Like That? I Would Like That)

Now that the appropriate text for the button has been found, make sure that the button passes such a test. You need to add two phrases in front of the text on the button and see if the resulting sentence is logical.

• Would you like [text on a button]? (Would You Like That?)
• I would like [button text] (I Would Like That).

In other words, check whether the text in the button can be read as if “on behalf of the site”, as well as on behalf of the visitor. If the text in the button «Go to section …», it will read as » Would you like to go to section …? «And» I would like to go to the section …? «. Since in both cases this phrase is logical, the text in the button passes the test.

If the text in the button » View your results «, then if you ask a question, it turns out » Would you like to see your results? «And» I would like to see your results . » The second option is not very suitable here, so this text will not pass the test. This quick way to make sure that the text on each button, starting with a verb, works on behalf of the marketer, as well as on behalf of the visitor to the site. By the way, every Facebook button with a word-action passes this test!

Such a method was proposed by Jonathan Richards, who created this abbreviation: WYLTIWLT.

3. Me or you: from the first or from the second person?

Using pronouns is an alternative to neutral phrases. But pronouns should be used with caution. The developers tested the texts using pronouns from the first and second person, creating two buttons with words-actions. And this is what they noticed.

The button with a pronoun from 1 person (“Create my account”) was pressed by 24% more visitors than the button with a pronoun from 2 persons (“Create your account”). The developers say that the inscriptions in the button with a pronoun of 1 person work better, because they speak for the visitor who performs the action, that is, from the person who holds the mouse or clicks on the screen.

Eugene Schwartz once said that you need to «insert the conversation that the visitor leads in his head.» And therefore, if visitors see your calls for action, then they themselves need to talk about what they want to do. («I want to…»)

4. Use colors that contrast with other elements.

Our eyes continuously scan the space, looking for elements on which the gaze stops. Everything that creates contrast with the environment automatically attracts attention. Such a phenomenon is the basis of the nature of our vision and brain, called the Von Restorf effect.

This phenomenon can be used in the design of buttons using contrasting colors, and in this way it will be possible to attract attention and induce the desired action. For example, against a blue background with prevailing cool colors, elements of a warm color scheme, such as orange buttons, will be visually noticeable.

Color is an effective tool for creating a stand-out button, but this method is not the only one. You can also use the size, location, or eyes of people in nearby images. It is important to make sure that the desired actions are high enough in the visual hierarchy of the page.


5. Make a large button

Actual for users of smartphones and tablets. The user should be given the opportunity to comfortably press the button, both from the smartphone and from the tablet. Consequently, the size of the hemp should be consistent with the human finger. Apple recommends a minimum button size of 44×44 pixels, but MIT Touch Lab research shows that the average size of the index finger is (if translated into pixels) 45×57.

This is due to the fact that the fingertip is not round, but oval. And the thumb is slightly larger. If it is assumed that the button will be pressed with the thumb (if, for example, it is located at the bottom of the tablet application), it can be made wider: 45×72 pixels.

6. Reduce your engagement level (“Start shopping” instead of “Buy now”)

A number of actions lead to greater commitments than others. So are the buttons — some of them mean more commitment. They can cause different psychological reactions and cause more anxiety. If the action button causes the visitor to lose time or money, then he is less likely to click on it. The button languages ​​for the two “Start Test” and “Read Review” were tested. The second button received 124% more clicks.

All the difference is in the amount of obligations. The “Start Test” button makes the visitor think that clicking on this button will involve him in a potentially lengthy process. And “Read the review” means less time. Similarly, the “Start Shopping” button sounds like exploring a product catalog. And the Buy Now button is like a site’s desire to get into your wallet.

7. Create buttons based on code, not graphics

The word «button means a graphic image,» link «means text. But resourceful designers create buttons that are pictures, but made as links.

Graphic buttons have a number of problems.

• They load slower;
• They are not accessible to visitors with disabilities;
• Graphic images may not be displayed in email messages until the “Show Images” button is clicked.

Buttons based on the code do not create such problems. You can create great buttons using HTML and CSS, and therefore there is not a single weighty argument why it is better to make graphic buttons. Buttons created on the basis of HTML or CSS are sometimes called «bulletproof» because they are displayed everywhere, including in email.

If you have graphic buttons on your site (in the application), and you have problems editing them, at least make sure that “Alt” includes an inscription on the button. Thus, it will be visible in email messages, even if the subscriber has not turned on image upload.

Button press

Attendance is only half the battle; prompting the visitor to action is the second half of the story. A click is a moment of truth, and the button itself plays a huge role. Small things can make a big difference.
Thus, instead of trying to increase traffic, take a look at your buttons. A few small design changes can have a much greater effect.

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *