James Royal-Lawson
UX Podcast is funded by me, James, and Per, together with contributions and help we get from you, our listeners. You can contribute too – any amount you’d like, however often you like. Or by donating your time, just go to UXpodcast.com/support

Computer voice
UX podcast episode 283.

[Music]

Per Axbom
Hello, I’m Per Axbom.

James Royal-Lawson
And I’m James Royal-Lawson.

Per Axbom
And this is UX podcast. We’re in Stockholm, Sweden. And you’re listening to us from every corner of the world, from Belarus, to North Macedonia. And today, we are geeking out on parts of the user experience that we believe many UXers pay too little attention to. More specifically, core web vitals, which you may have heard of, or maybe even used.

James Royal-Lawson
I have, I’ve heard of it.

Per Axbom
Good one, James.

James Royal-Lawson
Thank you, Per. Katie, Hampenius is a software engineer at Google and is part of the Chrome team, and in particular works with performance, and how that impacts the user’s experience.

Per Axbom
And also, Katie is really good at understanding the target group, and explaining this for anyone who may not be familiar. So get prepared to learn some new stuff.

James Royal-Lawson
So, Katie, for the people out there who don’t know what it is, can you just start off by explaining a little bit about what this thing called core web vitals is?

Katie Hampenius
Yes, so core web vitals was announced about a year or two ago. And the idea behind it was that in the performance community, you know, for a long time, there’s been a lot of discussion over like, which metrics should you be measuring? You know, everyone says, like, you know, it’s great for user experience when the website loads faster, but like, how do you actually measure that? 

And just like the project of picking, like a way of measuring, because it’s all of these different metrics you can choose like, is a project in and of itself. And so one of the things is, like, why don’t we just, you know, do some research and like pick – end up picking three metrics. And all these three metrics were picked specifically, because they all tie back to a different aspect of the user experience. So the three core vitals are largest Contentful paint.

So it measures the time at which the largest visible element on the page is rendered to the user. A lot of times, if you have a big hero image, or you have a huge block of text, it’s measuring that moment. And we kind of think about that moment that occurs is probably around the same moment that a user would be like, yeah, like this is when the page became useful to me.

James Royal-Lawson
Okay, so it’s like a ta-da moment. So when a when a big bit kind of suddenly jumps out from behind the curtain, that’s kind of what that means.

Katie Hampenius
It’s like, oh, I can see the image that I came here for. I can read the article. So that’s the largest Contentful paint measures. First input delay is measuring the phenomena, if you’ve ever been on a website, and you’re clicking, and it doesn’t do anything and as a result, you probably start like clicking again, and you’re like tapping the button. If it’s not responding, that would be an example of input delay. And so it’s measuring whether there’s that input delay occurring. And to provide a little bit of context, why that delay occurs, if it does occur, typically indicates that there’s like basically more JavaScript being loaded on the page than that particular device can handle.

And so as a result, the device has to finish processing the JavaScript before it can get around to going back and respond to that user action. So you’re going to tend to see more input delay on lower end devices. On a very high end device, you probably won’t encounter it very often. So it’s always something to think about when you’re designing stuff that may work really well on your shiny high end laptop, or the low end phone, maybe a very different experience.

And then lastly, human layout shift measures all the layout shifts that occur more or less over the lifespan of the page, we’ve actually now limited, it only looks at the maximum of layout shifts that occur within five seconds. But at a high level, a layout shift is when content jumps around on a page unexpectedly and in a way that you don’t want. So the best example this is if you’ve ever been reading an article and all of a sudden it jumps around, a lot of times that’s because all of a sudden an ad was loaded or inserted. Or another common cause of this is just like there was an image it was really slow to load and it pops in and it pushes everything else around on page.

James Royal-Lawson
I think of also that thing we see a lot of now is the the cookie banners. So you have the page, you see the page, and then suddenly your screens filled with something asking if you can can accept the cookies or not.

