{"id":164122,"date":"2017-04-26T13:00:58","date_gmt":"2017-04-26T13:00:58","guid":{"rendered":"https:\/\/premium.wpmudev.org\/blog\/?p=164122"},"modified":"2022-03-11T00:37:10","modified_gmt":"2022-03-11T00:37:10","slug":"mobile-cta-button-best-practices","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/mobile-cta-button-best-practices\/","title":{"rendered":"12 Best Practice for Super Effective Mobile Call-to-Action Buttons"},"content":{"rendered":"<p>There are currently over <a href=\"https:\/\/www.bankmycell.com\/blog\/how-many-phones-are-in-the-world#:~:text=How%20Many%20People%20Have%20Smartphones%20In%20The%20World%3F&amp;text=According%20to%20Statista%2C%20the%20current,world's%20population%20owns%20a%20smartphone.\" rel=\"noopener\" target=\"_blank\">6.6 billion smartphone users<\/a> worldwide. Even if your site only taps into the tiniest fraction of those global users, I\u2019m willing to bet there&#8217;s a significant portion of mobile visitors that comprise your overall site traffic. Why do I say this? Because in the U.S. alone, smartphone users access the Internet, on average, <a href=\"https:\/\/kommandotech.com\/statistics\/how-much-time-does-the-average-person-spend-on-their-phone\/\" rel=\"noopener\" target=\"_blank\">3-5 hours per day<\/a>.<\/p>\n<p>Let\u2019s say that statistic is spot-on for your target demographic. If that is the case, this means your smartphone-owning audience spends nearly <em>three hours<\/em> surfing the web from their phones every day. If you\u2019ve done the work to optimize your site for <a href=\"https:\/\/wpmudev.com\/blog\/mobile-optimized-website\/\" target=\"_blank\" rel=\"noopener\">mobile<\/a> and <a href=\"https:\/\/wpmudev.com\/blog\/seo-steps-before-launching-website\/\" target=\"_blank\" rel=\"noopener\">search<\/a>, then ideally your site will hit their radar at some point during that three-hour timeframe each day.<\/p>\n<p>The question now becomes: Is your site prepared to convert those smartphone users?<\/p>\n<p>Recently, I wrote about what research says about how to <a href=\"https:\/\/wpmudev.com\/blog\/call-to-action-research\/\" target=\"_blank\" rel=\"noopener\">optimally place calls-to-action<\/a> on your WordPress site. While I briefly mentioned a possible difference between desktop and mobile CTA placement, there wasn\u2019t much evidence available to definitively prove a clear difference there. That being said, we do know there are other defining characteristics that mobile CTAs have that desktop ones don\u2019t.<\/p>\n<p>What do you say we take a deeper dive into exploring how to optimally design CTAs specifically for your smartphone visitors?<\/p>\n<p>Continue reading, or jump ahead using these links:<\/p>\n<ul>\n<li><a href=\"#go-light-on-copy\">Go Light on Copy<\/a><\/li>\n<li><a href=\"#appeal-to-emotions\">Appeal to Emotions<\/a><\/li>\n<li><a href=\"#check-the-search-results\">Check the Search Results<\/a><\/li>\n<li><a href=\"#consider-next-steps\">Consider Next Steps<\/a><\/li>\n<li><a href=\"#remember-the-thumb-zone\">Remember the Thumb Zone<\/a><\/li>\n<li><a href=\"#limit-the-options\">Limit the Options<\/a><\/li>\n<li><a href=\"#stick-to-the-page\">Stick to the Page<\/a><\/li>\n<li><a href=\"#utilize-white-space\">Utilize White Space<\/a><\/li>\n<li><a href=\"#use-color-wisely\">Use Color Wisely<\/a><\/li>\n<li><a href=\"#remember-the-placement-guidelines\">Remember the Placement Guidelines<\/a><\/li>\n<li><a href=\"#size-up\">Size Up, When in Doubt<\/a><\/li>\n<li><a href=\"#get-creative-with-width\">Get Creative with Width<\/a><\/li>\n<\/ul>\n<h2>Designing Mobile-Friendly CTAs for WordPress<\/h2>\n<p>When it comes to something as specific as designing a call-to-action for smartphone users, I like to reflect on my own personal experiences first.<\/p>\n<p>Have you ever\u2026<\/p>\n<p>Struggled to find the CTA on a page because it was too cluttered with text, images, and other design elements?<\/p>\n<p>Felt overwhelmed by the link-through page whether it be a multi-page form you now need to fill out or a too-small-to-read PDF that you really just wanted to be emailed to you?<\/p>\n<p>Tried to tap on a website\u2019s button only to accidentally hit another link or button close by?<\/p>\n<p>Then you know how frustrating it can be when all you want to do is click that CTA, but so many poor design choices keep you from doing so. Here are my 12 recommendations for ensuring you don\u2019t lose your visitors\u2019 interest before they even have a chance to convert.<\/p>\n<h3 id=\"go-light-on-copy\">Tip #1. Go Light on Copy<\/h3>\n<div  class=\"wpdui-pic-small   \" >\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-420x420 size-420x420\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/04\/match-1.jpg\" alt=\"Match.com's CTA clearly wants you to click through to see who's single.\" width=\"238\" height=\"420\" \/><figcaption class=\"wp-caption-text\">Match.com&#8217;s CTA clearly wants you to click through to see who&#8217;s single.<\/figcaption><\/figure>\n<\/div>\n<p>Unless your WordPress website is solely in the business of delivering blog and article content, visitors most likely show up with a quick action plan. Do they want to find out your store\u2019s hours of operation? Do they need to do a quick product lookup? Is there something people usually want to buy on the fly from their phone? In general, it\u2019s best to always aim to keep messaging brief. This is especially true for a mobile CTA as well as the descriptive text around it.<\/p>\n<h3 id=\"appeal-to-emotions\">Tip #2. Appeal to Emotions<\/h3>\n<div  class=\"wpdui-pic-small   \" >\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-420x420 size-420x420\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/04\/grubhub-1.jpg\" alt=\"Grubhub lures you in with pictures of tasty good and the temptation that you can order it in your neighborhood.\" width=\"238\" height=\"420\" \/><figcaption class=\"wp-caption-text\">Grubhub lures you in with pictures of tasty good and the temptation that you can order it in your neighborhood.<\/figcaption><\/figure>\n<\/div>\n<p>Again, it\u2019s important to put yourself in the shoes of your visitors. Smartphones typically equate to \u201cconvenience,\u201d so take advantage of that with your CTA messaging. Don\u2019t force anyone to play the guessing game. Use action words that tell them exactly what to do and what will happen right now if they do. If it makes more sense to do so, you could instead try appealing to their current emotional state.<\/p>\n<h3 id=\"check-the-search-results\">Tip #3. Check the Search Results<\/h3>\n<div  class=\"wpdui-pic-small   \" >\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-420x420 size-420x420\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/04\/cuba-libre-1.jpg\" alt=\"Cuba Libre has tailored its mobile site to help site visitors looking for a particular location of its restaurant.\" width=\"238\" height=\"420\" \/><figcaption class=\"wp-caption-text\">Cuba Libre has tailored its mobile site to help site visitors looking for a particular location of its restaurant.<\/figcaption><\/figure>\n<\/div>\n<p>Haven\u2019t spent much time in Google Analytics? If you want to improve the user experience for mobile users, you absolutely should.<\/p>\n<p>One way you can do this\u2014which will also help you create super attractive CTAs\u2014is by studying the keywords from both mobile search as well as your site\u2019s search bar. These keywords can help you determine what smartphone visitors want to see first. You can then design CTAs that take them to that spot of your site straight away without having to scroll or dig through the navigation.<\/p>\n<h3 id=\"consider-next-steps\">Tip #4. Consider Next Steps<\/h3>\n<div  class=\"wpdui-pic-small   \" >\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-420x420 size-420x420\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/04\/evernote-1.jpg\" alt=\"Evernote encourages visitors to download a copy of its software to their phone, though you may want to consider other options for your own visitors.\" width=\"238\" height=\"420\" \/><figcaption class=\"wp-caption-text\">Evernote encourages visitors to download a copy of its software to their phone, though you may want to consider other options for your own visitors.<\/figcaption><\/figure>\n<\/div>\n<p>It\u2019s not just about designing an eye-catching CTA, it\u2019s making the reward worth it. Always consider what happens after smartphone users click your CTA. While they may be excited to snag up that free downloadable, what are they going to do with that ebook PDF on their phone? Instead of hoping they\u2019ll be able to take the next steps the same as they would on desktop, give them another option (like email).<\/p>\n<h3 id=\"remember-the-thumb-zone\">Tip #5. Remember the Thumb Zone<\/h3>\n<div  class=\"wpdui-pic-small   \" >\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-420x420 size-420x420\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/04\/kissmetrics-1.jpg\" alt=\"Kissmetrics CTA is easy to reach with your thumb.\" width=\"238\" height=\"420\" \/><figcaption class=\"wp-caption-text\">Kissmetrics CTA is easy to reach with your thumb.<\/figcaption><\/figure>\n<\/div>\n<p>UX designer Steven Hoober conducted a study back in 2013 that identified the most common ways mobile users interacted with their phones. In addition to recording the percentage of phone calls made and music listened to, the most interesting observations came in the form of how users typically held onto their devices. This led to the revelation of <a href=\"http:\/\/www.uxmatters.com\/mt\/archives\/2013\/02\/how-do-users-really-hold-mobile-devices.php\" rel=\"noopener\" target=\"_blank\">\u201cthe thumb zone\u201d<\/a>&#8211;the spots on the phone easiest for thumbs to reach and, consequently, most used by people.<\/p>\n<p>Although you won\u2019t be able to account for all three of the most common cradling positions, you can pay attention to those hot beds of thumb &#8220;touch&#8221; activity when placing your CTAs.<\/p>\n<h3 id=\"limit-the-options\">Tip #6. Limit the Options<\/h3>\n<div  class=\"wpdui-pic-small   \" >\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-420x420 size-420x420\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/04\/hubspot-1.jpg\" alt=\"Hubspot's mobile site is simple and directs users to click the CTA.\" width=\"238\" height=\"420\" \/><figcaption class=\"wp-caption-text\">Hubspot&#8217;s mobile site is simple and directs users to click the CTA.<\/figcaption><\/figure>\n<\/div>\n<p>In general, it\u2019s a best practice to limit the number of choices your visitors have to make on your site. Too many options and you\u2019ll risk disrupting the peace with the <a href=\"https:\/\/en.wikipedia.org\/wiki\/The_Paradox_of_Choice\" rel=\"noopener\" target=\"_blank\">Paradox of Choice<\/a>. So, when planning out where to place your CTAs for mobile, I\u2019d suggest you try to keep it to one CTA within any given space. You\u2019re already working with limited real estate, so don\u2019t complicate the decision-making process if you don\u2019t have to.<\/p>\n<h3 id=\"stick-to-the-page\">Tip #7. Stick to the Page<\/h3>\n<div  class=\"wpdui-pic-small   \" >\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-420x420 size-420x420\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/04\/buzzfeed.jpg\" alt=\"Buzzfeed stickies its social media CTAs to the bottom of the page within easy thumb reach.\" width=\"238\" height=\"420\" \/><figcaption class=\"wp-caption-text\">Buzzfeed stickies its social media CTAs to the bottom of the page within easy thumb reach.<\/figcaption><\/figure>\n<\/div>\n<p>Unless you have a CTA that absolutely needs to be served in a timed or targeted popup, I\u2019d suggest you go with a simpler delivery approach: keep all CTAs directly on the page. You may even want to literally make them \u201cstick\u201d to the bottom of the mobile screen so that, regardless of how far visitors travel, the call to take action is always with them.<\/p>\n<h3 id=\"utilize-white-space\">Tip #8. Utilize White Space<\/h3>\n<div  class=\"wpdui-pic-small   \" >\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-420x420 size-420x420\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/04\/asana.jpg\" alt=\"Asana's mobile site uses a liberal amount of white space and the CTA is the very obvious focus.\" width=\"238\" height=\"420\" \/><figcaption class=\"wp-caption-text\">Asana&#8217;s mobile site uses a liberal amount of white space and the CTA is the very obvious focus.<\/figcaption><\/figure>\n<\/div>\n<p>We already know that <a href=\"https:\/\/wpmudev.com\/blog\/decluttering-communicating-effectively\/\" target=\"_blank\" rel=\"noopener\">decluttering<\/a> is a must for good web design. As you can imagine, this is especially important for calling attention to the buttons you want clicked within the minimal space your smartphone visitors have to view it from.<\/p>\n<p>Include enough white space around your CTA to draw attention to it; too distracting or cluttered of a space could work against you. You also don\u2019t want users to get frustrated trying to click the button, only to repeatedly (and accidentally) hit the Terms of Use link or some other clickable content nearby.<\/p>\n<h3 id=\"use-color-wisely\">Tip #9. Use Color Wisely<\/h3>\n<div  class=\"wpdui-pic-small   \" >\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-420x420 size-420x420\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/04\/wordpress.png\" alt=\"WordPress.com uses a limited color palette.\" width=\"238\" height=\"420\" \/><figcaption class=\"wp-caption-text\">WordPress.com uses a limited color palette.<\/figcaption><\/figure>\n<\/div>\n<p>In general, whatever you used for your CTAs on your website should work just fine for mobile visitors. If you need a refresher on what sort of colors work for CTA, check out this guide on <a href=\"https:\/\/wpmudev.com\/blog\/color-psychology\/\" target=\"_blank\" rel=\"noopener\">color psychology<\/a>.<\/p>\n<h3 id=\"remember-the-placement-guidelines\">Tip #10. Remember the Placement Guidelines<\/h3>\n<div  class=\"wpdui-pic-small   \" >\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-420x420 size-420x420\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/04\/netflix.jpg\" alt=\"Netflix's CTA features prominently towards the bottom of the screen.\" width=\"238\" height=\"420\" \/><figcaption class=\"wp-caption-text\">Netflix&#8217;s CTA features prominently towards the bottom of the screen.<\/figcaption><\/figure>\n<\/div>\n<p>As a reminder, <a href=\"https:\/\/wpmudev.com\/blog\/call-to-action-research\/\" target=\"_blank\" rel=\"noopener\">this<\/a> is what I was able to dig up for research on the optimal placement of your CTA. I\u2019d suggest you pay attention not only to the desktop vs. mobile findings, but to the others as well since top vs. bottom and left vs. right still factor into the mobile experience as well.<\/p>\n<h3 id=\"size-up\">Tip #11. Size Up, When in Doubt<\/h3>\n<div  class=\"wpdui-pic-small   \" >\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-420x420 size-420x420\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/04\/amazon.jpg\" alt=\"Amazon's button meet minimum guidelines.\" width=\"238\" height=\"420\" \/><figcaption class=\"wp-caption-text\">Amazon&#8217;s button meet minimum guidelines.<\/figcaption><\/figure>\n<\/div>\n<p>If you\u2019re wondering what size to make your CTAs for mobile, <a href=\"http:\/\/www.lukew.com\/ff\/entry.asp?1085\" rel=\"noopener\" target=\"_blank\">Apple<\/a> has the answer to that one and it\u2019s such a heavily cited statistic that I\u2019d suggest not deviating too far from it. The minimum CTA sizing Apple recommends for touch screen conversions is 44 x 44 pixels. This doesn\u2019t mean you need to have square CTAs, these are just the minimum parameters they suggest.<\/p>\n<h3 id=\"get-creative-with-width\">Tip #12. Get Creative with Width<\/h3>\n<div  class=\"wpdui-pic-small   \" >\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-420x420 size-420x420\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/04\/wpmudev.jpg\" alt=\"On the mobile version of the WPMU DEV site, we use a full width CTA.\" width=\"238\" height=\"420\" \/><figcaption class=\"wp-caption-text\">On the mobile version of the WPMU DEV site, we use a full width CTA.<\/figcaption><\/figure>\n<\/div>\n<p>I\u2019d say you can consider this final point optional since the overall design of your site will dictate whether or not this makes sense aesthetically. However, if you can design your mobile CTAs to stretch the full width of your screen, think about how hard it would be for visitors to miss it or try to gloss over it. There\u2019s nothing around it to distract from it. Just your content and then bam! Call-to-action.<\/p>\n<h2>Wrapping Up<\/h2>\n<p>I know I\u2019ve been talking a lot about calls-to-action a lot lately, but it makes sense, right? Without them, you\u2019ve got to put your trust in the fact that visitors will read all your content and decide to reach out or take the next steps on their own\u2026 and we know that\u2019s not going to happen.<\/p>\n<p>So, if you\u2019re finding your percentage of mobile visitors growing and want to nudge them along through the conversion process, take heed of these recommendations. Then watch as their experience on mobile improves and your conversions grow.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>There are currently over 6.6 billion smartphone users worldwide. Even if your site only taps into the tiniest fraction of those global users, I\u2019m willing to bet there&#8217;s a significant portion of mobile visitors that comprise your overall site traffic. Why do I say this? Because in the U.S. alone, smartphone users access the Internet, [&hellip;]<\/p>\n","protected":false},"author":344989,"featured_media":164341,"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":[557],"tags":[10013,10629,2395],"tutorials_categories":[],"class_list":["post-164122","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development","tag-call-to-action","tag-cta","tag-mobile"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/164122","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=164122"}],"version-history":[{"count":10,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/164122\/revisions"}],"predecessor-version":[{"id":207042,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/164122\/revisions\/207042"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/164341"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=164122"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=164122"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=164122"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=164122"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}