Basic UX for Developers with Hilary Stohs-Krause - podcast episode cover

Basic UX for Developers with Hilary Stohs-Krause

Jul 18, 202456 min
--:--
--:--
Download Metacast podcast app
Listen to this episode in Metacast mobile app
Don't just listen to podcasts. Learn from them with transcripts, summaries, and chapters for every episode. Skim, search, and bookmark insights. Learn more

Episode description

What are the basics of building a decent user interface on a web page? Carl and Richard talk to Hilary Stohs-Krause about her experience helping folks build websites - you don't have to be a designer to make something useable! Hilary talks about steering clear of more complex UX libraries unless you know the site owner prefers them. Keeping things simple and consistent is best! The conversation also digs into accessibility and how accessibility needs are a great guide to a decent basic design - making a site that can help everyone understand the pages you've built a great path to a very useable website.

Transcript

Hey, Carl and Richard here with your twenty twenty four NDC schedule. We'll be at as many NDC conferences as possible this year, and you should consider attending no matter what. The Copenhagen Developers Festival happens August twenty sixth through the thirtieth. Tickets at Cpchdevfest dot com. NDC Porto is happening October fourteenth through the eighteenth. The early discount ends June fourteenth. Tickets at Ndcporto dot com.

We'll see you there, we hope. Hey, guess what, it's dot net rocks again for the nineteen hundredth and seventh time something like that. Is that I say that right, nineteen hundred and seventh time. It's a lot of it's a lot of times. It's a lot of times, a lot of great feedback on that show with Hanselman seven shows ago. Oh yeah, we had some fun, and I think I think that came across right totally really enjoying ourselves, really good, good stuff. And I haven't talked

to you in a while, my friend, what's new with you? You know, finally home for the whole summer, which is about as long as I ever stay home. So the coast is beautiful and sunny because it's summertime. You know. We cleaned up everything around the boat house, got the kayaks out, doing all that good stuff. Now, we had an Independence Day here, yeah, just I went and participated in it. Yeah, and and but you also had Canada Day a little while ago. Yep,

so I did Canada. It was for more chill. There's some spots to do fun polite anyway. Yeah, and we definitely do community fireworks versus individual fireworks. But then I went down to the Sinomish Valley, which is in the north of Everett in Washington State, which is quite a bit more rural. But I also think there's a bunch of tech folks that moved there. So dude, it sounded like rolling thunder out of Vietnam. There was explosions all around the farm going on all of the time. Now when there were

fireworks in Canada, did everybody apologize after every explosion? Was that? Is that the custom? But we definitely let professionals do the fireworks. We don't let individuals. Sorry. You know, I was hanging out with the hunters and those They had three inch mortars, you know, firing these gigantic, you know, explosives into the air. It was. It was crazy,

really a lot of fun. They had a great time. All right, Well, I can't really say much has happened in my life except a couple of good band gigs and just enjoying the Yeah, apparently are bands tearing it up. Like you know, you don't fit in the bar anymore. You need to do festivals. We're gonna have to do festivals in theaters pretty soon. But anyway, that's all I got. I'm gonna roll the crazy music for better no framework. Awesome. So this one came from our friend Simon

Kropp, who participates in the app Phoenix slack room. And this is amazing. Dot app okay search across a half a million git repos. Wow, it's like Google forget nice. And then it's there's a couple of checkboxes here case sensitive and the one I like the best regular expression you can You can search grab a million get repos with a regularly forget reposts to understand regicks in the first place. Now you're asking me to use rejects to find that like

that is not a thing. And then there's whole words. So the first thing of course that I check is you know, connection string right to see if who's put their connection strings in their Git repos. And I gotta say I didn't really find any. Okay, yeah, well, I mean my biggest problem with this is you search you such a large number, like try and get a filter an expression down to just like five. Yeah, good luck, good luck with that some summer reading for you. It was a

lot and go nice. So that's what I got, Thank you, Simon gp Dot app code search is a serious time vampire. Yeah no, And I think the logical thing you stick in there is like a line of code you're working on, or a particular API you call and finding examples of it for sure, right, and that stuff you don't want to use GitHub copilot or chat tpt or whatever stack overflow like let's stack over look another option. There you go. So that's what I got. Who's talking to us today?

Richard grabbed a comment off the show nineteen oh three, the one we did with our friend Beth Mass when we talked about Maui and Blazer. I think that was a build. Wasn't that a build too? Yep? It was it build? And Rod had this comment, I think this is ron Falanga. I'm not quite sure, but Rod had this comedy said I love this episode. It was great to hear best comments on the various UI technologies

that Microsoft supports. I understand if she prefers Blazer, but appreciate her points out under circumstances, either WPF, whin UI three or MAUI would be a better choice. It's a it situation. Or put differently, use the right tool for the job rather than force one tool to address all scenarios. Or you know, is there any one right tool for any job? Like there's more than one way to solve most problems. And he goes on to say I spent about five years writing WPF apps in my current job. I like

