Bad mobile button design is driving us crazy

>> Virgil: Hi everybody and welcome back to the podcast. As always, I am your host, Virgil Carroll, and with me today is...

>> Chad: Hi, I'm Chad.

>> Cole: Hi, I am Cole. Nice to see everyone.

>> Virgil: Yeah, it's nice to get the gang back together and get to do, the original three. I mean, I guess we're only eight episodes in, so we really can't say that it's been that long, but Chad hasn't joined us for a few episodes, so, good, to see you again, Chad, in there. And, today, I think, Cole, we have a topic that neither Chad nor I really have any strong opinions on, right?

>> Cole: Um, well, I've definitely never heard you guys talk about this topic, so, yeah, no, that's a total lie, everyone. This is a topic that I've heard, Chad and Virgil rant about before. Before we get into it, happy February, everyone. Happy almost spring.

>> Virgil: Almost spring.

>> Cole: I'm wearing shorts already.

>> Virgil: Yeah, I was gonna say, you forget we live in Minnesota, so I don't know that almost spring is accurate. Almost teasing spring and then heading winter again and then teasing spring and then hitting winter again and teasing. Yeah.

>> Cole: Yeah, we have, like, four more months of winter.

>> Chad: Right.

>> Cole: Anyways, yeah, so today we are going to be talking about, bad mobile button design. More specifically, when mobile buttons are way too small and, you know, not when, not just when they're too small, but, like, when they're not spaced well enough. This also applies to links. This applies to, elements that you need to interact with for pages on mobile to function. And I'm going to start this off with, why do you guys think this is such an under, um, what word am I looking for? Why do designers not take into account that buttons need to be clickable on mobile for everything, all finger sizes?

>> Virgil: Ahh, because it still looks good. That's all they really care about. I mean, yeah, I'm sorry, I'm kind of simplifying it. But, I mean, it is. I mean, you know, from a design standpoint, you deal with it all the time, that they look at things that need to be aesthetically pleasing, and they want them to look symmetrical, and they want to have 12 buttons at the top or 12 buttons alongside, because all of those links are very important, and they never really consider the practical applications. I mean, I would say anytime we do a website or look at fixing a website or anything, that's usually one of the first things you see is that things were done for desktop and they thought it through for desktop, and then they tried to convert desktop into mobile, and they made it a disaster.

>> Chad: Ah, it's a real fashion, over function, it's just prevalent sometimes in the web world, in mobile in particular.

>> Virgil: Yeah. Oh boy. And let me tell you, it's not just web designers. My God, app designers. I mean, apps on my phone piss me off on a regular basis. I mean, I was telling you about it Cole yesterday. I said Apple, which probably I'm not allowed to actually criticize Apple, but I'm going to go ahead and do it anyway. You know, I use my iPad and I use the News app and I, read it every night and I like keeping up with the news. You click on a news article, the news article comes up, and then because swiping is so inconsistent in the News app, sometimes it works, sometimes it doesn't. So I always use the back button, which is up in the upper left hand corner in that right there. Really small in the upper left hand corner. And right next to it, I mean, I'm not talking like, like, a little bit away from, but right next to it is the like and the dislike button. So I end up disliking a ton of articles because my fingers are not small. And I go up there to hit the back and I'm like, well, why didn't that work? And so I hit it again and then all of a sudden I realized I actually hit the dislike first.

>> Cole: You know what, maybe these articles deserve the dislike for this poor design.

>> Virgil: We probably should have started with why do people screw up mobile button design? Because of fat fingers.

>> Cole: Yeah it's your fault, it's the people's fault...

>> Virgil: It doesn't mean large people, it means that people tend to press it or they press it like this. You know, I see my, my mom use the phone and she, she hits it like this, and it's a lot of surface area that you're trying to hit to get a little small button. And when they're close together and they're really small, it doesn't really work.

>> Chad: Well, it's even. I mean, even I do the same thing when I'm holding my hand with one hand and I using my thumb, I'll end up pressing buttons with a full thumb instead of, you know, a pointer finger.

