{"id":3525,"date":"2011-09-05T11:47:08","date_gmt":"2011-09-05T15:47:08","guid":{"rendered":"http:\/\/pixsym.com\/?p=3525"},"modified":"2020-12-31T12:48:27","modified_gmt":"2020-12-31T17:48:27","slug":"5-examples-of-eye-path-pitfalls-that-can-hurt-your-conversion-rate","status":"publish","type":"post","link":"https:\/\/pixsym.com\/5-examples-of-eye-path-pitfalls-that-can-hurt-your-conversion-rate\/","title":{"rendered":"5 Examples of Eye-Path Pitfalls that Hurt your Website Conversion Rate"},"content":{"rendered":"
Eye path is one of the most important elements in landing page design. When elements on a webpage cause visitors to stumble, become lost or even think too much \u2013 you are losing out on sales.\u00a0Your page must be able to systematically guide your visitor\u2019s eye to the action you want them to take. It must show them exactly what you want them to do without making them have to think about it; Because they moment they say to\u00a0themselves\u00a0\u201cwhat next\u201d, you lose.<\/p>\n
<\/a><\/p>\n An eye-path is simply a way to lead your visitor through your page in a clear order which makes sense. Ideally, you want to tell a visitor right away \u2013\u00a0where they are, what they can do on the page and why they should do it. The answer to \u201cwhat should I do here?\u201d should be related to your clear,\u00a0concise, call to action.<\/p>\n All of the following examples were taken from PPC ads just this morning. It doesn\u2019t take long to locate some good examples of bad landing pages.<\/p>\n Objects that compete for your visitor\u2019s attention<\/strong><\/p>\n This is by far the most common landing page design mistake. Visitors should immediately be able to understand where the call to action is on a page \u2013 whether it\u2019s a button or a banner, it should be glaringly obvious. If you have more than one offer on a page, you are making a person have to stop, think and choose. If you have an offer and other elements on the page that compete with the offer visually, you will also run into issues with eye path confusion.<\/p>\n <\/a><\/p>\n In this example we have multiple colors, buttons, banners, fonts, logos, an auto-playing video and if you scroll down just a little bit, below the fold there are arrows, arrows, everywhere! Where does one look with all these things competing for attention? The button to get an iPad is almost buried amongst the other elements. If the offer on the page is not instantly clear, not many people are going to stick around to figure it out.<\/p>\n Fonts that yell, scream and shout \u201cLook at me!\u201d, \u201cNo, Look over here!\u201d, \u201cNo, here!\u201d<\/strong><\/p>\n If you use more than 1 font family on your page, you might be asking for a challenge; If you use more than 2, you\u2019re asking for trouble. Font usage can cause the eye to jump from one place to another, which can be a good thing when done right. When done wrong, it can be perplexing.<\/p>\n <\/a><\/p>\n This example touches on more than one of these eye path issues. When I got to this landing page, the navigation bar seemed to be broken, but even with it working properly, I couldn\u2019t help but wonder why the choice was made to put the main page heading to the right side and use so many font treatments. I know, it\u2019s a design firm and they have the right to some creative freedom, but would a government employee landing on that page for the first time \u201cget what\u2019s next\u201d and be compelled to move further along in the sales process? Highly doubtful.<\/p>\n Elements on the page that are out of order<\/strong><\/p>\n Headlines and any graphic elements should follow a hierarchical order. People are trained to do some things naturally, like reading from left to right (in most countries anyhow). If you have headings that follow a certain pattern, that\u2019s fine, but when you throw in random bold headings in various places, it causes the eye to skip around. Likewise, adding boxes that almost cause your eye to completely stop, should be reserved for the call to action.<\/p>\n <\/a><\/p>\n Searching for a divorce attorney (no, I\u2019m not\u00a0really<\/em>\u00a0searching for a divorce attorney \ud83d\ude09 ) \u2013 in this competitive niche, I found this example of headings that cause your eye to jump from place to place. Aside from the other elements on the page that do the same, the headings that have equal sizing and weight are competing with one another for attention.<\/p>\n Too much good stuff all in one place<\/strong><\/p>\n I know, your product or service is awesome and you want to squeeze in every juicy detail about it! Don\u2019t do it. If you have a very complex offer, you may consider creating a mini-site, whereas there are links to different areas of the page that explain complex details. Throwing everything on one page creates clutter that\u2019s difficult to weed through.<\/p>\n <\/a><\/p>\n In this example I searched for \u201cbuy stocks\u201d and among this very competitive phrase I found the PPC ad for this company leading the charge with the most expensive ad possible. Yes, they have a brand and yes, they likely have a large marketing budget, but those things don\u2019t add up to a clear,\u00a0concise\u00a0landing page. The button that says \u201cOpen an Account\u201d looks like it was almost an afterthought, as the size is quite small in comparison to other elements on the page. I can\u2019t decide what they are saying is most important here \u2013 is it their ratings? Or all the goodies you get (I think those are goodies)? Where\u2019s the offer?<\/p>\n Calls to action that don\u2019t call anyone to take action<\/strong><\/p>\n If you\u2019ve paid good money to get eyeballs to see your landing page, make sure that what you want a visitor to do there is clear in relation to the source of the traffic. So, if you bought a pay-per-click (PPC) ad that is specific to a certain topic or need, make sure your landing page speaks to that audience directly.<\/p>\n