the power that WPF gives you. And of course WPF got a little balance at build right because they said they're going to do a bunch of stuff with include Win eights, Win eleven stuff, all kinds of things. However, under the wrong circumstances, WPF may result in a terrible UX experience. That's nice. We wrote eight WPF applications, none of which are in use today for various reasons, but one common reason was it the users hated the UX

I don't blame them. It was terrible, very complicated, requiring the users to memorize the database schema rather than using an app that followed their workflow. Now I'm putting WPF behind me. I'm focused upon Blazer as I see how popular it is, as well as simpler in an approach to doing things like data binding. If I can blame WPF for that situation, Rod like, now, I don't think he's blaming it either. Yeah, he's just saying, you know, when when you have all those options available to you,

you can create some really bad stuff. Well, I also think somebody in the leadership there decided that WPF was going to be a way, but then maybe didn't outline a set of ux plans for how we're going to do a good job with that. Right. Yeah, it's an interesting problem and tools aren't going to save you. You definitely need a plan. We certainly said that over and over again. I had a friend who replaced the boards on my back deck and you know Dio, Yeah, yeah, my friend Dean.

Yeah, So he replaced the boards and one of them is completely warped, and he hammered it on nicely with the tools that he had the nails were great, hammer was great. He just took that warped board and nailed it on and it sticks up and it's ugly. And you know, you can do the same thing with really good tools. Yeah, you know what I mean. You know what I'm trying to say here. Every piece of

software has some ugly this. You know where yours is? That's really where if that's your warped board, Like you did not put the warped board in front of the door. Yeah, well there you go, buried away in a place where it's not going to hurt anybody. It sounds like it came from personal experience. Why would I know, I don't know. I'm just guessing. So Rob, thank you so much for your comment. And copy

of Musa Koba is on its way to you. And if you'd like a copy of Musa kobay, I write a comment on the website at dot at Rocks dot com or on the Facebook so we publish every show there and if you comment there at everybody in the show, we'll send your copy music Koba and you can follow us on ex Twitter if you want. We've been there for a long long time. But we are also with cool kids I'm mastadon, I'm at Carl Franklin at tech Hub dot social, and I'm Rich Campbell

at mastadon dot social and send us a tuote. And that's another way that you can get your comment on our show and get some good stuff. Sure, okay, let's bring on our guest, Hillary Stows Crowsy. She's a childhood coder turned public radio journalist turned software engineer. She's passionate about the intersection of tech, entrepreneurship and social justice, and serves on boards for a tech in Entrepreneurship festival, a tech inclusivity conference, and a social good startup accelerator.

Currently a senior software engineer at Red Canary, she's a regular podcast guest and conference speaker both nationally and internationally. She became obsessed with plants during the pandemic and will read any fantasy or sci fi she can get her hands. Nice, what a great bio. I'm interested in the public radio journalism thing. Yeah, what was that all about? Yeah? Well, I started

writing code when I was like twelve. I've an identical twin, says her, and we made a website dedicated to our favorite TV show at the time, which was Buffy The Vampire Slayer. Awesome. Mm hm, this was like PRECSS, right. We had a guestbook, we had a counter, we had like all of the early feedture. Yeah, yeah, yeah, totally. There was so much nicer. Did it look like hamster Dance dot com? I like to think it was slightly, but we had fewer repeating

gifts. But okay, yes, uh well she she knows what that is. That's really that was my real test, you know. Yeah, but this would have been like mid nineties, you know, and and literally no one told me that I could do that for a job, so I didn't.

Uh So I went into journalism instead. And then just you know, long story short, kind of every job I had in journalism, it was moving more and more towards the web and the Internet, and I started doing a lot more of that with my work, and I just kind of got to the point where I was like, Okay, I love the work I'm doing, but there are no jobs and there's no money, so maybe it's

time to just do this other part full time. And it was the public radio thing, a local public radio or was an NPR what was it? Yeah, it was an MPR affiliate. And then I did a couple of things nationally. It's great, great, yeah, yeah, very cool. Yeah, but it also means you come from a communications background too, right, Like you're used to putting your thoughts in an organized form. Like when you think about building good web design, may making decent pages, it's about

making a plant. Yeah. Yeah. I like to talk about this idea of narrative coding, so like writing code like you're telling a story. Yeah, that's a really great approach. I love it. That's a good idea. And just I mean you're trying to persuade your customer to think the right way so you can lead them to where they actually want to go. Mm hmm, yeah, I love it. That's good. That's a great approach. I have never done that. Should have thought of it. Needed a

journalist. All makes sense now. And what's Red Canary? Yeah? So,

rad Canary is a cybersecurity company based in the US. I'm headquartered in Denver, and we work with a whole wide variety of customers on sort of basically pulling in data from a wide variety of sources like local servers, cloud like, kind of the whole shebang, and then running it through our engine, which is built on more than a decade of experience of kind of looking for anomalies and then taking action on those anomalies to protect customers from potential threats.

Nice. So a service you sign up to and they you're doing some monitoring on their behalf and then helping to deal with response sounds like a run ass topic, but it's a good one. So if my friend who put those boards on my deck was a brand new developer and had its nice shiny nails and hammer, what would you tell him about how to go how to how to start thinking about good user experience? Are we going with the uh the like wood metaphor? Are we are we let's let's let's jump back to

