Baymard's Common Mobile UX Pitfalls, Part 2

Mesa is an easy way to integrate any Shopify store with any eCommerce app or service. Mesa is the only automation platform designed exclusively for Shopify and Shopify Plus merchants. By creating workflows that carry out repetitive tasks automatically, merchants can focus on their business and create new customer experiences at scale. 

Mesa has a no-code workflow builder for any action your customer takes, such as a new order or product return. Leverage Mesa's built-in features to extend your connected apps. Set up email notifications, receive forms, schedule tasks, delay workflows, or even work with files to sync data with your back-office systems. Developers love Mesa too, since they can lift the hood on any automation to customize them for total control.

Even if you're unsure where to start, Mesa's library of workflow templates helps you get set up quickly with popular tasks common to growing businesses. Or contact their team of automation experts here to support you every step of the way, 24/7.

Win back valuable lost time for your support team. Gorgias has machine learning functionality that takes pressure off small support teams and gives them the tools to manage a large number of inquiries at scale. Gorgias combines all your different communication channels (email, SMS, social media, livechat, phone, etc.) into one platform and gives you an organized view of all customer inquiries. 

Their powerful functionality can save your support team hours per day and makes managing customer orders a breeze. They have allowed online merchants to close tickets faster than ever, with the help of pre-written responses integrated with customer data to increase the overall efficiency of customer support.

Their built-in automation also frees up time for support agents to give better answers to complex, product-related questions, providing next level which helps increase sales, brand loyalty, and recognition.

resources.

• Baymard Institute Article
• Shopify Experts

transcript. 

Kelly 0:00
A couple of months ago, we started discussing baymard Institute 18 common UX mobile pitfalls. It was a lot to cover in one episode. So this week we're covering the remaining 10 on the topics of forms and site wide errors. Let's dig in.

Rhian 0:18
Welcome to Commerce Tea, a podcast to help you succeed on Shopify.

Kelly 0:22
I'm Ryan. And I'm Kelly. Grab a mug and join us as we talk about all things commerce.

every aspect of your website is a variable that could be impacting your business's revenue. We all want to grow our business and we make changes with the hopes of seeing our business grow. Maybe you add a new graphic here new social proof on your product page there, maybe you change your pricing. But do you know if this new thing is helping or hurting you? Today, testing is a requirement understanding what is and isn't working for your business. You don't need to be a rocket scientist to test in fact, I set up my first test in less than 10 minutes on a client store using neat A B testing. After the test was live we saw a confidence level on each of our tests to know which is actually best for the business how they sort of see additional revenue per view for each variants. Give her friends that need a be testing a trial today and start testing for your business head over to try a dot indeed AB comm slash commerce dash t to start your 14 day free trial. Again, that's try dot n e@ab.com slash commerce dash T.

Rhian 1:32
mesa is the easiest way to integrate any top ecommerce app or service with your online store designed exclusively for Shopify and Shopify plus mesas. automated workflows can get back your time spent on repetitive tasks while growing your business at the same time. Join other merchants that have embraced the simplicity of mesa is no code approach to building workflows, you can create new ways to improve customer engagement. Encourage repeat purchases without lifting a finger, reduce manual data entry and more through a simple point and click interface. And with bfcm planning around the corner, now is the time to ask the question is my online store prepared? optimizing every step in the shopping experience is the only way to create a lifelong customer. Get Mesa and capitalize on one of the biggest commerce events of the year. Search for Mesa in the Shopify App Store and download the app today.

Kelly 2:33
Hello, Rian.

Rhian 2:36
Hello, Kelly. Okay, first, before I say What's up, I just want to tell you that our hook is one of the least

Kelly 2:43
you know what sexy hooks that I am going for efficiency today. I just made it I was really excited to talk about form in sitewide errors. So I'm just like, Look, this is what we're doing. Let's do it.

Rhian 2:59
This is what we're doing. And if you're like what's the hook? It's the part that exactly or everything else. Well, how are you before we get going into this mobile journey? And