Katie Hampenius
Yes, perfect example. That it’s really like – the podcast to go into the weeds, but that’s something we’ve talked a lot about. Because you see it, especially in Europe, you know, every site has a cookie banner thing. And probably at least as of a year or two ago, I’d say the most common way of implementing cookie banners is to put the banner at the top of the page. And a lot of people, like wouldn’t reserve space for the banner so when the banner loads, everything on the page, you know, jumps around. And so one of the things we talk about is like one of the ways to fix that is just preserve space.

How much space the cookie banner is going to take up, work that into your layout when the page initially loads, or you can use a different style of displaying the cookie notice, so using a modal that goes on top of the page, or I’m seeing a lot more of now is overlays at the bottom the screen. And putting them at the bottom of the screen is great because they’re not going to push anything down on the page when they load. So that’s that’s the background of core web vitals. And now, Google Search takes core vitals performance into account when determining search rankings,

Per Axbom
Right? So the better the metrics are, the better you will perform in Google search as well.

Katie Hampenius
Yes, the rationale being if you’re doing well, on these metrics, it’s indicating good user experience, and users are going to enjoy that and find that more useful than a bad user experience.

Per Axbom
So that made me think of one website I have, I actually have many websites, but one website I have where I purposefully fade in the content, because it’s supposed to give this calm experience. So would that actually be detrimental to the performance in Google search?

Katie Hampenius
You may be getting penalised on your LCP.

Per Axbom
So from experience, I’m trying to make the experience better for what I’m trying to communicate to the user. But from a Google perspective with the metrics, that’s not good.

James Royal-Lawson
Well, Per, I think now’s a good point to maybe ask, how, how do you come to what’s a good value and what’s a bad value? I mean do these three metrics, now you’ve you’ve described for us. But I guess, because it’s Google, I guess, you’ve got some research behind that of why those things in particular impact the user experience, from a data point of view, I guess, or research point of view.

Katie Hampenius
So how these different thresholds came about is a mixture of looking at existing UX research. So for instance, there’s been a lot of research over the years showing that for a system to feel responsive to a user, it should be responding in under 100 milliseconds. And then for stuff like LCP and horizontal paint and cumlatitive layout shift. It was kind of looking at existing performance and then also testing with users what they felt like was a good experience.

James Royal-Lawson
I guess you’ve also seen in the search results that I mean, normally, Google puts of weight into how many people bounce back to search results quickly from a page. So presumably,

Katie Hampenius
I don’t think that was in the dataset, just because I know from working on Google, they try to keep search and browser very separate. So, I’m on the Chrome team. And so I know how to hit Google for the search bar, where I know that I make their announcements, but on our side. So the team that developed the core web vitals metrics is on the Chrome side, and so we don’t have access to that data.

James Royal-Lawson
Yeah, interesting. Yeah. Where the experience, Per to your point, about your website, I mean, yes, you’re you’re trying to make a better experience but I guess ultimately, if that’s something that does show to be a better experience, and I guess the logistical call where there

Per Axbom
There are other metrics that will actually balanced it out probably.

Katie Hampenius
It could be it would all come down to whether that text that you’re talking about that you fade in, whether it’s the LCP element, and it might be it might not be.

Per Axbom
Right. There are so many abbreviations now to learn as well. So, FID, CLS, LCP,

Katie Hampenius
Everybody loves more more acronyms to memorise,

Per Axbom
But essentially, I do think that this is not something that most UXers are paying attention to. What do you think are the most common mistakes that we are doing as we’re designing websites?

Katie Hampenius
Um, so the first thing that pops into my head are images because you know, pretty much every website has images, and I obviously have a biassed viewpoint. I come from the from the standpoint of really being into performance, but I do think it would be useful to more people to just think about, what trade offs and decisions they’re making about images. So the example I’m thinking of is I know sometimes like when working with design, they’re like, ‘Yeah, let’s put the most high res largest image possible on the page.’ And then you know me with kind of my, my foreman’s hat says, no, why don’t we do something smaller? And there’s not like a single right answer.

