{"id":163473,"date":"2017-03-24T13:00:23","date_gmt":"2017-03-24T13:00:23","guid":{"rendered":"https:\/\/premium.wpmudev.org\/blog\/?p=163473"},"modified":"2017-03-29T06:24:27","modified_gmt":"2017-03-29T06:24:27","slug":"call-to-action-research","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/call-to-action-research\/","title":{"rendered":"Where to Put Your Call-to-Actions Buttons? What the Research Says About CTAs"},"content":{"rendered":"<p>When we talk about the optimization of web design, much of our focus often goes towards the obvious elements: content, color, sizing, typography, and so on. But as we saw in the analysis conducted on <a href=\"https:\/\/wpmudev.com\/blog\/logo-placement\/\" target=\"_blank\" rel=\"noopener\">logo optimization<\/a>, placement also plays an important role in the user experience.<\/p>\n<p>In building a website around the user experience, the ultimate goal is to develop:<\/p>\n<ul>\n<li>An aesthetically pleasing design.<\/li>\n<li>A customer journey that\u2019s easy to follow from the point of entry through to conversion.<\/li>\n<li>Content that speaks directly to the user\u2019s pain and delivers a much-needed solution.<\/li>\n<\/ul>\n<p>One of the most important elements you can use in web design in order to effectively shape the user\u2019s experience is the call-to-action.<!--more--><\/p>\n<p>In case you missed Jon Penland\u2019s recent piece on the best practices for <a href=\"https:\/\/wpmudev.com\/blog\/designing-buttons-calls-to-action\" target=\"_blank\" rel=\"noopener\">designing calls-to-action<\/a>, be sure to give it a read. He provides tips on how to design buttons to actually look like buttons, why you should use code over plugins, and, of course, the importance of consistency. Once you\u2019ve got a grip on CTA design best practices, let\u2019s take a look at what the research says about the <em>placement<\/em> of your CTA.<\/p>\n<h2>Experts Weigh In: Where Should You Place Your CTA?<\/h2>\n<p>Unlike the logo placement argument which only had two studies to back it, this question of \u201cwhere should I place my CTA?\u201d is one that marketing experts attempt to tackle often. And it\u2019s probably because it\u2019s so frustrating. As of now, no one has come up with one clear solution like \u201ctop-right corner of every web page\u201d that solves this conundrum of where CTAs belong for optimal engagement.<\/p>\n<p>Let\u2019s dig into the studies, the various approaches taken, and the reason for this ambiguity, shall we?<\/p>\n<h3>Assessment #1: Above vs. Below the Fold<\/h3>\n<p>The fold. Ah, yes. This used to play a big role in web design: put all the important stuff up top and then the secondary information down below. But that was before we had <a href=\"https:\/\/wpmudev.com\/blog\/ab-testing\/\" target=\"_blank\" rel=\"noopener\">A\/B testing<\/a> and heat mapping tools to tell us that\u2019s not always the case\u2014which is the problem we now face with the placement of the CTA.<\/p>\n<p><b>So, What Did the Experts Find?<\/b><\/p>\n<p>According to Kissmetrics, the CTA placement should be dictated by the complexity of a page. For a shorter page with less information, then it might make sense to put the CTA above the folder. For a longer page that conveys a more complex and thorough investment, the CTA may do better below the fold.<\/p>\n<p>In a test conducted by <a href=\"http:\/\/www.marketingexperiments.com\/blog\/analytics-testing\/web-usability-long-landing-page.html\" rel=\"noopener\" target=\"_blank\">MECLABS<\/a>, they attempted to demonstrate this point. They compared the conversion rate difference between:<\/p>\n<p>A shorter home page design that contained a distracting navigation bar, a lack of a value proposition in the content, and a call-to-action form in the top-right of the page.<\/p>\n<p><em>AND<\/em><\/p>\n<p>A longer home page design with content that delivered a stronger, clearer, and more detailed value proposition. They also removed the distracting navigation and placed the call-to-action at the bottom of the page.<\/p>\n<p>What they found was that the simpler and longer layout of the page had a conversion rate that was 220% higher than that of the original control page. The basic assumption here being that because they provided all the useful information visitors needed in a clean and simple manner, they didn\u2019t mind waiting until the bottom of the page to engage with the CTA.<\/p>\n<p>As Kissmetrics explained, &#8220;The fold has nothing to do with it. It\u2019s all about motivation.&#8221;<\/p>\n<h3>Assessment #2: Desktop vs. Mobile<\/h3>\n<p>As most of us are smartphone users, it\u2019s easy to understand why this question would even be raised. We use our mobile phones for quick, convenient experiences with the web\u2014on the go, at work, while out shopping. So the last thing any of us really wants is to be forced into unnecessarily scrolling or clicking around a website to get to the desired destination.<\/p>\n<p><b>So, What Did the Experts Find?<\/b><\/p>\n<p>Well, it\u2019s important to note first that many of the studies cited in this article were done before smartphones played a significant role in our daily personal and professional lives. Because of this, the question of desktop vs. mobile CTA placement hasn\u2019t been raised much (if at all). However, here is what I was able to dig up:<\/p>\n<p>Although mobile users have adjusted to scrolling through longer pages, the tendency and preference to click higher up on a page still exists.<\/p>\n<p>In an eye-tracking study done by <a href=\"https:\/\/moz.com\/blog\/eye-tracking-2016-how-searchers-interact-mobile-serps-desktop\" rel=\"noopener\" target=\"_blank\">Mediative<\/a> a few years back, they wanted to know if search behavior on Google changed for mobile users. Here is what they found:<\/p>\n<ul>\n<li>The top organic search result still received more clicks than any other result on the page (including paid). Despite it requiring mobile users to scroll past paid ad results, they were willing to scroll find the result that was been deemed the most relevant by Google.<\/li>\n<li>Only 7.4% of all users who clicked on the search results page were willing to scroll past the fourth organic listing.<\/li>\n<\/ul>\n<p>While I recognize that this information pertains to search listings and not a CTA, I\u2019d like to think the same logic applies. In other words, this sums up what most web designers already understand: mobile users don\u2019t want to work to find information that matters most to them. That being said, this doesn\u2019t mean they\u2019re willing to click on any old CTA placed at the top of your mobile web page; it still needs to be relevant. But the less work you make them do, the better.<\/p>\n<h3>Assessment #3: Left vs. Right<\/h3>\n<p>This is the most cut and dried result finding I could find regarding CTA placement. The answer in every single debate between left or right placement of a CTA is &#8220;right.&#8221; And it\u2019s all because of the Gutenberg Diagram.<\/p>\n<p><b>So, What Did the Experts Find?<\/b><\/p>\n<p>Most of you are already familiar with this concept, though you might not have known it was called the <a href=\"https:\/\/medium.com\/user-experience-3\/the-gutenberg-diagram-in-web-design-e5347c172627#.dp1i3sl2h\" rel=\"noopener\" target=\"_blank\">Gutenberg Diagram<\/a>. The diagram marks a &#8220;Z&#8221; across a web page, divvying up the different optical areas within it. Each end and point of the Z indicate different levels of visual acuity and attentiveness of your visitors.<\/p>\n<div  class=\"wpdui-pic-large   \" >\n<figure class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-1364x1364 size-1364x1364\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/03\/dropbox.png\" alt=\"The Dropbox website follows the principles of the Gutenberg Diagram.\" width=\"1050\" height=\"881\" \/><figcaption class=\"wp-caption-text\">The Dropbox website follows the principles of the Gutenberg Diagram.<\/figcaption><\/figure>\n<\/div>\n<p>Based on this theorem, the two spots on the right (at the first point of the \u201cZ\u201d and the very end of it) are where visitors expect to take action. So there\u2019s really no question here as to where your call-to-action belongs in terms of right or left. It should always be towards the right side of the screen.<\/p>\n<h3>Summary of the Results<\/h3>\n<p>In sum, here is what we can take away about CTA placement:<\/p>\n<ul>\n<li>Always consider the <a href=\"https:\/\/designmodo.com\/cta-button\/\" rel=\"noopener\" target=\"_blank\">AIDA<\/a> (Attention \u2013 Interest \u2013 Desire \u2013 Action) before inserting any CTA into your page.<\/li>\n<li>It\u2019s okay to place it above the fold if you\u2019ve created a \u201cmini experience\u201d that provides all the information your visitors need to make a decision there.<\/li>\n<li>It\u2019s okay to place it below the fold if you\u2019ve created a story that your visitors feel invested in and will want to follow all the way to the bottom.<\/li>\n<li>You can also place the CTA below the fold so long as you use directional cues to guide visitors to it.<\/li>\n<li>Mobile users prefer to do less scrolling, though only if you\u2019ve provided all the relevant details they need in the decision-making process up top.<\/li>\n<li><a href=\"https:\/\/en.wikipedia.org\/wiki\/Fitts's_law\" rel=\"noopener\" target=\"_blank\">Fitt\u2019s Law<\/a> says that if you want your visitors to engage with something on your site, it needs to occur within their page. That\u2019s why it\u2019s best to follow the natural flow of your users\u2019 eyes from top to bottom and left to right.<\/li>\n<\/ul>\n<p>Calls-to-action are tricky. There\u2019s a lot to take into account when trying to execute these correctly: sizing, color, wording, typography, white space, and now placement.<\/p>\n<p>While the results above do give some clear and not-so-clear guidelines, you may be best off doing what you can to place your CTAs based on what you think your visitors will react well to. Then A\/B test. There is a logic to how and why CTAs work in different spots, but you don\u2019t always know how your particular audience will react to it, so don\u2019t go with your gut on this one.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When we talk about the optimization of web design, much of our focus often goes towards the obvious elements: content, color, sizing, typography, and so on. But as we saw in the analysis conducted on logo optimization, placement also plays an important role in the user experience. In building a website around the user experience, [&hellip;]<\/p>\n","protected":false},"author":344989,"featured_media":163508,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[10469],"tags":[10596,10013,10629],"tutorials_categories":[],"class_list":["post-163473","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-business-marketing","tag-buttons","tag-call-to-action","tag-cta"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/163473","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/344989"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=163473"}],"version-history":[{"count":10,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/163473\/revisions"}],"predecessor-version":[{"id":214110,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/163473\/revisions\/214110"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/163508"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=163473"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=163473"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=163473"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=163473"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}