coding. Yeah, so I think well, as I was going to say, it's like get a different board, my friend, Ye, that's kind of where I was going to It's like, deal, why put the bent board on? Go get a new board? M hm yeah. I you know, in a nutshell, I think the biggest thing with U x ui is just consistency. So even if you end up picking a pattern that's maybe subpar or a little confusing, as long as you follow that pattern right,

people will learn it and then it stops being confusing. So so I think I think really what has the biggest impact is just being predictable with your design. The problem is you're learning as you go and so you change techniques as you learn things, and it gets represented all through the site. Well that was the point where I learned this, so then I changed it. I didn't go back and retro fit everything I've built before that. So that's where

patterns and like style guides really come in handy. Right. So if instead of styling, for example, individual buttons, if you just have like a button class or a module that you just insert every time you need it, then when you want to change that button, you just change it in one place and it filters everywhere and all the buttons changes. Mm hmmm. So the this is where we talking about good You don't have to know a lot

about design, but here's a good practice. Is then a design person could come in and restyle that for you, and they will and they will. Yeah. I think a lot with like UX and design is we think of it as being very divorced from the code part of it. But as someone who has been a full stack software engineer and has done design as well, like web design, they really are two sides of the same coin. And

I think a lot of the same principles can apply. Right, So if we're thinking about design, like dry right, don't repeat yourself, like don't repeat your design code, right, don't repeat your regular code, and it just makes it all flexible for the same reasons. Does that mean that yagny also applies, like don't add styles that you're not using, like you're not going to need them. Yes, yes, yeah, I mean that's great, just just thinking through we have I think, I like a developers like,

don't build stuff you don't need. If you do something twice, make it repeatable, start out simple, you can you know, like what's the the core thing you're trying to accomplish here, and then you can make it fancy later. Mm hm, I mean what about nibny what's that one? Nib me? What is it? Not in my backyard nimby? Yeah, but you could say not in my something yamo, that's what I would do, not my base, not my base. M that's it. That's so

funny. I'm sorry, Okay, yeah, I mean, and these are just like because often we're committed to building a site before we've got really a design in place. But when I've when I make confronted with this a lot of times, I just like, let's get a CMS. Hm does she use a third I don't know how you feel about this, but it's like, why are we reinventing this? You want to put a bunch of pages up and like there are tools for this already, we don't need to start

from scratch. Yeah, totally. I think. I think it really depends on the the project and the audience and the intention. So for example, I love squarespace. I know, there's not the mother. Everybody's got their favorite. For me, square Space is mine. And you know, like I this. I helpe run the Madison edition of dev Best like the Global GDG Festival, right, and we use squarespace. And somebody was like, well, you're a dev conference, shouldn't you like handcraft your site? And

I'm like, why to do with our time? Yeah? I write code. You don't need to write. Well, even if you don't deploy it. It's a great way to get people to prototype. It's just get you know, get close to what they want and then at least you can grab onto it and say, let's go take this in a different direction. Oh,

Yeah. I used to work in consulting, mostly with startups, and we always told them, like there were people that we turned down as clients because I was like, look, you can get by for at least a year, like seeing if this is even a valid business idea using a mix of like Gmail and spreadsheets and like online forms, like you don't actually need custom software yet. Figure out first is that if this is even going to

make you any money, and then come back and we'll talk. Then you have these companies that already have existing web apps built in other things, and then they're moving to maybe new tech now and they want to start completely over with style that isn't something that you're a square space or something like that is going to work. They already have an application framework on the back end. Now they need a developer or a CSS stylist to come in and you know,

take over exactly. Yeah, I mean I think all, like so many things in tech, right, there is a time and a place for each tool where it's a great fit, and there's times where you're either going to outgrow it or it's going to be too limiting, you know, And so see MSS are one example. Another is using like like design libraries,

like like a tailwind, right, a bootstrap. For a lot of people, that's going to be great, Like we use bootstrap at Red Canary, But for a lot of other people it's it's it's either going to be overhead that's not necessary because you're recustomizing everything anyway, or it's just not going to get you, you know, where you need to be designed. So especially if you're you know, like building a website where you're trying to sell your

design expertise. Yeah, yeah, bootstraps probably not going to do that effectively, right, Sure, But if I'm a developer who doesn't got a lot of design experiences, Like, isn't boot bootstrap a good choice just because it's going to give it an aesthetic by default and then an expert can come in and retrofit fairly easily. Is that true? Or does it make it situation

worse? I think it It Again depends like if you're expecting that, like if you're only using bootstrap or sort of the prototype and it's happening sort of consecutively, so it's like, Okay, we come in, we build the first page, we use bootstrap. We know someone's gonna come in tear all the Bootstrap out and put it. You know, then I don't think it's

a great use, right. I think in that case, I would rather just build my own lightweight library with some core classes and use that because then you also don't have to worry about keeping it updated, right like it's you know, if if you're really using it just to create like placeholder content, then I would just spend at my own minimalist one and use that just a little less placeholder effectively. Like so Bootstrap's not a good placeholder. I think

