This week we have Erez Sagir, CrazyLabs’ hyper-casual Marketing Creative Lead, with five tips for best practices in CTA («Call-to-action») buttons.

5. Animation

Special effects always help to emphasize a graphic element. Either by scaling it, giving it a gentle movement, using VFX like light sweep or shining rays, it is a great way to make a CTA enticing, engaging and clickable. Just make sure you are not over doing it so it becomes distracting and unpleasant to the player.

4. Microcopy

CTA microcopy tells players what action they will take if they click the button, so it must catch their attention quickly and lead them in the right direction. To make it effective, keep the number of words at minimum. A few hand-picked words work much faster than a long descriptive phrase. Get clever, be creative, and relate to your players with phrases they know and like to use themselves.

3. Right Positioning

We all have scanning habits and expect certain elements to be in certain places. A CTA button will be placed at the bottom most of the time due to the way we scan a form or an ad. Always consider the engagement of the CTA button with other visual elements in the frame. The CTA button is the “KING” of the screen – best to have it with no “neighbors”, and surround it by “white space” so it’ll stand out better.

2. Make it Bigger

Size is the most common tool when arranging UI components according to their importance. Since CTAs’ prior goal is to draw players’ attention, we need to make it stand out on the screen with a sizable presence. In mobile “real-estate”, large buttons get noticed and clicked more often, but you need limits. A compelling CTA button is usually big enough to be quickly found but not too big as to spoil the composition and hierarchy of the layout.

1. Clickable Buttons

When watching an ad or playing a game, players need to know what’s clickable and what isn’t. That’s why all interactive elements must appear clickable, either via some 3D effects, or by including a slight gradient, or even adding a small shadow. Our tip: if a 3D effect doesn’t suit the chosen flat style, use rounded edge buttons to make it look clickable.