So What? How to do a UX audit

Welcome, happy Thursday, gangs all here. Uh, I'm joined today by Chris and John as usual, and this is So What, the Marketing Analytics and Insights live show from Trust Insights. Today we're gonna be talking about your user experience on your website and how to get to some of that information and also what to do with it. And so um just a little plug. We recently started running our Q41 question survey.

This is something we do every quarter. And one of the themes that have has been uh very prominent so far is that people are digitally exhausted. So obviously, with everyone quarantining quarantining at home, you know, us marketers have been like going really hard and heavy on emails and ads and social posts and blog posts and content, and it's even more overwhelming than it was before for our customers and our consumers because they're getting so much information. So our goal with this um show today is to really dig into well, if you are you know lucky enough to get someone's attention long enough to get them to your website, you want to make sure that they're getting everything they need from your website as efficiently as possible. So uh Chris, John, we are today going to talk about how to get to some of that information and diagnose any UX issues with your website.

That's right. Uh so let's get started with by talking about uh the the tools and the stuff you're gonna need to make this happen. Uh there are so many different UI UX tools out there. Um Lucky Orange, uh Crazy Egg, Hotjar, and the one that we've been using the most recently, Microsoft Clarity, as the latest in the mix of these tools. And they all pretty much do mostly the same thing, which is figure out where people are getting hung up on the website so that you can go ahead and make uh fixes.

Now, here's the challenge about that particular uh thing. A lot of the time, what people do with UIUX is kind of random, right? There's not a lot of quantification uh built into it. It's just like, okay, let's run some tests, do some optimizations, hope it all works out. And that's okay if it's you know, just you're just tinkering around, but if you're trying to do it more strategically, the first and biggest thing you need to do is figure out where do the repairs need to go first.

So one of the tools that we recommend uh you use uh obviously we have our own tool that we built for this uh called most valuable pages, but you can use Google Analytics or the Web Analytics package of your of your choice to uh get close to this. What this is is a list of pages on the website that have played a either a sporting or starring role in conversions. And these are essentially the most valuable pages. And this is uh this is for the Trust Insights website. I did this from April 1.

Reminder and plug to everybody uh do not use data before March of 2020 because that world does not exist anymore. Um, to see what are the pages that people got uh that that encourage people to convert. And so we've got things here, uh, you know, our paper on social media trends during the pandemic, our LinkedIn webinar, our newsletter. You want to do this assessment first so that you know what pages to optimize. Because if you just start doing, you know, a page at random, it may not have the greatest uh leverage.

Now, if you wanted to kick this output notch, by the way, uh, this is something that I'm personally working on. Uh, you would then take these conversion ratios and divide them by the traffic they get to see if there are pages that are extremely efficient at conversion, but you just haven't given them enough love. But that's for another show. So once you know the pages that are of concern, then you gotta start tracking this stuff. And here's where uh you we should see some familiar friends.

So, Chris, before you get into the different kinds of software, I do just want to mention. So, obviously, what you're showing is an analysis that we at Trust Insights have built and can provide. If you don't have access to this kind of report, you can use SEO traffic data. So, which pages on your website are losing the most traffic. So it may be a content issue, maybe a UX issue.

You can even go as simplistic if you're just starting out as bounce rate. So look at which pages have the highest bounce rate or the most frequent bounces of people exiting because maybe they're you're driving traffic to those pages, but people just aren't sticking around because they can't find what they need. Yeah, I would be cautious with balance rate. Bounce rate is one of those very tricky uh metrics, but for sure, even just something simple as which pages get the most traffic is a great place to start. So all of these tools that out there have the same thing in common, which is they have a uh some code that you need to put on your website.

And of course, we recommend for sanity's sake that you go through and just use something like Google Tag Manager, which is what we're gonna do. So we're gonna I'm gonna show the install process um for marketing over coffee. It is super simple. You take your code. Wait, or I guess just hit the copy to clipboard button.

