We made it! It’s the season two finale of The Drunken UX Podcast, and we couldn’t be more excited! To cap off the season, we take a look back and count down our top three episodes from the first two seasons, and offer some new and updated thoughts on the topics we covered in them. Did your favorite episode make the list? You’ll have to listen to find out!
Error Messages (6:45)
Crappy Forms (15:03)
- #29: Stop Making Crappy Forms
- Form UX: How to Design a User-Friendly Form
- Track Form Abandonment With Google Tag Manager
Gutenberg Accessibility (28:01)
- #37: The Gutenberg Accessibility Audit is In!
- Accessibility Team meeting notes for 6 December 2019
- Gutenberg Usability from Matt Ryan
- GutenTolerance WordPress Plugin
- WordPress 5.3 Overview: Top 20 New Features and Improvements
10 UX Commandments (37:06)
- #32: The 10 UX Commandments
- Fitts’s Law: The Importance of Size and Distance in UI Design
- The ten commandments of UX
- WCAG 2.1: Understanding Success Criterion 2.5.5: Target Size
The following is a machine-generated transcript of this episode. It will contain errors until it has been reviewed and edited, and we apologize for the difficulty that may cause for screen readers. Do you want to help us speed up our transcribing process? Consider sponsoring an episode.
Little something on the request line from Liberty Island. We’re going to squeeze some new year’s juice from yum Big Apple. Sort of my all time favorite I used to be your cruising with K and D on hit one or 2.9. Everybody Good evening. Christmas, good new years it is officially that time now and you are listening to the drunken UX podcast. Focus on your host Michael Fienen.
I’m your other other host Aaron. Hello, how you doing Michael? Who’s the other host? You well,
but no, I’m I’m the host if you’re the other other host there has to be another host. You’re the other host. So I’m the host and the other host. And I’m the other other host. So it’s like a Fienen sandwich because that’s gotten people in trouble for saying, folks, you’re listening to the season finale of season two. I hope you’ve enjoyed the ride and enjoyed it or learned a bunch of stuff along the way.
Dude, it’s mind blowing for real. I just,
yeah, good job. You’re not getting done. Well,
you’re gonna double my salary. I will.
Okay, you know what, how about this, if we make it through this episode, relatively successfully, I’ll triple your salary. Done. Okay, but only if I can quadruple mine. Done. Okay, actually, that’s a really bad idea. I spend money on this show. So I’m like negative. So if I quadruple that negative,
but I think it ends up as a positive, doesn’t it? It does to the fourth power. That’s
the I think this is bad for me. No matter how I look at it, folks, you are listening to the drunk your ex podcast. I said, this is our season. finale. And what we’re going to be talking about tonight is a review of our top three episodes of all time. I thought that would be fun. Yeah, we Yeah, I thought about maybe doing like we did last season, which was kind of a roundup of and review of our season and how done and kind of some more logistical notes just about the show. And I was looking at our list of goals for season two. Yeah. And I’m proud to say we achieved a couple of them, we didn’t achieve many of them, not for lack of trying, in many cases, we did actually put a lot of effort into several of them, but we it’s one of those things where sometimes you reach exceed your grasp, and that’s okay. We’ll catch up on those in season three,
I want to say thank you to everyone who has shared this with someone that they know, because our listener numbers are climbing
and awesome that so just to kind of give you an idea about that. I said we’re going to be reviewing our top three episodes of all time that’s over both season one and season two. However, the way that math works out is all three episodes are from season two. Yeah. which just goes to show how much folks who’ve been sharing the show and you know, liking us on iTunes or whatever giving us a review and a Spotify that really does help us. And if you feel so inclined, please take the time to do that. Also, take the time to stop by our sponsors over at New cloud at New cloud.com slash true experts in that you cloud comm slash drunken UX. They will take care of your mapping needs and illustrations, interactive maps, and
if you do a Braille map,
they’ll make you a Braille map. They’ll make you a map illustration Whatever you need, so run by their know you appreciate them sticking their neck out for us. Outside of that, where else can they find this Aaron?
Just check us out on I don’t know, maybe Twitter, Facebook, maybe we’re on those places are our URL is Twitter. And facebook.com slash drone Can you x. And occasionally we post like, not so secret behind the scenes shots of whatever we’re doing while we’re recording or not recording on instagram.com slash drunken UX podcast. And we always love it when you come over to our Slack channel and tell us what to drink.
Now that’s a good point. We haven’t had a good drink recommendation in a while. So that’s, you know, I
just remember was the basil Hayden right?
It was either the basil Hayden or one of the mixed drinks or something. Something like that. I’m not sure yeah, which one that would have fall under at this point. But somebody jump on and give us a recommendation for something new that we can try it next season. I
mean, you can jump on drokken ux.com slash slack with a sign up, link. Absolutely.
Please tell me you’re in the camp fire man. Ooh, nice. See, I had a nice class last time you’re in your class this time. I like it. My
My liquor cabinet is like, cleared out from Thanksgiving and I haven’t had a chance to restock. So I am appropriately I think tapping into the log of all in 16 again, got about two fifths the bottle left. I think that much.
I’m turning you into the scotch man. Rni. Slowly but surely.
Yeah, this one’s been interesting. I think I like the other one. He had the double cerio balvenie the balvenie double would Yeah, that one is really good.
Nobody’s good? Yeah, it’s hard to go wrong with balvenie quite frankly. I’m trying something totally new tonight. anok I’ve seen it they it’s been at the liquor store for a while. And it’s it’s it that’s not how it looks like it’s spelled, but it’s it’s pronounced and oak.
It looks like it’s AMC and OC Yeah,
it’s it’s more like an knock Milk. It’s a Highland scotch it’s so far I’m enjoying it’s very affordable I think was about $53 something like that with a 12 year Hyland’s, I’ve said before tend to be lighter. This one’s got some really strong vanilla and multi on the nose especially like the vanilla malt hits you really hard in the nose and the mouth you get something sort of citrusy but not like a sweet citrus more like maybe something towards a not quite a lime, not quite a lemon but just away from the sweet side of citrus. Okay, a little bit of like a cherry blossom kind of flavor and more of that vanilla and it’s it’s light, but it’s definitely even a little bit like chocolate. He finished too. It’s very nice. Nice. Folks, I want to talk about a quick thing. I was having troubles with a particular service I subscribed to and I was struggling with part of the interface because that interface wasn’t working. The interface was giving me error codes. And so I proceeded to try to figure out what the problem was I couldn’t, I ended up googling the error codes, I found a couple references that weren’t close enough to my use case. And they recommended solutions that like, wouldn’t work. So here I am being presented with these error codes. And I can’t do anything with them. They don’t mean anything. And I thought that that was kind of a good sort of reminder, an opportunity. If you’re a developer, you’re building an application. And we’ve all done this. I’m guilty of it. I’ve done this. Right, meaningful error messages, right error message, your users don’t know your code. And the funny part about this to me was, I looked at that code, and I know exactly what happened. I got the worst code. I got the code that says, Yeah, and unknown error happens. It’s like if you fell to the bottom of that FL sloop and you fell into that else bucket and you fell into it hard and face first, because the error code was like 10100. Like that’s not a real error code. That’s that’s not a thing.
I don’t know, Nielsen Norman wrote an article. This goes back almost 18 years, I think this, this article came out like 2001, where they talked about error message guidelines and applications and websites. And everything they wrote is just as true today as it was then. Because your users like I happen to be a technical user. I saw the error code and I was able, I actually was able to debug the problem on my own. And I wish we could write tools in a way that that never happened. But realistically, I know that’s not possible, but there’s always that bizarre else case that’s going to happen. But it also feels like you could do a lot more in those situations. Like even if it was saying you know what, here’s what it isn’t. Right, you know, we ran into a problem, you know, you were able, we were able to do X, Y and Z, but we failed when we tried to do you know, q? I don’t know. Yeah. What was the last error code you wrote? Aaron,
like, in like an exception block or something? Yeah, just anything. Probably I did not implemented error earlier today. I was, had a, I was I extracted a suit or I made some sub classes. And I needed to make sure that a method would, you know, drop by not implemented error if I didn’t define it.
And and so you were in that case, passing a genuine like, HTTP final one is that
Oh, no, this is a this is actually for like a console task. You mean, you say eriko? Do you mean like for HTTP status?
Well, I mean, any of it really, you know? Yeah. any of it works.
Yeah, I’m not even sure. It’s been a while. Usually, the error codes that I’ve issuing are They’re like 500, or 404, or sometimes a 401. Just depends. And you know,
I’ll throw in the show notes. If you’re not familiar with HTTP status codes, I’ll throw a link to a bunch of them. Because you may be surprised with the number of status codes there are. And a lot of the times errors that you have in an application, you don’t need to make some kind of weird custom error code for, you could naturally throw an HTTP status code and say something like, you know, 400 words are great, because 400 words represent client errors. And so sometimes maybe that’s a four or five method not allowed. Maybe that’s something like, you know, a four or eight on an API call, that’s a request timeout. You can use those to actually prop up the message that gets sent to the browser. And even if you need to customize it, like maybe you know that this timeout is a problem, like there’s maybe there’s some latency in The system that causes this, and it’s a technical issue you can’t resolve. And so you issue a foreign weight to the browser, and then you display to the user. This is like a foreign one dash, ABC. And then you link that in your own documentation. So they can click on it and go see exactly what that means. It means, hey, this part of our infrastructure times out, try back in 30 seconds, it’s not your fault, whatever. Right? You can do a lot of that. I think that’s it’s pretty useful. But in this this particular problem, though, was you know, in their codes, they were just issuing the codes like, hey, it failed. Here’s a code. Nielsen Norman’s advice for writing good error codes came down to five very simple things. First, be explicit. say exactly what’s happening. human readable language. We’re going to review one of our top episodes here in a little bit. And there there’s a point for this, but the idea is, I’m a technical guy, I was able to decode some stuff and infer some stuff. But most people aren’t that way. Most people need things spelled out to them. So tell them, you know, the easy ones are things like will your login and username were wrong? That was an error I was getting, as part of a problem I was having was that my login and password were incorrect. That was a lie. That is not the problem that was happening. It was a consequence of the problem, but it was giving me the wrong error. polite phrasing. That’s an interesting one. But I like it. It’s basically saying don’t, you know, say like, you, you know, you issued and the one they use this illegal command? Because the phrase illegal carries a weight to it, you know,
right. Yeah. Have a good legal means, like criminal, right? Yeah. And so it’s like, I
don’t especially like when it isn’t the users fault like errors that aren’t the users fault. Don’t use a vocabulary that implies vault. Precise descriptions. This is I think very similar to explicit If you ask me, but the way they describe it is don’t use vague generalities such as syntax error.
I remember saying the words syntax error when I was a kid, you know, like in DOS feedback and everything, and thinking that it was a really neat word because it used like a Y and an X. But being like completely clueless about what it meant other than like, what I kind of guessed, like it was like, Okay, I think it’s I typed something wrong here.
It also didn’t give constructive advice. Right, right. That’s the other key one. And I think that’s the most important one for the user interface side of things is, once a user hits that error, yeah, tell them what they can do about it. Right. And yeah, if they fall into that else trap, that that last condition where you don’t know what happened, give them a protocol to follow. Give them a way to contact support, give them away to send information that will help them you know whether that’s a stack stack trace or some kind of console logging or anything? An error is an opportunity to communicate. So use it. Yeah. So that’s my thing. That’s my spiel. I wanted to go on about that because I was pretty pissed off earlier. Go right, got some good error codes, folks are improved error codes that you have. If you have any neat error codes or you think you’ve got good implementation, be sure to let us know I’d love to share that out to folks. So you’ve come across a good try catch block or something like that, or good exception throw. I would love to see your process that and your process to documenting it for users. Because I think that’s the thing where that’s the place where we really fall apart. Yeah. So top three episodes.
What’s number one? I’m not gonna tell you the number. Sorry,
what’s number three? And number three, I want to I wish I could treat you like an audience and be like, what’s your guests, but literally can see what we’re talking about here. So number three, the number three most popular episode comes from February 4 of this year. So it’s it’s had a little while to simmer, don’t worry. But that was Episode 29. Stop making crappy forums. That was where we went into talking about UX and all the problems that come along with form design and the way people have built, you know, checkout forms or contact forms and things like that. Turns out popular topic and I understand why because I mean, I don’t know, if there’s anything I build more of that I get more frustrated with the like contact forms and lead forms. Especially if you’re integrating right I don’t know how much integration you do, but
forums are such, like they’re important. They’re more important. I think that a lot of content because I mean, a lot of content is just fluff. Let’s be honest. It’s marketing fluff for just general presentation fluff. It’s not actual content. But like forums are different because they’re, they’re the opportunity for the user to connect with you. And so it’s really, really important that you get that right. And there’s so many ways to fuck it up. The I think the good thing
about this show being one of our top ones is that all things being equal form usability hasn’t really changed a ton over, certainly not the last year, but little last 10 years form usability has really been kind of solid and straightforward. And even through all of the revolutions of Ajax and validation and autocomplete and autofill. Like most of the, the general rules are still I think, very much the same, at least in my opinion.
Yeah, I would I would agree with that. I mean, I think that like, as we add more features, it, it adds new opportunities to pass or fail. And, like autocompletes a great example or, like how Hey, Michael, have you ever had a time when your form is auto wedding actually think this probably form fill like a browser feature and not autocomplete specifically. I’ve had I’ve had my birthdate show up for my middle name before, and I had my street address show up for my organization field one time.
Oh, and are you know, you inevitably have problems with like, address one, address two? And we’ve talked about that, but I think in that episode about that exact problem of stop, can we stop that? Can we stop having two lines of addresses? Put a fucking textbox in there, people know how to give you their address. But that’s one where stuff gets always gets flipped around or. Right. Yeah, I’ve had my email gets stuck in weird field sometimes. And I don’t always know like, I don’t know why. And, you know, I understand that it’s just a case of autofill in that in that situation, but it’s definitely something that I wish we could get better at, you know, the the thing. And something I’ve thought about with autofill in particular is why aren’t we better at this yet? Why is it so like, as an example, when I go buy something now, browsers have gotten this feature where Chrome has, I’m pretty sure Firefox has it, where they will save your credit card information. Right. And so when they see something that looks like, hey, enter your credit card, you can click the little there’s a little a little icon in the field. And yeah, do you want to autofill this and they asked you for like your CBC. Right? Right. Yeah. And generally, my experience with that has been it works. Yeah, that’s a browser level feature. That’s something that the browser has implemented to try to intelligently they are the ones that are storing that data and all of that. So, theoretically, that’s been encrypted and is stored somewhere on your machine where it can’t be decoded without you know, your CVC and some other information. But why have we not gotten past that with things like mailing address? Why do I have to put that in every single site I go to to buy something?
I mean, if you I’m chrome I think it will attempt to auto fill the form like when you start typing your name in mind pops up with a little like, pop up list that says like a couple different names and addresses and then I click the one I want, and then it will attempt to fill in the rest of fields. That’s how I got like the my birthdate for yeah bit street address.
I want I want to smarter than that. I want it to be a spec. I want even mailing address form spec. So that just like what the browser does with my credit card number it can do with my mailing address. And so that would that would be cool. If I give you my mailing address once. And then you know, just like, you know, all these sites do it Cards Against Humanity does that we mentioned them in that episode, Amazon does it. Coffee am does it. Everybody has got this thing now where you type in your address, and then they send it off to a Validation Service API. And they come back and that’s where they’ll come back and say like, does this address match yours? And usually like your city name is in all capital letters and they’ve added like the the right before code to the into your zip code, but it’s it’s your address.
So I let him leave this job. We had we had a service like that where you type in your address, and then it would do a lookup and then it would come back and tell you like the most correct like with the full zip in writing.
So yeah. Let me store that in the browser, blog it as this is my full complete and correct mailing address. And yeah, let me design a form as a developer that says, if the user has that, when they hit my checkout page, give them an opportunity just to just say, use my store to address boom, like it wants to. And then because the autofills buggy the autofill gets things wrong, the autofill can be tricked based on whatever the checkout not trick but you know, can make mistakes basically, right, that feels like a huge opportunity for what I would see is like one of the most onerous form problems which is like checkout pages. When you streamline checkout. That’s, you know, that makes money You know, when you streamline Checkout, people convert quicker they, you know, they do the action you want them to do. If you put seven fields in front of them, they’re they’re less likely to complete that task. So that seems that One area I wish we would improve in.
Usually when they have too many fields, a lot of times because the data is getting dumped into a CRM of some kind, really, I mean, if the people are just buying something like, let them do what they think they’re doing, and don’t store their data because that’s crappy.
There’s an article over HubSpot will have linked from Kristin Baker, it’s boring UX, how to design a user friendly form. It’s a good refresher on a lot of the stuff we brought up in Episode 29. One thing I will say they she touches on a few things like autofill. That’s good ideas like keeping your form short. These ideas that aren’t new, we certainly talked about in that episode. She’s got some other ideas about things like using placeholders as labels, and the way that you go about blogging like in line error handling and stuff that goes a little against the grain of what I think common UX research tells us but Yeah, I think it’s a good case to read it. And always remember that sometimes you do need to question your research and check it against your own users and make sure that it’s true, because your user base may actually be very well served by things like in line, validate things,
right, because we have a super basic one now, right? And this is one that I still see way too much, which is, like if I’m using my phone for something, and I’m using the form to a good, great use case of this is like getting a two factor authentication, right factor authentication, six digit number. If I’m tapping into that field to enter that button, don’t send me to my keyboard. Literally, you literally all you have to do is say this is a type number. And then the phone will give me a number nine key to us. I don’t have to hop out of my keys. board. We don’t type our fields properly. But one thing I’ve found over, you know, the last, what is it 13 years of web development that I’ve been doing, you know, designers when you work with another designer, they love making custom error states customer is, you know, inevitably and then the marketing people love the branding of it. So I can make the argument that hey, let me let the browser control the behavior the way the browser is meant to control it. But that’s often a hill that you don’t want to die on as well. Like of all the fights you have to have when you’re employing a design. That’s one that just man it’s it’s a, it’s a war of attrition a little bit, but yeah, I see what you’re driving at. And I would absolutely agree.
Look at tables like tables have cell padding cell spacing, border, I write with a couple of the traits, all these different attributes that describe what it was. Looks like and why can’t we have that for input fields? That’s what I want to know. Yeah, I think I think we definitely did that disabled disabled. That was cool.
Yeah. Go. If you’re worried at all about whether or not you have a crappy form, let me just tell you tag manager, Google Tag Manager is a great resource for figuring that out. They, there’s an article I’ll link it’s a little bit old. Now from cmo Ahava, who is somebody that I read religiously, I love his work. And he’s brilliant at that Tag Manager. But he’s got an article about how to build a like a form abandonment tracker in Tag Manager. Unknown Speaker Oh, that’s cool. Yeah.
So what it does is you create a listener, and that listener just runs and it sits on the page and it says, and it listens for form interactions like key ins to to form fields. And as it’s doing that, it starts a variable that keeps track of which form they’re going into, and if they leave the page before hitting the submit button, what they do, what he does is, there’s an on before unload event that fires that sends a Google Analytics event that says, Okay, here’s where they left. So you can see how much of your form they filled out, before they gave up. It’s a incredibly good way to figure out like, do you have a high point, so to speak in your form, you know, something he ran down to smooth out? That’s a great way to measure how good your forms are performing.
I like that.
Yeah. So that’s, that’s probably forums. That was that was probably forums. I hope that’s a little extra marketing. You know, I’m not going to revolutionize the world here. But go check out seamos article on foreign betemit tracking. I think that’s a good growth from there. And read Kristen’s article over at HubSpot and let us know what you’ve done over the past year to improve your forms because that’s something that I think we’re all always To do episode number two on the list, it comes to you all the way from May 27. So, oh,
this one’s not surprising not surprised. This is Episode 37 button.
The Gutenberg accessibility audit is in this was a This was when Rachel cherry joined us. Yeah, that’s right. Yeah, this was big news then then. I mean, it’s still large and continuing discussion. Now. First and foremost, I want to point out 5.3, WordPress 5.3 came with a bunch of explicit accessibility improvements. Right? That’s nice to see like and they call those out and a lot of those were the work of the accessibility group, Council, board, whatever they call that within the WordPress organization, but they pushed out and they there’s a whole list of these in the Release Notes and we’ll link those certainly in the show notes. But for instance, and like one that I saw immediately, buttons no longer have a box shadow. If you’ve looked in WordPress now the old filled button with a nice flat design there, yeah, they’ve gone to a hard flat design that is much higher contrast much Starker. It looks much more button me I think it was something weird. That was one of those things like I didn’t, I guess even hardly process the box shadow on those buttons. But once I saw it without them, it’s like, that’s better. It just it just stood out way, way more. Yeah, darker tables. And meta box borders have been introduced for a better hierarchy between interface elements. Yeah, that that separation is now very clear. So with all of that is wrapped up in the point, they’ve got strong Stronger color contrast on form fields and buttons that seemed throughout the interface, focus styles on form fields and buttons. This was to help address issues where people were losing track of where they were tapping throughout the interface. We have content behavior on text zoom, and they’ve got a new navigation mode. I’m going to read this whole thing here. And a new navigation mode has been introduced to the block editor and WordPress 5.3. Now, you can move from block to block by using the tab key. You can also use the arrow keys to navigate between blocks. Once you reach the block you want to edit you can hit in dirt hit at to enter edit mode by hitting the enter key. That seems redundantly phrase, use the Escape key to move back to navigation mode. So that’s a long way of saying that they’ve really leaned into keep the problem with keyboard controls on the block editor. Right, that was something that was a core complaint at launch was that keyboard accessibility quite frankly sucked.
I think it’s like one thing that I think is really incredible about this is that like, so these these changes all came about as a result of the audit, right? Mostly,
I would like to say yes, I think that Rachel’s work on the audit was phenomenal. And I think it definitely brought a much brighter light on something that other people were trying to cast light on. Nobody likes to bolt on accessibility after the fact but is something that can be done. And as long as that is part of the strategy, at least there is a strategy that or nothing. There’s an article over at the maker.wordpress.org site for accessibility from the from the accessibility group. They have not stood still and I need I want to impress this upon people like that’s one thing like where we were when we reviewed the Disability audit back in May. progress has been made by point three made progress. But the accessibility working group is still doing a lot of stuff they’ve instituted. What will be they’re working on the date still, that they’re going to have a global WordPress accessibility day. Which, okay, I’m presuming will be some kind of like either brainstorming slash skunks, working slash bootcamping of accessibility features for WordPress, hopefully.
Yeah. And I’m going to read this as well. This was a quote from that. From that post. We agreed to explore the idea of creating documentation for baseline accessibility testing procedures and expectations, which I think that’s important because it goes back one thing that Rachel talked about in Episode 37 was WordPress has said you know, our standard is we push out we keg 2.0 compliant code. NET But they were not doing that. And I think that that statement is sort of the and while that’s not what it says they’re going to do, I think it’s sort of that underlying foundation, having the documentation, having the testing, and having the expectations outline is sort of step one right to enforcing that technique with future development. At least it is in my opinion. There’s one big piece of information I want folks to go check out. It’s from Matt Ryan, who works over at Carleton College. He’s got a post up at its his sites, empathic interfaces comm slash guten. Don’t remember it, go check out the show notes. It’ll be in there. He’s got some information posted there. One, he did some usability research on Gutenberg and posted their results on that because they are rolling out good or, well, Gutenberg WordPress as their new CMS at Carleton College so they needed to
test In the slide deck, he has a giant trash dumpster labeled Gutenberg accessibility and it’s on fire as a fireman putting it out in the fireman’s labeled what WP campus.
Yeah. There are strong feelings in this community. What they’ve done is he went out did research and publish those, those results, seven pages and the slides that you’re looking at it from a presentation, he gave it the high end web, which we’ve mentioned here before. Because again, college, but there’s good information in there about what the problems are so that you can see if you can work around them, or if they will impede anything that you’re trying to do, even if it’s just personally like, keep in mind a lot of people run websites just for themselves. And you don’t have to hold yourself to strict standards necessarily. But you know, you may have needs or have requirements that you do have to meet because your heart division or you have motor control issues or whatever. So he’s outlined some of that there. That really interesting thing though that he’s done that I think you should go check out his he’s created a WordPress plugin called gluten intolerance. intolerance.
It even I didn’t catch the pun at first but the logo for it is the words good and tolerance kind of drawn out in some kind of jam on pieces of bread.
Yeah. Good, good. It’s pretty clever intolerance. Yeah. So what it does, and again, I’m sorry, I’m going to read this, but it’s because it’s written better than I could say it off the top of my head. This plugin makes Gutenberg easier on new users by labeling many interface elements that otherwise only appear on hover and modifying the display of other elements that cause confusion to novice users. But basically took all of that research, he did all the user research all of those outcomes and said, Okay, I’m gonna build a plugin to address those things. At least the ones that were easily tackle And so you can install this and run it. And it’ll modify the interface slightly so that it’s still Gutenberg. But it addresses some of those issues that users had. Some of those issues that maybe are being was like 5.3. I mentioned, have resolved some of those hover states and things and focus states and things like that. So I would love to see maybe I’m hoping, and I would probably be right in assuming that the accessibility team for WordPress has seen this plugin already. And they are very likely looking at how it’s dealing with some of that to maybe roll in those kinds of features. This is this is one of those plugins I look at as the goal of this plugin is to eliminate itself, right?
let’s go that the best outcome for this plugin is for it to say, not not needed anymore. That’s how it knows it’s done its job.
So go check that out. It’s at empathic interfaces.com slash guten g TE in from Matt Ryan over at called Carleton College.
Okay, drumroll give me drums number one drumroll.
drumroll. drumroll. One Hold on one. The number one episode was from March 18. Episode 32. So we go back a little ways, the 10 Ux commandments.
And I was not that surprised that this was the number one because the title is super quick Beatty.
Okay, well, that’s fair. I kind of lifted it from the original article. And I admit that Right,
So the thing that I do want to point out about it is even as the number one episode, it was number one by a lot. It beat number two substantially. Let’s I’ll leave it at that. But it’d be number two substantially.
I think Part of the reason might have been that the author of the original article, Phil delavan. I think he shared our tweet with us didn’t know that may be Yeah. I like I seem to recall, maybe I’m wrong love that answer calls happening.
Yeah. So our idea here was, we’re going to rerun these right? We’re gonna read through them real fast. Yeah, they were 1010 commandments. We’re not going to give you an 11th commandment, because quite frankly, I think he did a fantastic job of outlining some of the most important high points of UX. And we’re not going to, we’re going to try to improve upon that. But we’ve got a few extra ideas to throw in here on on each of these. We’re going to run through them pretty quickly. So I apologize. But first and foremost, number one, you are not the user. I think the the best and very recent case of this that I wanted to throw out there was the idea of the Tesla cyber truck.
Oh, I the video clip of him throwing the metal ball through the window. And then doing it again to the rear window and breaking both is just like, perfect.
The, the meme I enjoyed was, I don’t know if you remember some of the early renderings of the Tesla truck that had gotten out. And it compares it’s like, you know, the the what we were promised what we got that kind of game. But right he did. And this is not the most perfect example of this commandment, mind you, but it’s this idea that he designed the truck that was not designed for users. They, I think Tesla explicitly wanted to limit the appeal of this vehicle. And so they intentionally went with an abrasive design to moderate the production of the truck.
There’s isn’t there a name for that when when you it’s a certain kind of good that they intentionally like tried to sell to a smaller market to create for scarcity or Graham? No, no, because the supreme brand and Air Force ones there. They’re both like that. I’ll look it up.
That’s that was what came to mind though for me when I was thinking about you know, you are not used because it’s a fairly straightforward The idea behind you or not the user is that just because I do something one way doesn’t mean other people do it another way. So this idea that he built something that wasn’t designed for the way you know, it’s not a truck for the normal person who drives a truck. It’s not a truck that was meant for everybody to go out and get and I think they very intentionally made it so that it would reflect what they wanted to accomplish as engineers, not what they want to sell. And I think you’re going to see a second truck in pretty short order. That will be much closer to what that original rendering was because I don’t think that original rendering was accidental either.
Right? Yeah. The car looks the kind of thing that you’d see on like a 1980s poster like a real vaporwave looking Yeah. Number two, you shall consider ooh thurs security to yourself. That’s minor. Thurs
you th er, I misspelled it. Yeah, I think oh, what a typo and
you know, its users, its users plus other. That’s right. other users keyless. I didn’t make it up.
I’m pretty sure I first time around. This actually, I think, throws back though to the Walmart topic about the error codes and stuff. And this idea that writing, you know, if you’re writing error codes that are only meaningful to you, then you’re presuming that the user understands that. And they don’t. Yeah, you’re putting yourself above them. You’re saying, Well, I know what that error code may mean. So that’s, that’s all it really matters. They’ll tell me, but they don’t. A lot of times, a lot of times a user will get frustrated, and just Leave if that’s the case. Number three, you shall not kill the research. Honestly, I think this one’s simple. I don’t know there’s anything really to add except that what this means is invest in your analytics. And like we said, back with the throwback to making don’t make crappy forums, the episode about crappy forums, spend the time set up that Tag Manager tag and track your management, you have no reason to ignore the data that you could be pulling in that could give you valuable ways to change the way you approach stuff and make more of a
number four, you shall not base your judgment on assumptions.
This you know that not basing your judgment on assumptions I the simple phrase I don’t think we use this in Episode 32 is the test but verify mantra.
Or trust. It’s not test it’s trust, but verify Right, right. So you have your assumptions, you have the what other research tells you, but be willing to question those assumptions and take the time to just do a little extra work sometimes and make sure that it’s right. Especially in cases where you think your audience may not be quite like the audience that was reflected in whatever research was done four or five years ago. Right. I just had, you know, the what came up recently in a conversation was the hamburger menu.
And about it.
There’s a lot of not a lot, there’s some research starting to come out that says hamburger menu works and is effective. There’s some research that says the hamburger works, but only in the sense that it’s better than alternatives. Because of you know, this goes back to Jacobs law, everything goes back to jiggers law. The fact of the matter is, most sites use a hamburger menu. So if you do something different You’re actually doing the hamburger menu is isn’t great? But it’s worth doing okay different
this whole time you’re saying hamburger menu and I’m literally picturing like a restaurant menu with hamburger oh
no I had that conversation to I told them don’t if if you are a restaurant don’t use the word menu to label your actual fight new What’s wrong with you? You are your sleepless but I’m going to pretend like you’ve had to log in because
number five You shall not covet features. You know what this mean? You know what I need? I need a sound effect every time we say this
like, like an echoing God boy something
Yeah, I think we need to nail this home. This This is our mantra. Do
yeah, don’t go after every new shiny thing. That’s I mean, that’s just an easy one. And how hasn’t changed since day one. But it really I think, you know, I applied do less better to so many things. And just controlling the amount of work you’re letting yourself take on is one of those. So yeah, do less better. Number six. I said Number Number five, you say number six.
You should ask why relentlessly
Don’t worry I do. Why? Because it helps me work better. Why? Because it ensures that I’m doing the right work for the right reasons. Why? Because I get paid money to produce results. And I want to make sure that the value is there. Why? Because if I’m producing the right results, that means my users are getting what they expect out of my website. Why? Because if my users are getting what they expect out of the website, it means my clients are getting what they expect out of our service. When that’s I mean, I think I think you got
and I seriously do like that has been, I think maybe one of the most true and straight as an arrow components of my work over the last six months as I’ve gotten just religious about questioning things and questioning things, I think you don’t have to do it the way Aaron did it, there are ways to ask why that are subversive isn’t the right word. Unknown Speaker But around the around kind of around
around or the question round or ways to you know, because it’s a lot of times the reason you have to ask why is because if a quit or if a request is coming to you, that doesn’t make business sense. It’s sometimes not professional to question that of any of somebody, but you can get them to question it on their own, if you can lead them into that. It’s, it’s a little you know, psychological or whatever. But once you’ve learned how to do it, and once you’ve You know, gotten used to knowing what business value is and what has worked in the past and what has made money. And so learning how to ask why, and ask it in the right ways for the right people can be very empowering to getting yourself to do the right work, because I don’t want to spend my time. I can spend two weeks working on a feature that gets unraveled in one meeting with the right person because somebody didn’t clarify something or didn’t approach the goal the right way. Number six is is definitely one of my favorites, but only behind number seven, you shall build accessible inclusive products. There’s an upcoming change to the CAG 2.1 you should know about. It starts there’s an article at instruction design org, again linked in the show notes, Fitts law, the importance of size and distance and UI design. See, hey, we don’t always refer to Jacobs law. All about how big something is and how quickly you can get to it. Right. The reason this matters, there’s a new standard in week a 2.1, which I believe is a statute 255 that deals with target size. And I’ve brought this up to a lot of people because folks don’t know this is a thing. It wasn’t in 2.0. It’s new in 2.1. And what they’re doing is they’re setting a minimum hit size, hit box size for elements of 44 CSS pixels, it’s going to be incredibly important to pay attention to the size of your targets. Now, I will note, this is triple A compliance. Right? Most legal regards only require double A, but okay. This is still something that you know, it’s still a standard to hold yourself to. And so how big is that? It’s 44 pixels. Come on. But I mean, like, how many pixels are on your device? Right now? Five. Okay, well, we need more of those. Know, there might be more. But there’s at least five. Yeah, so I use the phrase CSS pixels. A CSS pixel is not like a screen pixel because we have, you know, phones with high density displays, right retina retina displays. And so we’ve, the idea of what a pixel is has changed a little bit. A CSS pixel, though, is a set size. It results to roughly 190 sixth of an inch. For our overseas folks, that’s roughly quarter of a millimeter just over. So for 44 pixels, if your minimum hitbox size is 44 by 44 pixels. You’re coming in somewhere in the area of about a half inch. Yeah, I think I said earlier, it was like I i balled it at roughly the size of a quarter of an inch.
So 4048 divided by 96 would be a half inch.
Yeah, give or take sounds about right.
So for 44 divided by 96 would be just under a half inch
down was that 8896? That’s pretty darn close. It’s just a hair under. Yeah, thing. I mean, and that’s not tiny, right? Like, if you hold up in front of you roughly what a, just under half an inch square is that’s big on a webpage, especially when you think about the way we use iconography as interaction elements on devices. And then space. If you’ve got tables information that had things like edit, delete, copy buttons or something on them. A lot of the times those are as small as like 16 pixels, you know, they’re just the size of the icon. So if you’re striving for Accessible inclusive products that meet I standards, triple A standards, you’re gonna have to be thinking about this 44 pixel measurements, so That’s one of those new rules, new changes that I think is very thoughtful in within the spec of rule seven.
Yeah. Rule eight, what about you shall make decisions. Your children’s children, children’s children, children’s children will be proud of
just children’s children you don’t get up. Don’t gonna make it more complicated than it is. Go back and listen to Episode 41. That was Ron Bronson’s episode. Right, right. We were talking about the patterns and hostel. The hostel, yeah, hospital, this hospital patterns, hospital design, hospital patterns. And that I think is sort of the classic example of that. Yeah, and I’m pretty sure in that episode, we made a call back to this particular subject because this is sort of that underlying current of if you’re building things that are designed to People that are designed to Yeah, get people to do things they weren’t otherwise intending to do. That’s not the way to do it the way I tend to phrase this I say this same thing, but I say it a little differently which is I want to make sure I’m doing things my grandmother would be proud of. You know, and that that’s the way I look at it, but I think the same is true either direction they’re number nine, we’re almost there. You shall steal all the best UX out there. My example of this in practice recently is actually kind of funny now at least did this to me Popeye’s and chick fil a right? You know, I the idea of Popeyes creating the chicken sandwich that was meant to rival chick fil a, you know they they basically said you know what, we’re we can do that chicken place we can make an awesome chicken sandwich. And there’s no harm in that and in fact, you know, I think probably the brand will that ensued was probably good for both of them quite frankly.
Certainly it was one of those exposures about exposure right?
Oh yeah, absolutely. And you have if you watch YouTube at all, all the different you know, people that were doing the taste comparisons and are blind taste tests and things like that, sorry I watch a lot of YouTube and then Wendy’s is off to the side saying hey guys, we started it with these makes a mean chicken sandwich let’s just be honest.
I remember timers in your show, always respect and defend users
I’m not gonna say what our example is because it’s gonna make me mad.
It’s a it’s kind of a counter example to this like don’t
do that. It’s it’s the example that says, here’s what it looks like when you don’t follow this rule.
Right. The earlier this year we had an episode we were topic was about women.
It’s come up a couple Was this point?
Yeah, like dominoes got, like sued by countersued?
Well, they appealed.
Or they they appealed us it was Yeah, they appealed to the Supreme Court to Well, I think the charitable explanation you had was that they were trying to get more specific so that they could comply and know that they’re compliant. Right and avoid patent trolls are not accessibility trolls, reusability troll. I don’t know what that I’m also
by saying that I am making an excuse for them and I am putting words in their mouth. Yeah. So that’s sure that’s why I’m like at this stage in terms of the 10 commandment, I can’t defend them on it, because that’s not what they said. And it’s not the reason the rationale that they actively put out their
outcome is razor would say that it’s because they’re just being shitty. It’s a more elaborate and strange explanation to say that it’s because of the other reason
the underlying if you haven’t caught the past episodes are kept up with the news. The underlying story is a blinding user was trying to order pizza through the dominoes app, couldn’t do it, tried to do it through their website, couldn’t do it, filed lawsuit. dominoes lost that lawsuit, then appealed it and ultimately appealed to the Supreme Court. Where I can’t remember what now the what the outcome of that was. I think it was just they that the appeals court said Domino’s was in violation of the ADA and the Supreme Court just said, Yeah, we’re not gonna we’re not going to take this case. Yeah, the decision stands. So it’s just a case of all dominoes had to do was in this case, the number what was the number $36,000
But yeah, it was not
made they got an estimate on you know, how much they thought it would cost to make the changes required. Like for a company of that size, it was not a lot of money.
And the fact that it was so little says to me that that the good faith excuses probably bunk, yeah. Okay, even if they got sued Trying to like weasel around their compliance. They made a good faith effort to fix it. So that seems like elite defensive position. Or if they were, they would have a stance that we made.
So do that. Respect your users defend your users. Let us know how you’re doing it. Folks. Those are our top three episodes. You have 10 Ux commandments, you have Gutenberg accessibility audit and you have crappy forums. That’s what you’ve listened to the most since we launched our show. And maybe in a couple more years, we’ll do this again with three more that aren’t these three because I’ve got a feeling. Most of these are you will keep going. The drunken UX podcast is brought to you by our friends at New cloud. New cloud is an industry leading interactive map provider who has been building location based solutions for organizations for a decade. Are you trying to find a simple solution to Provide your users with an interactive map of your school city or business. Well new clouds interactive map platform gives you the power to make and edit a custom interactive map in just two minutes. They have a team of professional cartographers who specialize in map illustrations of many different styles and are ready to design and artistic rendering to fit your exact needs. One map serves all of your users devices with responsive maps that are designed to scale and blend in seamlessly with your existing website. To request a demonstration, or to view their portfolio, visit them online at New cloud.com slash drunk in UX that’s in you cloud.com slash drunken UX.
Well, thanks for listening everyone, to the season finale of season two drunken UX podcast. This has been really awesome and I still amazed that we’re two seasons now that’s just kind of mind blowing.
I’m impressed that you’ve kept up and just been like, screw you. I’m not doing this anymore.
I haven’t made you haven’t booted me off the show, because you definitely do like the lion’s share of the work here.
Folks, I, too, would like to make a resounding applause to everybody who’s tuned in over the year. We’ve had, I’m looking at my numbers right now. And I’m seeing roughly 30% growth over season two, which is incredible. I’m thrilled with that. And I’m looking forward to more in the future. If you want to give us a Christmas present, the best possible Christmas present you can give is, give us a share, give us a like or review in whatever app you’re using right now. You can do that on Twitter or Facebook at slash drunken us you can do that on Instagram at slash drunken UX podcast. You can get us on slack at drunken UX. com slash slack as always go by the website, or any of our social channels. If you have show ideas, guest ideas that you want. See in season three or beyond, we’re already lining those up. Be sure to click our Contact link on our website and you can do all of those things. Yeah, otherwise, hey, congratulations, end of the decade, the Happy new decade in the two years and to everybody out there. Stick with us. Season Three, I promise will be even bigger and better than season two. You have guests lined up. We have topics lined up. We have some ideas. I’ve got a site I’m rebuilding that I think will be cool to talk about. At the end of the day, no tricks, no mystery. No trying to hide it. I have one piece of advice for you. What’s up for 2019? Hope you kept your personas close. What your users closer. Happy New Year.
Happy New Year.
This episode of The Drunken UX Podcast brought to you by nuCloud.