bootstrap is. There's a lot of things that are great about and I do have like I go back and forth on you know, I'm someone who actually really likes to write her own CSS, and sometimes I get annoyed with like the way that there are constraints when you use a library like that, and sometimes I want to just like I know exactly what I want. I just

want it to work. I don't want to have to look up the you know, seven different classes I have to put together to get it to do this, like one thing I did this myself, I wouldn't have this problem, nice right, right, Yeah, And you know, for people who who are less experience with CSS, or just you know, there are higher priorities for them to spend their time on. Yeah, bootstrap can be a great way, Bootstrap, channelent, all of those can save a lot of

developer time once you get into it. But you know, one thing also, we have a lot of back end folks at Canary, and I'll see folks who just do like in line style calls because they don't know what the bootstrap class is and they just need five pixels of margin on the left and you know, crazy right, Like that's yeah, and that the designer we work with also is an engineer, and so she's great about like when she writes code, she'll fix those things for us. But you know, so

it's all it's all trade offs. But I think I think there are limits to all of those, and there are times where you do need to just kind of like handcraft what it's going to look like. Doesn't get hubco pilot met it's easier. Clearly, I'm writing better CSS because I asked chat GPT again. Okay, okay, that's okay. That's how Canadians make make jokes deep straight face. You did mention that consistency was the number one thing.

Uh, And you know creating style guides? Are there any basic style guides that you recommend to be people who are starting out? You know, I think of things that Mark Miller talked about in his amazing video The Science of Great Ui, where he talked about contrast and the things that the things that you can do to draw your eye to things and then you know, using a lighter contrast for things that aren't as important at this particular moment. Are

there style guides that are out there that you would send to people. That's a great question, and I'm sure there are. I haven't really approached it from that direction. I mean, I think it's it's there. You know. Contrast is a big one, and that's something that I you know, and when I talk about this topic, that's a big thing that I pull up, is like make sure you have high enough contrast, the right kind

of contrast in the right places. To your point, it's really I think I think people oftentimes think of design and as strictly a creative aesthetic thing. Yeah, or like you have to be you have to have a good imagination, you have to be creative. I have to be good at art, you know, that kind of thing. And I think there's a well, I know, there's a lot of logic too, and I think that's really where you ex is kind of pulled in and say, hey, actually there's

statistics and logic and psychology behind all of this. It's not just choosing colors. And so I think really, once you have even a brief understanding of that, like, it just makes everything a lot easier. Well, and certainly we've done the shows. I've done a bunch of shows now with folks focused on accessibility that talk about the fact that the modern web is way better at giving you structures to be able to help folks that have accessibility challenges interact

with your page, you just have to know about them. Mm hmm. Yeah. And really, at this point, I don't think there's an excuse not to, right, there's so many good resources out there. There are, you know, browser plugins to tell you exactly what's wrong and how to fix it. And it's one of those things where when you are accounting for

accessibility needs, you end up with better design. It's just they go hand in hand, right, It's just a natural byproduct, like to heck with the aesthetic, pursue accessibility and you will get a bunch of esthetic from it. Yeah. Yeah, I think that's very proud, and especially for someone who's not into that design element to say, now we'll just pursue this and

I'll watch that other stuff's going to fall out from it. Yeah. And that brings me back to what we were talking about before, which is that the intention of the website should be obvious and clear when you're on a page, a particular page, and it shouldn't have to be explained. You shouldn't have to read a paragraph of text. If it's not clear and obvious,

then you have a real problem. And you can you can measure these things obviously, and we've talked about how to measure them with you know, what do they call it hotspots and where tracking where the mouse goes, which is sort of where the eye goes. Yeah, and you can tell that people do that they they move the mouse with their eyes on over a page when

they're looking for things. And I find this when I'm sharing a screen with a customer and they're looking at the code and stuff and they're trying to find something in a list, and they're going the mouse is going up, and it's going down and it's going up. It's like no, it's right there

up over there too far right. Yeah. I had to have the other day a coworker with sharing their screen and trying to find a specific ticket, and like their mouse was actually hovering over it, but after looking for a while, they didn't realize that and they went to do a like command deft to search for it, And I was like, right, but you know, those kinds of situations all so illustrate a poor design in a way,

because it shouldn't take that long to find what you're looking for. If you have if you're presented with a huge list of options, you know, then it takes all that mental and physical time too. Yes, find Yes. I mean that fits right into this idea of progressive disclosure, right, which is you disclose information progressively. You're not doing it all at the same time. Love that you're not overwhelming the person with content, but you're making it

easy for them to find what they're looking for, right. I love that it's kind of like you know, a search box. Right. So you go in and have a meeting with somebody in the first question is why are you here? You know, to start out with something very general and you get to exactly what you want yeah, I had an oval ux experience. Actually, this morning, I was trying to get the account number for a bank account for the help run a women in tech group here in time.