Kelly 3:12
I have been on sabbatical for three ish weeks now. This is my final week. And I have feelings. That's how I'm talking offline. Yes. conversation.

Rhian 3:31
Okay, okay. And yeah, I cannot wait to hear about it. Also, Kelly. So my super secret app is almost ready for submission to

Kelly 3:42
almost ready for submission. I am so excited. Just like it's fun seeing functional.

Rhian 3:49
It's y'all ain't ready. We put the fun and functional in functional. And speaking of functional, let's talk about

Kelly 4:03
what a beautiful segue.

Rhian 4:07
Forms is site wide errors. Okay, if any of you were like, oh, what words? Are you saying? Why don't we go ahead and just define them out the gates. Kelly, what's

Kelly 4:18
a form a form is a final form. It's where you put information into it. And then you click a submit button, or some other button maybe it says Add To Cart. Maybe it says send us an email. Maybe it says any other things. It's like It's

Rhian 4:36
like a text box where you put words

Kelly 4:40
right? It's multiple texts, multiple text boxes, and maybe there's a radio button some like low you know, option buttons. Maybe there's like a drop down, man. Like I use the word radio button.

Rhian 4:49
I just know. Radio words. Okay, so what's the site wide error? It means your stuffs broken.

Kelly 4:58
Site wide error just means it doesn't It doesn't necessarily. It's not an error specific, like specific to one area on a site is just like it's all over load speed and things like that. That are just things that should be looked at in fast.

Rhian 5:15
Okay, so let's cover the first thing that we want to talk about. And this is the fact and then I want you to talk more about it. Kelly 62% of mobile sites don't dynamically change form labels from above fields to left aligned in landscape mode. By the way, y'all if you're like, this is that was incredibly long winded. I didn't write it. Somebody else did. And I'm gonna now punt the ball over to Kelly, for her to tell us when Okay,

Kelly 5:40
so I am shopping on my phone. Okay. And we're talking mobile UX. Yes, we're talking about shopping, browsing, mobile. And

Rhian 5:48
I just want to say, Google looks at Mobile indexing, for SEO, okay. And over back over to you, Kelly,

Kelly 5:58
how to get that in there. Okay, so let's say you are scrolling through a website, you reach out a contact form, you want to reach out to the the merchant, your customer on a website, you want to reach out to the merchant and ask them a question about an order or whatever you're going through, and there's like maybe eight questions you need to answer. And you're, you're most of the time you're filling out a form with your phone in portrait mode, meaning like it's up and down, kind of how you typically hold a phone versus landscape mode, which is usually how you would watch a video on your phone, and also how you should be recording a video when you're on your phone. Please take note, don't record videos in portrait mode, unless you're recording for like tik tok or something like that. I guess Instagram reels are a thing too. So

Rhian 6:46
anyway, take it back into it.

Kelly 6:49
No, no, those are the only two situations where you should ever be recording a video and are in portrait mode. Yes, other than that, please record in Yes, landscape. Anyway, so you know, when you're typing on your phone, and the keyboard comes up, and I'm sitting here holding my phone, just like whipping it around is perfect. It's you know, those

Rhian 7:09
walls are great.

Kelly 7:09
It's cool. And usually the keyboard takes about like the bottom, almost the bottom half of your screen. And then you have like the top part of your screen that has like the browser, let's say like Safari is like URL like the address bar, something like that. And then a little bit of the screen that you can see the actual form fields that you're filling in. You're following I am. So I hope

Rhian 7:31
everybody has this.

Kelly 7:33
So now let's flip your phone sideways. Okay, you're in landscape mode.

Rhian 7:36
Got it flipping.