>> Virgil: Yeah, well, you know and I'll even go a step further and say one of the worst things is, you know, the thumb scroll, the thumb scroll and you scroll over and you hit a button and all of a sudden you've done something that you didn't mean to. And that's not necessarily a function, of a small button. It definitely is if there's a lot of buttons there, but it's, it's more a function of just over there. Yeah, I mean the reality is we just don't really take into consideration there was this whole design movement many years ago of mobile first. But it's amazing, people don't, still don't really understand what that means from the standpoint of how to do something for mobile. It's, it's like you know when you have something really big on the screen and you need to horizontally scroll on that and that's the way to solve it so that you can have something really large on the screen in the mobile. But the reality is, most people still can't figure out how to do that kind of stuff. There's a ton of things, but we definitely try to push customers now: the bigger the button the better.

>> Cole: Yeah. So this, this did you mention it was like a mobile, like mobile revolution of design or something? I guess what I want to point out here is, I don't know, it seems like we're still in like the infant stage of like mobile usability in terms of like how well apps are built to you know, cater to different finger sizes and different like finger dexterity. Just like how people, how people actually interact with apps. It, I don't know, I feel like apps don't really like account for how, the differences in how people, you know, operate with this technology.

>> Virgil: Well, such a large amount of apps are just really front end loading of a website. You know, I mean there's a fair number. But yeah, I mean, you know this issue goes off in so many different directions. So I'm going to kind of stay focused on the buttons. But the reality is it's just that people don't really think it through. They look at it and again it from does this look nice? Does this look similar to the desktop? That was a big thing and that was a big thing about mobile first is you're supposed to have you know, consistency across to where if I started something on a desktop and I finished it on the mobile, you're getting the same experience. But the reality is, is what we're seeing more and more today is you really have to look at how you can tailor things for the mobile. You know, and there's a lot of good examples. Like you know, you see a lot of, lot of organizations now that don't load as many images on the mobile because mobile just doesn't load them as well. But button size is definitely another one and you don't look at it from a practical standpoint. Otherwise. I feel like we have testers out there, people that test this stuff, but they test it from a checkbox standpoint. Otherwise, I've got a checklist here, and I'm like, does that work? Yep. Does that work? Yep. Or is I able to press that? Yep. And they don't do it from a how a person really uses their phone or their tablet or anything like that. Does this work? What happens if they use it for apps? It's more of what happens when they use it repetitively because, you know, it's, it's just like having, you know, an email client on your desktop or something like that. It's something that gets used over and over. And what happens with all those pieces that go along in there?

>> Chad: Yeah, and I, you know, the one thing that pops in my head about all this, and it really is that broader mobile question that leads to this. But it's, you know, back when mobile first started, we had a separate layout for mobile. Completely separate. It wasn't anything at all tied to the desktop menu, er, the desktop site. It was its own site. You had your thoughts about it. Now we're doing responsive. So we're adapting that desktop site down to a mobile or vice versa. That was supposed to be that mobile first concept, was design for mobile and then make that look nice in desktop. So I think, yeah, I think, Virgil, all your points are right in that it's still not just front of mind on designing that mobile experience. Optimizing that mobile experience separate from the desktop.

>> Virgil: Yeah, yeah, I was going to say, when you said that, you just reminded me of, you know, how many organizations did we see that part of that when they kind of switched this mobile first, now you go on a desktop and you'd have a hamburger menu, you know, to have that right there, which was so irritating on a desktop. I mean, it was just so irritating. But that was their interpretation, build for mobile and let it expand out. When the reality is, I mean, with today's technology and the way we can do things, it's not always easy. You can kind of customize everything from that. But from, the other side of it, I think, is also the appearance of buttons. You know, a lot of times we take buttons and we try to make them very much complement the design and not really stand out. When the reality is, you know, a button's there for a purpose. There's a function. You know, it's not just there for decoration, it's there because you want somebody to do something, therefore you do want to make that noticeable and you want to make that different. Well, it's the same thing, you know, when you, when you take a button that's, you know, this big on the screen and then you move it down to mobile and all of a sudden, and I realize I can't do that, but it's that big and they can't. You're taking what is already maybe not a very noticeable button and you're making it much more unnoticeable. So it's not only about kind of the functional side of things, but also the UX side of things, you know, from, are people actually even noticing it? That's why you're seeing a bigger trend with, with buttons actually growing when they're on the mobile and much more noticeable on the mobile so that people know this is a button. But again, what I said from that side is then it depends on the functionality, how everything works, because you can also hit it while you're scrolling your thumb. So you have to have a balance and you have to do practical testing. You have to get people that are not people on your team. You need to get people that are not highly Internet savvy to actually go and use it and see what happens. And you're going to find a lot of things that you thought was super simple, not being super simple at all.