We just got a bank account where like getting getting real and fancy and official, and I was trying to hook it up to our PayPal account and it kept rejecting it. So I called the bank and I said, and she was like, Okay, go to your page, click on the account, click on about account, which is where I had been, and she's like, do you see the one that's called account number? And I said yeah. She's like, it's not that one website disclosure. Bank websites are the

worst. You could tell she'd done this before because she was like, I know, it's confusing, you actually want the one underneath. And I was like, why the bank website that we use to make ach payments to,

you know, our vendors. The process is so screwed up. You go basically to this page and before you can do anything, you have to scroll all the way down to the bottom of the page right and then hit new whatever it's at the bottom of the page, which is just one big list dumb dumb, dumb, dumb, and then after you put something in, you have to go to the top of the page and you have to sort

twice to get it to show up at the top. Just little things like that drive me nuts, and my wife too, who does who uses it all the time. It is just unbelievable. Banks just like I don't know if it's just my bank, but I think a big thing with design, Like I think a lot about because I'm not I have limited training. So if you need me to make like a you know, like a one off event website for some cool new art exhibit, like I am you're the wrong

person for that, But I think a lot of it. Really for the majority of what we're building, right, we don't need that kind of like

high intensity design. We just need something that's functional, functional, And a big part is is preventing frustration, right, Like you don't really need to impress someone, Like I don't really need someone to come and be like, wow, this is such a great design, Like I'm going to screen all this instid of no, but I want them to like not complain about it, right, Yeah, once they get frustrated, to get into that negative

spiral and they're actually less and less capable right, like they're really going to have a tough time. But watch someone just unravel on that. I also jump back to we do have a tendency as developers. You just say, let's make sure all the options are available. I will build the dialogue of Doom. And it's just like the Internet, everything's there, you just can't find it, right, Yeah, and it's not let them figure it out. Yeah. It is not progressive design, that's for sure, or progressive

disclosure. It's like, no, here you go. You just said something that hit a nerve. And Richard and I both talked about this in different contexts. But you know, it's kind of like the sound guy at a concert. You know, you don't go up to the sound guy after the concert and sayd whoa, that was so amazing. However, if there's a blast of feedback, oh that freaking sound guy, Oh my god, what an idiot? Right, Yeah, in the same way, well, no one notices, no, that's right. Yeah, and good audio is like

that. And you know, Richard jokes a lot like it. People never get the recognition that developers get unless something really goes wrong, and then those stupid it guys you can only you only get a C or you can get an F there's nothing else that's it. And if you get a CEE, nobody can tell. So I mean that's the joke about actually designing a webpage.

Well, if nobody notices you nailed it, Yeah, either that or they're too afraid to tell anybody or don't even know how to articulate what the problem is, right, So you really got to test it and watch people

use it, don't you. Yeah. But when I gave this talk at NDC OSLID, some will come up afterwards who I could tell was prepared to pick a fight, you know, just from his countenance and the way, you know, the phrasing, and he was kind of like, yeah, so I kind of think that we should actually have experts doing this and not developers. And I was like, I agree completely, Yes, I agree completely. This is this is there's expertise to be had here, Like we

should have people trained to do this doing this. However, that is often not the case, and so ignoring the problem is not going to make it better. So let's at least try to equip people to do as good a job as they can when they have to do it. But yeah, yeah, that's sort of the reality we'd love to have more designers, we just don't. So now what do we not make anything like? That's not good either. And folks, we got to interrupt from one moment for this very

important message or two or two and we're back. It's don that Rock's I'm Richard Campbell. Let's call Franklin. He talking to our friend Hillary and we were supposed to do this show in person and ozle but things so, but now we get to talk about your talk because it was without a while ago as well. Right, move further on. I think we sort of painted a picture of the beginning there of just some simple things that a developer can

do because there isn't a designer available yet. Maybe that person is going to get to your side eventually. Maybe some point, when it gets to a certain level of success, we're going to spend more resources on. Like I can think of all these reasons. Are there other things to steer clear of as a as a developer as you're building a page to just not make that harder on the design resource when it appears. Yeah, I think really like keeping it simple is another big one. So not simple just in terms of

code in the CSS or siling that you're adding. But it's also much easier to fall you know, if you think about like a page that has you know, four columns, because we're like, oh, it's four different segings, you know, and then maybe below that is more columns, you know, and it's like, okay, well this is I don't not necessarily sure where to start. I'm not sure where to look first. Versus if you had a longer wall of text but it was broken up by subhutters, that's

actually a lot easier to consume, really, right. And of course I'm speaking in generalizations here because there's always exceptions and it depends on on the specific content that you're trying to place. But you know, I always tell people like, don't underthink it and don't overthink it. Great, so think about it some, right, don't just flap stuff on the page and call it good, but just be awesome, Okay, can you just do that? I mean, keep it simple and keep it consistent, and really those are

like and don't take up the entire width of the computer screen. I had a former coworker who used to do that. I actually prompted me to start giving this talk because I was like that's wrong, And he's like why, and I'm like, I don't know. I will find out. Yeah, you got to work. Well, now you've kicked off a bunch of things like media queries like how do I make this tolerant tool a phone versus a