Kelly 7:38
Now, your keyboard takes up more than half of your screen because it is now squeezing in the keyboard itself, the suggested words. And then usually there are like some buttons to like, like a button to toggle to hide the the keyboard so you can see the screen or like go up and down like navigating through the menu, which is really helpful. I can navigate it through like the form itself to jump before or after lead to a later question. Unfortunately, you know how even less screen real estate for seeing what you're actually doing on the website. So when we're talking, there are two components to any form field, you have the entry field itself, which is what you're typing into. And then you also have the label which is telling you what you're supposed to be typing into that the okay. On portrait on when you know, when we typically view a website on a mobile device, usually the label sits on top of the textfield. Just because it's a natural really like you know, left to right, top down, you see first name, enter the first name, last name, and then feel the entrance last name on landscape. What this is telling us is 62% of sites don't move that label from above the text field to the site. Okay. And the reason why is it requires just some CSS to fix it, you always say this is how you fix it. That's how you fix it. Um, it just needs to be did the order of it just needs to be adjusted in the code a little bit with some styling with some CSS. But by listing the form field label on the side, next to the field, it shrinks the amount of space that's required for you to actually see on your screen. So you can see a fields above you can see fields below and it's a little bit more Is it a little bit easier on your eyes when you're trying to read what else you're going to be answering on that on that form.

Rhian 9:30
Does that make sense? Does that does make sense to me. FYI, everybody. I have my phone in my hand landscape mode, so I can visualize it. So I hope that y'all were able to understand it as well. And if you don't know CSS, what should you do Kelly? Hire a developer to get answered in

Kelly 9:54
shopify.com exactly

Rhian 9:55
go to experts.shopify.com. Okay, so I think we're going to continue this trend that is now going to be a trend cuz it's gonna be the second time where I just say the thing. And then and then let Kelly explain it. Okay, so 69% of mobile sites don't properly introduce position and style error messages.

Kelly 10:15
Let's say you're filling out that contact form still, we're just working on the same cost. It's a long contact for our later questions. Maybe it's not, maybe it's like five questions. Maybe it's like your first name and your last name and your email address. And here's the problem question, or here's my contact,

Rhian 10:32
yes, I feel like that this, this is really impactful. Okay, you know, when you have a form up, and your iPhone or your Android phone, in theory populates your name, because it's triggered that oh, this is the name therefore, okay? Why does that sometimes not happen? It makes me enraged. Like the way if we're wondering if like that, or if it just doesn't take my credit card information, I'm like, there's like six credit cards saved on my phone? Why do I have to go pick one up to

Kelly 11:01
keep this as a high levels possible?

Rhian 11:04
Okay, yeah, and I need a high level otherwise, I'm not gonna get it

Kelly 11:07
there is there attributes that you can add to a form field in the code that say, this is the type of field that it is, think like, when you're typing in a password, and you just see those like little dots, instead of you seeing the actual letters or numbers and characters that you're typing? It's, that's an attribute, you're saying what type of field it is, you could do the same thing for auto completion, okay, which is what we're talking about here, okay. If you miss label a field, or you don't label it at all, it doesn't necessarily know what it's supposed to be. But developer can like hints at what kind of field This is to provide some context for your phone to know like, Hey, this is what it should be. Quite often you see this with like, people not doing this, when you have, let's say, a phone number, and it brings up your entire keyboard instead of just like, numbers, keyboard. That's something that's like, really grinds my

Rhian 12:07
gears. Okay, so Okay, thank you. I I know that that was a divergence, but I also think that that creates churn. Because I won't fill the thing out on my list. Too much effort, which shows Yeah, exactly how much time people they'll just bounce off of your, your page, they just are like, buy them out. And I think that's always important to remember, for everything conversion, SEO, and mostly conversion in SEO. Okay, so, back to the original question. 600% of mobile sites don't properly introduce position and style error messages.

Kelly 12:41
Yeah. Okay. So back to our situation where we're filling out this contact situation.

Rhian 12:46
That's the common situation.

Kelly 12:51
Maybe Maybe it is a situation, maybe you have an issue with the product that you received an O refund, or so that's

Rhian 12:55
true. It is now and there's no FAQ page that really.

