Adam Argyle: ... These are things where you have to sit down person by person, scenario by scenario and make it work out. It's a human-centric practice. If you bring the humans in that you want to have those good moments and show them that they're having bad moments, it can be really powerful. Emily Ketner: Welcome Back to PodRocket, a web development podcast from LogRocket. LogRocket helps software teams improve user experience with session replay, air tracking, and product analytics. Try it free today at logrocket.com. I am Emily and I'm the producer for PodRocket. Today we're answering your questions about UI and UX design. Last month we asked you to send in what you were struggling with when it came to UI and UX design. So today we're taking the time to talk to our panel of experts to answer your questions. And before we get into answering those questions, let's welcome our panel. First we have Stephanie Eckles returning to PodRocket. She's a front end software engineer, author of ModernCSS, SmolCSS, 11ty.Rocks. She's also an instructor, Twitch streamer, conference speaker and more. Welcome back, Stephanie. Stephanie Eckles: Thanks so much for having me. Emily Ketner: Next, we have Adam Argyle joining us again as well. Adam is the CSS and UI DevRel at Google Chrome and the CSS working group. He also hosts the Gooey Challenges and the CSS podcast and is the creator of VisBug and OpenProps. Glad to have you back on Adam. Adam Argyle: Thanks so much, stoked to be here. Emily Ketner: Hell yeah. And finally, rounding out our guest panelists, we have Stacy Kvernmo, UX designer and front end developer at OddBird who has been working in front end for about 20 years. She's a conference speaker and meetup speaker and is passionate about making UX a priority. Welcome to the show, Stacy. Stacy Kvernmo: I am delighted to be here, but I am sort of feeling pretty old right now. Emily Ketner: It's a lot of experience and that's why we're glad you're here. And then finally we have our PodRocket host returning, Noel Minchow, lead software engineer here at LogRocket. Welcome back as always, Noel. Noel Minchow: Thanks, Emily. Emily Ketner: Awesome. All right, so let's get right into the questions. Richard wrote in and said, when it comes to UI UX, I'm fairly decent at the UX side, meaning I can empathize with the user and make decisions, but I really struggle with the UI. With every new project I feel like I have to completely reinvent the wheel or risk looking like yet another insert UI toolkit site. So I end up spending forever choosing bespoke fonts, colors, button styles, hover effects, et cetera. In the end, I'm still not entirely confident that I made the right choices. So my question is, when building a UI from scratch, how do you decide which areas to be creative versus sticking with tried and true layouts? Stacy Kvernmo: I always look at it as a balance and it also depends on budget. There's nothing mentioned about budget here. So depending on how much time you have, you can explore even further. But let's say you've done all the research that you're going to do to find out all the vibes of the project you're going after, I think that design doesn't always call for being overly creative in everything and sticking to some of the tried and true layout methods actually is a great idea. And then you can weave some of those little creative explorations in smaller ways. You can look at maybe how one group of inner components work before you even approach like an entire page. And if you are starting from complete scratch, you don't have anything with the brand assets or colors or anything, then I like to start with type and just see what can I do to make that type look special before I even get it into any sort of design canvas and I'll compare different typefaces and whatnot. But I think there's a lot you can do without thinking about how you apply it everywhere or turning text sideways or what can you do to make any little piece creative and then that won't necessarily break your budget. I think you'll find out quickly if it works or not so you can go on to the next idea if it's not working. Stephanie Eckles: I'll just tag on from a different angle. So just a little something about me is I would definitely not classify myself as a designer. I am firmly in a front end engineer camp, but with different side projects and just the flow of my career, I've ended up doing user experience design especially with the accessibility considerations. So from that angle, I would encourage you to consider that some of those tried and true, those are going to lend you that user experience and getting that solid foundation regardless of what you're building is always going to be beneficial for your process. And then as Stacy said, adding in those sprinkles of whimsy or what have you after that point maybe makes the experience a little less daunting when you're first starting out and staring at that blank page, like nail the user experience and then layer on top of that would be my advice. Adam Argyle: Solid advice coming from the panel so far. I'm going to build upon it, but I'm going to start with kind of a joke. So we have April Fools coming up and I was thinking it'd be really funny to make the most beautiful site that you just land at loads. You're like 2023 design galore. It's just beautiful. And then you hover over a button and the button wobbles away from you and then you try to scroll and when you scroll, all the text on the screen flickers around and it's so overpacked with beautiful UI that the UX is absolutely terrible. So my goal would be, and I probably will build this one day, is the most beautiful unusable site you've ever seen before just because there's a tension here. The tension that's clear is that just beautiful UI does not give you good UX, just good UX does not lead to beautiful UI. There's somehow a harmony here and that is frustrating. I feel like this question is articulating the difficulty of balance between you get started, you build something, it's functional, it feels like the user experience is there and then you go layer on beauty or balance and spacing and padding and color. And so then that changes the way something felt. And so you're on a teeter-totter. And I think for me, I started out as a front end developer building other designers' dreams. I made their dreams come true. But then I went to design school, learned design while I was still coding. And so then I got this dual brain way to look at everything and I'd say that my approach to things, and this is kind of manifested on my current website, I just redid it for the first time in six years or something... Oh wait, by the way, Stacy, I've been doing this stuff for 20 years and stuff too, so it's all good. Yeah. Anyway, my site, it's not doing anything really that exciting. You talk about these tried and true patterns just like Stacy and Stephanie, you're saying these are stable, these are things that user's going to land there and feel familiar. So if you work for a company and you have a design system, your design system would be found within it. So there's ways to be inclusive of the ethos and heart and soul of what it is you're building as a product and marrying that with something that's highly functional and has great user experience and then adding in the UI of beauty on top. And I tend to always work that way. I work very functional, accessible. I make sure that something is solid in terms of a foundation before I go building a house on it. Noel Minchow: Yeah, I will say I think it is a scale and I think we've worked into that nicely. I find that where I usually land on the scale is I look at how much time I know I'm going to have to dedicate to a thing and I make sure that the function is there first if I know I'm going to have limited time. If I know it's something I'll be able to maintain and will be able to pour some love into it, I'm a little bit more willing to go in and sprinkle some magic or whatever the term we used was on it. But my fear is always starting to do that and then half-assing it because I don't have enough time. To build a nice UI, it is a large amount of work. So I always err on the side of make sure the thing works well enough and then if I've got time, start to go in and add the magic. Emily Ketner: So I think Adam, you said it's all about balance, right? And we actually did get another question from Renee and they asked how can they balance creating a site that isn't too fancy or too boring while maintaining a natural user experience? So maybe we can get into the more nitty-gritty of what does that actually look like when any of you are developing a site? How do you make sure that it's still a beautiful looking site while it doesn't get lost in like Adam, you're saying things floating around everywhere and you can't even click anything? Adam Argyle: The way that I work, like how you mentioned in the beginning, it's called OpenProps, it has a lot of my base layer design thoughts in there. So my inputs aren't as boring as the regular inputs. My buttons aren't as boring as regular buttons, but they aren't extravagant. And then I also only provide a couple of surface colors and a couple of text colors and they are adaptive to light and dark. And so when I start a new project, it's not exciting, but it's certainly not boring. I like iterating in this space. This space gives me something that I don't have to rework a lot to make change. I get to rework something and I get to work very structurally. I get to work on this foundation or maybe the two by fours of the home, but those two by fours that I'm grabbing, they come with a decent amount of beauty innately in them. And so as long as I'm using field sets and creating harmonious relationships and orchestrating UI components, these things can all flow together and look natural together at which point I'll come back to them later and iterate on the design and then iterate again. Because that's the other thing is like UX, that's very subjective, but it's not as subjective as exciting colors and stuff. And so that's the other part of this that's hard is you might be iterating in your design, you might be a fit... I don't know, I've never seen this person's work, but I could imagine two different types of this person and one of them could be phenomenal. Their UI is just killer and they're the type of designer that's just never happy with what they make. You stare at something too long and it always gets ugly in a way. And so it can be nice to show it to someone else and be like, oh, it looks great, and you're like, cool, I'm just going to cool my jets then at home and focus on something else because I've really done that button too many times. All in all, I find that a foundation of just a couple of colors and some good spacing and some good layout can really get you super far in terms of UI beauty because remember being minimal's also, a lot of the difficulty of having a well-balanced, good-looking design is there's space around it. It's not all condensed and doesn't look like the tools. It looks like you disguised it. So try to find a healthy foundational starting place, that's what I would say here. Stephanie Eckles: Adam mentions spacing and again, just from my own viewpoint, typically not a designer, I was thinking about how a combo of this question in the previous one where maybe just a little hesitant to use a UI kit and I can understand that, but to Adam's point, having something that gives you that solid foundation and then you bring in these other stylistic choices. So my history, I grew up with Bootstrap, right? Every site I was in, every site was Bootstrap and Bootstrap's a phenomenal UI kit, like the bare bones foundational building blocks are phenomenal, but you can make a very, of course not attractive site with Bootstrap usually because your key elements are spacing and typography. I think we're all going to end up saying that a whole lot. And so spending time maybe on those areas or just identifying for yourself, what areas do you feel you know least about when it comes to user experience and design? For myself, I at least started having to learn Figma last week. So I was watching Figma tutorials and I hadn't really considered that for myself as an avenue of learning more about design, listen to more designers. It sounds sort of obvious, but when you're maybe working more siloed or you don't have ready access to mentors who can help guide you to some of those resources, that's where I usually felt trapped in my design is kind of not knowing where to go. And so I just basically am encouraging you to reach out, find more resources, maybe look a little beyond your usual bubble. Twitch streamers would be another thing that I randomly found over the pandemic. Just looking outside first sources of inspiration, seeing what little tips and tricks you can start incorporating into your work and then that will help you build those layers. Stacy Kvernmo: To add to that, I think inspiration is so important when you're talking about the difference between making a boring site and one that's too fancy I think was the word in the question. And what I like to do is as a user of the web, I will take a screenshot anytime I see a post date that looks a little extra special and I was like, what is going on here? This is capturing my attention. I take a pretty closely zoomed up picture, screenshot of just that little piece, maybe the author name and title, but not necessarily the entire page. So I have this huge library here of inspiration, of just little snippets of things that I found interesting that made what might have been a boring blog site, a very little nice page to look at. So after collecting all of these little pieces for years now, I'll open that up before I do a new design, just kind of browse like, oh, what's here? And it's not stealing because I don't have that exact screenshot up while I'm designing in a canvas. I just look around and it's like what was memorable to me? If I zoom through it and I'm like, oh yeah, I remember how this site had amazing footnotes for instance. And then I look at my canvas and I'm like, what can I do for this brand and how can I meet these goals that will bring this little piece? I always like having a place you can go to get that inspiration because a lot of websites are kind of just ugly. So if you do find one of those special ones, I think to save it and refer back to it later or from time to time, it kind of inspires you to do something creative on your own work. Emily Ketner: One of you talked about iterations and I know Stephanie you are just talk to other designers, watch other designers, Stacy talking about taking screenshots and stuff. One of our listeners asked, one of the biggest traps I fall into is falling in love with the first iteration of a design that I'm involved with. Are there ways to avoid this inclination both personally and when working with others? Stacy Kvernmo: I think having awareness that that's a thing that you may tend to find yourself in that situation is the first step. So that's great. I also think if you have the opportunity to present the design yourself, and if you can present it in a way that explains every design decision that you made and how it meets the goals of the project set out in the brief or whatnot, then you might have a better chance of convincing other people to love it as much as you do. But if you go into these meetings and say, do you like it? And you're asking for approval, they may look at it in a different way. She's asking if I like it or if I don't like it, instead of, do you think that this component here communicates what you want to your audience at this point in time or whatnot? I think if you are the one that guides someone through your design decisions, maybe you can more easily get them to be on your team with whatever you present. Stephanie Eckles: I was just thinking how I definitely fell into this trap a lot for the first good half or more of my career. One of the things that helped me break out of that is just having the different constraints, whether that was external or intrinsic to what I was building. Sometimes necessity is why you might need to go with that first design, but that's not necessarily always a bad thing. You are still getting experience from that. You're learning how to put design together and you can take those skills to your next one and then you'll start to develop that eye that designers talk about. You'll know the next time around when you're building something really similar, you might start to identify those areas like Stacy was talking about. Maybe you can notice this little thing could be a little more special and then you start to just build your general repertoire of what you can pull from, whether it's stuff you've seen, sources of inspiration, and then you can come back to your design later and have something more readily in mind of what needs to be tweaked. But definitely getting feedback if you're able to. I know that is not always possible. Again, if you're solo or aren't necessarily in a team environment. We tend to think that everybody has a team with them, but of course that's not always true. But even just asking a neighbor, someone else in your household, especially for a quick gut check on usability and that can help you determine your design's overall effectiveness as well. Adam Argyle: I'm slightly baffled by the question because I tend to hate v1. V1, I don't hate it. V1 for me serves a purpose, which is first pass. I'm going to make a sweeping generalization. It's also kind of a joke so just so you know. It's like the only time I see this where v1 is the best version of something is bands, their first albums, it's the only time. It's their first album was awesome and then they made a second one, you're like, ew, what you do? But with tools or building apps, I like to think of it a lot more in a real world, would you like to drive the first version of my car? Everyone's going to be, maybe, probably not, dude. That's because the first version of my car should be the first version. We all know the first version is massively covered in mistakes and learning opportunities At least this is how I generally look at them. So maybe I look at a lot of the stuff I build with a growth mindset, probably sprinkled with a little bit of the design could be better, which it always could. So I have to balance that. But I love v2 and then I always love v3 even more because v3 to me feels like the one that is what v1 should have been. So yeah, this can come down to timelines and stuff like that. You don't always get the convenience of making a... most of the time you're always shipping v1, which to me is an annoying thing of the software industry. I'm like, why are we shipping V1 everywhere? I don't want to use your v1 vacuum. It's probably faulty in some way. But we constantly ship our v1 and I like to look at it as a stepping stone instead of something to cherish. And maybe this is from going to design school too, where critiques are gnarly. You show a version of something to somebody and the more confident you stand there and go, this is the one, this is the final version, I'm so stoked on this and everyone's going to show me, yeah, you missed that and that and that, and you're going to sit there and it's going to make it more crushing than if you had gone into it in sort of a growth mindset and been like, oh no, my v1 is all right, solid start or whatever. And then as you get the feedback, all you can think about then is how do I make it better as opposed to, so you're not going to defend it. I have a feeling that you might be blocking or defending your designs out of a personal preference thing, and I love putting my designs in front of, like Stephanie's saying... in front of everyone. Put it on someone else's phone, open it up at someone's else's computer. That's all it usually takes. You're like, oh yeah, can I see it on your PC over here? And you open it up, you're like, Ooh, there's three mistakes I need to fix right now. So to me, I'm constantly in this state of change and rarely label something v1. Noel Minchow: It's tricky. I understand being tied to things. It looks pretty good. It's like ripping a bandaid off to go in and start tearing stuff apart and trying to get to v2. But I feel like if you're the kind of person that gets stuck in that rut, just being aware of it, and it sounds like the asker is aware of that, their tendency to stick with what they've got. So yeah, just keep it in mind. Don't be afraid to experiment. Stacy Kvernmo: If this is coming from a point of view of someone who's actually doing design in a design program, your design is never really going to look like the way you designed it in that design canvas because there's so much that changes once you get it into a more responsive and interactive environment. The tools for design are getting better, but there's still not that sense of scale relative units in all the different states of interaction that you can actually do on the website. So if that helps you get over the fact that this first version of the design isn't perfect, it's never going to look the exact same. So taking all of the feedback in and then applying that, maybe you can start thinking about it that way instead of just being personally crushed, just realizing that this is part of the project and part of the process and then it'll grow and iterate over time. Emily Ketner: Pivoting a little bit, we're going to go into little trending topic. Johan asked, will AI ever be able to do to UX and UI what has done to art and text generation? And if so, how far away is it? Noel Minchow: I think it will, but with the caveat that I think that what AI has done to art and text generation is not that interesting really in terms of deliverable products. So that's to say that I don't feel like right now our large generative models are not going to spit out like a Steinbeck or a Van Gogh anytime soon. I think we'll kind of see that same pattern with UI UX designs like, oh, here's a template, but it'll look like any other template. I think that the human element of all of these endeavors is still pretty key, especially for something that really speaks to somebody you're like, oh, this really fits the space and captures the emotion that I'm feeling around this thing. So I feel like there's a larger philosophical argument we could get into here, but I think there's a possibility we'll have tools that will aid designers and front end engineers and stuff just like we're seeing across the board right now, but I don't think it'll be any more displacing on delivering final product. Emily Ketner: Similarly, we got another AI question. MD Abdul asked that with the rise of AI and machine learning, it's becoming increasingly possible to tailor experiences based on user behavior and preferences. How can we leverage these technologies to create more meaningful interactions with our users? Adam Argyle: The camera didn't replace the photographer. Geo cities didn't replace the web developer. Neither did Wix. Figma didn't replace the designer. Prompt engineers aren't going to replace front end engineers. A lot of the stuff that gets generated right now, it reminds me of the Waterfall process versus Agile. If you ask for something, the thing disappears for a while and then drops it on your plate and it's impressive when it drops it on your plate. But then as you inherit this beast and start to uncover the inner workings, you might find it takes you twice as long to tweak it and tweeze it to be what you finally want then to just have started with something from scratch. And so I think just how I like to think about the housing is in a similar thing where we have all these machines, all these tools that can build houses, and what we've seen is that sure, some houses are being stamped out by factories. They work fine for people, it's almost like getting a website built by Wix. But at the other side of this thing, we all know that a home can have many intimate moments of design and architecture and joy. I love humans. I just think people are amazing. We're phenomenally unique and unpredictable. And AI is going to be the opposite of that forever. It's all it can be. I guess it can play games better than some of the chess people, but at the same time all these tools and all these attempts to... there's been page builders forever. The two years or something after the first website was ever made, there was a no code tool. That was over 20 years ago and you still see coders... of course you do. This stuff seems like very capable, but at the same time, we're not going to see swaths of engineers not get jobs. If anything, we're going to see new types of jobs. We're going to see people continuing to maintain systems as well as... and people are going to be maintaining AI created systems. I do not want that job. I think we're going to be picking up a lot of AI pieces for a while, which is going to simultaneously push us into the human side of things that you can't replace the human, it can't replace our mind. There's going to be parts of it that you can, the jobs will shift. I assume growth will happen instead of shrinkage. And yeah, it'll ultimately be positive as we all look inward into what it is that we bring intrinsic to the table as a unique weirdo human. Stacy Kvernmo: I'm nervous to say anything because a year from now I'll look back at it and say, oh, I thought that was funny when the robots weren't going to take over for a while and they're already taking over. I've been using ChatGPT for a few weeks here just to help with anything that you would Google if you ask ChatGPT the same type of question. If you say, I need a goal file to compile fast and minify it and then change its name and then pick the media queries and group them all together, it can do all of that until it can't. And then it always errors and then you will paste the error code and it's like, oh, I'm sorry, I meant to grab this package. And then it gives you a new goal file. And it's just been really interesting to test it out. But I think it's going to be brilliant at a few things like that in the short term where it can help you do things that might have taken you a little longer and that will save you time in order to create those more meaningful interactions with your users if that is what you're looking for. But I think you can think of it right now as an assistant, something that might get you a little headstart, but I don't know how much you can actually rely on it because even when it does spit out more code for me, it's always stuff I would rewrite. But it can give you the idea. Or if you're not sure how to convert from one templating language to another one, it's really good at that kind of stuff. Emily Ketner: All right, just want to take a quick second right now to plug LogRocket. LogRocket offer a session replay, issue tracking and product analytics to help you quickly surface and solve impactful issues affecting your user experience. With LogRocket, you could find and solve issues faster, improve conversion and adoption and spend more time building a better product, which is what we're trying to do at all times. Back into our questions, we got quite a few questions about accessibility. The first one comes from Bruno who asks, how do we approach accessibility? I understand it's a very hard topic, but in this day and age, accessibility should be one of the core concerns while designing UI UX yet I feel way too often is either ignored or brushed over by designers, developers, and managers. Surely there is a better way otherwise we need to build one. Can we talk about why accessibility is so important, but designers often feel stuck like this when they're trying to implement it? Stephanie Eckles: So I empathize greatly with the fact that accessibility is hard and even beyond that it is difficult for the outcome of a product to be accessible without solid collaboration between design and engineering. And I have been in environments where that's possible in environments where it's less possible. I feel a lot of ways about this, but one of the things that I would encourage is first of all, break down any silos that you can and try to get that collaboration. If you are the designer, find a way to speak to your engineering team. If that's not possible, then spending some time learning about what it takes to make an interactive accessible experience. On the surface layer, your choosing type and spacing like we talked about, choosing the colors. Your design tools can get you part of the way there. For example, there's really no reason not to have poor color contrast when there's 1,000,001 ways to check that. But when you learn a little bit more about how that experience comes together, you also can learn ways that you might need to alter structure of how you are designing something. I've seen very data heavy dashboards for example, and it's difficult as an engineer approaching those layouts when you're not sure what's actually a headline here, like semantically, what is my mapping here? And so as a designer, if you understand those differences yourself, not that you have to code a website, that's not what I'm saying, but understanding that semantic underlying structure, the different heading tags, the difference between a link and a button at least on a surface level. So you can communicate properly between yourself and engineering teams, what those requirements are, the expectation for that user flow, but then be receptive and open to hearing when something may or may not work. And having that collaboration, you can fix a lot of accessibility in design and it's not always easy to identify that until you really spend time understanding how that's going to translate to the page, what that means for the user experience, how a screen reader is going to approach that versus a user who uses voice control or uses their keyboard to navigate. So being exposed to more information about accessibility is going to help you bring those considerations into design and that's always going to bring a best guess at making an accessible product at the end. Stacy Kvernmo: Sounds like part of the question here is also asked to get stakeholder buy-in on why accessibility is important. I think people sometimes look at accessibility as a way to make your website accessible to those only who use assisted devices. And that's not necessarily the only way to look at accessibility. If you're trying to convince, for instance, someone who has is paying for the budget of this project, then maybe you can tell them how filling a site in an accessible way will make it also accessible to more people and it will also make it more accessible to SEO. So their site will be more likely to be found. And also when you code your site using the correct semantics and markup, your site is not only something that is now consumed on one specific screen or device, all of the information on your site can now be pushed to all these other channels. You can ask your home assistant or Google Home Hub like a question and if your site isn't marked up in a correct way, then it might not be able to answer you at least as well as a site that was coded and well designed may not matter as much there, but when you work on the team, all of these pieces play a role in that. So I think if you can convince the stakeholders that more people will be able to use your site because of its accessibility, then that's a win for everybody. And the web is accessible by default and it's just when us humans start getting in the way, that's when we tend to ruin things. Emily Ketner: So you talked about convincing the stakeholders to implement more accessibility and make it more accessible. Also got a question of just like why do we think that so many of these stakeholders don't want to implement accessibility? I know when I was working for a blog, accessibility didn't always rank the highest for our blog posts. And why do we think that we see this disconnect of everyone's like, we do need accessibility, but then when it comes time to implementing it, people don't want to do it? Adam Argyle: A lot of it is they don't see it. If they're not seeing it, they're not feeling it, then to them it doesn't exist. It's not in their mind. And like Stacy was saying, a really good first one is to be like, well, there's a really big other countries CEO stakeholder, some of them are bigger than ours. If we make it accessible, multilingual will get a lot more users, a lot more money will flow through this site. So you can foot in the door there. The strongest foot in the door I've ever seen to convince stakeholders is bring someone in or hire out for a 5 or 10-person UX study and have them watch at least one video. It's gut-wrenching. No one, unless they're a heartless person, can watch someone use a site. So that's the other thing you can do here too is you can ground it in moments because the moments make a lot of sense. One of them is, Hey, we're a blog. You know why this needs to be screen reader accessible isn't just for X, Y and Z? I'm in my car and I can't read it but I can listen to it. So I'm going to play this. I'm an able person using a screen reader to listen to my blog post. That's a cool moment. You're reaching far beyond just the narrow-minded use case you're trying to sell someone. You're like, this thing is bigger than it sounds. And grounding them in moments, having them see someone. The best and coolest thing we had was a blind guy came in with a bow tie every day and he would use our UI and he was so nice and so cool, but as soon as you watched him struggle or whatever it was, you were, oh dang, I have work to do. And it was awesome. It grounded you and anyone else in the process into a purpose. Like I'm saying, if they don't see it, they don't feel it, it's not in their perspective. You have to get it in the perspective somehow. So there's accessibility beyond just disabilities. You have accessibility of content internationally, you have accessibility in all sorts of different ways. And so yeah, the goal is to make money from people. And I think there's a lot of unfortunate perspectives that if you're not some abled iPhone holder that you don't have money and those people are going to fail in their own ways in their business because of this lack of perspective and it's hard to convince them otherwise. It's a bummer scenario we're in that we always have to fight for this because it seems so obvious, but I think everyone's taken shortcuts. They want to use AI to generate their site. They want to take a pill to get rid of something, right? And the nuance and the intimacies and intricacies have everything that make UX what it is not a pill solution. These are things where you have to sit down person by person, scenario by scenario and make it work out. And so yeah, it's a human-centric practice. If you bring the humans in that you want to have those good moments and show them that they're having bad moments, it can be really powerful. Emily Ketner: You mentioned how sitting people down and having these moments of experiencing how it's not accessible. We did get a question from Mitchell that asked, do you have any tools that you use specifically to evaluate accessibility? Adam Argyle: Yeah, I've been learning different screen readers for the past few years. I try to learn one new hot key a week, usually on my macros voiceover or on my Android phone. So I try to use the ones that are built in that aren't paid because I feel like those are the most accessible that you didn't have to pay a hundred bucks a year or whatever to get them. So learning and using the tools will open your mind up in lots of really cool ways. You actually find out there's some power tools in these. These are not limited. Okay, screen readers are not some dinky dorky thing that can barely use your site. They are insanely strong and the people that know how to work them will make you look slow with your mouse. Go learn screen readers, go learn them on Windows and then you can use tools to help you step into the shoes of these other people. So you've got dev tools that will emulate various deficiencies like whether it's colorblindness, you have dev tools that can emulate different capabilities of a device, different capabilities of preferences, and you can mix and match these things and really step into the shoes of various types of users. Switch computers. If you want to get into UX, you can't read about a lot of this stuff. You really got to sit down and feel it. And this is user experience and the tangibility and the things that you'll learn from getting your hands on the actual tools they're going to use to do it. And I also make one called VisBug has an accessibility inspection tool and it's a Chrome extension launch, Chrome extension. Go to the accessibility and everything you hover on will tell you the color contrast, it'll tell you if there's ARIA labels, it'll tell you as much accessibility information as it can and it's really nice for a code review. There's also automation tools like AI can crawl your site, give it tests, they'll catch some of it, but honestly the subjective, the most meaningful parts of it will probably miss. You need to try these tools by hand. Go learn screen readers. Stephanie Eckles: I'll just give you three quick ones just to get you started. If you don't have anything right now and these are tools in browser. So in your dev tools, some of the browsers have access to the accessibility tree. So that helps you discover what is an element going to be named or interpreted as both the roll, so is it a button and then what is it going to be called? Because that can come from different sources and it might not be expected. And then in Chromium browsers, you have the wave extension, the accessibility insights extension and the AX extension. Those are all free or have free components to them. They're in the category Adam described as kind of AI, but they're going to catch your low-hanging fruit. They're going to catch the items that are routinely the top errors reported for accessibility year over year on the top million websites, which actually uses the WAVE accessibility checker. So it's going to get you that foundation. You can also incorporate a version of acts into your pipelines if that's the thing your team has set up. And so being familiar with those, but also understanding that as Adam said, they're not going to catch everything. And the other critical thing is they're only going to catch things in the current state of your page. So if you have a single page application and you have modals and then panels and whatever else coming in and out, you'll have to run it for those different views. It's not going to be aware of those workflows. So just something to keep in mind if you do choose to use those tools, it's only going to capture the state of your page at that time, but it's a good place to start and will at least help you make steps in the right direction. Stacy Kvernmo: I use a lot of tools, but like Adam said, I think the most meaningful change is understanding the context around things. So if you're approaching this as a designer looking to learn more about accessibility, and Stephanie mentioned that there's no excuse I think to have poor color contrast at this point. I believe that was the quote and I agree there's tons of color contrast checkers built into these design tools nowadays. I love the Mac app contrast. It's a little color checker in your top toolbar so that you don't have to be in one specific application to use it. You can kind of test it anywhere. I also have used, I don't know if I say Coally or [CO11Y 00:37:52], it gives you a huge report on the webpage and it explains why each thing is flagged. But with a lot of these automatic testing tools, you're going to get a lot of false positives or they'll make sure to flag every image that doesn't have an alt tag. Even if you wanted it to not have an alt tag because it is a decorative image instance. I think the more interesting solutions are like what kind of labels do you want on your buttons that are succinct, but we'll communicate to a screen reader clearly what they are going to see. So instead of in your design showing read more everywhere, which in the code we can also extend that title, which you won't be shown, but those little ways in how you label things will really matter to someone maybe using the screen reader. Emily Ketner: All right, so we have one more question and they asked, I'm curious to know what industry leaders think about the future of UX UI design. What emerging trends and technologies should we be keeping an eye on and how can we stay ahead of the curve? Stephanie Eckles: I predict or possibly also hope for a bigger focus on user preferences. So an earlier question asked about AI to influence user experiences, but I think just using the tools we already have available or whether it's AR or other methods, getting smarter about being aware of user preferences to ensure they can access content and complete different jobs that they need to do more successfully. Stacy Kvernmo: This is somewhat of a maybe selfish answer, but I've had the privilege of watching Miriam Suzanne at OddBird do a lot of stuff with the CSS working group and all of the cool new CSS techniques that are landing in browsers, they're landing so rapidly. So if I were to give design advice, and I haven't seen a lot of this mentioned, but there's so many different types of layouts we can do now with Grid and we're introducing layers of scope and all these amazing CSS tools that we never used to have access to. So I think as designers, if you don't code yourselves just to be aware of some of these things that are becoming available and thinking about how you can use these more modern CSS techniques within your designs, it's very exciting because we have never been able to do that. It's always like, okay, you set up your design canvas at 10:24 back in the day and that was what you were stuck with. And then responsive design came out and everything just stacks. But now we have amazing abilities to place things in certain areas and it doesn't always have to just stack on top of each other and then stack next to each other. So what can you do as a designer to make that jump thinking through this in a much different way than we used to do it 5, 10 years ago. So I would look more into that if that were you. Adam Argyle: I remember the first time I saw my grandpa get in a car and he sat down and the chair went, [inaudible 00:40:56], remembered where he was, where he likes his legroom to be. That was my first time I ever saw an interface adapt to the human that used it. And like Stephanie's saying, this is our future. Our future is not an ideal single design comp that stacks. The ideal future here is an interface that progressively adds features based on multiple factors, including your preferences. I prefer dark theme during the night, but not during the day. Don't blind me at night with your light theme. There's accessibility and purchase it. There's like influences here beyond just seeming cool, having two themes. It's cool to have light to dark. Actually it is cool, I agree. But it's also, it has applications far beyond that. One of the one that I really like is reduced motion. I love making reduced motion animations mostly because there's a fun layering technique that can happen and it's just a cool little challenge. But then as you study what reduced motions effects are just like a curb cut. So hopefully you all know what a curb cut is in the ground. We make it so that wheelchairs can go up and down off a curb, but who else uses it? Skateboarders, me. Tons of other people use it for something you didn't know. Reduced motion has this case. There's schools that turn reduced motion on for every device because it's distracting to the children. So now you've made a site that's not reduced motion because you don't want people to vomit. You've made reduced motion because you don't care why, you're just respectful. And so you're being respectful to preference. You're upgrading experiences based on capabilities. And I like this. This is where you've got one design and an N number of permutation. N like you don't know the numbers, you don't know how the text is going to fall and that view port at that user's phone if you don't know what internet connection speed they have. But these are all things that, yeah, the CSS working group, the web working group, and we can build experiences that can acknowledge a preference, adapt to it, and continue adapting in phenomenal and brand new ways. The future is a UI that you sit down and it immediately shrinks and adjusts to you. Noel Minchow: Yeah, it's hard to top that. But yeah, I feel like the theme for me is just like the tooling is getting better in all layers of the stack. There's school stuff coming down that make it easier for engineers and designers alike to just do things that are accessible, make sites adaptable. Responsiveness with the first wave of that. But I feel like now we're really coming into that space of interfaces that are reactive to the user. And I think it'll be cool to watch. It's hard to point out specifics because stuff changes so fast. But again, if you're the person that cares about that kind of thing, just keep your eyes on the working groups. Keep your ear to the ground, Google around, watch your favorite content creators. They'll be talking about it. Emily Ketner: I as a layperson, very much enjoyed this conversation because I just started getting into figuring out the accessibility options I have. So it's awesome to hear you guys talking about it and do all the options that we have and hopefully we continue to get better user experiences and design so people like me can enjoy being on the internet more. So I just want to thank you all again for joining us. Before we head out, just want to ask each of you where people can find you, what you want to plug. Stacy Kvernmo: You probably won't find me in many places. I have a Twitter presence, but I don't use it hardly at all anymore. If you like gymnastics, I'm on Instagram at namastacyk. And yeah, check out OddBird if you're interested. And we are building a colored contrast checker for the more modern CSS color spaces. So if you're interested in using something other than just RGB or HSL, if you want to use any of the oklab or LCH types colors, check that out once we launch it, which will be very soon. Stephanie Eckles: I am more on Mastodon these days as well. I'm still 5t3ph, but you have to hunt the address down. I guess you can get to whatever else I have going on. Moderncss.dev would be the hub you can jump from. Adam Argyle: At my indie social network, nerdy.dev, where I post now, where I can own it and no one can take it away if they decide to run it into the ground. And on top of that, definitely shout out to OddBird and Stephanie, both of those are resources with massive amounts of design in CSS and UI information for you. Emily Ketner: Well, thank you all again. This has been really great, very enlightening. And to everyone listening, if you have any specific questions about web development, you can message me, Emily, on Twitter @Emilykketner. We're going to link all these links in the show notes. And if you get in touch with me, we might feature your question on a future mailbag episode or panel episode. Thank you again. Thanks for listening to PodRocket and have a great day.