>> Cole: Yeah, it kind of feels like, odds are, and tell me I'm wrong but like a lot of the reason why a lot of like mobile buttons are really small is because they're just trying to cram like a bunch of other things in the same area like that that might not be needed in the mobile version of a site. So like you might for example, that, the dislike button by the back button on the Apple News, it's like did that need to be there? Probably not. Like, and maybe in the desktop version of Apple News, but in the mobile version you just have to think about what are people actually trying to do on their phone. They're probably not very actively, you know, rating articles, but they want to like just cycle in and out of articles. So it's just thinking about how do people actually use the app, the website.

>> Virgil: That one's a good example because the reality is you probably, and I obviously wasn't on the design team for Apple News, but if I was to guess, I would say they said, okay, these are article interactions. Okay, so what can you do to interact with the article, you can like it, you can dislike it, you can go back from it. And on the other side is where like you could share it and you could, you know, bookmark it, pin it, whatever, like that. And so that whole top area is kind of about interactions with it. The problem is they didn't think of it from a practical how people actually click things type of thing. And you really do have to look at it from that side. And it's very difficult for teams because, you know, you kind of have to take it and you have to say, well, it's like chess. I hate to bring up such a broad thing, but it's like chess. You know, a good chess player is somebody who can see 12 moves ahead. Well, it's kind of the same type of thing. You have to look at it and look at it in the context of 15 different things. The way people could use it, the way they're going to touch it, the way it looks, all that kind of stuff coming together and find that right balance. And most organizations get 75% of that okay.

>> Cole: Yeah, Apple's usually great with usability. Like, I don't know that I really like Apple's apps usually, but this is just kind of uncharacteristic of them, it seems.

>> Virgil: Yeah, but you know, very typical.

>> Cole: Yeah, it's very fun to call out big companies on these things though.

>> Virgil: Yeah.

>> Cole: I'll close out with this. Let's give people some, some actionable, semi actionable advice on how they can better approach mobile design. Are there some kind of good guidelines in terms of mobile button design, mobile link design that you guys can think of off the top of your head?

>> Chad: I mean, I think bigger the better on mobile, like Virgil said. There might be some instances where you might accidentally hit that button while you're scrolling. But at least it's, you know, keep it bigger, keep it separated out from other links, other interactions, and just make it easier to understand that it's a button, that something's going to happen when you, when you press it.

>> Virgil: Yep. I'd add on top of that, understand mobile patterns. So one of the common things in, desktop design is like having buttons side by side. And one of the reasons those buttons are side by side is because you're trying to make it clear that one button, isn't more important than the other. It's kind of like having a button on the left and a button on the right, you know, so a lot of times if you're submitting a form that's on the right side because you're going forward. And if you were going to cancel the form, it's on the left side because it goes back. It's kind of the same thing. But in mobile, that's different. You know, they want to kind of accomplish the same thing. But the reality is the way the mobile functions, the way people are used to using those browsers is they don't expect some type of pecking order of those type of things there. The difference between me seeing this button and scrolling up just a little bit with my thumb and seeing the next button is not really considered like, oh, this one is more important than the other. It's just the expectation of how things are going to fold down on mobile and what people expect. So understanding that, from that side, but also making sure that your buttons are very clear. It's very clear it's a button. You're not trying to blend in with the background. It's very clear and notable that this is a button and there's, you know, the description on the button is what the function is going to do, what's going to happen with that when you click that button. And those are kind of the big things.

>> Cole: So just don't use transparent buttons.

>> Virgil: No yeah don't use transparent buttons, or at least have a good description on top of that and make sure it's very easy to understand.

>> Cole: Got it. All right, well, I should give people some good stuff to work with. Thanks everyone for tuning in to this week's episode!

>> Virgil: Yep. Thank you, everybody.

>> Chad: Thank you.