I was reading my daughter’s favourite book to her yesterday when she came out with this prize piece of advice we could all do with. So I thought I would share it with you all.
And here it is:
This is an extract from a book called “What the ladybird heard”
“Open the gate at dead of night
Pass the horse and then turn right
Round the duck pond, past the hog
(Be careful not to wake the dog).
Left past the sheep, then straight ahead
And in through the door of the prize cow’s shed!”
My daughter looking at the map said “they are just silly mammy, why didn’t they just
“open the gate at the dead of night
Pass the horse and then turn left
and in through the door of the prize cow’s shed!”
This could be said of most landing pages or websites. In order to get your clients to make that call to action on your website (the prize cow’s shed ) you can’t let them wander all over the place. Make sure they have the straightest route to your call to action whatever that may be.
How? I hear you ask, well here’s a few tips on optimising your page.
Give your clients what they want
Having clicked on your page from either your adwords campaign or if you are lucky by organic means. Your client should see a page that reflects what they were searching for. It should have the same language that they used, the keywords that they used to find you. So immediately they are comfortable with your page. I will talk about meeting your clients’ expectations later.
You then have to give them what they need and that is the key function of the page. It has to be clear and precise, don’t have them hanging around the duck pond when they want to be in the prize cows shed. It’s not about you, it’s about what they need. Show them a page of sunglasses and a clear path to buying them. Make sure the sunglasses are not buried deep in the middle of your full range of glasses. Resist the urge to show off and show your full range.
There’s a good chance if you have satisfied their interest then they will check out the rest of your product range or service anyway.
Give them a Map
Well now you have the client on your landing page how do you hold them there. The first 4 or 9 sections is crucial its up to you to direct the eye of your client to where you want them to go lets face it they won’t always have the map of the farm directing them to the Prize Cow’s Shed. That doesn’t mean you can’t direct them by using arrows, circles, use of colour, enlarged text, etc.
In the first example below the green button stands out from the red background as a clear call to action. The second example circles the button to add emphasis.
I am also showing our own website as an example to demo how another problem can be overcome. I hope you don‘t mind but I have the same problem as most people have and I can easily demo this by re-giggling my style sheet.
On my home page I want to show the various different branches of what we do. We obviously have different land pages going on in the background. But our home page promotes the three different areas of our business.
In the first example no branch stands out, all three areas are competing for your attention and your eye doesn’t know where to land. It’s like having three children in the room all wanting you to read to them. Who do you attend to first ?.
The second example works a bit better as I have changed the colour of the header text in the middle column. I want to promote this branch a bit more as this is clearly our most profitable area.
but in the last example I have enlarged the text and put a drop shadow on it. Now you know the eye is going to land straight there.
See what I mean you can create your own map around your landing page.
It is a big trend now and for a long time to advertise all your products or services in a carousel hell I have done it myself. I would strongly advise you not to. It will only annoy your client and distract them from the prize. There is a good chance it is moving too fast for anyone to read anyway.
There is a lot more to be said on banners, on our own site we have a banner on the home page which has lead to quite a lot of arguments in the office but the designer in me keeps it there even though I know it serves no purpose. To be fair the rest of our site has no banners to distract the client from the content of the page anyway more later on that subject too.
Filter out Friction
Here I am going talk about the subconscious route your client will follow when reading your site. Well first off your client will scan your site to make sure he is in the right place.
The heat Map below shows how the eye follows an F shape manner, with the top left
corner the most important area and called the golden triangle.
To quote my art teacher at school, and I can still hear her drumming it into us “spaces left unfilled is as important as spaces filled”. If you cram everything together you just get a load of fussy content. Let text and buttons breath and they will get more attention.
Don’t clutter the golden Triangle up with images. You want your client to read the important information you are telling them. You don’t want them searching where to start reading. The eye falls naturally top left, if there is an image there then the eye is left wondering. Chances are the back button will be hit in your clients haste to find the information they want. So basically what I am saying is don’t break up the natural flow by asking your clients to change their eye path to another column or area on the page or to seek out information.
Images should be used as supporting material in the text
- If you start adding text to images the eye will skip it or accept it as an ad and ignore it so don‘t have your important call to action there. Here again is why carousel banners are just wrong.
- Our eyes seek out similar colours on the page as well as similar objects so use this as a means to draw the eye to the x on the prize cow shed.
Follow the standard rules of layout
When your client lands on your page chances are they do research on a subject or product. Google has thrown up a load of possible pages to follow. As I have mentioned before your client will scan as many websites as he can in order to get the best possible information.
You need to grab their attention straight away .Why? Because they are only going to see about 20% of the information you are supplying him in that initial scan. So you need have your landing page ticking as many boxes as possible or they will just hit the back button.
My daughter’s favourite story goes on to tell how the farmyard animals trick the two thieves with the map. In the story each animal changed their sound, so the thieves thought the cat was the hog and the hog was the duck and in the dark it leads them straight into the pond.
Your web site is no different there are certain expectations that your client needs you to meet in the positioning of elements on the page. If they are not meeting it leaves your customer uncomfortable and confused and lands them straight in the pond or clicking the back button.
Simple rule of positioning
a). Company Name
b). Navigation
c). Headline
d). Copy
Not forgetting the most important part
e). The Call to action / buy now button
a). Company Logo
I don’t know how many times I have designed a site where the client has come back and said “make my company logo bigger“. I know branding can be a company’s main agenda. But as I have said before it’s not about you, its about delivering the product or service the client wants.
If it is up there in the left hand corner. Take it as a given the eye has seen it and lodged it away in his head. it’s the first place people look when landing on any site. You can use the rule here where the eye connects similar colours or objects by placing your logo at the bottom of the page to reestablish the company brand once they have scanned the items on the page.
There are times you will want the branding to be front and centre but that is different. If it’s all about the brand then the logo should be large with everything drawing your attention to it.
b). Navigation
Your clients will use the navigation to help them to assess if your site will be helpful to them.
Keep your navigation simple to avoid information overload.
Four relevant links along the top of your website where your client can scan easily and confirm they are in the right place. They should contain the keywords you have tested your site for.
Separate irrelevant pages into a different place away from the main navigation.
There are many ways to reach your landing page (a search engine, from within the website, from a banner or ad on another website, etc.), but once they are on your website, they should only be presented with relevant options to navigate.
Try using the following
- Breadcrumbs
- Internal links on the page
- Footer navigation
- A different navigation menu for different page types
There are loads to be said on eCommerce navigation, but the rule of thumb is, make it easy for your client to get the desired product they want.
You do that by supplying options
A good example is http://www.johnlewis.com where a complete overview of all departments is given. Once the relevant department is click on you get a chance to break it down further.
When you give your client a direct and easy path to their desired product you increase their click through to purchase rate.
Lets face it John Lewis is one of the most successful department store online today.
c). Body Copy
As I have mentioned the eye path of your client lands naturally on the top left hand corner and works its way down the left hand side. Don’t make your client work at reading the text. As well as what I have mentioned previously about keeping the eye path flowing your text should be:
- At least 16 points.
- Keep the colour easy to read
- Keep the flow natural with scan-able items
- Line length, keep it short to about 12-15 words
A couple of other things you should know
- Drop caps increases readership by 15%
- Keep things in bundles of 4
- White on black is hard to read
- Text on images is ignored
Just to explain a few of the above points there is research out there that indicates we like things in bundles of 4 after that we tend to get distracted. So paragraphs of text should be no more than 4 together. Break it up with bullet points, subheads and testimonials. If your bullet points are more than 4 break them up with subheads as you can see above I have two sets of bullets.
Drop caps make the text more interesting and encourages the eye to follow along the line. This all contributes to keeping the eye path moving down the page.
Images should be used as supporting material in the text. Placing text on an image the mind will read it as an advertisement and ignore it. So don’t put you heading in an image banner, or special offers I have said this before but I am saying it again as it’s the most common mistake made.
There’s a good rule here, get into the mindset of a 12 year old, don’t underestimate a 12 years old’s intelligence, but make sure they can read it. My daughter is only 5 and she taught me a thing or two. Your clients are no different, so keep everything nice and simple no showing off your knowledge of the English language and over use of descriptive words. Action words work best which brings me nicely along with the heading and subhead.
d). The Heading and sub heads
Your client having scanned the logo, navigation, headline, body copy and call to action is now willing to commit time to reading your page.
Your page’s headline should be nice and short It should reflect the keywords or link your client used to land on your page. This immediately makes them feel comfortable.
Remember your headline is the only certain thing on your page that your client will read. Studies have proven that the first and the last 3 words are scanned first so put the key benefits there not in the middle. Try and keep it 6 -7 words long. Use words your client uses.
Use simple and clear action words. Long descriptive sentences or words will leave your client confused and wondering are you really going to deliver what they are looking for.
I came across this as an example:
Accounting & Business Management Systems
Supplying Accurate and Timely Reports
Well you can see what I mean here its way too long and wordy for a start I think I fell asleep half way through it.
On the other hand it could read
Start Making Better Business Decisions
Get timely accounting and business management reports
Hopefully that is connecting the desire to the offer on the page. The desire of making better business decisions, which was probably on the mind of the person when they clicked on the link. Is now connected to having a piece of software that gives timely accounting reports which is on offer.
e). And Finally The Call to action
Having connected with your clients desires and convinced him he is in the right place. You now need to convince your client that the call to action they are about to commit to will be worth While. It needs to be worth more than the time, money or email address they are about to give to you. So to get to the prize cow shed your client is asking will this cost them more than they gain from this transaction. If you offer a free report in return for their email address then the term free here lowers the value of the transaction and your client may decide his email address is worth more and not click that action button.
But however if you say you will miss out on a prize piece of information by not downloading your report you then apply an emotional value to the report
You can create an emotional value by:
- Creating a sense of urgency about it last chance to download this report, don’t make this a false claim though.
- Creating an exclusive nature to the download we all love to be part of an exclusive club where we have more information than somebody else.
- Create intrigue 5 things you don’t know
In conclusion
And it is up to you to map their course through your landing page in a way that your client won’t fall into the pond and click the back button.
Your clients first reaction when landing on your page is “ am I in the right place “
Your headline encourages them to read further and the first three paragraphs should let your client know that you will deliver what they need.
In your call to action your client is asking “what will it cost me when I click that button“ so increase an emotional worth to that click.