On today's episode, we are going to learn how our websites are being used by looking at heatmaps, right here on Your Website Engineer Podcast, Episode No. 333.

Hello, everybody. Welcome back to another episode of Your Website Engineer Podcast. My name is Dustin Hartzler, and today, we will be diving in and looking at more analytics or more details about our websites. Today, we're gonna be looking at heatmaps and what we can learn from heatmaps and where people are clicking and using on our website.

But, first, let's go ahead and dive into the announcements. All right. The first thing I wanna share with you today is about an article that I found on WP Tavern that is talking about how hacked home routers are launching brute-force attacks on WordPress sites.

And so, this is a fairly lengthy article. I'm not gonna go into all the details. But, basically, what's happening is there have been 57,000 unique home routers being used to attack WordPress sites.

And these home networks are now being explored by hackers who have full access to them via a hacked home router or the websites. And the networks are just – they're just being attacked. And, once attacked, then the hackers can access workstations, mobile devices, Wi-Fi cameras, Wi-Fi climate control, and any other devices that use the home WiFi network.

So, this is something that is kind of a big deal. And so, I definitely recommend changing that Wi-Fi password and making sure that you are no longer hacked. There's a lot of things that you can do, and you just wanna make sure that, yes, you have a very secure connection when you're at home.

So, read that article if this is something that's interesting to you and concerning. I definitely think it's concerning. And, although it is a humongous pain to make a change on your Wi-Fi connection or that server password, it's good to do every once in a while, just to make sure that, if somebody has gotten in, then they no longer can get in.

And so, I know that you do that, then you have to reset all of your passwords for all your devices, your computers, your tablets, all that good stuff. Any visitors that come over, they need the new password. But it is definitely worth it, and I highly recommend that at least an annual priority for you to change that username and password there for your secure network at home.

All right. The other article that I wanna share with you this week is talking about the inaugural CabinPress. This is an event that's happening in November, November 3th through the 5th in Lake Louisa State Park in Clermont, Florida, which is about an hour outside of Orlando, Florida. It is a 4,500-acre state park with large lakes, hills, and scenic areas.

And the CabinPress goal is to disconnect people from technology to allow them to focus on building and strengthening personal relationships. The accommodations include fully furnished cabins with bed, air conditioning, kitchens, and bathrooms. Activities include hiking, kayaking, board games, canoeing, and more.

And early-bird tickets start at $250.00 to $300.00 depending on which one that you pick. And at the time of the writing, which was a few days ago, there was 15 tickets remaining. So, all of that includes accommodations for Friday and Saturday night, meals and snacks, canoe and kayak rental, co-working with high-speed internet the week following the event in Orlando, and of course, awesome swag.

So, if this is something that's interesting to you, definitely check on out the link in the show notes for Episode No. 333.

The plugin of the week that I wanna share with you today is called Lazy Load, and this is by one of my colleagues over at Automatic. And he created this plugin that basically allows you to improve the load times on your website.

It uses a jQuery class to only load an image when it's visible in the view port. So, what this means is, if you've got a page with lots and lots of pictures, as long as it's not visible on the screen, it's not being loaded. So, that page is going to load very, very quickly. And then, as it gets closer to being displayed in the browser, then it will load.

And it's just – it's really a simple plugin. It's got more than 90,000 active installs. And so, if you have a very highly dense website with lots and lots of images, I highly recommend checking out Lazy Load. You can search for that in the WordPress repository, or, as always, you can check the show notes for Episode No. 333.

Today, I wanna talk a little about heatmaps. We're kind of in this series on – I'm just trying to figure out who's using our website and looking at our visitors and our customers and people that are using our website.

And today, this is really an idea, a launching-off point to continue to improve our websites to eliminate or − yeah, basically, heatmaps allow us to eliminate things that are on our website that are not useful for people or that are being overlooked or not used whatsoever.

So, let's go ahead and just kind of dive in. I wanna briefly say what a heatmap is, kind of understand what that is, talk about some of the things you can learn from this and some conclusions on just what we can do with the findings from finding the heatmap or looking at the heatmap.

So, basically, what a heatmap is, is originally called a cluster heatmap, and it's a tool that visualizes data matrix. And so, it's explained like this: The cluster heatmap is an ingenious display that simultaneously reveals row and column hierarchal cluster structures in a data matrix. It consists of a rectangular tiling with each tile shaded on a color scale to represent the value of the corresponding element of the data mix; or, more simply, it uses color data as a visualization tool.

So, probably the easiest way to kind of convey what this means is basically you install some software, you let it run on your website, and then you'll see exactly where people are clicking on your website. That's kind of in a nutshell what it is and how you can break it down.

