Usability for Dummies: what should be the buttons on the site

Ideal buttons are when site visitors are not distracted by them, but they are constantly clicked. A good button should look natural and organic, so that the user does not rate it at a conscious level, but automatically follows the specified call. In this article you will learn what should be the perfect buttons on the site.

When to use buttons instead of links

Practically on any resource you will find more links than buttons. Buttons are images that need to be spent to create them. A link can be made in a second. In this case, the links and buttons solve almost identical tasks. When do I need to use buttons, and when can I use links?

If the page uses too many buttons, it loads slowly. In addition, the user may become confused after seeing several calls to action. Therefore, use the buttons when you need to encourage the user to perform an important action for you: buy, download, register, etc. In all other cases, suitable links.

How to distinguish an important action from a less important one? Ask yourself: "Does the intended effect on my business or my site?"

Important actions usually require active effort from the user. He must register, comment, place an order, etc. Less important actions do not require active efforts. The user moves from page to page and consumes content.

How to use gradients correctly

Designers use gradients to provide a natural look for interface elements. When a light source illuminates an object from above, it creates a natural light effect and gives objects depth. The user perceives the illuminated areas of the object as close to the light source, and the darkened areas as remote.

When creating buttons, remember:

  • A person perceives a button lit in the upper part and darkened in the lower part, as convex.
  • A person perceives a button that is lit at the bottom and darkened at the top, as concave or pressed.

The user should see a raised button until he has pressed it. If the user pushes a button, he should see it concave. This effect can be achieved using gradients.

How to make the button persuasive

Buttons almost always contain CTA, but users do not always click on them. To increase clickability, you need to make buttons convincing. What does this mean in terms of usability?

  • Use gradients, shadows and rounded corners to make the button realistic.

The more realistic the button looks, the more often users click on it. You can achieve the effect of a three-dimensional button with gradients, shadows and rounded corners. A person automatically presses dozens of buttons during the day: he calls the elevator, turns on the TV or air conditioner, answers phone calls, etc. The more real the button on the site looks, the greater the chance that the user will click it automatically.

  • Use contrasting colors.

Contrast color attracts the user's attention. The ideal color is the one that immediately makes the visitor notice the button. Please note that the color of the button must contrast with both the background of the site and the text color on the button itself.

  • Make the button big enough, but not unnaturally huge.

Size does matter when it comes to buttons. The larger the button, the easier it attracts the user's attention. When you increase the button, do not forget to proportionally increase the size of the CTA font. Do not overdo it with the size. The button should not visually absorb content.

  • Use Urgent Words

Now, today, immediately, in one click, these and other words create an effect of urgency. Use them in the text on the button to stimulate clicks.

  • Soften CTA

Users may refuse your offer for various reasons. For example, they consider the product too expensive, they do not understand its values ​​and essence. In this case, you will help a soft call to action. Offer users a demo version, a free period of use, learn more about the product, etc.

  • Use uppercase and lowercase letters correctly.

If your CTA consists of two words, write both with a capital letter. Capital letters make the text prompting. If your CTA consists of three words or more, write the first word with a capital letter, and write the rest with lowercase. In this case, the text is perceived as a dialogue. The formulas look like this: hard CTA = one or two words + each word with a capital; soft CTA = three words or more + with a capital only the first.

  • Illustrate calls to action

This can be done using icons, arrows and other elements. They make CTA more convincing. For example, the arrow on the button shows the user that after the click he will go to another page.

  • Use hover effects

The visual change of the button when you hover the cursor on it convinces the user to perform an action. What should change? These can be gradients, change the font color, or change the appearance of the cursor. For example, when you hover over a button, the cursor can be changed from a neutral arrow to a hand in an pointing gesture.

Why OK buttons no longer ok

Interface developers often use buttons like "OK", "Cancel", "Yes", "No", etc. If you use a PC, you see these buttons every day.

These buttons have nothing to do with the action that the user takes. To make your signal clearer and more convincing, associate the CTA with the desired / planned user action.

Why conversion buttons should be placed on the bottom right of the page.

You can answer this question after studying the chart of Gutenberg.

The diagram shows that the page is divided into four parts. Arrows indicate visitor movement. The upper left and right lower quadrants of the page receive the most attention from the user. The lower left quadrant gets the least attention. Therefore, it is better to place the conversion button in the bottom right of the page.

Why in dialog boxes the button of the desired action should be on the right

In the dialog boxes, the buttons of the desired action ("Buy", "Checkout", "Yes", "OK", etc.) work better when located on the right. Note the following illustration:

If the button of the desired action is on the left, the user notices it first. However, he does not press it until he has explored all the available options. The visitor notices the button of the desired action, and then draws attention to the button of the alternative action. In order for him to choose the option "Yes", his attention must return to the button of the desired action.

When the button for the desired action is on the right, the conversion path is shortened by one step:

When the button for the desired action is on the right, the user's attention first stops at the secondary option and then moves to the desired option.

When the button for the desired action is on the left, the user encounters three visual fixes on the way to the conversion. When the button of the desired action is on the right, the number of visual fixations is reduced to two.

How to highlight the button of the desired action

In dialog boxes it makes sense to visually highlight the button of the desired action. In this case, it attracts and holds the user's attention.

To visually highlight the conversion button you can use the following methods:

  • Use a rich color for the button of the desired action and an alternative action for the button that is unsaturated.
  • Use the background color for the alternate action button. Notice the Skype dialog box in the illustrations above. The alternate action button "Exit" merges with the background.
  • Making an alternative action button as a link.
  • Using the transparency effect, thanks to which the alternative action button looks inactive.

Why icons should have a transparent background

Icons improve user interface efficiency. People perceive visual patterns of icons tens of thousands of times faster than text. This is true when the figures are depicted on a transparent background.

When the background of the icons is opaque, the speed of perception of information by the user drops sharply. The background creates a visual noise that makes all the icons the same. Instead of instantly scanning visual information, the user has to read and interpret images, which is typical for working with text.

The use of an opaque background for icons can be compared with text written in capital letters: this makes it difficult to scan visual patterns and reduces the speed of perception.

How to use arrows and dots

The arrows on the buttons indicate the user to complete the action after the transition. For example, by clicking on a button, a visitor can place an order, select a product, subscribe to a newsletter.

The arrows in the menu indicate the availability of additional options.

Dots on the buttons and in the menu indicate the availability of additional options and the incompleteness of the action.

Arrows and dots make buttons and menus intuitive.

Buttons must be visible and persuasive.

To do this, designers must choose the right button layout, use gradients and rich colors, apply hover effects, contrasts and correct calls to action. The effectiveness of the buttons is enhanced with the help of arrows, ellipses and other visual elements. The buttons should be large enough, but they should not visually absorb the surrounding text.

Watch the video: UX: User TestingUsability Testing for beginners (March 2020).


Leave Your Comment