tablet versus just a smaller screen? Like well, and when you keep it simple and stick to patterns, all of that becomes easier to write, right Yeah, And this is also a deficial design decision too, right, Like, most of the time a web page is not going to be a viewed on the same computer that you wrote it on, like your friend who's using the whole screen with It's like, listen, you're not the primary user of this web page. Why are you building it to your machine? Yeah?

I think the the difference there is like if it fits on a smaller screen, you can also read it on a larger screen, right, right, Like it might not be abtuned or like the most you might wish that there were changes, but you can still interact with it. It's not giving you problems, Whereas if you build for a bigger screen and it doesn't work on a smaller screen, you've just lost a bunch of customers to get back to, like this project you're working on, who's it for really like? And

what kind of gear do you think they have? Like what do you expect it to be viewed on? When? I think we make assumptions too, because like, most people don't have three monitors, what right? I Actually I have problems with my forty nine inch monitor because if I'm on a Zoom call or whatever and i want to share my screen, oh my god, it's painful. They have another monitor, right, Yeah, That's what I've done. Now I've got a separatenityp monitors for easy sharing, yep. Which

doesn't make us closer to the customer. It makes us further away sometimes just looking at you know, to your point, like what is the gear that

our users are using? We looked at the data for and my old company, we looked at the data for a client we're having an argument about whitch browsers we were going to officially support, right and just had them pull from their analytics data and it turned out that like ninety six percent of their people were all using Chrome conversation over and then the rest is that mobile and the

rest were on so far. So I'm like, great, there you go like it using desktop, Okay, stop great yeah, so yeah, great to I mean this is why go get data, like because the conversations end real fast. When it's that kind of numbers. You got ninety percent. If anything, just stop like it's over now. Part of that is a self fulfilling prophecy. If it does not render on Safari, your Safari use

will be low. Right yeah, yeah, I mean I ran into this with a project years ago where we you know, one machine, there was one class of machine in the organization that had very low utilization on it, and so they're like, well, those people just don't need it. It's like no, it actually doesn't run on that machine, so they just where

they need to do that thing, they go to a different computer. So this was actually a really important bug to fix, but it didn't show up, hie on the statscause didn't happen very often because everybody already learned to work around it. Well, or like if there's a long running bug and you look at the data and you're like, oh, well, no one visits

that page anyway, so we'll just keep not fixing it. Same thing, right, It's like what you could just no one visits that page because you just call it a security feature and call you know, as long as nobody uses site, it works like a hot dam. It's a threat factor removal. Ever since I turned off the surfer, no breaches, no record. Yeah, we're knocking it. We're all good. Uh, we gotta we

gotta get back on track a little bit here. Uh what is a designer going to ask me when I when I have to take over the site, when you know, when it's they're they're down, going to start making modifications like is my code supposed speak for itself? Is there anything I should have known or kept notes on? They're going to say, how long have you

been smoking crack? Yeah? What were you thinking? I would if we're if we're assuming that it's a designer who also has at least some coding skills, I I think there are maybe maybe a different way to answer that question is and said, like, what can you do to prevent the designer from having to ask you questions? The point is not to do not have the

pot to you. Yeah, And so I think a lot of this comes down to again, it's very similar to how we write regular code, right like does our view code have semantic HTMO are we naming our variables things that the designer with little minted context can understand, Like, okay, so this section is clearly what corresponds to this on the browser because I can see that

the variable names. You know, if I have I have divs that are named like it all, it's easy for me to follow and read and comprehend and then feel like I can move around safely without breaking something nice less foo you say, yeah, let's food, let's bar less baz. Yeah. And I just grabbed a just grabbed a link off of the W three W three Schools on Semantic Elements and it was a dot ASP page and I'm just like, h that's kind of funny. Oh yeah, W three Schools.

The content is great though, Yeah, but apparently they're running an engine from nineteen ninety eight. Yep, that's pretty awesome. It still works. Yeah, it does work, and the end it's just learning materials and not the ways about that. But right, wow, you wonder how much dynamic content they really need to spit out, although they do have that try it yourself thing right where you have you can like write some Java script on one side of the screen and run it and it runs in the other side. That's

pretty cool. I got to think that's a security risk, though hopefully hopefully it jumps to something else when it does that. Nope, it's still asp wow. Wow wow, Okay, I'm excited. Really wow, really something. So all of those original semantic tags that h on'es h two's is that

why that stuff's still relevant? Oh yeah, yeah, totally. I mean so, one of the talks that I've been giving recently is about creating accessible coding environments for programmers who have disabilities or need accommodations, and I talk about semantic HTML and that talk. So it's not only valuable for screen readers for generating tables of contents, for kind of giving you some of that built in

like skimmability. So especially we're talking about people without a lot of design background, Like you don't have to decide what the font size is, you don't you can just use semitic HTML and it'll give a lot of that to you for free from what's baked into the browser. And also a lot of it has a direct impact on the user experience. So think about when you go to fill out a form and it has a you know, name, field phone number, field address, field and you're like auto field doesn't work right,