So, what you can learn from a heatmap: Not all heatmaps are alike. When you're measuring online activity, there are two common types of heatmap. And there's heatmaps that measure clicks on a website, and there are heatmaps that measure the attention people are giving to particular areas of a webpage. So, both of these types will allow you to get valuable information about how visitors are interacting with your site, landing pages, and your content.

So, with heatmap data, you can quickly see which headlines draw your visitors and make them click, which images attract attention, what distracts visitors from your content, whether they see your email opt-in box or not. And you could also use heatmaps to see whether your navigation is working, if people can locate the search easily, and whether they are reading over your content and how much of it.

So, those are kind of the big things, the big ideas that you can get from heatmaps. I wanna say that they are broken into two different types of heatmaps.

The first one, when it measures clicks, that can be targeted with software. We can install something on our website, kind of like Google Analytics. It's just a code that runs in the background to see where people are clicking, and you can set that up, and it just kind of works on its own. And then you can tally up those results, see what's happening, see what items are being used on your website and whatnot, and then make educated decisions on what to do with them.

The heatmaps that are focused on attention spans and what people are actually looking at, this is a lot harder to do. I guess you would almost have to set up a test. You'd have to have ten people come into either a coffee shop or into your office or whatnot and just have them a task list, "Here's the things I need you to do." And then just kind of watch where they're going, where their mouse is hovering, and things like that.

So, the second one is a lot harder to do and set up, but it's definitely something that's worth your while if you wanna spend and really optimize that content that's on your website.

I know that they probably do this all the time at Google, at Facebook, at Amazon, some of the big-name companies. They're probably always analyzing to see exactly what people are looking at, what people are ignoring, and how a person actually uses the website is very, very valuable.

It's also important to know that one of the big differences between mouse-tracking and eye-tracking heatmaps is when you're using the mouse-tracking one; you actually are getting information from actual visitors.

But if you do this eye-tracking one, where you're watching somebody use your website, usually you have to get some sort of sample, and people are taken out of their normal environments. They're not usually using their own computer. They're using someone else's computer. So, it may distort results somewhat.

But using eye-tracking will give you results with close to 100 percent accuracy with testing the subjects, while the mouse-checking is more around 85 to 90 percent, and that's kind of what the study has laid out.

So, let's go ahead and talk about some findings that I just wanna summarize here from people who have spent time analyzing data that come from heatmaps, and here's just kind of an overarching, here are the seven things that you can take away from using a heatmap.

So, the first one is content most important to your visitors should be at the top of the page. That makes a lot of sense. People do scroll, but the intensity of their attention goes way down along the way, the more they scroll down.

So, as long as you've sucked them in, you've got some compelling content for them to read, or they're searching through, and it really seems like it's answering the questions that they came for, then they're going to continue on the site, and they're gonna continue to scroll, and they're gonna continue to read.

Another thing that they found is that people buy what they see. Using different triggers within a shopping cart, if somebody's in a hurry, they're gonna purchase the first one they see or the one that stands out the most.

And so, you wanna make sure that if there's an important product or one that you have the most amount of margin on or something like that, you wanna highlight those products or say they're a bestseller or featured or whatever. Make sure that they kind of stick out, and that will make them more prominent for a customer to pick up and purchase.

The third conclusion that they came to is that you can test for banner blindness. So, what this means is you can see if elements on your website that resemble advertisement banners, if they get less attention or not, or you can always see how those AdWords are using.

If you've got a banner at the top of your website and you've got some on the sides, look at your heatmap and see, are they actually being clicked on? Is it even worth the value of cluttering up your website to put that type of information, or should you just kind of get rid of that altogether? So, that's something to think about, as well.

Item No. 4 is they found that most people should just automatically abandon the image carousels to get better click-throughs. When users have a specific task when they're coming to your website, they completely ignore the carousel.

Unless they're coming to your website for the very first time, just to kind of learn more about your company or learn more about what product or service you're offering, they may stick around to see that banner that's moving, but for the most part, people do not use those, and they do not look at those.

So, definitely, if you've got one of those on your website, look at them. Take a look at a heatmap. How often are people clicking in that area? If it's none, let's go ahead and get rid of it, and put some sort of valuable content there at the very top of your page because we already talked about the most important part of your content needs to happen at the top. So, if you can get rid of a banner or a slider, you can definitely get more important information above the fold.

Let's see. No. 5: Use photos for attention and guidance. People will respond very well to images of real people using product photos. So, you wanna make sure that you're using real photos and not those canned stock photos that you can buy that look like somebody else's website.

Definitely make it familiar, or use people from your company, or use people that are actually holding the product or service. It's really kind of a generic statement because every website's different, and it's different because you're selling different things, or you have a different target, or all of those things. So, use photos for attention and guidance.

