An information flow advertising landing page worthy of collection by all industry professionals

We all know that the task of most landing pages is to facilitate conversions , and the prerequisite for conversions is to retain customers first. In other words, from the moment the user clicks on the ad and enters the landing page, until he or she becomes interested, they should not have the idea of ​​closing the page.

However, the reality is that most users exit the page before they even read two words because of the discomfort caused by the layout and pictures, so there is no way they can expect conversions...

Especially the landing page below. As an advertising veteran with 17 years of experience, my first feeling when I saw this design was to cherish it - it is rare to be able to perfectly hit every design taboo in one page. Whether it’s the overall structure, page layout, image selection, color matching, etc., it perfectly avoids all the correct practices.

Design logic vs beauty logic

The first impression that the landing page gives people can be understood as the overall feeling that an adult normally has when they suddenly see something.

Just like our first impression of a girl is that she is clean, fashionable, pretty and has a good temperament, and then we will always remember that this girl is a beauty. In fact, if you don’t look closely, she may look average.

The same is true for landing page design, beauty at first sight is important. Problems like messy layout, dull images, and long loading times will give users a bad first impression. Therefore, if you want to attract users to stay and read your sales copy , you need to pay special attention to the design of the following three nodes:

First glance evokes emotion

A good landing page should meet the following two conditions at first glance:

1. It should not be disorganized. At first glance, clutter will increase the pressure of reading, and people will naturally escape when they are under pressure.

2. Almost at the first glance, the picture that enters the user's eyes must be able to arouse the user's sense of identification so that the user will become interested.

Only when the above two points are achieved, that is, the product is not tiring to look at and it gives people a sense of fun, will users stay temporarily.

Second glance to hook up

After the first glance, it’s the second glance.

At first glance, we just need to take care of the user's emotions and calm him down first. Now the second time, we need to put what we want users to see clearly in the place where they will naturally look. Remember not to use unnecessary and useless things to influence them.

The third eye fixes the wallet

The next step will be easy. Now that we have hooked up with the person, we just need to provide him with a convenient, easy-to-understand and easy-to-operate guidance method in a timely manner to encourage him to take action.

Of course, whether it is convenient, easy to understand, and easy to operate depends on the type of users you are promoting to . For example, the considerations for young and older users are different. It also depends on your purpose, whether it is to guide consultation or to guide form filling. If the user cannot find further guidance on the action at this time, he may not have the patience to read it carefully again, resulting in all previous efforts being wasted.

Design Perspective VS User Perspective

After briefly introducing the requirements for landing page design, let’s go back to the information flow advertising page at the beginning of this article, which is worthy of collection by people in the entire industry. Taking it as an example, let’s talk about what taboos have been violated and how to adjust them.

Should I put my brand logo?

This is an advertising landing page produced by a kitchen remodeling company. The first thing users see after clicking on the ad is the following. For humanitarian considerations, we have anonymized the brand logo, name and other information.

The overall structure of this landing page includes the header, navigation, header image, main body and bottom conversion floating layer - and this is actually the design structure of a portal website.

In fact, using the structure of a portal website to create a landing page for information flow advertising is a very unpleasant approach.
The key point of information flow advertising landing page design is to grasp the user's pain points in an extremely short time, hit them hard and touch their hearts. The accumulation of a large amount of content can easily make users lose their pitiful patience.

For example, navigation.
Because a portal website is a detailed description of a company or product from the overall to the details, the information flow is large and the structure is complex, requiring multiple jumps. In order for users who search in to find where they want to jump, "navigation" is needed to guide users.

The premise of information flow advertising is not based on the user's active search. The user does not want to see advertisements. Setting navigation under such a psychological background obviously overestimates the user's patience, thinking that "users will want to know more about us!" In fact, users "may" want to know more only when they have a strong interest and a strong need for the product. Before that, these navigation settings are useless except for making users feel complicated and messy.

Another example is the page header.
The header of this page takes up 1/6 of the screen. Unfortunately, for an information flow advertising landing page, the logo display of this 1/6 of the page is meaningless.

Why? Let’s start with the portal website.
Generally, portal websites will have a logo on their header. It does not need to be very large, as long as it exists. Users will see it when they go back and forth to the homepage anyway. However, the purpose of using a logo on the landing page is to expose the brand and let users know that you are looking at something from my brand. So it is better to put the logo in the main image position so that it is more eye-catching and easier to be seen.

