Website User Experience Design: 7 design techniques for improving landing page conversion rates (Part One)

Source: Internet
Author: User
Keywords User experience website design conversion rate

Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall

Designing an optimal landing page is not a very easy task. If you want to get a decent conversion rate, that's even more complicated. However, how much do you know about the design idea of transforming into a core?

The design (CCD), which is transformed to the core, is a discipline specifically designed to achieve a single business goal. Its intention is to increase the conversion rate by using persuasive design and psychological incentives to guide visitors through a specific action.

Landing page is the core of CCD design. The design element of the landing page is consistent with the design of the email, and its purpose is to enable visitors to the page to be able to effectively transform to the end of the target path and the entire transformation path. On the landing page, we can collect visitors ' browsing data or get details about your products and services before they reach the next page.

So how do you design to convince visitors to accomplish the goals you want to transform? There are many design elements that can draw visitors ' attention to the areas you expect to interact with, and psychological inducement can also inspire a sense of participation. Let's take a closer look at these two types of design elements so that the landing page you design can achieve real transformation.

  

1) Focus

Create a tunnel visual effect, which is a more typical way to attract visitors ' attention. You can consider setting up call-to-action on the landing page in such a viewpoint. For example, on the left side of this picture, the architectural features of the arches can prevent visitors from remaining in sight, but are locked in the middle. The picture on the right is driving your attention to the end of the tunnel.

  

2) Contrasting color

Using contrasting colors is a simple idea, the color of the entire spectrum is applicable, but monochrome is the simplest.

  

Make your call-to-action stand out from the surrounding area and make it easy to spot. If you set some black or gray text on a white background, then use black or white call-to-action to show contrast, so you need more colorful elements to highlight call-to-action. However, if you don't have much detail or text in addition to a very concise design, the larger black or white buttons will appear to be prominent.

Colours can be used to create an emotional response to a visitor. Orange, for example, can lead to a positive mood, and using orange as a call-to-action is a good choice. The following analysis of a lot of color to bring people psychological cues:

  

Another important factor is the color contrast effect. This method uses the blank area and contrast to show the difference. Some people say that the color of call-to-action is irrelevant, but in fact it is the illusion of contrasting color. For example, normally, red call-to-action may lose to the blue call-to-action, but if your background is blue, the red button must be more attractive than the blue one.

Let's take a look at the two illustrations below, where the color contrast in the left picture is so extreme that it's hard not to be attracted to it, and the surrounding area looks low-key. On the right, the entire landing page uses a single color of different shades, except for the call-to-action.

  

Remember: The entire page is guided by your transformation goals!

3 Visual Guide

Visual guidance is an indicator that directs visitors ' vision to key areas of the landing page. This will help you to direct the visitor's gaze to the area you expect, and will soon be able to achieve your goal when you reach the landing page. This type of visual guidance includes directional arrows, road paths, and visual impact effects.

Directional arrows

For visual guidance, the effect of using directional arrows is obvious because it is intuitive and sharp. The ability to visually focus visitors on the desired area is a very successful way to guide visitors to the landing page for a short period of time. This arrow is actually telling the visitor that you don't have to care about anything else, just turn your attention to the area I'm pointing to!

  

It's a very fancy design case with arrows, the man pointed to by the arrow, with his eyes directing your attention back to the person with the arrow sign, eventually your gaze will stay on the arrow sign, which will easily attract you to find out what is written on the sign.

Highway

The idea of using highways is to trigger and direct our brain into what is being stated in the way the real world looks for roads. This example uses a long road to direct your sight to the top of the cliff above the picture. In our subconscious, the road is a clear, defenseless path-guiding method, so we naturally receive this guidance.

  

Landingpage landing Page Design tips:

Designing a trend-oriented line to attract attention to call-to-action, triangles are the most dynamic shapes, their natural guiding properties make them special design tools, and, similarly, arrows are more natural path guidance design.

Eye cues.

As humans, we naturally understand the intent and use of vision, whether it comes from humans or animal eyes. Let's take a look at the following case:

The first legend of the monkey attentively to the hands of the banana, then Curiosity will force us to find the monkey's eyes to see. Second Picture: You will not be able to control to look down like coyotes.

  

With the eye moving, the head moves together. In the second illustration, you will not only wonder what is in the grass, but also instinctively look at the position of the wolf's gaze. So, if you set the goal you want to transform into this position, the visitor who arrives will also focus here.

In the third illustration, the visual-guided design approach is amazing, first of all, the elk in the lower right corner drive your gaze, where you can design themes or unique marketing strategies, and then follow the elk's gaze to focus on the migratory birds that fly over the water, setting up your call-to-action here.

  

Babies and attractive people

A pattern is also a very important factor in design because it creates a connection between the picture and you. Babies and people who are known to be influential are most effective when considering the use of some stimulating images. Among the two, the most persuasive is the pattern of the baby. Research shows that we all set the call-to-action on the baby's face.

  

In the design of the human element of the landing page, attractive women have proved to be very persuasive. The following illustration shows the effect of powerful sensory interoperability, and your protagonist attracts your attention. This eye contact is a very good visual guide, a great way to extend the visitor's stay in the page and provide visitors with more time to get to know your content.

  

In addition to design factors in the design of landing pages, psychological considerations will also bring about an unexpected effect on improving conversion rates, so please look forward to: 7 landing page Design tips for improving conversion rates "next"!

Reference article: HubSpot

Source: Excellent network http://www.uisdc.com/call-to-action-landing-page-design

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.