Let's go ahead and make a new tag. And we'll call this Microsoft Clarity. Choose our custom HTML tag here, paste our code in, trigger it on every single page. There's no reason not to have it on all of our pages. And we go ahead and publish this.

And that's gonna that will now have uh this tag implemented on every single page. Now, if you happen to run a site where uh things are a little uh messy uh or that you have special software, then you'll want to implement that manually. But certainly for um for most people most of the time, using tag manager is gonna be the way to go. So the next question is well, what do you get? What's in the box?

Most again, most of these software packages have do pretty much the same things. They give you recordings of user interactions on your site. So you can watch people do stuff on your site. They give you some heat maps of where people are clicking, and then they give you you know some kind of dashboard and and some some common metrics. Now, again, because of uh our site here, uh, we want to focus on very specific pages.

We don't want to see the site overall. We want to know what on certain pages what are people doing. So this is uh the the basic interface for Microsoft Clarity. There's a couple of fun metrics here that I think are worth talking about. One here is called dead clicks.

A dead click is when somebody clicks on a part of the page that isn't interactive, but they think it is. Like it maybe it looks like a looks like a button or it looks like a link. Um, you maybe you underline some text in the blog post and people are clicking on and nothing's happening. Um that's a good thing to look for to say, like, should we have some interaction there? Should we put a call to action there?

Um second was my personal favorite rage clicks. Uh, these are when people are just frantically pressing a button to try and get to do something, and there is a lot of clicks in a very short uh period of space and time. There is excessive scrolling, and there's what's called quick backs where people go to a page and go right back there to where they were previously. They didn't find what they were looking for. Um, you're gonna see metrics like these pretty commonly um uh again in in all these different tools.

So let's go ahead and do this. We're gonna ref uh reference our chart, and we're gonna start with social media audience trends during the pandemic. That's our our top converting page uh for the year. We're gonna actually get uh the URL for that page out, and we're gonna go into our filters here. I want to expand this out, uh, expand to 30 days, and I'm gonna say, I want anyone who's visited that page.

So this is gonna give us just to be clear, because I actually got lost for a hot second. You showed the implementation in tag manager for marketing over coffee, but now you are back looking at the trust insights website because we've already been collecting this data. That's correct, and you need at least three days of data. Um, you probably should have a lot more. Um, 30 days is better, but obviously, if you need some results, um so let's um let's take a look here.

So, this is this page, and in the last 30 days, there have been 12 users on on this page. Um, the metrics on it so far, you know, not a whole lot of uh of bad things have happened here. Uh we see the different browsers and devices. Let's go ahead and take a look at the heat maps. And we want to increase this again to 30 days.

And put in isn't this something that Google Analytics used to offer or still does offer, like in some way, like you used to be able to see you know an image of your page with Google Analytics and the percentages laid over each of the links on your page to see how many people clicked that particular link. So if you have a page that has a lot of call to action on it, you used to be able to see. I don't know if they still offer that, Chris. Yeah, so that's gone. Um that went away when Google Optimize came out.

And so uh it's no longer available, which is uh a shame. And that's again why there's now such a boutique industry uh for a lot of these different um uh companies because frankly they they all they have um there's a gap to be filled. Um so this is the page, and because this page has not been visited a whole lot in the last 30 days, we don't actually have a whole lot of data to work with here. So I'm gonna switch over to the newsletter page. Let's go ahead and clear this.

And now we can start to see just in the heat map, where is it that people are clicking? We've got people looking for um past issues to see what it looks like. Uh we've got the submit button down there. Uh we've got some off-target stuff on company organization. Uh we've got people clicking on the confirm my email uh and on the name pages.

So again, what we're looking for here are things like if you see a lot of missed clicks, like you know, just wildly off-target, it probably means that your page elements are too small, um, especially on a mobile device. Uh, this is uh on a desktop, you can actually flip over to mobile and see what are people doing on a mobile device. So there's a little bit of uh some missing there, um, and then not much else. So that tells me we might want to look at this page on in a mobile rendering and see is it still as easy to use? Like there's this weird white gap here, which I think is where the image used to be, uh, it's not working on mobile.