So for instance, say you’re a retail site, and you want to display the product, and particularly like when the user has clicked through to the product views like yeah, probably, it’s definitely the time and place for a really high resolution image. But maybe on the product listing page where users are scrolling through really quick, it might actually be better for the user experience to have a lower res image because it’s going to load faster, they’re going to be able to kind of quickly sort through more things. So thinking about how you use images and what your goals for those images are, and just realising that there’s sometimes a trade off between image size versus how quickly it loads.

I’m also thinking some of the components that kind of come up again and again and looking at core web vitals are carousels. I think carousels are actually very interesting on many levels from performance from like accessibility. So I think if your site has a carousel kind of looking at it, and, seeing whether its performance, whether it’s a good user experience, and also like whether it’s even necessary.

I know he’s kind of started digging into a lot of the research on carousels. A lot of the studies say like, it’s just kind of like eating up room on the homepage. And I think a lot of times we’re used to like appease different departments. One team wants to be on the homepage, and another one wants to be on the homepage and so we make them all happy by just putting everything in a carousel.

James Royal-Lawson
I think it’s I think I think it’s over 10 years ago now since I started my campaign against carousels, must be decades ago, I wrote a blog article about

Per Axbom
I think I have an episode talking about just don’t do carousels?

James Royal-Lawson
Think we think we might do but,

Katie Hampenius
You’re preaching to the choir. I mean, having looked at a lot of carousel implementations, what we tend to find is they’re – if you think about carousels, they tend to have big images, you’re loading lots of big images. Sometimes the way the slides transition, like not to get too nitty gritty, but they aren’t implemented in a very efficient way. If you’re familiar with like CSS transforms, and using composited animations, like a lot of times the way the slides are transitioned from a code perspective just isn’t very efficient. So a lot of times I think sites if they could, would be actually be better off just eliminating carousels.

Another thing that I think is interesting to think about is how your site uses fonts. I think like sometimes, maybe just me, like you kind of forget about your fonts, you set them once, and maybe you’re not changing them all the time. But they are something that gets loaded on every single page. And something we’ve noticed with web vitals, now that we started measuring these layout shifts, is that layout shifts occurring because a font hasn’t loaded yet is actually like a thing that comes up a lot.

Per Axbom
Wow.

Katie Hampenius
Um, because to kind of dive into like how the browser works. If the font hasn’t loaded yet, it will try to like estimate the amount of space it needs using essentially like a default font. Well, particularly if you’re using like a web font, like you probably want to use the web font because it’s a little bit interesting and different, it probably takes up a different amount of space than whatever, no Arial or whatever it used to estimate. And so when the web font loads, it kind of causes everything to like jump around a bit, because it takes up a different amount of space.

James Royal-Lawson
That makes complete sense. Of course, if you’ve got a site that wants to use it’s brand font. Yeah, and you’ve got your heading, and the heading kind of sits nicely on one row or one line and then suddenly, your brand font actually loads, and they’re much, much more wider characters, then now we’ve got to wrap a word round to the second line. So suddenly, now that that element that’s reserved for the the title, the hitch one or whatever on the page, is now massive and everything else suddenly moved. My God, that’s I imagine that causes a huge amount of disruption to the page.

Katie Hampenius
And as you’re saying, the top of the page, the brand fonts, it makes sense. You’re like, okay, maybe I’ll use like a system font for the rest of the stuff, but it’s our brand. So no, we want to use the web font, and it loads and like I see this a lot like maybe there’s like no drop down menus navigation at the top, and everything just kind of shifts a little bit when that that that font loads in. So I’m really thinking about fonts, and how you use them. And I think if you can in some places, there’s now you know, good API’s for just using whatever the user’s default system font is. It saves you from having to load a font and paying attention to how you use fonts. And then infinite scroll is another interesting one, just taking, you know, paying attention to how that’s implemented. So those are a couple things that come to mind.

James Royal-Lawson
I’m thinking now about as a designer, what kind of questions or what kind of – how would you approach some of these things from a design point of view to, you know, if they think that there’s developers that are presumably going to have a lot of knowledge about these things. And if I’m a designer, and I’m sat here, creating a particular view or flow, what kind of questions or what kind of things are useful for me to bring up at certain points to make sure I catch it?

