How can icon buttons improve click through rate? Click through rate (CTR) and bounce rate are tied together.
The better the CTR, the lower the bounce rate. Are you trying to lower a high bounce rate and increase CTR on your website?
What exactly is click through rate? CTR is the percentage of visitors to a website that click on a hyperlink to another page.
If a visitor lands on a page and then immediately backs out of the page that is called a bounce.
Improving Click Through Rate Theory
The trick to a good CTR (and low bounce rate) is to give the visitors the information they seek. Then entice them to click on a hyperlink in the page. Simply speaking you want your visitors to click through to spend money.
Lets analyze what visitors seek first then get into what users like to click on. Users surf the web to get information. They seek information to solve a problem, buy something or expand their own knowledge.
Therefore a good webpage will have these attributes.
- Provide information on a single subject. Not a bunch of different ideas all bunched into one page.
- Solve a problem. The user is seeking information. So, state the problem you can solve and give as much detail as you can.
- Provide a solution to the problem. Describe the benefits your solution gives to the user.
- Include images or videos. Nothing else comes close to images or videos for showing what your solution is.
- Have an enticing, pretty and large button link to the product or service you want them to purchase.
Sounds simple right? It isn't there are several factors that go into enticing the user to click through. Most important is trust. If your visitor doesn't trust you they won't purchase anything. They might not even believe the information you provide.
Building trust involves many factors. Including a way to communicate with you. I know I wouldn't buy anything from a stranger I can't get back in touch with. Webmasters should include contact information on the page.
A picture is worth a thousand words. Include large, clear, detailed images in your page. People want to see what they are getting. Nothing does this better than images and videos.
Finally, to lower bounce rate and improve click through rate you need large good looking icon buttons. Not just ordinary buttons, not just text links, not just image links, but large icon buttons. They work very well because they are an obvious call to action. They practically scream "Click Me."
Here is the theory. Visitors find your page, view your information, then decide if your solution works for them. If it does they are ready to click through. Having a large clickable button that sticks out usually gets the click through.
Large Icon Buttons Get The Click
For large icon buttons you need 3 elements. A button style, a large text link and icons. Button styles can be accomplished in 2 ways. First is using images. The second way is by using CSS style rules. Images are nice because they can be manipulated yet maintain an absolute size.
CSS styled buttons require more technical knowledge but offer more consistency and scalibility. With CSS a button style can be made to fit a given space and respond to the screensize.
Everyone loves icons. Also known as emojis, icons add a sense of expectation. People see an emoji and an emotion is conveyed. Smiley face is the most well known but there are litterally thousands of emojis out there. So many that complete conversations could be help with just emojis.
Of course just an emoji isn't going to get clicked on. You need to include a textual descriptor of the landing page as well.
Combining these 3 elements gives you an icon button. A perfect example is the "Like" button by FaceBook. Everybody has clicked on one of those so let's emulate that method. Here is how to make your own icon buttons.
Now you know that icon buttons can be used for many different purposes. Keep following along to see how icons can limit the surprise.
Icons can convey what the link really does as you will see later.
Accordion boxes Are another cool tool that can improve time on page. People are drawn in when new content suddenly appears.
Visitors get a feeling of discovery and then are more likely to spend a little more time seeing what's new.
The CSS code for a simple button goes like this. Place this code in your style tag or css file.
Lets add some icons now and you can see the difference. First lets go get some. Instructions for adding these to your website are on the landing page.
Emoji icons - Where Do I get Those?
From github. The icon button link above takes you to "EMOJI CSS." On that page are a huge collection of emoji icons that are free to anyone. The instructions for including them in your website are simple. Step 1. get the link to the css file and add it to your website in the head section.
Step 2 is click on your desired icon and paste the code into your page. emoji icons are supplied from the cloud through a content delivery network. Your website then displays icons on your page
I've used icon buttons for a long time now. Two things you should know, they are always delivered in a timely fashion. Meaning very fast. Second observation is, the collection keeps getting larger.
You might like to know how to add the icons to the buttons. That's coming up first you need the code that contains the buttons.
Here is the theory. A button is a website element that looks like a button AND is hyperlinked. Hyperlinks can be styled using CSS. An icon button contains icons and text that are hyperlinked. Place this code where you want the icon button to appear.
Notice the icons use the <i> tag. I have added the style rules 'float:left' and 'float:right' to a <div> tag to move them to the edges. See how the hyperlink encloses the icons and the text. This makes the whole area inside the button active not just the text.
There you have it. By now you have noticed that the buttons change state when you hover over them. This is a powerful indicator that something happens when the button is clicked on. The icon can be used to indicate what is coming up if the user clicks.
Improve Click Through Rate And Lower Bounce Rate With Best Website Tools
Since BWT started using emojis our bounce rate has gone from 95% down to 48% in a period of 6 months. Our CTR is a whopping 50% for pages that utilize icon buttons.
I can say that on a mobile device users are more likely to tap on a large icon button as opposed to an inline text link or image. So it makes sense to have large tappable buttons just for mobile users.
Think you might want to have BWT design for your website? Use this form to contact me.