that's because they didn't do the HTML. Like, it's very simple and there are universal standards for phone number, for last name, for first all of these, and that's what your brother is looking for. And it tries to attle fill And I get so mad now when I try to fill out a form and I have to fill out every single field by hand. Yeah, like because I know that. It's like it's such a simple fix that makes everyone's life better, and it's just and it's just not it's either not

being aware of it or not taking the time. Well, and it's so simple, and aren't there online tools they'll just test your page for you too. Oh yeah, well, and there's I think it's actual might actually be W three c's W whatever W three schools. Yeah, W three schools. There's W three schools. There is a W three C. Like there's the easy checks at W three C, which is, yeah, you've just feeded a page. One of them has like this list of like all thirty attributes

that you can use for inputs right to me. And it's just it's not hard and so it's it's not only an accessibility issue, it's also a lot of it can be a ux issue. And again it's a time saver because we if you, if you are consistently using semantic HTML, then when whatever library you're using her where you're doing it, it makes it a lot easier to be consistent with that too. Right, Wow, we get we're back at the accessibility conversation, Like going down that path will also guide you towards

the semantic tags and that kind of thing. Mh, So, can I ask you a question about your talk because I looked at your slides and there's a it's like the third slide in this is a real website from nineteen ninety six. I really want you to share that picture with the world because that is a screenshot of Netscape Senator Ted Kennedy's website the Office of Senator Kennedy and

just so many terrible things. The most terrible thing is that the font size and boldness don't seem to matter, Like everything on the page is buying for your attention all at the same time. You know, and that counter, Oh the counter is funny too, but but I just mean, like, you know, there's a linx and the links are all as I just as important as each other, like everything is jumping out at you. Look at

me, No, look at me, no, look at me? Right, mm hmm, just so so bad it is and it isn't, And so I think this is this is where it really gets interesting because while I would argue it's overall very outdated design and we know a lot better now, there's also no surprises, right to take me a second to find what I'm looking for. But it's all pretty straightforward, right. There's there's no carousels, there's no you know, like information that only appears on hover. Right.

Everything is very discoverable on this site. And so it's it's it's an interesting mix of like cringe and like not that bad. Yeah, you're right, I have seen worse. And you know, the original VB was was kind of like, well, it was great in many ways for forums applications,

but it also let developers do just about anything design wise. And there are some Billy Hollis shows some screens from old you know, nineties Visual Basic applications that were actually real that we'll give you a headache, just that headache, horrible. Every inch of the screen is filled with some graphic or some text or something because white space is waste. Oh yeah, oh my god, if you were frames when there'd be like a bottom frame and a side

frame and all their own scrolls and yeah yeah. Do we have a conversation about navigation between pages and things like what's the right way these days to build navigation within page? I would say, big things to think about with navigation are I think, again, really being judicious about what you make accessible in like a you know, like if you have a have a drop down navigation series, Like I've gone to websites that have like fifty items in there and

that's just useless. I think about trying to use it on a phone. It's so really being judicious with that progressive disclosure again, right of okay,

like what are our high level ones? How we put it? And I also really like sort of I don't know what you would call it, but like like double dipping, right, so not just you know, if there's a page that you know people are going to want to go to and it's it's but it's not really to the level of like front and center on the homepage, you know, link to it from wherever it's appropriate to link to it, right, make it easy for people to find what they're looking for.

And I think sometimes you're ran into like, oh, well, you know you get here by going through these three pages, and so okay, but I'm on this page that reference is that? Like why why would't you also give me access right right right? And you mentioned double dipping. That means like putting a link to something important at the top and then some text and a link the same link at the bottom right, Well that which one

should I click? I think? Just yeah, making it, I think making it not not as much putting putting them both on the same page, but being able to access information from multiple places within a site. So not treating it like I see you know it's it's not like you're reading a book where you don't want to repeat chapters. It's more like you're reading a table of or I don't don't know what can analogy is failing me. Yeah,

no, no, I get it, I get it. You. You you want to have one place where you link to a page, not millions of places, and that should be the main Navigation means, whether it's a

toolbar or a sidebar or a drop down menu or whatever. Yeah, just making it easy to find what you're looking for and being very explicit with what clicking anything is going to do. So you know, there's nothing more frustrating than being like, oh, this must be the page I want and then you go there and it's not, and there's no way back start right, Yes, yes, you're pushing a hot button for me. I get. I have this experience daily, you know, find what you want. It's

a little game we play. M How do we feel about the hamburger menu? Because is that really still a thing? Like? Is that just this is a required question when you come on dot net rock, so that we're going to ask you about the hamburger menu. Yeah, issues with the hamburger men you but I do have issues with icon usage generally, right, but yeah, because it's so specific, right, like, does the hamburger man you transcend that? Does everybody know what a hamburgerman you have icon is?

Yeah? I So I would argue that every icon should have a label, even ones that we consider universal, because universal is still within the context of a culture or a language or you know, income bracket even y. And

so my personal preference is the hamburger icon with the word menu. And so then you're just really reinforcing what's going on when we first started talking to people about design and the Hamburger menu is starting to become popular, most of the people that we interview were like, oh, no, no, the Hamburger man is terrible, don't use that. And then of course it got so popular, and I think Richard used the word transcend right. It kind of