Katie Hampenius
Yeah, one would be – if I had a designer that raised that, I’d think this is amazing. Sometimes I think there are opportunities to, maybe, if you tweaked their design slightly, the developer is going to be able to go out and implement that maybe without using any external libraries or third party scripts. And kind of being open to the discussion like ‘Oh, is there any little adjustments that we can make where it’s like, you’re building 95% of what was in the initial sketch or anything, but might be able to allow the developer to build essentially, in a way that’s much more efficient. So one of the big things people talk about that are a big source of just kind of websites being slow in general, is having to use third party scripts, and third party libraries. And so sometimes, you can take a step back and figure out if there’s a way to not rely on those, that will serve you well, in the long term.

James Royal-Lawson
I think about this job now, I think about sometimes where you end up in a, I suppose you end up in a bit of a UX corner sometimes you’ve got something you’ve really got to solve, and you’re trying to work out how you design a component to do it. And you know, full well that this is going to be a complex component, but you’re, you’re in a corner, and you end up having to say, look, we have to do this. And then the developer goes, whoa, I have no idea how I’m gonna do that. And then suddenly, you’ve you’ve created a monster. It’s a monster usability-wise, and it’s a monster coding-wise.

Per Axbom
And they pull in a library, which also then makes a test. So how do I get the understanding and empathy to realise and test this as a designer? How do I really get on with understanding how slow it can be for these images to load or, or stuff like that?

Katie Hampenius
If you have the ability to do so I think, you know, trying to use a lower end device to load your code. Occasionally, maybe before you ship something, pull it up, or you know, even if – that would be ideal, you know, kind of integrating that into kind of the workflow. But I just even find, when we get the holidays, I’m helping family members with their computers, and they’re slower than my computer. And it’s always like a very informational experience because all these issues that I find, I don’t tend to run into it, and daily basis, I experience them, and I think it increases your empathy.

And I guess if that isn’t an option, one thing you can look into is in dev tools, you can kind of simulate the experience of being on a slower device or having a slower network connection. So that’s like, a quick, quick fix that you can try that is still super useful. Try adjusting the CPU settings, try adjusting the network settings and you may find that the experience is very different.

James Royal-Lawson
You can throttle the CPU, can’t you in Dev Tools? And yeah, and even the simulated bandwidth. Yeah, so you can make it seem more like how it would be. I really like that.

Per Axbom
I’ve heard that before, but I rarely do it for some reason. But it’s so simple, because you actually have access to it on your computer, you can try it out. So that’s something that you really should put in the show notes. Make sure that people test this out on your website.

James Royal-Lawson
Because because we haven’t mentioned that, that these these core vassals, where do you find them? And I guess the answer is in the, in the inspector in the dev tools that you have inside Chrome and Edge Chromium.

Katie Hampenius
So there’s a couple of ways. So if you go to the performance panel in Dev Tools, you can get the readings. There’s also a web vitals extension, which sometimes, I know if I’m feeling lazy, it’s honestly quite nice, because you just tap on extension, and it shows them. You can also use tools like Lighthouse or PageSpeed Insights. So I’m not sure if you’ve heard of PageSpeed Insights or lighthouse, but they’re actually more or less the same tool. But lighthouse, you run on your computer, and then there’s also a version when you run it on a website, or I shouldn’t say on a website, you can go to the PageSpeed Insights website, type in the website that you want to get measurements on. And that’s called PageSpeed Insights.

And I find that really handy if you’re in a meeting and you want to pull up dev tools and run Lighthouse, just go there. And in addition to giving you information on the core vitals, it also gives you a lot of information like, Oh, these images probably should be compressed more, or these third party scripts are probably hurting the performance of your site. And just like a lot of useful information like that.

Per Axbom
I saw in lighthouse, it would even tell you that there there’s poor contrast between elements as well.

Katie Hampenius
Yes. And also like, great for accessibility, like maybe you forgot to add an attribute or something it didn’t get, you know, caught and code review. So it’s, it’s really good for stuff like that.