And this on both desktop and mobile, we've seen a lot of clicks here. So it might be worth making this bigger, right? Just you know, if people are really interested in seeing back issues, yeah, let's make that a little bit bigger so that people can see what they're doing. So, this is the first step is you know, identify the page and then start digging in and looking at the different uh aspects. What are the things that uh people want to interact with?

And critically, are they the things that we want them to interact with? Um, Chris, I have a couple of technical questions that I'm hoping won't throw you off. But so, you know, this is a form fill page. So, how does software like Hotjar or Microsoft Clarity? So, let's say I click on name first, and that's to be expected as the first field, but what if I am just tabbing my way through the rest of the fields to fill them out?

Or a lot of times people have, you know, if you're using Google Chrome, uh, it has the auto-fill information. So, how does software like this account for that? It doesn't, and that's one of the reasons why you're seeing that um anomaly where some fields have clicks on them and some don't. Because if you click on here and you auto-fill, the rest of this will appear. But again, some form packages will say, no, you got to retype this manually.

And so you're gonna have the the activation there, but not on the email field. So sometimes, um, depending on what users are using, you'll have pieces that activate of a page and pieces that don't. So that's a good question. You're not gonna catch uh those non uh mouse behaviors. Hmm.

Interesting. Yep. Um so again, we're looking for uh the dead clicks, and obviously uh you can see the colors here uh as more and more clicks happen in a spot. Uh a rage click, for example, would be just like a big hot red circle here, and that would tell you that there's something not quite working there. Let's do another example.

Uh, let's go and just do the good old goes straight to the home page here. Oops, couldn't find anything. So a rage click is either something looks like a link and it's not, and people just keep clicking and nothing happens, or it's a broken widget on your site or something like that that is essentially making people angry when they keep clicking and nothing's happening. Right, exactly. Okay, so what might be now when I think of rage clicking, I'm thinking of those websites that as everything is rendering, things are moving around, and I'm getting very upset because I'm trying to click on one thing and an ad pops up and it takes you there, and you immediately go back, and another ad pops up, and you're just trying to get to the one thing, and you get so angry.

And I'm guessing that that's a lot of the data that comes through on a system like this. If you have like a big ad if you're selling ad space on your site, uh it's probably very helpful to have this kind of software. Absolutely. And even to know, like um, you know, what's going on? So here's look at this.

We have a bunch of dead clicks on our headline, right? That this does this doesn't do anything. This is just uh an HM tag. It's so it's like, okay, so why are people trying to click on that? That is a great question.

I don't know the answer. This is new. Well, the logical thing for us to do would be to fire up Google Optimize, maybe just link this to the services page, and then 50-50 split the traffic and see when people click on that. Can we get them over services and then will they buy something? Right?

So, this is a this is now getting into not just what happened, but what should we do about this? Like, what is again? This is the name of the show itself is so what? A bunch of people clicking on this thing, so what? It's an maybe an opportunity to get them somewhere else.

I just wrote scrolling down the page. We've got another dead click here on a featured case study. Again, that doesn't go anywhere, but it raises the question: should we have a testimonials page that we direct people to and just hot link the whole case study section? Worth a try. Uh let's see, we've got a random click out on the side here.

That's that's fun. Uh, let's switch over to mobile. And let's increase the time span if we can here. Okay, on mobile, that's interesting. So the first thing somebody does uh mobile is they hit the menu button and they go straight to the blog.

And then we have all of our different services inside of the menu, and then get help now. Get help now. Is that linked? It looks like it's not. It looks like it's more of a header.

It is. I think it is a header. I think it's a good idea. Get help now. Contact us.

Yeah. Huh. Okay. Well, we might want to try linking that to the contact page. There's our form fill data.

Okay. So again, we've got some stuff happening here. Like, should we be concerned about these kinds of things? Is this stuff that's that's important of chances or maybe. Let's go now into our recordings.