Kelly 13:02
So I'm just going to use the general contact form for that. Okay. And so let's say our form has first name, last name, email address, order number, which could be an optional field. So not necessary, drop down field that's like, why are you contacting us? I have an issue with my order, I have a question. I'm looking for a job, whatever. And then you have the just like an empty text field issue, like type, whatever about why you're contacting us. Let's say I'm going to this form, and I forget to put in my first name, okay. And this was the first field listed. And so I'm going to continue to scroll down to the end of the form. And then I get to the submit button and I click Submit, okay, and nothing, nothing's happening. Well, fun. Can't see what's happening. If I were on a desktop, I would see that there's an error message that says this field is required, where I skipped filling out the form field for the first name, what should be happening is I should be scrolled back up to where that error actually occurred, where the first error occurred on your form. So I'm like, Oh, this is where I messed up. This is what I did. Let me fix it. And then I'm going to submit it again. 69% of mobile sites don't scroll you back to where you need to be.

Rhian 14:16
that's a that's a really high that's a really high that number is

Kelly 14:19
I honestly think like, I'm probably guilty of that too. Because I it's not something you really think about when you're building the form like oh, yeah, let me make sure I scroll to the error. But it's something that's definitely it should be built in.

Rhian 14:33
There you go, everyone. You heard it here. Not First, if you read the baymard blog, and if you didn't read the blog, you heard it here first.

Kelly 14:42
And hopefully you've never visited the internet calm before I think. I don't know what is on that website. Um, I would put it in our show notes, but I'm a little afraid that the internet don't like

Rhian 14:56
what is this alphabet owns it cuz that'd be hilarious.

Kelly 15:00
The loading,

Rhian 15:02
whoever's holding it is a genius. They're just holding it. But I want to do something fun with it. Right? Would you tell that to alphabet?

Kelly 15:11
A website, this just like text on it and all the text says is the internet.com?

Rhian 15:17
Okay, whoever owns this developers, I know it's a funny joke, but think of all the money you

Kelly 15:23
owe the money, you can make all the fun things you could be doing with this.

Rhian 15:27
Okay. Okay. So next form, challenge 25% of mobile sites don't have an address validator or address lookup feature.

Kelly 15:36
Yes. So this means that you're going through checkout. And let's say I'm typing in my address, which is 123 Street lane. Reagan just had a minor panic. He was about to foot to say, my actual address on here. That's really cute. I haven't been on the internet long enough to know that I should not be giving out my address. Yeah.

Rhian 15:57
But Kelly and I will say that and we both on webinars, both of us have surfaced all of our contact information before. Yeah, like why 1000s of people it happened. Allegedly.

Kelly 16:11
Yeah. Allegedly.

Click Back as fast as Oh, if there's something outside, hit back. Yeah, nothing. Everyone's looking outside the same place. I am. But you know, trying, you know, I

Rhian 16:30
am disappointed that I never got any presence from from I'm kidding. I don't know not. That's creepy.

Kelly 16:37
That's a joke. Okay. Oh, okay. So address validation. Yes. My address is 123 Street lane. I go through the Phil did is the forum to fill it out. an address validator might look at my address, if you like Actually, it's 123 Street lane southeast? Would you like to use this version of it before? Because this is what USPS like

Rhian 17:02
and the rest of the zip code. You're like, I don't know the rest of my zip code.

Kelly 17:05
The last four? Who knows the last four digits of your zip code, address validate. I am like, genuinely surprised. But yes, I'm speaking of form validation. Please don't ever require the last four digits of my zip code. I have actually had to go to the USPS website before type in my address to get the last four to finish filling out the form. And you know who those forms belong to? The US government? Of course. Um, one of my least favorite things to do when when hiring a new employee is have to register my business and their local state. Oh, yeah. So I've visited many your state government website trying to navigate their form. And every business registration website from every state is slightly different. Because why not? Why have I got like uniform? Yeah, no, that makes my business difficult as possible. So anyway, for validators, they cut down on the number of errors that can occur having like an incorrect shipping address or something like that, where where the order doesn't actually get delivered? It means that you don't have to follow up with the customer means that you won't get a return to sender, things like that. Shopify, has Google address validation as an option in settings. Checkout settings, shipping. Let's find out

