Learn Before
Relation

What makes a powerful CTA button?

Size: Th size of an element indicate its importance, the bigger makes it more noticeable and chance to be clicked. CTA button should be designed in a big enough noticeable size, however, we should keep in mind the visual composition and layout hierarchy Some recommendations on CTA button sizes in mobile UI: Apple: at least 44Х44 pixels Microsoft: at least 34Х26 pixels.

Color and shape: Our mind reacts to colors and shapes while we usually do not notice it. Colors and shapes has different meanings. Traditionally, CTA buttons look like horizontal rectangles since people got used to perceiving this shape as clickable buttons. In addition, it is recommended to design CTAs with rounded corners because they are thought as they point inside of the button drawing attention to the copy. Color choice depends on various aspects which make the process more complicated. Designers need to consider such factors as the basic color of the composition as well as potential preferences and psychological peculiarities of the target audience. There is one condition which is vital to keep in mind while choosing colors for CTA: buttons and background colors should be contrasting enough so that CTAs would stand out from the other UI components.

Placement: The placement of CTA buttons is crucial for their capability. Studies shown that people tend to scan webpages to decide if they are interested or not. Considering this fact, designers may learn the most prominent scannable areas and place call-to-actions within the user’s path. popular scanning patterns for web pages, among which “F” and “Z” patterns. These patterns allow designers to place CTAs in the spots of highest attention, such as top corners and put the other points requiring attention along the top and bottom lines. Also, it is a good idea to place CTA buttons at the center of the layout, especially when it isn’t overloaded with other UI elements.

Microcopy: Microcopy plays a significant role in the efficiency of call-to-action. It is defined as the small components of text which serve as hints for users. To be more specific, microcopy includes buttons and menu copy, error messages, security notes, terms and conditions, as well as any kind of instructions on product usage. CTA microcopy is actually a call which tells users what action they will take if they click the button. The powerful CTA microcopy is usually short but consistent so that it could quickly catch users’ attention.

0

1

Updated 2020-12-14

Tags

Design Science