In this video, Andy Edmonds (a Stompernet collaborator) talks about how site design affects conversion . This lesson does not contain any mega-discoveries, rather, it is a review of developments collected over several years of business.
On the other hand, these “battered truths” allow Andy Jenkins alone to earn up to several million dollars a year from a single online store. So listen to the advice of these guys o it - what is the earnings on the Internet they know firsthand 🙂
Video size is about 130 MB, so it will take a long time to load.
You are interested know how a visitor behaves when you get to your site? I am sure that yes. Because even if you fail to get to the first place in Google issuance, you will still be able to increase your profits if you learn to squeeze the most out of the existing traffic.
Before you start studying the material, open the page with the video (even if you have a dial-up) and under the video window (now to the right of it), find the link
and go for it. StomperScrutinizer is a tool that emulates a human eye. With it, you can determine what the visitor sees and does not see on your site. I will tell you more about downloading and installing StomperScrutinizer at the end of the post.
Incorrect location of site elements can cost you a substantial part of the profit. Here are some examples:
It would seem that the menu is like a menu. However, this menu can reduce the profits of the site owner by as much as 25%. Go ahead.
Colorful image, explanatory text, availability of price and description of the product. It would seem that there could be something wrong? However, this layout reduces the number of people willing to put the goods in the basket at the same 25%.
This page is perfect for certain key phrases. Moreover, the content is fully consistent with what visitors are looking for on this page. However, due to the font and location of information blocks, the owner of the resource loses up to 14% of buyers.
Look at the screenshot.
See the blue dot and the trace behind it? This dot shows how Andy's eyes move while reading the text (very clearly seen in the video). Andy and the company use this tool, which combines software, hardware and an infrared camera, every time they need to adjust the design of a website.
Our eyes move unevenly. The glance is randomly moving from one point to another, adhering to a certain range in one or several troc, if you carefully read the text, or the whole screen, when you have nothing to do wandering around the sites.
Everything that Andy Edmonds tells in this video is based on scientific data that will help you to understand why we react on the site design in a way and not otherwise, and why some sites push us to actions, while others make us want to quickly close the page.
In the center of our eye is the so-called central fossa . She is responsible for perception of color and detail . In prehistoric times, the ability to focus eyesight helped a person to find fruits, berries, and other foods.
The rest of the retina is responsible for peripheral (or lateral) vision. It responds to movement and contrast . This type of vision allowed the caveman to notice the approach of a predator in time.
Both types of vision are interrelated. While the central fossa focuses on one part of the image, peripheral vision searches for contrasting elements that the eye can grasp, and as soon as it finds them, the eye moves to these elements.
As proof Andy Jenkins He took a photo of Angelina Jolie and showed how his eyes were moving across the screen. As he did not try to keep his eyes on the face of the actress, his peripheral vision attracted him to other “elements of the image” and eventually it got his way.
Of course, we see not with our eyes, but with a brain that interprets all the signals sent to it and then puts them into a general picture. However, it is very important, that we see. And the success of your Internet business depends on this .
Then the word takes Andy Edmonds , by education - a cognitive psychologist, by vocation - a specialist in usability and conversion.
Our eyes can make up to 50 movements per second. Even when we focus on individual details, our eyes do not stand still.
Eye movements can be divided into basic and minor . The main ones make it possible to single out the main elements of the page, while the minor ones point out the accompanying details. But the most important thing here is that when our eyes move, we remain blind .
From a school biology course, you must remember that the eye mesh consists of cones and rods . The graph shows what and how well we see on the monitor.
Since it is the central fossa of the eye that is responsible for the perception of color and details, the perception of the site and its individual parts will depend on whether you can capture the visitor’s attention with your offer and whether you can to accommodate this proposal in those 2-3 degrees, where the view is focused as much as possible.
If you look at the screen at a distance of half a meter, the image on the screen will take 20 degrees of your field of view. That is, you will see (in detail and color) only 1/10 of the screen. If you are sitting closer to the monitor, then even less.
The first example is a page from the Andy Jenkins website.
Initially it was assumed that the drawing would attract the attention of the visitor, and he would be able to add it to the basket after viewing it. The assumption is reasonable, but ... After Andy and the company tracked the behavior of the average visitor on the page, it turned out that this page layout results in a 25% loss of profit.
And all because one moment is not considered here. Each buyer, before sending goods to the basket, looks at the price . Here's what he sees (StomperScrutinizer is used to determine the focus limits):
Yes, the “Add to cart” button is very close. But to find it, it takes time, but time reduces the conversion.
It cost Andy to put a button under this block on all pages of the site
and the number of additions to the basket increased by 25%.
In order to properly place items on a page, you need to understand the visitor’s goal — to find out the price of a product — and not to forget about your goal — to sell the product. Dinin them, the conversion of the site will definitely increase.
In addition, you will increase sales, save the visitor from unnecessary actions . And if the visitor notes that your site is convenient and simple, his loyalty to you will grow.
Look at the graph of the distribution of visitors depending on the position of the site in the top ten Google issue:
Note the 10th position. The last site in the list receives almost as much traffic as the 5th one. Interesting, isn't it?
However, this behavior is predictable. There are two factors involved: First, the last item in the list is readable - it is followed by an empty line:
Secondly, the visitor faces a choice: go to the next page, which will not know how much to load, which will still need to be scrolled and on which will be unknown which sites, or stay on this page and try the last of the options. And here trivial laziness works - in most cases the user chooses the second option.
For an ordinary user, simplicity often has o greater importance than even quality . A person always chooses the best of the available options, even if this option implies a banal simplicity, rather than an objective quality.
And when a visitor comes to your site, he first draws attention to the simplicity of the site: the template, navigation, location of parts, fonts and color scheme. For all this, the user takes 1-2 seconds . If the site seems too complicated to him, he will without hesitation close the page and open another site.
The first thing you need to do is split the navigation column into blocks. (Example taken from the real site of Andy Jenkins).
In the column on the right, items are divided into blocks, which are perceived much easier than a jumble of items and categories, as in the menu on the right. And the eyes get tired less.
As a result of this innovation, the number of failures on the site decreased by 25%, while profits increased by 10%. There are two reasons for this:
Here is an example of what the menu should not be (by the way, this is also Andy Jenkins website - it was such in the past):
Instead of clinging to something, the visitor’s gaze runs through the page from one menu column to another, then to the product image, then back to the menu, and again around the circle.
Simplify the structure of the site as a whole and the menu in particular.Break the site into small blocks . At the head of each block, put an element that will attract attention, whether it is the name of the block in the menu column or the product image in the body of the page.
Tip: When splitting the menu into blocks, limit the number of items in each block to 7 (+/- 2) by title.
Of course, those of you who do not own an online store are unlikely to be able to apply the above information about the menu and its hidden features.
But even if you have a simple informational website or blog and promote your product or affiliate product through it, you can also increase the conversion rate by placing the information blocks on the page correctly.
As an example, Andy took several layouts and compared their usability. Here is the first one:
Normal layout, 4 optimized information blocks, title, text, link ... However, this is one of the worst layouts you can imagine.
Andy did a little test. Visitors to the site had to answer a few questions. For each of the questions there were 4 possible answers that were presented, as shown in the figure above. Visitors had to search for the right answer for a long time, because the layout was inconvenient. For the same reason, they were often mistaken. In many cases, they poked at random.
Test result: the answers were inaccurate and it took a long time to complete the test. Accordingly, the ratio of visitors to the test was rather negative than positive.
Here is an example of a good layout:
A visitor studies the headings in a few seconds, then quickly reads the text under the heading and gives the answer. As a result of this change in the layout, the percentage of correct answers increased. Moreover, the time to search for the right answer was reduced by 15%. It would seem that 15% is nonsense, but the visitor feels the difference.
Our eyes get tired. It is a fact. For eyes, a run over 5200 pixels is equivalent to 1 mile for legs. That is why we are pleased to look at the correctly structured menu columns and small information blocks. So we quickly find information and our eyes are less tired. Now compare the distance that the “eyes” cover in good and bad layouts:
The basic principles for creating a convenient and attractive layout are described by Andy Edmonds with the acronym CRAP (if you don’t know how word, look in the dictionary 🙂.) Now, in order:
Indent at the end of each block, highlighting the title and address in color, different font size.
All blocks are the same inside one page and on other pages. Predictability of the layout makes it even easier to use
You must not only unify the information blocks, but also arrange them correctly on the page. Regular geometric figures rule 🙂
Not far and not close. The elements of the blocks should be arranged so that the transition from one block to another (or inside the block) is as fast as possible.
As an example of a good layout, Andy cites the site Tapestry Standard.
Thanks to the use of StomperScrutinizer and the corresponding changes on the site, Andy managed to increase the conversion rate of the site to 3%.
Go through the program on the site and see how everything is cleverly done (or watch the video). Here are a few screenshots:
“Free Shipping” is highlighted in color.
The contrast menu category and contrasting periphery.
The person acts as a visual anchor for the visitor. Next to the face is a description of the benefits for visitors: Money-back , online chat and help of an interior designer.
This is a standard order page. As you can see, the visitor immediately finds the button to pay for the goods, because in most cases, this button is worth after days (remember the “Continue” and “Continue” buttons - they are also the last ones to be).
The payment button (or add goods to the cart) should be the last active element of the page or information block. So it will attract maximum visitor attention.
Also note the location of the “Return to Store” button. It stands second from the right - directly in front of the “Checkout” button. Here, the proximity principle works.
Our eyes have one more feature: they can scan the text fluently, not paying attention to details, and vice versa, look to the details in those words that attract their attention. Therefore, you must provide the reader with anchors (contrasting elements) for which his gaze can catch.
Here is a short list of such anchors:
Naturally, everything should be in moderation.
Now you need to download and install StomperScrutinizer. Before you download the program, you will need to fill out a form and enter your name, e-mail, country of residence and other data. In the Organization Type section, you can select Other.
After that, a confirmation letter will be sent to the box you specified. Follow the link in the letter
In addition to the program itself, you will also get access to a special bonus - tips on website design and increase in conversion. (I downloaded the program yesterday, I haven’t received the bonus yet. Probably, it will come in parts to the e-mail in the form of distribution.)
After you confirm your desire to tell StomperScrutinizer, you will be taken to the download page.
First download and install Adobe Air Runtime, then download and install StomperScrutinizer.
In the same place on the page you will find a FAQ and a description of 10 ways to use the program (if you need a translation, write to the comments, I'll do it).
I advise you not to delay registration. Andy says that after some time access to the program will be closed. Marketers of this level do not throw words into the wind, so hurry up. After all, the matter is more likely not in the program itself, which can be safely laid out on Rapida, but in the boards, which only subscribers can receive.
If you have a blog dedicated to optimization, design or e-commerce, give the readers a New Year present - tell them about StomperScrutinizer, and if you want, give a link to my translation video.