Rhian 18:29
Yeah, does

Kelly 18:30
that fit more? Right? Yeah. It is under.

Rhian 18:36
And if you're, if you're like, what is core? That's everything that's not plus. So it's Yeah, there was all Shopify, that's what I mean.

Kelly 18:42
Um, yeah. So it's under Settings checkout. Under order processing, enable address auto completion, gives customers address suggestions when they enter your enter their shipping and billing address. These are pulled from Google Google Maps API. So it's a legit place. Finding the address. Yes, definitely recommend doing this. Now. If you're using a third party Checkout, let's say you're still on like recharge v one or both v one. v. version two. If you were to install recharged today, you'll be integrated directly into Shopify native like Shopify checkout. So this is irrelevant. Just check that box that I just mentioned, if you're on v1, there are some extra steps that you need to take to actually get address validation within those apps. To remember the name of the app, there is an app that that does address validation for recharge that you and you can install, but it's in the integration section so you can just look further. So yes, please enable address validation because it makes everybody happy. It makes life so much easier. It truly, truly it truly does. He ran What can I do to help my support team be more efficient.

Rhian 19:53
I recommend gorgeous gorgeous combines all your communications channels including email, SMS, social media. via live chat and phone into one platform and gives you an organized view of all help requests. This saves your support team hours per day, it makes managing customer orders a breeze.

Kelly 20:12
It sounds great. What else can you do?

Rhian 20:15
with gorgeous, you can pre write and save responses to your most frequently asked questions. You even have access to the customer's order information so you can personalize the responses with things like an order or tracking number. This will allow your support team to focus on complex questions. brands like Ali pop deathwish coffee and Steve Madden have reduced their response times and increased efficiency. It sounds like

Kelly 20:38
a great way to also increase sales and brand loyalty. Where can I learn more?

Rhian 20:43
Check out gorgeous by visiting Commerce tea.com forward slash gorgeous and try gorgeous for free for two months. Again, that's Commerce tea.com forward slash g o r g I a s. Okay, so, next 50% of mobile sites have an excessive number of form fields shown by default.

Kelly 21:06
Okay, this is one of my favorite things to talk about when we did the the email pop up webinar with Shopify growth lab we talked about this Yes. Where I get this pop up to enter in my first name, my last name, my email address my phone number, my my gender. Why I'm shopping here today, my date of birth. And I'm like, Okay, this is a lot to be asking me. I've never visited your website before. Why are you asking me so many questions? Yes. Keep your form fields to an absolute minimum. I understand if you want to be like first name, last name. And then month and date of birth or something like that. If you want to capture birthdays for like, if you want to capture birth, it depends again on the brand if it makes sense. Yeah. If it's typical for people to shop on your store for their birthday, like milk bar over there's not coming up I want to pretend it was Daniels is next week next month, so maybe I'll quote unquote buy him a cake than he did.

Rhian 22:08
buy him a cake. I just got a birthday cake truffle from target for milk bars, if that makes sense. I'm like this omni channel strategy is fire. Okay. So next up 79% of mobile sites don't Mark required and optional fields consistently. That's a real this is a real pain point, though.

Kelly 22:28
Yeah. So what does this mean? Okay, so when you're filling out a form, you often see like a little asterisk next to certain fields. Yeah, an asterisk usually denotes required. Now if you're using an asterisk to denote a field that's required, you also need to include the legend, which goes way back to school days, where we describe when you're looking at a map, and it's like, what all of these points on a map mean? Like, what are these blue dots mean? And what are these yellow dots mean? That's the legend. Now you apply that same logic, the legend logic to your form, and you say, an asterisk equals required. That's all I'm asking you to say just literally, like write that. So make sure that's on there. And then make sure you're labeling which form fields are required. Even if they're all required, otherwise, it gets chaotic. Otherwise, it gets chaotic. Yes, because of um, like going through a forum and it's like address line one address line two, address line three, business name, like if if some of these fields are not required, like tell me which ones are required, and hopefully only address line one is required.