James Royal-Lawson
So in the lighthouse report, then as a designer, I can find a bit of feedback on quite a number of aspects of the design I’m working on, is accessibility as well been a really useful thing to get some high level details about accessibility?

Katie Hampenius
I think at the time, I had the categories that does our performance accessibility, SEO, maybe like general best practices. So it’s much more than just performance?

Per Axbom
I was inside Lighthouse now. Sorry.

James Royal-Lawson
I was doing the same thing. I started to open up and look. I suppose typical me and you, Per, just like, ‘oh, box of toys’, and kind of like diving into start looking and seeing what you can find out and do. I think when you do go into to lighthouse and run the report, then it’s presented to you in, I guess, what feels like maybe a sharing-with-people-up-the-chain friendly way. A good way of describing it?

Katie Hampenius
Yes, I think it’s presented, I think in a way that’s relatively accessible. And what you maybe are alluding to maybe not, is you get your Lighthouse score, which is predominently at the top of the page. And I do want to know, although Lighthouse scores really useful, when I Google search, I mentioned that a lot of people care about their search rankings, when Google search, takes core web vitals into account, for determining search rankings, it’s looking at the actual core web vitals, as measured from actual users.

It’s not looking at your Lighthouse score. And I mentioned that because I think that’s a big thing that a lot of people are confused about. And so they’ll try to game lighthouse and be like, Oh, I have 100 score and lighthouse, I’m set. And then a Google search doesn’t care. And so the idea is Lighthouse is supposed to be like a helpful tool, and it can really help you diagnose and identify things that issues and things to fix

Per Axbom
It’s a simulation, yeah.

James Royal-Lawson
I’ve noticed this as well. But when sometimes when I’ve run it, and I’ve had like a video of a bit of a video playing at the same time, because I’m not constantly publicly on my job. So I’ll have something else going in the background. And I’ll notice the scores will be different compared to when I’ve run it, and I’ve had nothing else running on my machine. And that’s, I guess, a consequence of the fact is running, really is running on my machine, and is restricted by the processor and everything that I’ve got spare.

Katie Hampenius
And I took like a great, I guess anecdote about measuring performance in general, it really can vary. If you’re even on the same machine, same website, depending on what else you’re doing, the performance can vary. And so that kind of highlights how sometimes it can be tricky to truly accurately measure performance. And that’s why kind of what we recommend at the end of the day is that sites, set up ways to measure what vitals for their actual users. And this is totally something you can set up. Because you should try to make efforts to maybe like, accurately simulate how a user is using your website, you know, in development, but at the end of the day, you just can’t fully predict.

And I guess another example of this is Lighthouse doesn’t scroll down your page, real users will. And so they’re going to get different things or like, I think there’s a tendency, and this totally makes sense, when you just on your own go to test something you’re probably testing the homepage, you know, and assuming someone comes in at the top of the page. And maybe there is a totally different issue if a user comes in halfway down the page, because they’re coming into some content that is, you know, linked to.

And so it’s really hard to, like fully predict all these different ways that your users will use the product. I mean, you always talk about, you have this idea, ‘Oh, this is totally how the users want to use the product.’ And then like you go to user testing, ‘Oh, like that didn’t cross my mind. That’s, that’s an interesting way of doing it.’ And so like, it’s kind of like that in a way with performance testing. So if you can get data from actual users, it’s just gonna be way more accurate. And actually, I think the lighthouse report should show that I think these days, we keep adding stuff to it.

Let me pull it up the – if not, there’s what’s called the Chrome user experience reports. And it like shares this data, so you can go out and look it up. And that’s actually the data set that Google Search uses. So it looks at that says, are people having fast performance experiences, and that’s how it makes its determination.

Per Axbom
All these are such extremely valuable points, because that is, a lot of people also try and test accessibility with tools. And there are so many other tools that you can do. And you realise that they are, well, that doesn’t really say anything until you test with real users. Good good reminder, for all designers out there just it’s so important. These These look like numbers. And it’s so nice, because you have this red number and this green number, and that’s this site performs better than that site because it has better numbers, but you really don’t know until you actually get out there in real life and test it.

