Imagine you’re visiting a new website page and it’s taking a long time to load.
When the page finally displays, the content moves or shifts around to accommodate images, promotional banners, and other content on the page.
That’s frustrating, it’s not a good user experience.
Sadly, it’s not uncommon. It happens to me every day.
My typical response?
I leave the website, not likely to return again.
Or when I do, I remember the poor experience I had the last time.
And consider what other site has the information or content I’m looking for.
That’s not what website creators want.
When you design a website page with a good user experience, a website where
- Content loads fast
- User interactions respond quickly
- Page layout doesn’t shift
you create a better user experience for everyone.
Wondering what strategies you can use to improve user experience?
Read on to get tips for methods you can use on your website.
UX Patterns Optimized for Core Web Vitals
In her 10-minute Google Chrome Developers video, Web Ecosystems Consultant Garima Mimani discusses steps you can implement to optimize UX patterns to deliver a better user experience, without affecting Core Web Vitals.
Mimani discusses:
- How user experience is different for everyone
- Balancing customer expectations with business needs is crucial
- Challenges in measuring user experience
- Actionable steps you can take to mitigate issues
Key Takeaways
Mimani shared helpful tips and case studies. Here are my top takeaways:
- Providing a good user experience is everyone’s responsibility: designers, developers, and marketing folks must agree on standard content sizes
- One strategy for measuring good user experience is to ask three questions: is the site loading, is it interactive, and is it delightful?
- The Core Web Vital Largest Contentful Paint (LCP) corresponds to the metric of the site loading. In addition, First Input Delay (FID) corresponds to interactivity and cumulative Layout Shift (CLS) corresponds to visual stability.
- Based on evaluation of millions of pages, Google found that when pages meet Core Web Vitals thresholds, almost one out of four users (24%) will abandon the page before the first content is painted (displayed)
- Avoid layout shifts (low CLS) by providing the fixed width and height of images or other containers (for example, banners)
- Consider placeholders with set height for those times when you can’t get agreement on content size (reduces the amount of layout shift)
- For ads on your site, always ensure something will be displayed
- When you use infinite scroll on your site, reserve space for the content before the user scrolls to that part of the page. In addition, prefetch data and images for content that displays below the fold.
- If you know a user interaction takes time to respond, provide instant feedback to the user that you’re processing their request. Don’t leave users wondering if they need to select a control a second time.
- An example of optimizing for Core Web Vitals: NDTV, the largest media company in India, prioritized the the Largest Content Paint (LCP) by delaying third-party requests, which improved engagement and led to increased revenue for their website.
- Avoid inserting content above existing content, unless it’s a response to a user interaction
- For interactive elements on the page, make sure they look interactive
Summary
Creating a good user experience is crucial to users who will return to your website again and again.
By following Mimani’s recommendations to optimize UX without affecting Core Web Vitals—avoiding long times for page display, lack of response from user interactions, and shifting page layouts— you can provide a good user experience and better impression of your site.
Check out the helpful resource list for Web Vitals and optimizing layout shifts on the Google Chrome Developers video page.
