Using the principles of psychology to increase the conversion of sites. Part 4: The Fitts Act
Part 1
Part 2
Part 3
Part 5
We all know perfectly well that page load time has a significant effect on the conversion rate, but what can you say about the time it takes to perform a particular action?
Fitts law suggests that the time required to hover the mouse over the desired object can be represented as a function that depends on the distance to the target and the size of the target.
')
Theoretically, this means that in order to cause a growth in CTR (click-through rate), it is enough to increase the target (within reasonable limits) and place it near the expected position of the mouse cursor.
And vice versa, you can reduce the number of undesirable actions of the user, by reducing the corresponding interface elements in combination with placing them in a remote part of the page (though you should not forget that the size and placement of the “close tab” button are not subject to you) .
For lovers of formalization, the mathematical view of the law from Wikipedia:
In essence, the Fitts law overlaps with the principle of cost-benefit analysis. The meaning can be reduced to the fact that under other equal conditions, the simpler the action, the higher its probability. In this case, which is not always obvious, we are talking not only about the parameters of the final object, but also about its environment. A distance of 10 pixels can be huge if at the moment of its overcoming by the user the latter sees about a dozen pop-up and pop-up windows.
Some tests seemed quite obvious to us. It can be argued that the useful experience that can be drawn from the presented design options is knowledge, how not to do it on the example of the original page options. The main conclusion is quite obvious: the "magic button" should be visible and easily accessible.
We have already mentioned that the average movement of the mouse while browsing the site, I have an F-shaped model. This means that the user, first of all, looks at the top of the site. Then, scrolls it down, paying attention to the conventionally central part.
It should be remembered that the viewing model for each specific site depends largely on the design and content features. For example, for long pages, the model will most likely resemble E.
Image source
By the way, the idea of ​​the F-model perfectly echoes the other principle (naturally, taking into account the features of the sites, as a visual way of presenting information), which has a great history not only in design, but also in photography and other types of visual art. This is the “rule of thirds”.
The essence of the rule is that the visual accents of the viewer are most often located on lines that conditionally divide an object into three parts, both horizontally and vertically.
Visual demonstration of the rule in action (source - Wikipedia)
Example # 1: Hyundai (62% increase in benchmark)
Hyundai created a website whose main purpose was to distribute various brochures and information about test drives. The main problem that arose after the launch of the project was a small number of subscribers.
To fix this, Hyundai’s marketing team developed a comprehensive solution to the problem:
1. Change SEO text;
2. The increase in images (more clearly, attracts attention);
3. Two large CTA buttons.
In the original, the user could sign up for a test drive or order a brochure by clicking on the text link in the panel on the left side of the screen.
As a result, all these changes led to an increase in the number of booked test drives and booklets ordered by 62%.
While the big buttons "turned on" the law of Fitts, a small distance between them, increased its effect. Probably in the next test, they should try to move the CTA to the top of the page.
Our comment:
Absolutely expected for us, the record of conducting this test was ambiguously perceived by the audience:
Example number 2: The election campaign of Barack Obama in 2012 (the number of users who unsubscribed from the mailing decreased by 22%)
According to the data presented, about $ 500 million for the Obama campaign were collected through emails.
In order to achieve such success, it was necessary to carefully work out each element of the list. In particular, close attention was paid to the item that allowed you to unsubscribe from the newsletter.
The design change has reduced the number of unsubscribed by 22%.
In addition to the Fitts Law, the success of this option can also be attributed to the influence of the law of mental models. If the user decides to unsubscribe, he is looking for something like “unsubscribe”, but not exactly “click here”.
Sample 3: SAP (32.5% growth)
The enterprise software maker SAP wanted to increase the number of downloads of its Crystal Reports software.
The original page looked like a regular corporate website: a rather formal design with a bit of text. The download link was also provided in text form.
The winning version contained two important changes. Firstly, the download button was clearly highlighted, and secondly, distractions were removed at the bottom of the page. As a result, the number of downloads of the trial version increased by 32.5%.
Case # 4: The Vineyard (32% increase )
The original page contained a large image of one of the rooms and a brief history of the hotel. At the same time, the reference to booking a room was located at the very bottom and stood out weakly against the general background.
Only the "Book" button was added to the test page.
In this case, the CTA was moved to the top of the page (reducing the distance to the target) and a large button was used that attracted attention (the target size was increased).
PS The infinite increase in the size of the button will not lead to an infinite increase in the number of clicks on it.
Part 2
Part 3
Part 5
We all know perfectly well that page load time has a significant effect on the conversion rate, but what can you say about the time it takes to perform a particular action?
Fitts law suggests that the time required to hover the mouse over the desired object can be represented as a function that depends on the distance to the target and the size of the target.
')
Theoretically, this means that in order to cause a growth in CTR (click-through rate), it is enough to increase the target (within reasonable limits) and place it near the expected position of the mouse cursor.
And vice versa, you can reduce the number of undesirable actions of the user, by reducing the corresponding interface elements in combination with placing them in a remote part of the page (though you should not forget that the size and placement of the “close tab” button are not subject to you) .
A little information
For lovers of formalization, the mathematical view of the law from Wikipedia:
In essence, the Fitts law overlaps with the principle of cost-benefit analysis. The meaning can be reduced to the fact that under other equal conditions, the simpler the action, the higher its probability. In this case, which is not always obvious, we are talking not only about the parameters of the final object, but also about its environment. A distance of 10 pixels can be huge if at the moment of its overcoming by the user the latter sees about a dozen pop-up and pop-up windows.
Some tests seemed quite obvious to us. It can be argued that the useful experience that can be drawn from the presented design options is knowledge, how not to do it on the example of the original page options. The main conclusion is quite obvious: the "magic button" should be visible and easily accessible.
A few words on the topic "put near the expected position of the mouse cursor":
We have already mentioned that the average movement of the mouse while browsing the site, I have an F-shaped model. This means that the user, first of all, looks at the top of the site. Then, scrolls it down, paying attention to the conventionally central part.
It should be remembered that the viewing model for each specific site depends largely on the design and content features. For example, for long pages, the model will most likely resemble E.
Image source
By the way, the idea of ​​the F-model perfectly echoes the other principle (naturally, taking into account the features of the sites, as a visual way of presenting information), which has a great history not only in design, but also in photography and other types of visual art. This is the “rule of thirds”.
The essence of the rule is that the visual accents of the viewer are most often located on lines that conditionally divide an object into three parts, both horizontally and vertically.
Visual demonstration of the rule in action (source - Wikipedia)
Example # 1: Hyundai (62% increase in benchmark)
Hyundai created a website whose main purpose was to distribute various brochures and information about test drives. The main problem that arose after the launch of the project was a small number of subscribers.
To fix this, Hyundai’s marketing team developed a comprehensive solution to the problem:
1. Change SEO text;
2. The increase in images (more clearly, attracts attention);
3. Two large CTA buttons.
In the original, the user could sign up for a test drive or order a brochure by clicking on the text link in the panel on the left side of the screen.
As a result, all these changes led to an increase in the number of booked test drives and booklets ordered by 62%.
While the big buttons "turned on" the law of Fitts, a small distance between them, increased its effect. Probably in the next test, they should try to move the CTA to the top of the page.
Our comment:
Absolutely expected for us, the record of conducting this test was ambiguously perceived by the audience:
Example number 2: The election campaign of Barack Obama in 2012 (the number of users who unsubscribed from the mailing decreased by 22%)
According to the data presented, about $ 500 million for the Obama campaign were collected through emails.
In order to achieve such success, it was necessary to carefully work out each element of the list. In particular, close attention was paid to the item that allowed you to unsubscribe from the newsletter.
The design change has reduced the number of unsubscribed by 22%.
In addition to the Fitts Law, the success of this option can also be attributed to the influence of the law of mental models. If the user decides to unsubscribe, he is looking for something like “unsubscribe”, but not exactly “click here”.
Sample 3: SAP (32.5% growth)
The enterprise software maker SAP wanted to increase the number of downloads of its Crystal Reports software.
The original page looked like a regular corporate website: a rather formal design with a bit of text. The download link was also provided in text form.
The winning version contained two important changes. Firstly, the download button was clearly highlighted, and secondly, distractions were removed at the bottom of the page. As a result, the number of downloads of the trial version increased by 32.5%.
Case # 4: The Vineyard (32% increase )
The original page contained a large image of one of the rooms and a brief history of the hotel. At the same time, the reference to booking a room was located at the very bottom and stood out weakly against the general background.
Only the "Book" button was added to the test page.
In this case, the CTA was moved to the top of the page (reducing the distance to the target) and a large button was used that attracted attention (the target size was increased).
PS The infinite increase in the size of the button will not lead to an infinite increase in the number of clicks on it.
Source: https://habr.com/ru/post/230703/
All Articles