Katie Hampenius
Yes, I totally agree.

James Royal-Lawson
Thinking about that, Per. I mean, yeah, we’ve got these numbers at the top and you say that, yeah, they’d go green, when they’re up towards towards 100. I’m wondering, though, is there any downside with trying to get 100 score on all the metrics represented there?

Katie Hampenius
Ah, in most cases, no. Generally, when I see people trying to make improvements to the lighthouse score, it helps performance as a whole. There’s always going to be kind of those edge cases that like Lighthouse wasn’t designed for, or there’s general best practices. And then there’s like, sometimes we’re like, I’m totally going against best practices but I know exactly what I’m doing. And there’s reason for it. It’s those kinds of edge cases, lighthouse is not built for. And so in those cases maybe the lighthouse scores isn’t the best reflection. I would say, in general, when people improve their Lighthouse score, you see performance improvement,

Per Axbom
I’d say that’s a great exercise –

Katie Hampenius
A site like that starting from like, 20. You know, like, some sites have very low Lighthouse scores. And if you bring up to a 50, or 70, I’m guessing performance is also improved.

James Royal-Lawson
What we’re saying is if you’ve got a score that isn’t a green score, then you should be thinking about what conversations you can have with people in your organisation about those scores.

Katie Hampenius
Yeah.

Per Axbom
And if you on purpose, have a low score, or you decided to not increase it because you know what you’re doing, then you need to document that.

Katie Hampenius
And I would say, I would doubt that’s the case. Probably when you’re you’re starting to hit the 90s, maybe high eighties and you’re like, ‘oh, it’s recommending this thing, but I’m not doing it. I have a reason.’ But if you really are on the lower end, then yeah, i –

James Royal-Lawson
There’s no excuses.

Per Axbom
Yeah. I’m making a website that only three people can use.

James Royal-Lawson
But those three people are happy. One thing I noticed as well, Katie, is that they, in recent times, I’ve seen that the the lighthouse report is pushing, well it’s always pushing better images, like you’ve mentioned yourself, more optimised images. But now something I’ve seen coming up is the web p image format. Now, what’s that? And is it safe for me to use?

Katie Hampenius
So web p, so for many years, probably jpg was the most popular and widely used image format and web p has come about in the past couple years, and compresses better. So I’m trying to think of the statistics off the top of my head, but I want to say it’s around like 20 to 30%, smaller file sizes with you know, equivalent image. And so that’s something where if you do have a large image on your website, using a format like web P can help you shave a little bit off the file size.

Another thing I will mention is that it’s newer, but it’s always got pretty decent support is AVIF is an even newer image format that’s coming out. And I can’t think of the statistics off the top of my head but it actually compresses even better than web p. So that’s just like something to keep an eye out for. That’s pretty exciting.

James Royal-Lawson
So you think it’s safe for me to dig into that and maybe start suggesting that we use it?

Katie Hampenius
Yes. And actually, it’s great thing with both you know, AVIF or webp or any image format, you know, if you’re using the picture tag, it allows you to fall back to different image formats. So you don’t have to worry about if I choose this image format, like what if I have a user on, you know, Internet Explorer eight or something? You can support everyone.

James Royal-Lawson
Oh that’s really nice. I actually didn’t really think about that, that you can – it’s not all or nothing, you can actually say, look, right, yeah, we’re using PNGs because we feel comfortable with that, because we know they work with all our target devices. But you can dare to roll out the newer formats too without breaking things.

Per Axbom
So as a UXer, or if you’re talking to a developer, you should probably make them aware of that as well, because I’m, I’m supposing now that all developers aren’t aware of the new image formats and how you can use them.