The more you cram in, the worse the effect.

Typesetting includes the size, position, arrangement of pictures, line spacing, margins, spacing of text, etc. From a theoretical perspective, typography is like a designer’s logic, which is a mature system theory. In other words, there are rules to follow on how to best suit user experience . However, the landing page in this case perfectly avoids all the rules for correct typography.

For example, the header image (see the structure description in the previous image) takes up a large area but does not express anything.

The “Dream Kitchen” section still follows the design convention of the portal page (of course, it is also possible that the designer simply copied the template), with three pictures arranged in such a cramped space.
To be honest, don’t assume that all users who click on your ad are watching it on an iPhone Plus or even an iPad. Even if the screen width is that of the Plus, squeezing these three pictures together will seriously affect visual comfort and information dissemination. Just like in this case, the feeling of “dream kitchen” is not conveyed to users at all.

And fonts. The entire page has as many as 5 fonts (not including variants such as italics), and the distinctions among headlines , titles, main text, captions, etc. are also very messy - the designer seems to have no plan at all, and probably just thought: "Well, I just used this font... Well, let's change it now!" Such an irregular design will convey a confusing message to users, affecting their ability to see meaningful content and causing them to lose interest in scrolling down.

Not only that, the designer filled all the places where more line spacing and margins are needed with elements; in the information filling section, the spacing between the two text boxes and the application button is inconsistent... Ahhh, I'm so embarrassed... These will increase the visual sense of crowding, increase the user's reading threshold, make users lose patience, and increase the bounce rate.

For example, the following: the left and right margins are not equal

For example, the three words "after transformation" almost fill the blue-green background:

For example, in this form, the spacing between the three elements is not equal:

Pictures are used to convey emotions

Pictures on landing pages often play a role in evoking emotions, strengthening emotions, and promoting actions. Therefore, the quality of picture selection is very important. Many of the pictures in this case are weird...

For example, the one below. In order to point out the user’s pain points, the designer placed a picture of a housewife shouting loudly after the collection of pictures of dirty and messy kitchens, with the text on the picture: Are you still tolerating the mess in your kitchen? ? ?
I'll enlarge the picture so that everyone can feel it together. Do you feel anything is wrong?

The housewife looks devastated, but says to you: "Are you still enduring it?" - Is this kind of conversation... realistic?

But what if it were changed to this?

Do you feel that the housewife is much more sincere?

Let’s look at another set of pictures.
To illustrate the “successful case” of the kitchen renovation, the landing page puts a set of pictures like this:

From a design perspective, the content, form, composition, and angle of a picture all convey emotions. But what kind of feeling does this picture give to users? Will you think, “This is really great!” or “Oh, this is the remodeled one? It’s not as good as mine…”

Another example is a wide-angle overhead view like this:

Since it is a picture after organization and storage, it should reflect the appearance of a "perfect" kitchen as much as possible, and give users a feeling that they want to experience it. But the picture is full of the smell of fireworks... Do you want me to say that you are honest? Or do you not understand marketing ?

The bottom line is not to disrupt the user's sight

Still using the header image, this time we’ll talk about its color matching problem (how many mistakes did this header image make? If you’re interested, you can go back and click…)

We enlarged the header image to its maximum size and found that we still needed to look carefully to see the words "Don't waste the good times". If we look at it directly on the phone, these words are blurred and unclear.

Maybe the designer would say: "There is no need to see it clearly, it is just a decoration!"

However, if a design element cannot even be seen clearly, should we keep it for the New Year? We don’t expect an element to be both good-looking and able to convey effective information, but it should at least not disrupt the user’s vision and affect the user’s ability to see truly effective information.

And this:

On the same green background, the white text is clearly visible, while the orange is a blur. Why? Because the brightness of the image background color and the text color are too close, the similar brightness will result in no clear boundary between the background color and the text, making it impossible for us to clearly recognize the text.

It has to be said that in the process of information flow advertising , the value of design is seriously underestimated. Design is actually an important part of marketing. Like marketing, it has its own routines, which is to be user-oriented and look at things from the user's perspective to make them more willing to continue watching. After today, when you get a design task, I hope you won’t rush to start. Try to understand the meaning of the copy, feel the tone of the picture, and imagine the user’s mood. Don’t design by just using keywords to search for pictures.