Rhian 23:33
Exactly right. Otherwise, I'm just like making stuff up. Number two, three, na, na, na,

Kelly 23:38
I also want to say, this is not one of the things on this list. But while we're still talking about this, keep in mind that different, especially if you have an international audience, different languages are used for different form fields. For example, in the United States, we say zip code. In Canada, they say postal code. In the US, our zip codes are five numbers. In Canada, there are six digits that are both letters and numbers. Do not set your zip code or postal code or Code field to be numbers only, or Canadians or other people say in Europe can not check out on your website.

Rhian 24:22
Yes. Or form. Don't do it. Haha form. Okay. Next, otherwise, we're not gonna get off, get through these 61% of mobile sites don't use the right keyboard layout for one or more fields.

Kelly 24:39
Okay, this is what I was talking about earlier, I forgot that it was one of these things. So as I was mentioning, if your form, let's say your credit card number now, Shopify handles this for you, so you don't have to worry about it. But let's use phone number as an example. You have a phone number field on your site. You don't need to give them the ability to write in letters just shows them the number Birchfield because otherwise, what's the point, I don't need to add those additional characters. I don't need to add the letter B to my phone number, it doesn't exist. So show the right ones. But make sure you're actually showing the right ones. And for all situations, as in don't show numbers field for credit cards are not for credit cards for zip codes. Okay, slash postal codes.

Rhian 25:21
Okay, fantastic. Next 93% of mobile sites don't always provide load indicators. Whenever new content is loading,

Kelly 25:31
we made it to the site wide thing we have

Rhian 25:32
made it to the site wide things we should celebrate we are done with forms. There you go had to turn mine on.

Kelly 25:44
My is just on always replace the battery sometime. I know. Sounds cool.

Rhian 25:49
Okay, so we're on to the site wide things. And this is a big, this is a big date, like a big piece of data. 93%. Like

Kelly 26:00
almost everybody, almost every site Exactly. And this is this is not just left mobile either. So this is on desktop. Quite often you don't see a load indicator whenever content is loading. What this means is that you see like the little circle circular thinking that dad, yeah, the doodad that shows before content loads, or you see like a loading bar, where it's very clear that things are still loading, because that content that loading bar has not finished. Like when you're loading a page on safari, you see the the bar Yeah, there's always something Exactly. That means

Rhian 26:30
93% of mobile sites don't provide this.

Kelly 26:34
Yeah, exactly. Why, why add load indicators. Like as a developer, make sure you have a status that for if you click a button and something has not happened, update the button, I see this happen a lot on Ajax Add To Cart Ajax, meaning you don't have to reload the page does not take you to the cart page, it just adds the item to the cart in the background and updates the count or shows you like a mini cart with the new item that you just added into the cart. And then it says like item added to cart by that add to cart button. You know what I'm talking about? So quite often I see a times when you click that add to cart button and nothing happens. It's still working in the background that's taking no idea and so I'm going to click the button again. Yeah, same and I'm going to make the store upset with me and potentially just yet either yell at me or add to to the to my cart and I don't want to wait too long.

Rhian 27:29
I've kept out before with two lower dollar item things in my car because didn't even notice I didn't even notice that I'm emailing them. Excuse me Didn't mean to order to. I don't want to this

Kelly 27:42
is I know Amazon loves to suggest like you just bought a toilet Would you like to buy another toilet?

Rhian 27:48
Second toilet to go with the first.

Kelly 27:50
I just booked a hotel room for Savannah next weekend. And I get to the the confirmation the order confirmation page like Alright, we got your room booked. We're good to go. Would you like to book another room at a different hotel? like another one?

Rhian 28:10
That's not an upsell. They should be selling you like a spa experience or

Kelly 28:14
car rental? related to travel. Kelly and