Katie Hampenius
Yes, as I said, backwards compatibility is not an issue just to kind of explain how it works. You put like a picture tag on the page. And then within the picture tag, basically put it like a source tag or an image tag. And that allows you to list like multiple image formats. So I mean, you could be like, Okay, we’re gonna put a webp, a PNG. But basically, what the browser will do is, once it hits that picture tag, it will pick and load the first image that’s in a format that it supports. So we’ll just keep going down the list until it finds the format.

So, for compatibility, you probably want to have at least one of the image formats, and something that’s very widely supported like JPEG, but it does allow you to experiment with new image formats pretty easily. And then I guess another thing to throw it out on the topic of images, like sometimes we kind of cloak we’ve been calling them image CDNs. But like these image processing services, if you’re working on a site that has a lot of images, those can be really useful, because it just provides a really easy way to have some other service worry about compression and resizing and all that kind of stuff that doing it once here and there, is fine, but doing it like in batches can become very cumbersome. So that’s another tool to look into.

James Royal-Lawson
Yeah, of course. Because if you’ve got a site that’s got 10,000 products, and each product has like seven images, and you’re now suggesting that you have three versions of them for backwards compatibility. That’s an awful lot of images to handle. Yeah, so that sounds a good suggestion.

Katie Hampenius
If you’re doing it manually, there’s obviously a place in time when you’re working on a small site – it’s easy to forget. Like, ‘oh, like I should compress it. But do you remember to compress it or resize it? There’s a lot of little things that can be easy to forget so using something like that and just automate it. You don’t have to worry about it.

Per Axbom
Okay, wow, so many new things for designers to think about.

James Royal-Lawson
Yeah, nobody’s it’s wonderful inspiration for the kind of conversations and dialogues we should be having with other people in our teams to make the user experience of what we work on better.

Katie Hampenius
This has been great, because I think, ultimately, good user experience, everybody has to be involved. So yeah, like the more people you can get thinking about these different things, it makes a big difference.

Per Axbom
So thank you, Katie, for making us smarter about our websites, and better designers.

Katie Hampenius
Thanks for having me.

[Music]

Per Axbom
So this, this actually got me thinking about how we might be drawing the wrong conclusion sometimes when we’re doing user research or testing because we obviously know that these metrics are tied speed, load times, content jumping around unpredictably, all part of the user experience. And so if you get them right, you can eliminate them as contributing to the overall experience, because what could easily happen is that you draw the wrong conclusions from usage. So if people click in the wrong area, for example, it could be that they actually click there because of a slow font load.

And also, there’s this potential for users, not really to be able to articulate why they are unhappy with something. So they could describe a website as confusing, even when it’s not really confusing in terms of language and structure, but actually, because of how the website is performing in terms of response times and small delays and load times. So I’ve come across this number of 100 milliseconds many times, and I think Katie mentioned it as well. So 100 milliseconds, that’s not something that we are truly aware is affecting us. But it often is.

So when these invisible metrics are affecting us, we often blame our unease on something else, because we want to be able to articulate the reasons for our behaviour. So not paying enough attention to these metrics that Katie is talking about, can cause you to put loads of work into the wrong thing. And some something that actually isn’t the culprit that is causing the problem?

James Royal-Lawson
Yeah, you’re quite right, Per. Some of these things I think it’d be very easy to miss under a layer of something else, whether it’s how you interview people or how they try and express themselves or whether you’re looking at high level statistics that don’t really reveal the true thing that’s happening there. I mean, that’s something I know that I come across a fair bit these days is – In conversations, it’s not unusual to hear someone say, ‘oh, yeah, I forgot we have a cookie banner’. Because of course, when you’re working with a website, then you’ve said yes, or whatever, you’ve answered the question years ago, probably. And I found a lot of people don’t empty their cookies for their own website, on a daily, weekly basis. So you lose that memory of how that it is to experience your website, as a new user come into it for the first time.

And the same goes for the fonts as well. I hadn’t thought about that at all that no, that really blew my mind. The fonts thing, yeah, plenty of times you’re working with, with clients where they’ve got their own fonts, especially for the branding one, though, you know, the main headings and stuff like we mentioned. And that’s something when it’s going to be down, it’s gonna be cached, it’s gonna be downloaded, you’re gonna have it installed in whatever tool you’re working with to design the site. So you don’t think about how slow it might be for that to appear for certain people in certain situations, and could be really disruptive depending on how the actual website is built.

