UX patterns that you can implement to achieve a good user experience

This image shows UX patterns that you can implement to achieve a good user experience

while optimizing for Core Web Vitals on your site. When I visit a website. I have certain expectations from the site. I want content that is useful, and interactions that are smooth and predictable. Site owners and developers try different UX patterns to meet customer expectations while also balancing business needs. But the big question is what really makes for a good user experience? Well, there is no right answer to that question. User experience is different for everyone. Great user experience is intangible and can be difficult to measure.

A way to measure the quality of user experience is by answering these three questions. Is it happening? Is it responsive? And is it delightful? And the metrics that correlate to those spellers are Largest Contentful Paint, or LCP, corresponding to loading. The First Input Delay, or FID, corresponding to interactivity. And cumulative Layout Shift, or CLS, corresponding to visual stability.

After research on millions of pages we found that if a site meets the Core Web Vitals thresholds, users are 24% less likely to abandon the page before the first content is painted Such experiences are disruptive to the user, and while they may endure it a few times, but if it keeps repeating, the user may not come back to your site.

So let’s see how this experience unfolds.

Page Load

A user navigates to your site, the static content is rendered first, no layout shifts here. The promotional banner comes in next and the layout shift is introduced. You think this is it and you move on to the content, but no, an ad just popped up and added another layout shift. Nowadays, we are increasingly seeing the addition of informational banners related to COVID causing further layout shifts. The overall impact of each of these shifts is a poor CLS score and a poor first impression to the user.

So what can you do to mitigate this?

The golden rule is to avoid any layout shifts is

Fixed Placeholder

in the active viewport. And that means setting the fixed width and height of the images or ad containers in the active viewports. So when the content comes in it will not cause any layout shift. If you have dynamic content injected below the current viewport,

You can go ahead and resize those elements and it will not impact the CLS.

A question that we get asked a lot is that these banners and ads are injected dynamically and it is impossible to know beforehand what their sizes will be.

This is indeed a tricky question and I want to emphasize that providing a good user experience is everyone’s responsibility. And therefore requires a shift in a business mindset. The website developers, the UX designers, and the marketing folks must align on standardizing the size of the most important content in the first viewport.

So what would you do

if you still cannot get the fixed size in advance?

Min. Height Placeholder

Well, you can set the min. height attribute of the placeholder. With this in place, if the content returned is larger than the main height, you will see some layout shifts but it will not be drastic. To know what main height to use, look into your historical data and see what sizes have been rendered in these placeholders, and adjust the main height based on that data.

Another alternative for marketing banners

Overlays

that we often see are overlays. While they do not impact layout shifts they could impact your LCP if they are too large. Overlays are also not necessarily fixed to the viewport. So for a smooth transition to the content, you can have an overlay potentially scroll with the content and the layout can be updated to insert the overlay inline at the top as soon as it is scrolled out of view.

Another way layout shifts can happen

Empty Ads

is when the ad slot collapses when no ad is returned, pushing the content up. The best practice here is to avoid collapsing the reserved space. You can update the placeholder with a simple text saying reserved for ads, replace it with another image, or even better, set up house ads in the ad server. This ensures that something is always returned for a given ad request.

Prisma Media is a French publisher website. Using the techniques I mentioned they were able to improve the CLS score dramatically. They used aspect ratio to determine the image placeholder size for responsive images, and also added textural content and small iconographies to help users easily identify the advertising spaces. We looked at some UX patterns for optimizing page load.

User Scroll

Let’s look into the user scroll behavior now. User scrolls or infinite scrolls are scrolls using the load more button by themselves to not initiate any layout shifts. The issue arises when you do not have placeholders for the new content that is being injected. So the experience may look like this. The user scrolls down, the footer becomes visible above the fold. New content is injected causing the footer to get pushed down. These individual shifts and infinite scrolls can lead up to a poor user experience and a poor CLS score.

So how can we mitigate the shift?

One, reserve enough space for the content before the user scrolls to that part of the page. You can use skeleton UI placeholders for it.

Two, remove the footer from the bottom of the page, especially for infinite scrolls.

And, three, prefetch data and images for below-the-fold content so that by the time the user scrolls that far, it is already there.

Changing UI on button clicks

Now let’s see how the page interacts on button click. When the user interacts with your page, they expect the response to be instant. Users do not want to wait and keep guessing that this click actually works. And if the response to the click results in a layout shift, it adds to an already poor experience.

These interactions are very critical to your business because if your user has an intent to convert, your inability to provide timely feedback to the user click could result in losing them.

So if you know beforehand that a given interaction will take time to respond and will cause some layout change, provide instant feedback to the user that you are processing the request. Put placeholders for the changed layout so that when the content actually comes in, it does not introduce any further layout shifts.

It is important to note here that you have 500 milliseconds from the user input to make any layout change and that will not affect the CLS score.

If your server is rendering the HTML, consider making the initial stage render with all buttons or controls disabled if those buttons and controls will require JavaScript to work. When the JavaScript finishes downloading and executing remotely the disabled attribute and add the necessary event listeners to make it do something. If the user sees that the button is disabled while the page is loading, they will be less likely to interact with it. And this could help you with your FID  metric.

Apart from these UX patterns, there is so much more than you can do to optimize for the Core Web Vital metrics.

NDTV is the largest media company in India. They prioritize the largest content block by delaying third-party requests and saw an increased engagement and consumption of content directly proportional to increased revenue for their website.

Yahoo! JAPAN is the largest site in Japan and has been working on optimizing Core Web Vital metrics through cross-functional efforts in their organizations. A direct result of these efforts in the news site resulted in a strong return on investment and some great improvements in their business metrics.

Conclusion

if you took three things from this talk, it would be, one, to not insert content above existing content unless it is in response to user interaction. Provide a smooth and predictable experience to the user.

Two, if content needs to shift in response to user interaction, do so immediately. Do not wait for the network request to finish. For requests that may take more than 500 milliseconds to complete, use placeholders to reserve space as the content loads.

And, three, for all interactive elements on the page, ensure that if it looks interactive, it actually is interactive. If you use server-side rendering, consider rendering your pages in a loading or disabled state, and then uploading them to look interactive only after hydration.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s