Um, and we're gonna sort high to low clicks. And let's go ahead and just see what this session looks like. So, what you're gonna watch now is you're gonna watch somebody actually going in and doing stuff on a page. And one of the nice things is uh you don't have to watch the whole 11 minutes here. Um you can have it skip activity.

I think it's kind of funny. This person, you know, they're they're entering some data. I also like this feature is very useful. Um, it obscures the input so that you're not seeing personal identifiable information being displayed, which is I probably should have tested before we went live with it. I was gonna ask that question if uh with these recordings, are they anonymized?

Uh and Microsoft Clarity, apparently they are. Which is good. Um it is one of the things if you are using this is just more of a PSA. If you're using this kind of software on your website to record how people are interacting and you're recording their information, you definitely want to include that in a consent form or your terms and services or your privacy policy. You want to make sure that you're being clear about it and that the users have an option to opt out because you could find yourself in some pretty hot water if you don't.

Yep. Speed things up a little bit here, go to double speed. The a thing I'm kind of wondering about is what is this person doing? Like they're typing and clicking repeatedly in the window at the same time. I'm I don't know what it is that they may be doing.

But this is it. Well, I have a question about that, Chris. So, you know, I know on a mobile device, for example, you have basically all of your pages and you can flip through them. And so I know, like if I'm filling out a form on my mobile device, and I'm like, oh crap, what was that you know, password that I was supposed to remember and I have it written down somewhere else. I will leave the page, go to a different page, and then come back to the page.

And so I'm wondering, and I could be wrong, but I'm wondering if it's recording, you know, the clicks on the screen, even if that is the page that isn't necessarily active. It could be, it could also be um you know, someone using some kind of assisted method, you know, like a screen reader or something if you're you know if you need assistance devices. Let's go ahead and jump into a mobile session. So we've got a mobile iPhone session. This one has 26 clicks in it.

I have the person scrolling. And this is the one question survey that we mentioned at the top of the show that we just launched. So it's unsurprising to me that that's what we're seeing the most of. Yep. Now, these markers that are in the timeline, Chris, are those indicating like major activity so that you can skip to those things.

Exactly. So if you want to fast forward and just get to this part here. So you can see this person's typing in this in this window and trying to uh move the text box down and around. What's interesting is that this is a one-question survey. Um right.

And we just fast forward through the recording a little bit. What this meeting looks like is that someone is typing, then going back to read if the text box isn't expanding, they're making sure it's grammatically correct that they captured all their thoughts. Like that's what that behavior looks like. But also, uh I applaud this person for doing this. They just spent nine minutes filling out this form on on our site, which you know is they've they've clearly put a lot of thought and effort into it.

So whoever did this, thank you. Um, but also that was uh you know a sizable amount of time spent just filling out a form. Now, thankfully, this form is um just one question, but you could definitely see if there are fields, and you could just look at the spacing here. You can just there are fields on your forms that are slowing people down, those are opportunities to can consolidate them. Do you have to ask that question?

Um, is there something is there some other way to accelerate the process on uh on mobile? Uh is it mobile friendly? Like, so this form that we have here is reasonably mobile friendly form, right? There's the page is relatively short, it doesn't take too many scrolls to get to it. Um, and it's got a very simple interactions.

Uh I could see, and I remember when I was doing my biddays in work in uh financial aid, there are forms that are like you know, a hundred questions long, and by the time you're done, you're like clawing your eyeballs out. So these are all things to be looking at. So can we make this shorter? Can we make it faster? Can we make it easier to see?

What I find interesting as people are as we're looking at the recordings, it tells us basic information about what kind of device, um, and then roughly where uh in the world they are, because that could also be indicative of why certain behaviors. And it looks like we have a question, uh, Chris, uh, about why Clarity. So Clarity is free. Uh it is free. So Microsoft has rolled this into, and this is relatively new, rolled it into Bing Webmaster Tools.