Per Axbom
And so it can feel kind of overwhelming, I suppose listening to this and, and realising that you as a designer, oh, I’m thinking about all these things over here. And now you’re telling me that I also need to think about this as well. And often, that is not really what we want you to feel, but rather that here’s the thing that you actually can impact the user experience, it’s good that you at least have some perspective and understanding of what it is. And then you can start talking about with people having conversations, because these are important conversations to be having.

James Royal-Lawson
Yeah, and I think the Lighthouse tool, or Lighthouse report in Chrome is something that enables conversations, the whole thing with the traffic light system of the report there. If you don’t, if you’ve got red, or amber, or whatever, coming up on that report, you don’t necessarily have to understand the details that come low down in the report, you don’t have to understand how you fix it. But that then can be a start of a conversation with someone who does know what to do about this. And now you’re aware of the fact that it can make a real positive difference to the end user experience.

I still think I mean, there’s some things I think that we can be better at thinking about, not just fonts and so on, but the like the largest contentful paint, having a think about what is the biggest bit of my design. Which is probably going to appear first or later, or whatever. You can maybe put some effort into deconstructing your design and understanding how it will be presented.

Per Axbom
Oh that’s a good one. I like that and actually start listening, listing the elements of your webpage by size. And like talking about each of them and understanding how important is this. Is this the right order for them to load? And stuff like that? I’m supposing the hero image will actually be one of those. That is the biggest.

James Royal-Lawson
Yeah. God, that’s gonna be the big thing for most of us. I guess. If you’re working on a front page of a website, or an article. Yeah, there’s gonna be a big image on a lot of pages. So yeah, so now we’re straight into a conversation about how we deal with that image, because it’s going to be a big part of the page that’s painted. Maybe it does get us into a conversation about image formats. Or maybe we’re the ones providing the images. And now we can, I reckon, according to Katie, and what we’ve looked at, be confident in using web p as an image format.

Per Axbom
And honestly, that’s not the conversation I’ve had a lot with, with people about the web p image format. And given like you check before that it’s actually supported by basically everything that’s been used up there, then why aren’t we using it?

James Royal-Lawson
Yeah, I actually, I mean, I’d heard about it a while back. But I hadn’t started using it because I didn’t think we were quite ready for it. But now in the in the post Internet Explorer edge. It’s yeah, it seems to be really quite safe to use. There was was one caveat, I think was older versions of Mac OS, Safari on older versions of Mac OS. And when I say older, it was pre-November 2020. If you haven’t updated or can’t. So, that feels definitely safe to have a conversation about it now.

Per Axbom
Also appreciated that Katie did mention that it’s really important not to look at just the calculated metrics, but also make an effort to to simulate and test with with real stuff with real devices with real people to get the true insights.

James Royal-Lawson
Yeah. And there you’re into the kind of maturity of your organisation of how far you want to take this. This aspects of web performance and design. But start with the small things. Start with the lighthouse report, and see how you’re doing.

Per Axbom
We did mention in the show that we had previously talked about carousels, I think you found some episodes where we did.

Well, there’s one I think we can we can recommend to listen. It’s from nine years ago now, Episode 57. It’s actually a link show. Back then we had a different way of naming our episodes. So it was ‘James and Per avoid spinning’. And then in that link show, it’s actually we talk about a satirical article that’s talking about carousel first development. I think is what he calls it. Joking on the whole mobile first.

Per Axbom
That would be a nice walk down history lane to actually give a listen. And if you’d like to contribute to funding or producing UX podcast and visit UXpodcast.com/support Remember to keep moving.

James Royal-Lawson
See you on the other side.

[Music]

James Royal-Lawson
What do you get Per, when you melt the Wizard of Oz?

Per Axbom
I don’t know James, what do you get when you melt the Wizard of Oz?

James Royal-Lawson
The Wizard of fluid ounces.