It is said that it takes a user only 0.2 seconds to decide whether or not to read an article on a blog or SNS feed. No matter how high-quality the text you write, if the eye-catching image doesn’t catch people’s attention, the very existence of the article will be ignored.

We will explain in chart format the design principles for color schemes and layouts that will dramatically improve click-through rates (CTR), derived from data obtained from hundreds of thumbnail A/B tests.

“Law of Z” and letter placement to control line of sight

The human eye moves in a “Z” trajectory from the top left of the screen to the top right, bottom left, and bottom right. The following are the basic layout rules for instantly conveying messages on a smartphone’s narrow screen.

• Place the main copy in the top left: Place the biggest hook (question mark or number) that grabs the reader’s attention in the top left, where the eye first lands.
• Maximum number of characters is 13 to 15 characters: Narrow down to the number of characters that can be read at a glance, and divide it into 2 to 3 lines to add contrast. Just by making the particles (~no, ~wa) smaller and the keyword nouns twice the size, readability can be greatly improved.
• Place a “visual anchor” at the bottom right: By placing a photo of a person’s facial expression or an icon illustration with a three-dimensional effect on the right side, the center of gravity of the entire screen is stabilized.

Design with “complementary color contrast” that won’t be buried in your smartphone screen

Eyecatches with insufficient contrast between the background and text will blend perfectly with the background on your feed.

• Ensuring contrast with a brightness difference of 60% or more: As a basic rule, dark text is used on light backgrounds and white text is used on dark backgrounds, and “complementary colors (e.g. yellow or orange as an accent on a blue background)” located on the opposite side of the color wheel are effectively arranged.
• Use cushions (obi) and drop shadows: When placing text on top of a photo or complex background image, be sure to place a translucent black band (cushion) or use a border or drop shadow to make the outline of the text clearly independent.

Typical examples of bad designs to avoid

There is too much white space and the font is too small to read on a smartphone'' and I put too much emphasis on fashion and use thin Mincho fonts’’ are common mistakes. An eye catch is not a work of art, but a “signboard that encourages people to click.” Always check the reduced preview on your smartphone to make sure you have the strength to stop your thumb.