Um, so they're trying to provide this tools, tooling and software A to get you to use Bing as a search engine as a marketer, uh being focused on it. Um, and I suspect it will remain free at least for you know uh a fairly substantial amount of time because this is Microsoft's answer to Google Analytics, not from an analytics perspective, but from uh we need data to feed our search engine, right? One of the things that Google has done brilliantly is given away Google Analytics for 15 years to get it on pretty much every website in the world that it possibly can. Um, there are millions and millions and millions of Google Analytics installs. That data all gets rolled up and anonymized and fed into Google's you know, massive machine learning uh algorithms, and that uh just powers their ad business.

Um, every time that you go into Google Analytics, for example, and you look and say, uh, what are you know my audience's interests? All that is coming from other people's Google Analytics installs. Um, you can't see it individually, but Google knows what sites are what. Microsoft does not have that. Um, they don't have that capability.

So they're trying. I this is speculation uh because we don't know anyone who works at Microsoft who would be willing to tell us this information. Um my speculation is that they need that data to fuel Bing uh and the Binks webmaster tools and the and the Bing advertising system in the same way that Google does. And the only way they can get is to convince people to put their tag on their site. Makes sense.

What about you two? Got any any tinfoil hat theories? It is a big land grab. I mean, especially with cookies, you know, drying up. You if you don't have a plan of something, you're gonna end up, you know, totally lost.

Yeah, I mean, we're talking about Microsoft and Google who are, you know, two of the big four, you know, who knows what the heck they're trying to do to compete with each other. Because you know, it's interesting, you don't really think of Microsoft as a competitor to Google, but when you really dig into the different products like Bing versus Google or Optimize versus, you know, you have this now clarity, it'll be interesting to see how it shakes out because I don't know that people think of Microsoft in that way. They think of it, you know, probably still thinking a lot of, you know, you have Microsoft Office, you have like the physical machines that they would create, their operating systems, and now they have all of these other additional pieces of software. So I'm definitely interested to see, you know, what comes of it if Microsoft can really get back some of that market share. Exactly.

Other things you can do with this that again are very useful is it for these specific things where you've got rage clicks, you can look at sessions just with those rage clicks. I've switched over to my website because of Hadra Clarity running longer on the on my site. And you tend to enrage people more than we do. Got it. I could you sat me up for that.

That was wide open. That was a meatball. Yep. Okay. So again, being able to look in and see what is going on here.

So in this case, uh, this person, I'm guessing because they are either running an ad blocker or my site was just having a bad day that day, uh, is clearly getting frustrated with the fact that they're on this site and they can't see um what is they're going after. Oh, this was um one of the US guy answer episodes. Uh and they're just clicking on everything. Oh my goodness, it's making me ragey. You like you can you can feel the frustration watching this.

I wonder if well it looks like they're trying to like using their finger to read it. That's what I'm thinking. Is it it looks like the behavior of somebody who is using the mouse to highlight where they're reading, which hey, you know, if you're reading my content, thank you. I don't care how you do it. Even if it makes you enraged.

Even if it makes you enraged, you know, just I'll I'll I'll take what I can get. Um but the other things you can look for here are for those pages where you have quick backs. Okay, can you watch that recording and see what was that person doing that made them uh just go and immediately go back? So we have uh they went to the newsletter page here. Um they looked at the form.

This just makes me laugh because like every session like this I've ever sat through, it's always like, what the there's always at least one session where people are like, what is going on? Why are they doing that? Interesting. They also have some sort of auto-translate uh on it, at least part of the way there. Well, it says they're in the United Kingdom.

Yeah, which is weird. Um, and then most important, when you have pages that have JavaScript errors, uh, this is these are the ones to dig into and go, well, why? What you know, what scripts do you have that are are just utterly failing. So in this, it's the home page. So this tells me because these are all pages that are part of my standard template that I've got something wrong in my standard template.

And probably I should be thinking about uh maybe I should go back and audit and see like, you know, is something broken in my theme that's causing these errors. If we go um back to the trust insight profile here, uh there's very, very few pages that have JavaScript errors, just 0.42% of them. Take a look at what pages those are. And yep, those are those this one is a redirect. Um, and those are just a couple of pieces on the blog, but nothing substantial here.

