SEO vs. UX: Battle Royale
| #023 | 46:13
You want your store to look good, and so do we. But there has to be a balance struck between looking good, performing well, and discoverability. This is a conversation that can get pretty heated between designers, developers, and SEO professionals. But we need to talk about it, because it impacts your store dramatically.
So what takes precedence? Search Engine Optimization or User Experience? Is it either or in this battle royale? Or is it a blend of both? Today it’s just us - Kelly and Rhian Talking about two things we know best from opposite sides of the same coin.
sponsors.
Octane AI enables fast-growing D2C brands to increase revenue and collect data from the marketing channels your customers use.
Clocked in a time clock for Shopify.
With Clockedin your team members can easily clock in and out of their shifts from anywhere. You can manage your team's hours as they work remotely with an intuitive interface that can be used from desktop, tablet, or mobile.
show notes.
- [04:51] What is UX?
- [05:16] What is CRO?
- [05:47] What is SEO?
- [08:15] Page speed and the intersection of SEO and UX
- [13:16] Popups
- [19:16] FOMO things/wheelie items
- [24:07] Animations
- [25:21] Gifs & videos
- [31:32] Slideshows/ heavy hero images
- [34:15] Text on your homepage
- [37:23] Mobile vs Desktop
- [41:08] Browse your own site on a mobile device
- [43:24] Store shoutout: ADAMJK
- [44:27] Store shoutout: Olipop
transcript.
Rhian (00:00):
You want your store to look good and so do we, but there has to be a balance struck between looking good, performing well, and discoverability. This is a conversation that can get pretty heated between designers, developers, and SEO professionals, but we need to talk about it because it impacts your store dramatically. So what takes precedence? Search engine optimization or user experience? Is it either-or in this battle royal or is it a blend of both? Today it's just us, Kelly and Rhian, talking about two things we know best from opposite sides of the same coin. Let's dig in.
Rhian (00:41):
Welcome to Commerce Tea, a podcast to help you succeed on Shopify. I'm Rhian.
Kelly (00:46):
And I'm Kelly. Grab a mug and join us as we talk about all things commerce.
Rhian (00:50):
Hey Kelly. How can I get to know my customers better?
Kelly (00:59):
By using Octane AI's new shopable quiz you can easily create beautiful quizzes to learn more about your customers and help them find products you know they'll love.
Rhian (01:07):
What kind of results can I expect from building a quiz?
Kelly (01:10):
You'll see increases in your conversions and average order value, growth in your marketing lists, and higher engagement on your marketing campaigns by using the personalization data you're collecting. And the results are profound. Brands on Shopify with a shopable quiz have collected 16 times more emails and discovered segments of customers with a 75% higher AOV than the average customer.
Rhian (01:33):
That's so rad.
Kelly (01:34):
Yeah. Plus, Octane AI passes the quiz responses into the marketing tools you already use, like Klaviyo and Privy. You'll also get to use this personalization data with Octane AI's powerful Facebook Messenger and SMS automations.
Rhian (01:48):
Where can I learn more?
Kelly (01:49):
Visit octaneai.com/quiz to learn more and request an invite for early access.
Kelly (02:01):
You did it!
Rhian (02:02):
I did it! Sponsors! Octane AI!
Rhian (02:20):
Hello Kelly.
Kelly (02:22):
Good morning, Rhian. How are you?
Rhian (02:25):
I'm very well, thank you. How are you?
Kelly (02:28):
I'm doing great. I just spent my entire last week up in Michigan at my family's lake house. Kind of get a nice little change of scenery. If you watched our most recent YouTube video, our most recent friendly Shopify store tear down, you'll notice I'm in a different place, and this is why. I did not move. I just moved temporarily for one week.
Rhian (02:53):
I've been in a vacation state of mind, if that counts as going on vacation. I have a question about Michigan. Can you get in the lake, or is it too cold?
Kelly (03:04):
I'm not getting in the lake. I'm sure I could. I think my dad has a scuba outfit upstairs that he uses when the boat is... because our boat is just currently sitting in our driveway because it's late in the season. It comes out after Labor Day. Usually he'll put on a scuba suit and get into the water because it's super cold and it's like Memorial Day weekend. So yeah, am I getting in the water right now? No. Could I? Absolutely. I will not die, I just will not enjoy it.
Rhian (03:35):
If I double-dog dare you will you put your feet in? Is the limit zero? Or will you put your toes in?
Kelly (03:43):
I will not be getting into the lake.
Rhian (03:48):
Fine, Kelly.
Kelly (03:49):
I should specify. We're literally recording this while I'm up in Michigan and that's why we're talking about future tense while I just said that I was up in Michigan for the past week. Just so we're clear.
Rhian (04:01):
People are like, "What tense are we in?" Which is a comment I make often on my daughter's essays when I'm reading them, of course.
Kelly (04:07):
We're intense.
Rhian (04:09):
Intense, okay. We are intense. I'm very intense. So what are we talking about today, Kelly?
Kelly (04:16):
We are talking battle royal. Is it SEO or is it UX? Which one matters more?
Rhian (04:26):
I think this is a super important thing to talk about because I have had some very heated conversations with some... I find that most often with designers where they're like, "No, Rhian, this animation is absolutely critical." I'm like, "No it's not. We should get rid of it for the rest of our lives." Why don't we define... Let's do some definitions first. Kelly, why don't you lead us off? What is UX?
Kelly (04:53):
UX stands for user experience, which is really the overall experience of a person using your website, so navigating your website from home page all the way through checkout and basically looking at it in terms of how easy it is to use: how much enjoyment you get from using the website.
Rhian (05:14):
Am I delighted?
Kelly (05:14):
Does it bring me joy? Yes.
Rhian (05:16):
It's different than CRO.
Kelly (05:17):
I'm delighted.
Rhian (05:18):
Right?
Kelly (05:19):
Yes. CRO, which stands for conversion rate optimization, is the art of making small tweaks and changes to your website to increase your conversion rate. The changes you make to your website impact your use experience in a way that entices customers to actually place an order.
Rhian (05:40):
Got you. Let's throw another acronym in there because... Let's round it out.
Kelly (05:46):
Let's do it.
Rhian (05:48):
SEO, which is my favorite thing to talk about, which is search engine optimization, which is how do you get...
Kelly (05:55):
No.
Rhian (05:57):
"What? Rhian's talking about SEO? What's happening?" SEO is just about discoverability on Google. We have another podcast episode that we've talked about an introduction to SEO. If you're like, "Rhian, what are you talking about?" that might be a good place to start after you're done with this episode. It's really important to have your store optimized for search and sometimes the things that make your store optimized for search are at odds with user experience in theory. I would posit that they're all... and I've said this before and I'll say it a bajillion times. If SEO is a multidimensional Rubik's cube, UX is just one side of that Rubik's cube. CRO is another, but we're not talking CRO today.
Rhian (06:51):
Some people will get into this real, true battle royal, and Kelly and I are going to duke it out about some things today about what we think is more important, but at the end of the day you have to have all of those things together and you have to strike a balance. You've got to solve the cube.
Kelly (07:07):
Exactly. I cannot solve a Rubik's cube, so I don't know why I'm in this industry.
Rhian (07:11):
Neither can I! I think we can watch a YouTube on it and probably learn.
Kelly (07:16):
Let's kind of dig into this in a bit more detail.
Rhian (07:19):
Yeah.
Kelly (07:20):
You mentioned that there is some crossover and that is absolutely true. I would venture to say that one of the most important and also measurable differences where we tend to come at odds between UX and SEO is overall site performance, or site speed in general, reason being designers and developers tend to want to add some frills to the website... some little animations, some fun interactivity components to the site... to in path the user experience: to make it a more enjoyable experience. But whenever you add additional scripts or additional animations, especially GIFs, to your website it slows down the site and that has an impact on SEO. Do you want to explain how SEO and page speed interact?
Rhian (08:16):
Absolutely. Page speed is... So there's over 200 ranking factors for Google and they change a lot but there are some that remain the same and one of those is speed, and we know that one of the ranking factors is speed because Google wrote an entire blog post about it and have mentioned it over and over and over. It's not just important to be performant on desktop, it's actually more important to be performant on mobile. It's really important when you are, whether it's you deving it out or someone else is deving out it or whomever, you are actively testing it on desktop and mobile because we often get caught in that "I'm on my 5K monitor, wall-to-wall. This looks great. It's at 70 on Lighthouse." Which by the way, 70 if you're in university is not a great grade but on Lighthouse is a great grade. That's just something that's good to know is your score on Lighthouse is... Don't think A through F when you're looking at it.
Kelly (09:23):
I think it's also important to talk more in depth. What is Lighthouse?
Rhian (09:27):
Yes.
Kelly (09:28):
Lighthouse is a tool to measure four primary things: performance, accessibility, best practices, and SEO. It basically is a Google algorithm that crawls your site and grades you on each of these four areas, five if you're also looking at a progressive web app, which is something where I don't know if we're going to be getting into this episode because it's a bit more technical. But you can use Lighthouse as kind of a guide for finding areas of improvement on your site. It's important to note... and I know I'm going to mention this again during the episode... you have two scores. You have your mobile score and you have your desktop score. You are going to find when it comes to performance your desktop and mobile are likely going to vary drastically unless you have like a super basic website, the reason being mobile is measured as if you are using a middle range device on a relatively slow network connection. We're talking like a Moto G4 on a 3G connection. Remember when 3G was the fastest that was available?
Rhian (10:33):
I was going to say, "What's 3G?"
Kelly (10:36):
Yeah. It's also really important to note that there is a good chance that a Moto G4 on a 3G connection is not your primary customer who's actually at your store, but we're looking at making sure your website is performance for everybody who visits it and that's why Google uses that mid range level to score you on mobile, but it is going to have a pretty hefty impact on your score especially if you have a lot of JavaScript on your site. Again, we'll get into this in more detail but I wanted to provide a bit of information about what Lighthouse is and what to expect from it. Also, I guess I should note that you can pull up your Lighthouse through Chrome dev tools. It's a little tab. If you right click and click on inspect element you'll see a tab that says Lighthouse and you can run a Lighthouse test on your sight.
Rhian (11:28):
And if you want to be sneaky and start looking at competitors' you can do it that way or you can just have the Lighthouse Chrome extension and you just click it every time. You're like, click, click. I love a Chrome extension.
Kelly (11:40):
Yeah. You have access to literally everybody's Lighthouse scores. It's not like it's private data in any possible way. Also worth noting, every single page on your website has a different score. It looks at each page individually.
Rhian (11:55):
Which is always fun, right? You're like, "I'm doing a great job on my product descriptor page. Whoa, home page. What has happened here?" And I feel like that's where people get really stuck, too.
Kelly (12:06):
I completely agree. And it's important to... Where are your customers looking at most? Most of the time they're going to be visiting the home page because they're googling your website, they're entering it indirectly, or they're visiting a specific product page because that's what your marketing. That's what your sending via Google Ads, via paid social posting on social media. Those are the two areas I think that are most important to review but no part of your website should be neglected, of course.
Rhian (12:32):
Of course. I can't remember if I said it already, so I'm going to say it again. Google indexes mobile first, so if your desktop is super fast, awesome. Good for you. High five. But Google still will look at your mobile performance even if you're a desktop-heavy type of brand: if you're selling 4,000 dollar [crosstalk 00:12:52] for instance when people are checking it on desktop, most likely, they're still looking at your mobile performance. Google makes the rules we just stick to them.
Kelly (13:04):
If you've listened to any of our episodes in the past you will know that we like to talk about hills that we will die on, and this is where it's going to get a little fun for this episode as we kind of go through some hot topics that tend to kind of butt heads between SEO and UX.
Rhian (13:23):
I can't wait. Do we start with the biggest one? Or do we climb it?
Kelly (13:29):
No, let's go ahead and just jump right on top of that hill because it's the first thing that people see when you visit a website. It makes sense to start here.
Rhian (13:36):
Okay, let's start here. We're starting on pop-ups. I'm not saying that I hate pop-ups. I'm saying I wish I never saw another one in my life. I think those are two different things and I... Here's the issue with pop-ups. It's not me who hates them, per se, but Google has said, at great length, why they do not like pop-ups, why it impacts your store, and especially why it impacts. They made that announcement years ago. Imagine a spider crawling around the internet and they crawl through your store. Think of a spider crawling on your site. I'm sorry if you're afraid of spiders, but imagine that's happening on your site and you don't ever let it get through the front of your store because you slam a pop-up right away in hopes of capturing an email. That's why it's bad from a Google perspective. I also just loathe them, but Kelly, over to you, because I know there's an actual use case for this.
Kelly (14:53):
Yeah. I don't hate pop-ups, I hate the way that they're delivered.
Rhian (14:56):
Okay, fair.
Kelly (14:58):
They're absolutely necessary because it is a means of communication that's very important: being able to talk to your customers outside of actual website itself. That is usually email marketing but often you see pop-ups for collecting SMS as well if you're advertising via SMS. I think we agree on how pop-ups should appear, to a level. I think most importantly there's a level to giving... If I've never visited a website before and I see, "Give me your email and we'll give you 10% off," I'm going to fill that out if I am ready to place an order and I know that I want that 10% off discount code. I will literally reopen a site in incognito to pull up that pop-up again to get that 10% discount code. I'm not going to give you my email address if I've never had any intention on shopping in your store. It's about trust. "I don't trust you. I don't know what you're going to be doing with my email. I get enough emails every day. I don't want to continue to get more from somebody I've never shopped with before." That's why it's important to deliver a pop-up later in the user experience. I'm talking at least a minute on actually browsing the website, and even then you see, "I haven't actually decided to make a purchasing decision but we'll get into this."
Kelly (16:22):
The other thing that I just wanted to touch on now is not only timing but distance on the page. Don't show the pop-up as soon as 30 seconds into the page load or whatever. Wait until I've scrolled down a certain portion of the page. Let's say I've made it down 50% of the home page or whatever page I'm viewing. You can actually set triggers like that using different pop-up tools, whether you're using Klaviyo, Privy, Justuno, they all do it, so you can set those specific triggers to wait, either like wait a minute or wait until you've scrolled down 50% of the page.
Rhian (16:55):
Dare I say... This is something from an SEO perspective and a UX perspective we sort of agree on in the sense that you don't want to be shoving the pop-up down somebody's throat from a user experience perspective. So one minute is Kelly's recommendation and I will say I agree with that from an outside of SEO perspective as well. From an SEO I will die on the hill of no pop-ups. There are caveats to that. A top bar is fine. Something that slides in from the side is also fine. Anything that's age-gated, a full pop-up is totally fine. Google can recognize that, as well as any GDPR-type stuff. Those are kind of the outsiders.
Kelly (17:46):
Another one that's worth mentioning is exit intent pop-ups. Those are totally fine.
Rhian (17:51):
Oh, you love exit intent.
Kelly (17:52):
I love exit intent pop-ups. What that means is when I am viewing your website and then I move my cursor off of the screen... let's say I moved it back up to the address bar, to the bookmarks bar, if I'm going to visit another page... a pop-up shows up and they're like, "Hey wait! Don't leave us." It might ask for your email address for like 10% off discount code or free shipping or whatever it might be, but that's a really great opportunity to catch their attention one more time before they actually move away from the website and you lose them. It works. It doesn't work. It really depends on who the customer is, obviously, but there's no harm in having an exit intent pop-up.
Rhian (18:31):
Absolutely. And Google by now has already called your store, by the way, if you have an exit intent pop-up. They have crawled all over your store. They know what's up.
Kelly (18:41):
Exactly. I think pop-ups are... They're an interesting topic for us because we have gone deep into the topic of pop-ups on not only the podcast but on YouTube videos and on webinars that we've done together, so we can probably write a book on pop-ups at this point. Just in case we need another side project to do, now we have one.
Kelly (19:05):
On the same topic of pop-ups, let's talk about a certain type of pop-up, and that is... Actually, there are a couple of them here that I want to cover. Let's start with spin-the-wheel pop-ups. I think this is a hill we will both die on in that they should not exist ever. However, they work, and I hate that they work, but I will say while they work they're really good at attracting discount customers to your business, not your best sellers. They're not your VIP customers. They're the ones who are just looking for a bargain. I'm just so tired of seeing... I do not want to see another spin-the-wheel pop-up for the rest of my life. I know I cannot make a bet on that because I will lose probably today depending on if I do any shopping, I guess. But I am on... I get it. It is a means to capture an email. I'm not a fan of it. I think that they're dumb and I think that they're [inaudible 00:20:12].
Rhian (20:12):
Dumb!
Kelly (20:18):
I'm pulling out the adult language here. I'm thinking through this.
Rhian (20:23):
I also want to say real quick that they also can... While they capture emails, they also increase bounce because people are like, "Nope!" And anything that increases bounce is bad because Google also counts how long people have been on your store for. That counts towards your overall... Let's say there's a search number of 100. Google's like, "How many seconds has someone been on the store? Oh, half of one second because they left because they hate pop-up wheels. Okay." That means that your store is not as important and that's something to keep in mind, is, "How do I keep people on my store?" I don't think wheels do that. And I agree with you about the discount customers.
Kelly (21:14):
Wheels do not do that.
Rhian (21:16):
No. Wheels are just irritating.
Kelly (21:18):
Another pop-up that's worth talking about are FOMO pop-ups. These are not pop-ups. They're that little message that appears usually in the bottom left corner of the screen that says, "X person from Y city recently bought Z item." There are apps that have been in the App Store that fabricated the data. That wasn't actually true. For one thing, these apps are no longer in the App Store. I'm going to preface it with that because that is... Of a scale from one to 10 on things not to do on your website, that scores around a 40 or 50, so don't do that. But most importantly there's... I don't know. I feel like it's all... And I don't know if it's because I run an agency and I know that there are these apps out there that fabricate this data. I have never once thought, "Oh, Joe from Pittsburgh bought this. I want to buy this too."
Rhian (22:15):
Right. Never. I'm like, "Good for Joe in Pittsburgh. This information's probably fabricated." That's all I can think of when I see those little modal pop up. I'm just like, "That can't be real." But interestingly... Everlane does this well and what they do is... and this is off the top of my head, but... when you're on the store or on a specific product they say, "X amount of people have purchased this in Y recently, or have looked at this, and there's 11 left." That, to me, is FOMO that matters. It's not a pop-up.
Kelly (22:54):
That's exactly what I was going to talk about.
Rhian (22:56):
It's just right there and I'm like, "Oh, there's 11 left? I might want to be one of the 11 people that get this because I know that they don't always rerun their product," and that works and that makes me think, and that also helps with search because it helps with your conversion, which also helps with search. Everyone's like, "Rhian, does everything help with search?" And my answer is yes.
Kelly (23:21):
Yes. it's called creating a sense of urgency and X remaining is a really great way to do that because that's an honest... Literally, it uses your inventory quantity and shows that number saying that's what's remaining. If you go the modal route that tries to falsify the information, that is called a dark pattern and we don't like dark patterns. We want to avoid dark patterns on our website.
Rhian (23:51):
I love that all these hills are like mountains that we'll both die on. We're like, "Do you want to climb up the mountain and live here?" And we can just talk about it for three hours. And we have a list of things that we want to go over.
Kelly (24:05):
I am so down for this.
Rhian (24:05):
Okay, what's the next thing?
Kelly (24:10):
The next one on our list: animations. We have some differing opinions on this.
Rhian (24:19):
Okay, my opinion is animations slow your site down and I don't like them because they make your site slow and therefore you shouldn't have them. They're pretty to look at, though, and again, if your site is slow Google will down rank you for that. Kelly, what's your thoughts?
Kelly (24:36):
My opinion is that depending on how you use the animation they could be very helpful for conversions, but they can also slow down your site. I'm not going to say no to that. There are a couple differing types of animations we're talking about here. The first: these are called micro-animations. This is like a little small animation that happens maybe when you hover over a button or something small moves on the site as you scroll down the page. Some micro-interactions are fine. It's like basic CSS that's actually happening in the background so it is extremely lightweight and does not really have much of a negative impact on your store.
Kelly (25:16):
However, the other two are where the slow down really comes in, and these are GIFs and videos. Let's start with GIFs because speaking from a technical standpoint animated GIFs are cool to have on a site to show some kind of interactivity or animation, however, the file size for GIFs tend to be pretty significant. I often visit sites and if their site is slow the first thing I do is check to see if they're using a video or they're using a GIF for the animation. By slow I mean these file sizes for these GIFs are often 500 to 750 kilobytes, especially if they're loading multiple GIFs on one page. That slows your site down so much and that is why is you're seeing that low page speed score if you're not already at zero.
Rhian (26:13):
We actually ran a site... we're not going to say the name... right before we jumped on this to record, and it was at a zero, which is the lowest I've ever seen.
Kelly (26:22):
It was literally zero.
Rhian (26:23):
I mean, it's literally the lowest number.
Kelly (26:24):
It is possible to score zero. Also important to note on there, I... again, I'm not mentioning the name of the site just because I don't want to for reasons. That is my reason.
Rhian (26:38):
For reasons!
Kelly (26:40):
For reasons. I'm looking at some of these things on here like properly sizing your images and using video formats for animated content. Here is a GIF that is 1.1 megabytes.
Rhian (26:55):
Okay, I asked you this on our YouTube. What is a megabyte?
Kelly (26:58):
Let's back up here. File size. What you're usually seeing for a small, tiny text document starts in bytes and then bytes increase into kilobytes which increases into megabytes which increases into gigabytes and so on. When I'm uploading images to a store I try to keep all of the images below 300 kilobytes. If I'm talking 1.1 megabytes, almost... 1.2 megabytes would be four times the recommended size. I have actually pulled up this GIF and I think it's like six screens. That's it. But it's six screens meaning like it's a pretty... It's a jumpy kind of GIF that shows different moves, like different images, basically, complied into one animated image. Yeah, it looks like it's maybe like six or seven screens and it is 1.1 megabytes. That's brutal.
Rhian (27:58):
That's brutal. That is super brutal.
Kelly (28:01):
So how do you solve for this? I alluded to this earlier. The answer is using videos in place of GIFs. You can add on a shop... Shopify.... shop-by-supports HTML5 videos, which is basically a video that you can loop over and over again with no sound or anything like that. The file size is significantly smaller. I could probably convert this GIF into an MP4 video and drop the file size from 1.1 megabytes down to 300 kilobytes or somewhere around it. It's a significant difference.
Rhian (28:39):
That is absolutely significant. You know something I see this happening on as well? Especially I see it mostly in apparel and lifestyle brands. It's a wall-to-wall beautiful lifestyle image that is the heaviest image of all time. I'm looking at it on my phone. 80% of their traffic comes... and this is such a heavy image.
Kelly (29:05):
That's a really important thing to me and a lot of Shopify themes don't support alternate images to be uploaded for different screen sizes. There are some solutions that are built into the themes dependent on the theme that you're actually using. One is called basically a source set, which pulls the... based on when the page loads, based on the screen width, it pulls the correct size image for that screen width. Another one is a JavaScript library called Lazy Sizes that does the same thing, just in JavaScript. That's probably... This is an absolute necessity, I would say, for any Shopify theme, to make sure you're actually loading the correct size image in the space that needs to be loaded in there.
Kelly (29:49):
If you're loading a 2,000 pixel width image on desktop for large monitors but you're not loading a smaller image for mobile and you're still loading a 2,000 pixel width image, keep in mind an iPhone 5 screen width is 320 pixels, and if you're loading a 2,000 pixel width image and it's 320 pixel screen, why?
Rhian (30:15):
Yeah. It's a lot.
Kelly (30:16):
So you have some homework. Ask your developer if they are currently using... currently loading the correct image size for the screen that's being used and make them fix that if not.
Rhian (30:31):
One thing I want to point out about hero images, whether they're heavy... I call them heavy hero images... or not, is make sure that they have alt text. A lot of themes do have it natively within the section but some do not and it's something that is missed so frequently. I know I am always speaking about alt text but just remember to put it there.
Kelly (30:57):
It's important.
Rhian (30:58):
It needs to be there. I'm going to never stop talking about it.
Kelly (31:01):
You shouldn't. So on last week's episode we talked about accessibility and the importance of it so we go into detail about alt text there. This comes up in basically every podcast episode we do when it comes to SE over UX. It comes up in literally every YouTube video that we record. It's important and this is one of those things where SEO and UX will agree on. It might not be something you see on the website but it impacts your website and you have to have that alt text there.
Rhian (31:32):
Something that is optional are slide shows.
Kelly (31:36):
Oh boy.
Rhian (31:37):
Here's why they can be good: if there's text overlay and the text is crawlable by Google. Kelly, why do you dislike them so much?
Kelly (31:49):
I am going to introduce to the world a website that was built not by me. It was built by somebody named Jared [Spith 00:31:57] according to the footer of the website. It is shouldiuseacarousel.com. Please visit this website. I want you to go through and watch the 10 slides on here because carousels are useless. Here's why. I'm spoiling a bit of what shows up in here. Forgive me. In looking at statistics of how people actually interact with your carousels, the answer is they don't. A vast majority of people never view that second slide, never click through on a button on the second slide, and all you're doing is loading additional content in that space that's never going to be used. It's never going to be viewed.
Kelly (32:47):
And you might be like, "My slide show automatically goes to the next slide, so of course they're going to see it." Okay, maybe they did see it. Maybe it distracted them enough to take their attention away from what they were doing before. Maybe they were trying to read text on the first slide and then it automatically scrolled to the next one. They're still not going to interact with the next slide, or they might go back to the first one and see what they were reading in the first place. My point being... Oh, also, since we're on the topic of accessibility, this is a hill. I'm getting my little attitude on here. Since we're on the topic accessibility as well a lot of carousels, a lot of these slide shows, are not accessible. You can't actually use your keyboard to navigate through, which means a screen reader does not know how to navigate through the slide show. The answer is don't use slide shows. Are they on basically every theme? Yeah. Does that mean you should use it? No.
Rhian (33:43):
And you don't have to. You can just do the one image.
Kelly (33:46):
That is what I recommend doing.
Rhian (33:48):
The work around here is just don't put more than one picture in. That's the whole work around.
Kelly (33:55):
Yeah. You can actually use the slide show functionality within your Shopify theme and just use that first slide, and then it doesn't actually turn into a slide show. It's just that one image.
Rhian (34:07):
Perfect. That's something you can change today, by the way. If there's one thing you do today, this is the thing you do.
Kelly (34:14):
This is the thing you do.
Rhian (34:15):
Okay, so the next thing we're going to talk about is text on your home page. This is something from an SEO perspective that is a must. I'm also going to say text on your collection page as well is really important because Google looks at your text. Google uses EAT, expertise, authoritativeness... I can't say it... and trustworthiness. Are you an authority? Are you an expert? And are you trustworthy? Also, do you have content? Content is very important because content can't be manipulated. You can manipulate a lot of things on Google. You will get in trouble for it. But content is not one of the things... It's something that is very difficult to manipulate, so when you're writing organic content Google's algorithm can pick it up, they understand it, and then they associate with it. And remember, when you're writing this content you're always wanting to answer a query that someone might be asking but you need to have text on your home page, but a lot of people don't because it's not that cute. It just isn't that cute. And I recognize that it's not that cute. Same with a [inaudible 00:35:27]. I recognize that it is not cute, but if you don't have it all Google sees are... Like, if you think of your collection page, all that Google sees is a page full of products, especially if you don't have alt text. That's all they see.
Kelly (35:44):
Yeah. We often talk about how important it is for you to know who this brand is before... especially the new customer. I should know about the brand as I'm trying to see your products. Like, before I even start navigating through your site. That's why this text on the home page is so important not only from the SEO standpoint but also from user experience, is there's an educational piece to it as well: that you have an opportunity to teach your potential new customers, and existing customers, about who you are as a brand and what makes you different, what makes you special, and gives them a reason to actually buy from you. It's a really great opportunity to show your brand voice in this text. Have some fun with it. Show some personality, assuming that you have personality within the rest of the website. Make sure that's consistent from one page to the next and also in your email and social media. Whatever. I wanted to preface that because I needed to add a bit more in there and not just be like, "I mean, provided you actually have some personality." That is not at all what I meant.
Rhian (36:46):
Yeah. That's an opportunity to tell a story. And I do want to say one thing, though. I have seen a lot of really beautiful... and I often see it with direct-to-consumer brands. They have... It's text, but it's an image. It's not actual text and then there's no alt text behind it, so all Google is seeing is an image. So make sure if that's the route that you're going, which I don't think you should, that you have alt text. But I really think it should be actual text on your front page. On your home page.
Kelly (37:15):
On your front page.
Rhian (37:19):
On your front page.
Kelly (37:23):
Okay, so this next one's important because it's something we've discussed previously on this episode and also previously episodes and that's mobile versus desktop experience. I want to start this from the user experience standpoint. Designers and developers usually do desktop first for designs and for development. What this means is we would design a page and build a page based on what it should look like on a desktop and then squeeze everything down to make it appear on a mobile device. We've talking mobile first forever. Not forever. Long enough where mobile first is a buzzword at this point.
Rhian (38:06):
A long time.
Kelly (38:07):
As much as we talk about it, we don't actually do it, and I, as a developer, am just as guilty of it as well. I honestly hate starting from mobile and then working my way to desktop. It just completely messes up with my development process. But if you're not going to... If you're going to design desktop first, that's fine, but you have to really pay attention to both experiences because remember over 60% of your customers are on mobile devices. They're not viewing on a desktop. Maybe it's gone up a bit with COVID. Who knows. But point being, both experiences need to be optimized. [crosstalk 00:38:48] SEO standpoint.
Rhian (38:48):
I agree... And from an SEO perspective. I couldn't agree more. My only real thoughts from SEO, like an impact statement point, is Google indexes mobile first. That is what it is what it is and if you're sleeping on that... And that includes things like... And this weaves back into user experience, right, but this goes into tap targets. For of you listening who are like, "What is a tap target?" it's the thing that you click to get to the next thing on your phone. If the tap target is too small people are just going to be like, "Oh, bye," and again they bounce. If your site is too slow on mobile they bounce because they think something's wrong with your site. If it doesn't function properly or... and this has happened several times to me recently... it does something silly with the cart or there's not a fast checkout option, people leave, and they leave because they're like, "I have my mobile phone. I'm..." Especially right now. You're like, "Where are my credit cards? I don't even know."
Rhian (40:02):
You want people, from an SEO perspective but also a UX perspective and certainly from a CRO perspective, to stay on your site and then check out on your site. If you're not making that easy on mobile you're losing a huge audience and ultimately it's back on you as the merchant because you need to make sure that mobile experience is something that I can go through easily and check out and stay. Otherwise, Google looks at it and says, "A person comes on their store for 30 seconds and they leave and people don't check out period. Why?" If that's happening to you, if your churn, or if your churn or your bounce is really high... so your conversion rate is really low... start looking into why. I know we're not going to make a CRO episode otherwise it'll be a thrower episode, but it's important to look at it and it matters from Google. It matters on your bottom line. Like, how much money do you want to make? If you increase your conversion by 2% how much more money are you going to make?
Kelly (41:08):
Exactly. And it's also important to remember as a business owner you're most likely managing your business from a desktop. You're most likely not managing your business from your phone. I often see with merchants that you forget what your website even looks like on a mobile because it's been so long since you've browsed your own website on mobile. Please take some time to go through your own website from homepage all the way through check out on a mobile device and see where you're getting hung up. And it's your own business and I know you know your business. I know you know how to navigate your own website. You'd be surprised. You're going to find some missteps, some mishaps, in there and be like, "I should probably fix that." Highly recommend doing that. That is, again, something that you can do right now as you're listening to our beautiful voices on this podcast.
Rhian (42:00):
Yeah. Please do that today.
Kelly (42:03):
Okay, so we just went through a number of these hot topics and I think, despite some minor disagreements on what is useful to have on your site and what's not, for the most part we agree and I think that's the important point that we're making here, is there is a balance between SEO and UX and you're looking to achieve that perfect balance on your site because there are plenty of things that you can add to your site that really add to the experience but don't slow down your site or don't negatively impact your SEO.
Rhian (42:36):
Absolutely. I couldn't agree more. I think this is something... If you are working with multiple teams and... because that happens sometimes. You have an agency working on your design and dev and then you might hire a marketing agency or an SEO agency and all of a sudden you might yourself a store owner in the midst of a disagreement. You now have some tools where you can say, "Hold on a second, but don't we just kind of agree on the bottom line here?" And the bottom line as a store owner is, "How do I get people to my store and how do I make money?" That's the whole thing. "How am I going to make any money?"
Kelly (43:15):
That's the whole goal.
Rhian (43:16):
That's the goal.
Kelly (43:17):
Exactly. All right, let's do some store shout outs. Rhian, what is your shout out for this week?
Rhian (43:24):
My shout out this week is Adam JK. I just found this store on Twitter and it's really funny and maybe this resonates with people. There's a tote on this website and the tote says, "Do what you love and you'll..." "Never work a day in your life" is crossed out and then underneath it is written, "work super hard all the time with no separation or any boundaries and also take things extremely personally." I just really resonated with that. [crosstalk 00:43:57].
Kelly (43:57):
It's me.
Rhian (43:57):
It's me as well. I was like, "Ah yes, this is the store of the day because this tote bag resonates with me," but overall this store is super cute. It's easy to navigate. The color, it's performant. The colors are nice. I just enjoy it and also the copyrighting on it's really funny and I love some good copy.
Kelly (44:25):
I love that.
Rhian (44:27):
What about you, Kelly?
Kelly (44:28):
My store this week is called OLIPOP. It's drinkolipop.com. They sell pre-biotic soda alternatives, so they're good for your digestive health. Their site is super cute. Their photography is really great. They have some GIFs on their page so I have opinions about that, but they just do a lot of things really great. Also, their brand color scheme is really great. Their copy is good. They use large font size, which I really appreciate as I'm scrolling through the store. It's very readable. I think this site is super cute and I'm tempted to just buy things because everything's pretty.
Rhian (45:14):
Awesome. You know, I recently... Is it surprising that I recently bought some and it's delicious?
Kelly (45:19):
No. You bought from a DTC brand.
Rhian (45:23):
What's happening?!
Kelly (45:25):
Amazing. I hope you enjoyed UX/SEO battle royal. I hope it was actually more... I'm sure you learned a thing or two from it. I hope you learned a thing or two from it because we had fun recording this episode. But yeah, thanks for tuning in and thanks again for our sponsors for supporting this episode. We now have a YouTube channel. Watch our friendly Shopify store tear downs at youtube.com/commercetea. We release a new YouTube video every Thursday morning. You can subscribe to Commerce Tea on your favorite podcasting service. We post new episodes every Tuesday, so grab your mug and join us. We'll see you next week.
Rhian (46:06):
Clocked In is a time clock for Shopify. With Clocked In, your team members can easily clock in and out of their shifts from anywhere. You can manage your team's hours as they work remotely with an intuitive interface that can be used from desktop, tablet, or mobile. Check it out at clockedin.io or in the Shopify app store.
Leave a comment
Please note, comments must be approved before they are published