Icon Buttons Improve Click Through Rate And Lower Bounce Rate Tutorial

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.

Icon Buttons Make You Look Good!

Surprise! Now you know that icon buttons can be used for many different purposes. Keep following along to see how fancy buttons can improve your click through rate. Icons can convey more information about what the link really does.

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.

Accordion Boxes Made Easy

Improving CTR With Icon Buttons Theory

Mobile App Icon Buttons

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 Setup

Animation & Editing

CSS styled buttons require more technical skill but offer more consistency and scalibility. With CSS a button style can be made to fit a given space and be responsive to the screensize.

Everyone loves icons. Also known as emojis, icons add more information. 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 are held with just emojis.

Of course just an emoji isn't going to get clicked on. You need to include a textual descriptor to the landing page as well.

Combining these 3 elements gives you an icon button. A perfect example is the "Like" button on social media. Everybody has clicked on one of those so let's expand that method. Here is how to make your own icon buttons.

Accordion Boxes Can Improve CTR

Accordian boxes are a great way to include a lot more information on a page without making it overly large.

Icons buttons can be the difference as to whether you get a click or not.

Accordion boxes Are another cool tool that can improve time on page. Togetherthey can guide your visitors through a sales funnel or wherever you want them to go next.

Accordion Boxes Made Easy

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 And Lower Bounce Rate With Best Website Tools

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 icon buttons? Use this form to contact me...