So I'm not terribly concerned that you know we've got something broken, not like on my site where there's definitely something broken because there's you know, 15% of the visits have JavaScript errors. So a couple of things to think about as we wrap up here. Um, one, when it comes to doing this sort of investigation, uh obviously you you know why you're doing it, you're trying to improve your uh your your conversions. Uh, but you want to make sure that it's not just a fishing trip. You're not just kind of tooling around for fun.

I mean, this is great fun to tool around with just for fun, but if you are trying to go in with a purpose, you need to have something that is guiding your research. Again, we recommend you know, run some kind of analysis so you can say these are the pages that are priority. And go in with I'll just say it's not like a broken record, but go in with the plan. Uh what are you going to identify? What uh how are you going to fix it?

Um, and then especially if you work at a larger organization where there's multiple teams, um, you may need to to to actually do this analysis live in front of other people to say, like, yeah, here's what I found. You know, can we fix this? Play back some of those recordings um so that people can go, oh, that's our experience, huh? That's that's not great. But by doing it on the pages that you've proven have conversion value, it's easy to get other people to buy it.

You know, when the VPSL is like, we're not selling enough, like, yeah, okay, let's watch the you know what the top converting pages and watch people do it and then going, ah, fix that. We need to make more sales. Well, and I think to that point too. So you're saying go in with a purpose, but also make sure that you have your measurement plan put in place. So as you're fixing these things, you can then say, okay, I fixed, you know, the uh Chris Penn.com homepage, for example, then you would want to see did the traffic increase, did it increase in conversions, did the number of rage clicks on that page go down?

You know, those kinds of things. Like, so you want to not only fix things, but make sure you're measuring after the fix. Exactly. And you should be able to see. Um, in fact, if you wanted to get fancy, you could even put together, like a data studio dashboard of the pages you fixed, and then you should be able to see a clear before and after in the and the traffic graphs on them or the conversion uh graphs on them.

Like this is these are the things that are working. So uh for folks, if you get if you're still watching, you've got some questions, please uh throw them in the comments. But uh, what about you for you two? Uh got any additional uh fun things to poke at here. Um go ahead, John.

I was just gonna say I was it was interesting to see that the recordings do go multi-page. That's a neat feature to be able to watch somebody's full journey because a lot of other tools that I've seen, it's just single page tracking. So that can be very useful because you could look at conversions, you know, you could just look at conversions specifically and see what are the longest and shortest paths, and that could give you some easy action stuff. Exactly. Um so with this information, is it is this information that you can export?

Is this information that you can bring into, for example, a data studio dashboard? Does I know that Microsoft and Google, you know, they're rivals, but can you bring that data into it? Um, you know, how I guess my question is, what is the best way to be staying on top of this information aside from going into this specific web page every single day? So that's it. So this is a walled garden at the moment.

Um the folks at Microsoft did say that this is being integrated fully into Bing Webmaster Tools. I would expect any data export facilities to be uh part and parcel of that there. Um, but for right now, um, this is a lot more qualitative than anything else, so you have to use the existing interface, and it honestly that's okay because a lot of the quantitative stuff you should be doing in Google Analytics beforehand, anyways, before you even get to digging into the quality of things to look at stuff. You should know, again, come in with a plan and the and a punch list. These are the pages I need to take a look at to figure out what you can do to get them to convert better.

All right. Well, if no folks don't have any other questions, we will go ahead and get on out of here. And I guess uh we will talk to folks next week. Thanks for watching today. Be sure to subscribe to our show wherever you're watching it.

For more resources and to learn more, check out the Trust Insights Podcast at TrustInsights.ai slash TI podcast and our weekly email newsletter at TrustInsights.ai slash newsletter. Got questions about what you saw in today's episode? Join our free Analytics for Marketers Slack group at TrustInsights.ai slash analytics for marketers. See you next time.