Then the sixth item is for blogs. Summaries are better than full articles. You'll get your visitors to read more of your content by using summaries because displaying full articles can use up your visitors' attention span before they find what they're looking for.

So, the summary here is, just make sure that you're using a properly written summary rather than just an excerpt from your site. A lot of times, when you start with a story or something like that, and you're using the default excerpts within WordPress, you're gonna get that default – that's what's gonna display on the homepage or your blogpost page where all the summaries are.

And people may not click through to that because it doesn't actually summarize what's happening in the article. So, you wanna make sure that you're doing that for your blogposts.

And then the seventh item that they came to the conclusion of that you can combine A/B tests with ClickMaps for better effectiveness. So, if you do two things at once, you can get more information, and you can actually track which of the A/B tests people are clicking on. So, you can get some more valuable information along that way.

So, that is kind of just some overall summaries, some of the things that you can see and learn. And I'll give you a few case studies here in a second about what people have learned and how they've improved things on their websites.

But, first, I wanna just talk real quick about some of the tools that you can analyze your site with. One of the big-name players that's out there is called Crazy Egg, and you cane find out more at crazyegg.com. You get a free 30-day trial with Crazy Egg, and it's pretty simple. They have a WordPress plugin.

You basically sign up for an account, and then you get some sort of code. And then, with that code, then you add it to your website, either directly to your child theme or with the plugin we talked about last week, insert headers and footers, and then wait a few days and you can look at the results. It's pretty much as simple as that.

It's kind of like adding the Google Analyticator or Google Analytics code or that Facebook pixel code. You just add it, and then you wait a while, and then you can go and analyze those results.

Two other ideas or two other places that you can use their tools are Heat Maps by SumoMe. So, if you're using the SumoMe plugin for different things, you can do Heat Maps right in there.

And you can also do one called Click Heat, and that's a free plugin or a free service, and you can get started with just – start tracking and seeing what people are using on your website.

So, those are some of the tools. And, like I said, it's pretty simple to set up. It's basically you get some sort of tracking code, and then you have to add that tracking code to your website, and then you sit back and wait, and you see what happens.

So, I just wanna highlight a few case studies here before we get out of here. There was one that a company called Soft Media used heatmaps to identify problem areas on their website. They identified distractions that were preventing their visitors from completing the action that they wanted them to do. Once they removed the distractions, their conversions increased by 51 percent, so double the amount of people that were doing whatever were now doing something else.

WPMU DEV is a website that was using Crazy Egg, and they could see on their course page, their course press page, they could see what people were using, what videos they were watching, which ones they weren't, which navigational menus they were using or being ignored. And then they could just go ahead, and they revamped that entire page based on those results.

A website called Local Visibility Systems created a custom URL for Google Places, and then they tracked visitors to that URL via Crazy Egg. So, this resulted in somebody finding them locally via SEO, and then they saw where they were clicking on, and then they optimized all of those pages.

And so, that just is another idea to think about. Find out what pages people are coming to most, and then optimize those pages for either a sale or conversion of signing up for an email newsletter or whatnot.

Pagely uses Crazy Eggs scroll map to identify which pages people paid attention to. So, they found that fewer than 25 percent of their visitors scrolled beyond the 600 pixels, which means a lot of the page was wasted. And then the information suggested that Pagely should rethink the layout to ensure visitors saw the most important information.

So, maybe they went to – it doesn't say what they actually did, but maybe with this information, they make it more wide and make sure everything is kind of more horizontal because people aren't scrolling. So, that's really valuable information.

Let's see what else. There was a jewelry boutique that basically identified several areas that were driving visitors away, basically failing cookie notifications, sending visitors to social pages, unanswered customer questions in the ordering process. After they identified these issues, the online retailer made some design changes, found the recovered profits and paid for the investments in the software.

I would say, if you pay for heatmap software like Crazy Egg at $9.00 per month for the most basic package, I'm sure that you'll find optimizations across your website that will make you much more than the investment in the software.

So, that's what I wanna share with you this week. I want to recommend and highly encourage you to set up a heatmap. I'm gonna do that this week. It looks like – I had Crazy Egg going for a while. It's no longer running on YourWebsiteEngineer.com, but I'm definitely interested in really knowing more about my audience and knowing how my website is being used.

And so, I'm definitely going to install that this week and get it up and running. And maybe in a few weeks, I can report back on what type of information I'm seeing and what type of design modifications need to be made to my website.

So, that's all I've got to share with you this week. I've got more great WordPress news coming for you next week. And until then, take care, and we'll talk again soon. Bye-bye.