Rhian 28:18
I have different? Me I'm like clearly they should be selling baseball. So

Kelly 28:24
I'm afraid they don't really have like spa treatments at the Holiday Inn. So

Rhian 28:30
fair, fair, fair. I can understand that. You ever you get to take a bubble bath, you'll be fine.

Kelly 28:38
We'll see how things go.

Rhian 28:39
Next up 66% of mobile sites place tappable elements too close to each other.

Kelly 28:47
You know a lot about this one.

Rhian 28:48
I I feel all types of way about tap targets. Here. It's about your Hill. Why don't you make tap targets big enough to tap? Why are they there? If you're not going to do like Why? No, stop it. This this also this is stressing me out to even think about here's why. When you have a pop up, everything comes back to pop up when you have a pop up of any kind. And I cannot exit out a as a user or a customer I am upset because I can't do this thing that I want to do. Be Google can get past it. What are you doing? See they have already made statements. And they is Google and Google is the boss of the internet. As we mentioned earlier that was wondering if alphabet owned the internet.com. If you don't know alphabet is alphabet owns Google. So just make your caps. sizes tappable I don't really know what else to say Kelly. Okay, and if if you're like what are you talking about? Put your hold your phone in your hand and try to tap a thing if you can't tap it the tap targets not good

Kelly 30:00
Exactly. So this Yeah, this actually shows up on Google's mobile usability. It does. If your if your tap targets are too close together, you will get dinged and its ability issue it soon as a stability issue. Exactly. So some common areas where you see this pop ups as he mentioned the close button. It's a really, really easy one that people always make way too small, way too small. Another one that's really common is swatches on our product page. So if you have instead of doing like a drop down menu for likes, choose your size or choose your color use color swatches instead, I often see those to be too small. Yeah, I want to see them usually at least 36 pixels in width and height. Yeah, I know, that seems like it's big. It has to

Unknown Speaker 30:45
be big,

Kelly 30:46
my fingers are big. Your finger is larger than 36 pixels. Big, unless it's like a baby who's navigating the site. And usually that's not the case.

Rhian 30:56
That's how we should frame this. If you put your finger up to your screen, and it doesn't work, that means your tap targets are too small. Exactly, period.

Kelly 31:06
So and keep in mind, you can have different size tap targets for desktop versus mobile. Yeah, again, this is all CSS. Just make sure they're big enough for mobile in particular, you usually have a little bit more control over your tap targets using your cursor, like a mouse or a trackpad. Less so when you're just tapping something. But again, accessibility still stands for making sure it's it's not an issue on desktop as well.

Rhian 31:30
Absolutely. Absolutely. Well, the next fact is also regarding tappable elements, and that is 32% of sites have tappable elements that are too small. It's not the same statistic is

Kelly 31:43
it's almost the other ones that there were just too close to each other.

Rhian 31:46
Oh, okay. Okay, fair.

Kelly 31:50
So interesting enough. baymard uses millimeters as their unit of measure on here. They say they should be at least seven millimeters by seven millimeters. I'm seven millimeters is a little over 26 pixels, okay? So I prefer to zoom a little bit bigger than but bare minimum, I guess you can go with seven millimeters. Commonly I want you to I want you to take pick up your like your meter, stick your ruler, and just hold it up to your screen and measure each of your tap. Imagine Yes, I could imagine I I work with clients all the time. I once received a CD in the mail with the clients product photos. Oh my word. I had to buy a portable CD drive to plug into my Mac so I can get the product.

Rhian 32:52
Yeah, cuz I don't have I don't have I have every technological device you can imagine. And I don't have

Kelly 33:00
Yeah, exactly.

Rhian 33:02
Okay, so we're at our 10th We're almost done. We're at the last one we're Yeah, huh. 85% of mobile sites don't have direct links to return policy and shipping info in the footer.

Kelly 33:16
What?

Rhian 33:18
Here's a no brainer for me. What's in there? How do you do it? You add it to your navigation?

