Landing Page optimization CXL Review #8

(Hager Khaled –Article #8)

?

I am Hager Khaled a junior copywriter looking forward to be a media Buyer so that I enrolled in Growth Marketing Minidegree from?CXL Institute?in order to understand what is Growth Hacking.?

I have signed up for the Growth Marketing Midigree from CXL Institute?, and fortunately, I have granted a free scholarship. Therefore, I will be writing an article weekly, summarizing the lessons and specifically what I have learnt and understood.

?

What are landing pages?

Landing pages are pages users land on (entrance page). The first page users see after clicking an ad source. Page works independently of the site or app. The landing page is a part of a bigger experience (Search-PPC ad-landing page-form-confirmation) and of course there is an opportunity for friction .You had to know what the promise you made in the ad and then follow up based on that

?

?

It is mainly focused on a clear conversion goal. What it's supposed to do is shortening the journey from click to conversion. So for example, instead of you know, sending people to the homepage of your website.?So it basically follows up on the promise or the promises made in the ad source.

?

Why Optimizing landing pages is very important?

§?As, it speaks to user’s motivation, and addresses barriers.

§?It answers important questions and creates clarity

§?It provides a clear path to the user to take action towards a certain conversion goal

?

?

?

?

?

?

?

?

Begin with heuristic analysis by trying to understand and empathize with customers.

What is Quantitative research?

Quantitative research is all about what and why for example, users are leaving LP without filling the form. During undergoing this research, we are looking for big data, bunch of analytics

What is Qualitative Research?

Qualitative research is about giving solutions to why question for example, users distrust your landing page because it does not look legit. They do not think it is worthy.

What is Wire Framing?

So framing is basically the idea that the way you deliver a message has direct impact on how it is perceived. Two very, very different images you get in your head, and two very different ways of presenting the same thing.

Framing is quite powerful, and it's kind of astounding how quickly we can fall into this trap, this cognitive bias.

Wire frame can be considered as a visual guide that represents that skeletal frame work of a page or a website. And that's kind of key here that it's a skeletal framework .So at this point, we're conceptualizing the page. We're trying to figure out where what goes so we're not going to bother too much

Why you should use wire framing while optimizing landing pages?

It helps you prioritize content and build structure and it makes it easier to align copy and design and that is a key point because there's often a battle between copy and design.

If your customer did not get the idea of the page, the landing page has successfully failed

?

Information hierarchy helps you find the right balance.

Having a lot of information is fine as long as it's relevant and logical and to the point.?But you can still keep each bit concise and to the point. You have to simplify information. Think about what do you think the page was about? And what was the goal of the page?

?

Too much information at once leads to confusion and higher bounce rate. And also insufficient information leads to irritation and higher bounce rate.

?

Visual hierarchy answers the questions, what elements are most important, where should I look first? So your visual hierarchy really helps you guide the user visually through your landing page and it helps them understand like which elements they should look at and overall, it helps you a lot in figuring out how to design your pages because that's one of the things I think that's a struggle for a lot of people is how the hell do I design this thing anyways.

So let's look at the five most important principles of visual hierarchy.

?They are size, space, font, color and contrast and direction

So think of it like this primary elements are like large or big, secondary elements are smaller and tertiary elements are even smaller.

?It's just super densely populated and extremely crowded. So, like you know, it's hard to figure out where you know, what to watch or to look at and it you know, it kind of, it makes you kind of stressed out because You don't know where to start, I know there's too much, if you like a multitasking here is like, too much pressure man compared to this one

?Oh! It is you know, delightful design but it has to be functional. Like, if it's not functional, it doesn't matter and this is just making it really, really difficult to read the headline and also, like you'd say, I would say that the headline should be it so much bigger it's the most important thing, not the dude smirking there.

So the font size should be much bigger and it should be a different color and it should have a much better and more prominent position. So which one should you use is another big question here? Well, I would say use fonts without feet, like the one you're seeing here, sans sarif.

?

It is more recommended to use fonts that are large enough to be read. I think it's a big mistake ,I think people are afraid to push too much copy on the landing pages and then they you know, use a very small font to make it appear like there's less copy but then you have to squint your eyes really hard to read that copy. So you know, I would say rather go a little bit too big than a little bit too small.

So here are some guidelines, some rule of thumb

So I would say for a primary headline, use like 32 to 40a fonts of 32 to 40 pixels.

Your section headers do that 20 to 24 a little bit smaller body copy. Don't go smaller than 16 and for bullet points go like 16 to 18.And this is just a starting point you can tweak it from there and obviously don't want to go massively huge

It makes sense to have a hierarchy. So actually sit down and think through what colors you're going to use where and how. So there is kind of a method to the madness and this is something if you're working for a client,

So here we have the full thing we know exactly what to use we have our primary colors, we have our secondary colors, we have our complementary colors, we have our accent colors, and we have our font colors

Form is ?a dominant element on Legion landing pages

Form is one of the core elements that's really important because they draw a lot of attention, it's important that the form makes sense on its own. It has to make sense on its own, independent of the rest of the landing page

You can think of the form as landing page within a landing page and many of the same principles and elements and aspects that we applied over a landing page design, you can apply that to the form itself. Who are you communicating with? What do you want them to do? Where is the traffic coming from

Some Tips for better optimizing your website

§?Implement session records like Hotjar to identify why users are having troubles.

§?Heat map is very simple tool are used to figure out where users click and how far they scroll. Get a good idea of how far users are scrolling

§?Click map and movement map are more useful ?

§?Look for patterns where people click elements that are not clickable. Look for gaps such as elements with no clicks. The users probably do not care about so?you have to eliminate or improve ?these section

§?Feedback polls bother users as little as possible

§?Get clear and actionable insight

§?Design and copy go hand in hand.

§?The design should complement the copy

§?The amount of copy depends on the awareness level. ??

?

?

Call to Action

·??????Stand out from the rest with different color .

·??????Motivate the users to click

·??????Give a clear idea of what happens when you click

·??????Be relevant to your conversion goal

·??????Start with a verb

·??????Set realistic expectations

·??????It creates natural flow

·??????Try not to put the designs close to each other , bot to be very crowded and

·??????It is very cramped

·??????Try to save spaceLanding Pa