High promotion cost and poor conversion rate? Get 6 years of experience in optimization techniques for free~

A few days ago, someone asked me in the background: Editor, you are so talented, so how do you solve the problem of clicks but no conversations?

This young man has such a good vision, how could the thoughtful editor not help him solve the problem? So after some investigation on my part, I can only say: I’m sorry, I’m powerless to change this landing page .

The overall layout of the landing page is quite full, which can easily bring visual burden to users. The main color does not match the product color, and the product is not well displayed. Some fonts are small, which makes it difficult to browse. The copywriting is not enough to hit the pain points...

It is no exaggeration to say that 80% of clicks without conversations are due to poor landing pages, because the landing page is responsible for carrying traffic ; and the importance of mobile landing pages accounts for 80% (except for some traditional industries), because this is an era of mobile Internet .

Then maybe someone will say at this time: Editor, I know there is a problem with my landing page, but we don’t have a professional artist here, and I don’t understand design .

So, today, this talented editor will share a few tricks with you. This article will take the mobile phone as an example to analyze the design techniques of the landing page from the two aspects of mobile phone attributes and user habits . Please take notes in your notebook.

When talking about the attributes of mobile phones, everyone’s first reaction is definitely light, thin and small. In landing page design, small is the key point and its importance is 100%.

Generally speaking, the size of a mobile phone ranges from 6 inches to 3.5 inches, and can be held in one hand.

Therefore, we must pay attention to the size of the device when designing to determine the size of the picture and avoid incomplete picture display due to different specifications.

Design optimization plan:

• Fits the size of mobile phone

Currently, the full screen size of most mobile phones is 720*1280 pixels, which is a 9:12 composition ratio.

The recommended design dimensions are: width 720px, height 1000px.

Appearance is also a type of mobile phone attribute. The biggest difference between the mobile phone and the PC is that one is displayed horizontally and the other is displayed vertically.

Therefore, when designing, we should pay attention to the form of the landing page design and its composition thinking.

Design optimization plan:

• Upper and lower columns

Due to the influence of the PC side, many designers may tend to tend to display the composition horizontally when designing.

• For example, Figure 1: The picture is small and the font is small, which is not conducive to reading.
• For example, Figure 2: Reading up and down is more in line with user browsing habits

Figure 1

Figure 2

Mobile phones are small and long in shape, and when we browse information in our daily lives, we tend to read from top to bottom. Therefore, we should try to divide the columns into vertical and horizontal columns and avoid left and right columns .

When there is a piece of white paper in front of us, our eyes will be focused on the entire paper; if there is a small dot on the paper, our eyes will be focused.

A mobile phone with its own small attributes also means that the user's attention will be sufficiently focused.

Therefore, when designing, we must ensure that users can remember the content on the page to the greatest extent possible.

Design optimization plan:

• One screen, one theme

A screen is the smallest information unit on a mobile phone, that is, the maximum amount of information a user can see.

One screen, one theme, on the one hand, can make the content clear at a glance, and users only need to glance through it to remember it. On the other hand, it reduces the mutual interference between information.

• For example, Figure 1: There are many selling points, but the impression after reading is not deep
• For example, Figure 2: The entire screen highlights a selling point, which is more impactful and leaves a deeper impression after reading.

Figure 1

Figure 2

• Proper white space

Use sentence breaks, line spacing, etc. to leave appropriate blank space for content information on the landing page.

On the one hand, it can make the content information more layered, and on the other hand, it can greatly reduce the difficulty for users to receive information and improve the efficiency of information communication.

• For example, Figure 1: The text and the image are arranged closely together, without much space to breathe
• For example, Figure 2: There is white space between the words, the order is neat, and there are many but not messy

Figure 1

Figure 2

• Cut off the upper and lower blanks

When facing a vertical rectangular screen, in order to balance the overall picture, centering the design body will draw the user's attention to the shape in the middle. This is an almost naturally harmonious typographic design technique.

But this does not take advantage of our presentation of the product.

• For example, in the picture below, the user's attention is visually focused to a certain extent, but it is also not conducive to the display of the product.

Therefore, when displaying products, avoid leaving blank space at the top and bottom, and instead display them in full screen.

"Dry" can be said to be the keyword for most people. Under the temptation of massive information, the pressure of rushed time, and the rapid development of the times, users rarely have the patience to look at something carefully.

Moreover, the current reading environment is relatively fragmented, so skipping and selective reading are the characteristics of contemporary people.

Design optimization plan:

• Use contrast

Since users will read selectively, we need to make good use of contrast to give the text a sense of hierarchy so that users can see what we want them to see.

• For example, the picture below. Use gray and yellow to create contrast and make the content stand out more.

Common comparisons are presented in the following forms:

Size contrast, color contrast, virtual-real contrast, before-after contrast

One phenomenon caused by skipping is fast sliding speed. And with the support of large-screen mobile phones (just slide your finger up and down), this phenomenon is even more likely to occur.

Therefore, the content of the landing page must be “ easy to understand at a glance ”.

Design:

• See at first sight, understand in seconds

Content information should be simplified, and official, technical, and industry-specific language should be avoided.

• Do not cover the words on the background image

In many cases, advertisers will use background images + text to display their products in order to enhance users' awareness of the products.

For example, in the picture below, are you willing to browse this type of product information?

The above example can be a counterexample. Usually, when we use this design method, we need to meet the following two points:

First, the colors do not need to be too complicated to reduce stimulation to the eyes, which objectively prolongs the user's patience, that is, prolongs the reading time of the information on the screen.

Second, do not cover the background image with words, otherwise the information conveyed by the text and image will be affected and the transmission effect will be weakened.

• For example, in the picture below, there are many colors as a whole, and the dark red background with red text makes the text very difficult to recognize.

We often say there are clicks but no conversations, but the key point actually lies in the landing page.

So what is a landing page? To put it simply: on the one hand, marketing theory is used to trick users into placing orders; on the other hand, design is used to enhance user experience . And experience is the prerequisite.

Only when users can browse the landing page completely can they be fooled by your marketing.

So, readers, is your landing page a qualified page?

The author of this article is @兔子. It is compiled and published by (Qinggua Media). Please indicate the author information and source when reprinting!

Product promotion services: APP promotion services, advertising platform, Longyou Games