Kelly 33:26
Yeah, you have you have a footer? Usually it has. If you're using a theme from the theme store here using a theme that somebody built usually there are menus that have been created to just pop into your footer as the links in there. You should you should have return policy privacy policy shipping information, fa Q's in contact us and also make sure you have a link to shop in your footer because if you don't it is a dead end and we do not like that and we do not

Rhian 33:54
okay, we did it and now it's time for our store shout outs and my store shout out of the week is not like a small player. They're actually a really large player and that is Yeti. Okay, the keeping cold brand

Kelly 34:18
what what else does it

Rhian 34:19
do? I mean I think it's a very outdoorsy, which isn't why I like it. I like it because it keeps things really cold or really hot depending which can be a challenge. I will say I do have a Yeti mug like a hot mug. Hot like one of the kind you can put in your car. I don't know what those things are called tumbler,

Kelly 34:37
the travel travel, travel mifi mugs. We had talked about this before. It was a same day I had a conversation with Danielle trying to figure out what to call them.

Rhian 34:47
So the Never have I ever had a coffee stay so hot or drink stay so cold as I do with Yeti. So I'll just say that they also have koozies that are cold. And they keep your drinks cold or I don't think the koozies are called but they like, put them in you put your beer or your coke or whatever you're drinking and then you screw the top on and it keeps it cold for like 12 hours. And I think that's magical.

Kelly 35:14
That is magical and I'm thirsty.

Rhian 35:18
So okay, Kelly, what so and also I will say their site is really well designed, well built, easy to navigate, and it very clear brand voice, good product imagery, everything like that. So I would definitely check it out. Like I said, I am not like a go outside person. But I do like to stay outside fursdon like this is this is a fact. When I go outside, I guess on birth, and therefore I don't go outside anymore.

Kelly 35:48
It's true.

Rhian 35:48
I'm retired from going outside. Okay, Kelly, What about yours?

Kelly 35:53
Okay, so mine's kind of a mine's also a bigger brand, but the reasoning is kind of fun. minds movement.

Unknown Speaker 36:00
Okay,

Kelly 36:01
here's why. On Tick Tock. There's a guy I follow named Aaron van Kampen. What he does is he knocks on doors of very large houses and ask the people what they do for a living. It's fascinating. But what was really cool about it that I noticed is movement sponsors him, because every time he knocks on the door, he has a movement watch on his wrist.

Rhian 36:27
Oh, that's so good. They've always made it Oh, get it. They have always been. I thought what you're gonna say is they knock on the door. And then Jake answered, who's gonna die. But they've always been so good and astute at product placement movements and crushing that game since the beginning. And they've abdun flowed with whatever trend what you know, as we all know, we are up to the algorithms of all of the company's whims, and they have always just crushed it.

Kelly 36:58
Yeah, I just I thought that was the coolest, brilliant. So you always see one of the washes and each of the videos that he records and then you can also see in the description of it says sponsored by movement, so you can actually link through to it. So this isn't such a good idea for product placement. If you don't want to like do like straight up ads on Tick tock, which of course is something that's definitely worth it. You know, again during for your brand. Yeah. But I just thought that was really cool.

Rhian 37:25
I love that.

Kelly 37:27
I love that. So awesome.

Rhian 37:28
Awesome.

Kelly 37:29
We did it. Alright, so thank you so much for tuning in. And thanks again to our sponsors for supporting this episode. We have a YouTube channel please visit it@youtube.com slash Commerce Tea. I promise we will be recording more videos as soon as we finish our super secret app. comments. If you like our podcast please leave us a review on Apple podcasts reviews make us really happy. I've learned a pause every time because you always have something to say I do

Rhian 37:55
because reviews do make as positive reviews.

Kelly 38:02
Good point. You can subscribe to Commerce Tea on your favorite podcasting service. We post new episodes every Wednesday. So grab your mug and join us then we'll see you next week.

Rhian 38:10
Bye bye. clocked in it's 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 clocked in.io or in the Shopify App Store.