transcends the rule of iconography or whatever the rules are. And it's now so ubiquitous and everybody knows what it means. But within the popular culture and the

people who are using computers today, they might not tomorrow. Well, I think about how we still use There are some places that have a floppy disk, y con or even an envelope for email, because with envelopes, an envelope, I was just I was just looking at a page where they had the downward carrot, which implies on menu pops from here, But then when you hover over it, it actually flips to the upward carrot and things change. Yes, I don't know what this does, and now I feel less

like I know what it does, like I did something. I don't know what I did. All you made me do is feel like I should boom my mouse away from you. This is my issue with toggles, it's the same thing. Unless they have labels on the two sides of the little like slider toggle. I never know if it's turned off or on, especially if it's not like and I have I have full color vision, you know, and don't have any vision issues, so like sometimes it'll be to me obviously

disabled if it's like grade out. Not everyone can see that, first of all. But secondly, like sometimes it's like okay, when it's on, it's green. When it's off, it's purple, and it's like what And then you end up having to turn it off and on several times to try and discern like which is the on state and which is the off state? And so this is where like you know, again like labels on everything, yep, just make it. Make it, make it like overly obvious what

is happening? Right, Yeah, If you don't have a label that represents the current state of it, you know, you might see you might think that when it says off that it's off or do you press it to make it off, like it's not clear, m yeah, or when things automatically save but don't tell you it's automatically saving, right, and there's no save button and so you open it on like a new tab, just to make sure it actually is persisting. Yeah, sorry if you if you hit a

save button and there's no feedback whatsoever? What? Yeah? Nothing? I did it save? Yeah? Did it not? I don't know. Thanks for telling me we should do regular bitch sessions about UI because I have a million complaints. You know, we should probably do like we could do videos of of you know, websites that suck and why my favorite pet peeve. I have a hyphenated last name, and I have like thirty screenshots in a folder on my desktop of forms that will not accept a hyphen in a last

name. You're not allowed to have a hyphen your last name, no asid. I talked from a woman whose last name was O'Neill. I think it was O'Neill. And did She started out her talk with the Internet hates the Irish, the single of pop fee. Damn, you are doomed. Do you have to escape your own? So? I have another pet peep, a pet peeve. I have one of many, and you'll appreciate this because you have a cybersecurity firm or a security firm is when password has a maximum

like yes, and it's usually nine or ten. What are you thinking? However, they make you jump through all these hoops of you know, characters and all this stuff, but it can only be ten characters. Drives a wall because the best thing you can do is a long password. That's right, Like even if it's even if it's English, it's a sentence, it's fine. That's still way better than a short, complicated one. I am

I rate. I have written angry emails about this. Yeah, yeah, it's just a it's a that's an artifact of the past that now passwords should be phrases instead of short things that you can possibly remember by placing a's with that and like that. Password managers, I don't know any of my passwords exactly, no idea. I don't want to know. I never want to know again. But you still run into that problem when you have to create a new password. You go to your password manager, you paced a new

password in Oh that's too long. Well, it would be nice if you told you that's not the message he gives you. Yeah, what it says is minimum make characters. These are special characters you're allowed. It's like, I am compliant with all of these things. Yea. And sometimes it doesn't tell you have you all run into this where you fill out your password and it just says password format is incorrect, and it won't tell you why some

developer somewhere needs to be slapped. New people suck. Honestly, she's she's she's got it down now, she's like some stupid developer. That's all the developer's fault, all right, how do we know? So if you want to do anything, make sure you're write a real password requirements description, including maximum length, not just minimum like no maximum life. That's what I say. If you're gonna have a maximum length, it must be something like make

the maximum LIANK sixty and thirty six. There you go, just because it'll give us a giggle, right, at least it'll give because you're actually story the past word. You already committed this in any way, So don't do that. But meantime, okay, where are we going to go? How are we going to wrap this up? What's next for you? What are you doing after this? After this talk right here? Like today or just yeah no, what's what's next on your to do list? Next? On

my to do list? There's always so many things on my to do list. I actually just came off an on call rotation, so honestly, sleep is on my to do list. Nice, so it was an active one. Oh, we get a couple of issues, were you Yeah, okay, we'll have a good sleep and you know, of course, if you have anything more to say on the topic, get in touch with us and we'll have you back on. Yeah, thanks for having me. It was one to chat. Great to talk to you. It was great fun.

All right, bye bye and we'll talk to you next time on dot net rocks. Dot net Rocks is brought to you by Franklin's Net and produced by Pop Studios, a full service audio, video and post production facility located physically in New London, Connecticut, and of course in the cloud online at pwop dot com. Visit our website at d O T N E t R O c k S dot com for RSS feeds, downloads, mobile apps, comments, and access to the full archives going back to show number one, recorded

in September two thousand and two. And make sure you check out our sponsors. They keep us in business. Now go write some code. See you next time. You got jads, middle vans do the home. Then I'm Texes

Transcript source: Provided by creator in RSS feed: download file
For the best experience, listen in Metacast app for iOS or Android