We are going to break down and demystify User Experience in 2021 and show you how Google’s Core Web Vitals and a UX Designer see things differently.
- 5 minutes read
Demystifying User Experience in 2021 [Infographic]

I recently got some alerts in Google Search Console telling me that my readers were receiving a poor user-experience (UX) when browsing one of my tech websites.

A quick look through the Page Experience and Core Web Vitals reports in Search Console showed me the website was poorly optimised, the server took a long time to respond and the visual stability of the blog was compromised.

Google Analytics data also showed the blog generally had a low engagement rate across the board.

website ux user experience fact - bad experience wont return

It prompted me to delve deeper; What is User Experience (UX) in 2021 and what a general website owner such as yourself can do to ensure you are serving customers with a relevant experience that is user-centred and focused on their needs.

User Experience Key Points

  1. Google and Designers see User Experience very differently.
  2. UX is an under estimated investment. For every $1 invested into ux design, it resulted in a $100 return. That a ROI of 9900%!
  3. Loading speed is more important than it ever was
  4. User journey is an important step no one should skip
  5. Google changed from Bounce rate to engagement rate indicating that they too would measure page interaction differently when ranking a websites SEO.

I took the time to collate all of the information I found into a helpful user experience infographic, which can be found at the bottom of this article.

How Google See’s User Experience

Core Web vitals Overview

On May 5th, 2020 Google announced the introduction of Core Web Vitals, a set of metrics designed to help the search giant quantify user experience and its impact on your users when they visit your site.

  • LCP Largest Contentful Paint
  • FID First Input Delay
  • CLS Cumulative Layout Shift

May 28th, 2020 Google further confirmed in an article on their blog that they were going to build on Core Web Vitals and start using these page experience metrics to determine how and where to rank you in SERPs this year, in 2021.

These three key metrics were designed to measure the user experience a website provides and translates to three simple questions;

How fast is the website or webpage? How stable is the website visually? How fast can a user interact with a page?

What are Core Web Vitals?

As I mentioned above, Google now measures the user experience (UX) provided by your website using three user-centred metrics called Core Web Vitals. You can test your websites largest contentful paint, first input delay and cumulative layout shift programmatically using Google’s Pagespeed insights tool.

1. Largest Contentful Paint

Largest Contentful Paint is a metric used to interpret how long it takes for the largest web page elements to load. It’s an accurate test of the overall load speed of your website’s pages.

2. First Input Delay

First Input Delay is a user-centric, page experience metric introduced by Google to measure how responsive a website is to a user. Essentially, it measures how long it takes for your website to be fully interactive to the user.

3. Cumulative Layout Shift

Cumulative Layout Shift is a page experience metric introduced to measure a webpages stability when loading. Lighthouse looks at how elements such as images, adverts and containers shift when loading. For example, if you don’t set explicit heights to images, then they would start 0px later ‘shifting’ to the height determined by the image itself.

How UX Designers See Things

ux designer

Unlike Google search bots, UX designers are not software bots and, see user-experience differently. First off, UX design encompasses the entire user journey, and because of that, it’s a multi-disciplinary profession that spans various backgrounds;

A ux designers skill-set

  • Illustration
  • Software Programmer
  • Interaction Design
  • Visual design
  • User Psychology
  • Copywriting

What is User Experience (UX) Design

User experience (UX) design is term coined by Don Norman. UX design is a planning and thought process that is user-centred and ensures people are served with a relevant and friendly experience. UX is a multi-disciplinary field that covers elements of branding, design, strategy, accessibility, usability and even psychology backgrounds.

The primary goal for any UX designer should be to provide a stellar user experience that is focused on the exact needs of the customer. Solutions are likely to provide elegance through simplicity and user-centred design and a data-driven approach.

UX Designers are focused on the users needs, not yours.

Without seeming rude; A UX designer is not solely focused on what you want as a business although it does play a factor. We are focused on the needs of your users and the overall experience they had when using your website.

User experience design process

After all, a happy customer stays on your website longer. The longer they stay on your website, the more chance of a conversion.

6 Questions for a great website user experience

  1. Is my website useful? Your website, product or content should be original and fullful a need
  2. Is my website usable Your website must be intuitive and easy to use
  3. Is my website desirable Do images, brand and other design element invoke emotions and appreciation?
  4. Is my website findable Content need to be navigable and locatable onsite and offsite
  5. Is my website accessible Your website needs to be accessible to people with disabilities.
  6. Is my website credible Users must trust and believe what you show them, tell them and try to sell to them

Understanding a websites user experience infographic

If you would like to use this infographic on your own website, please feel free to use the embed code below the infographic.

website user experience ux infographic

Sources: web.dev, developers.google.com, usability.gov, interaction-design.org, searchengineland.com, whisperlouder.com

Infographic Embed Code

<a href="https://whisperlouder.com/user-experience-infographic/"><img src="https://whisperlouder.com/wp-content/uploads/2021/04/demystifying-website-user-experience-ux-whisper-louder.jpg" alt="website user experience ux infographic" /></a><br>Infographic by: <a href="https://whisperlouder.com" title="Digital marketing, SEO, UX and Design blog">Whisper Louder</a>

If you found this article or infographic useful, it would be great if you could share it with your friends!

28 Comments

  • I loved you even more than you’ll say here. The picture is nice and your writing is stylish, but you read it quickly. I think you should give it another chance soon. I’ll likely do that again and again if you keep this walk safe.

  • Wow amazing blog layout How long have you been blogging for you made blogging look easy The overall look of your web site is magnificent as well as the content

  • Monitor phone from anywhere and see what’s happening on target phone. You will be able to monitor and store call logs, messages, social activities , images , videos, whatsapp and more. Real-time monitoring of phones, No technical knowledge is required, no root is required.

  • Wow, amazing blog layout! How lengthy have you
    been blogging for? you made blogging look easy.
    The whole glance of your site is magnificent, let alone the content!
    You can see similar: dobry sklep and here sklep internetowy

  • Hey there, I think your blog might be having browser compatibility issues.
    When I look at your blog in Ie, it looks fine but
    when opening in Internet Explorer, it has some overlapping.
    I just wanted to give you a quick heads up! Other then that, amazing blog!
    I saw similar here: sklep internetowy and also here: sklep

  • Thanks to my father who told me regarding this blog, this weblog is actually remarkable.
    I saw similar here: ecommerce and also here: dobry sklep

  • Thanks for wonderful information I was looking for this information for my mission.

  • I was suggested this website via my cousin. I’m not
    certain whether or not this publish is written by
    means of him as nobody else know such detailed approximately my
    trouble. You’re wonderful! Thank you! I saw similar here:
    Ecommerce

  • Hey! Do you know if they make any plugins to help with Search Engine Optimization? I’m trying
    to get my blog to rank for some targeted keywords but I’m not seeing very
    good results. If you know of any please share.
    Kudos! You can read similar text here: E-commerce

  • Hello! Do you know if they make any plugins to assist with Search
    Engine Optimization? I’m trying to get my blog to
    rank for some targeted keywords but I’m not seeing very good gains.

    If you know of any please share. Thanks! You can read similar art here: Najlepszy sklep

  • et inventore sequi perspiciatis ut magni illum similique cupiditate facere iure nulla non commodi voluptatibus repellendus rerum. voluptas ipsum rerum similique dolores sapiente molestias at provident distinctio.

  • vero molestiae nam quo debitis fugiat dolore nihil facere recusandae ut ut quo et quia placeat quae aut provident itaque. alias fugiat quod aut ea voluptatibus earum dicta sunt at.

  • Hello, its pleasant article concerning media print, we all be familiar with media is a wonderful source of information.

  • WOW just what I was looking for. Came here by searching for vpn special coupon

  • Hi there! Do you know if they make any plugins to assist with Search Engine Optimization? I’m trying to get my website
    to rank for some targeted keywords but I’m not seeing very good
    success. If you know of any please share. Cheers! I saw similar blog here:
    Backlink Building

  • Hi, Neat post. There’s an issue along with your website in internet explorer, may test this?
    IE nonetheless is the marketplace chief and a huge element of folks
    will miss your magnificent writing because of this
    problem.

  • Appreciating the time and energy you put into your website and detailed information you present.
    It’s awesome to come across a blog every once in a while that isn’t the same unwanted rehashed information.
    Excellent read! I’ve saved your site and I’m including your RSS feeds to my Google account.

  • Hi, I think your site might be having browser compatibility issues.

    When I look at your blog site in Firefox, it looks fine but when opening in Internet Explorer, it has some overlapping.
    I just wanted to give you a quick heads up! Other then that, excellent blog!

  • Hello! I’ve been reading your web site for a while now and finally got the bravery to
    go ahead and give you a shout out from Austin Tx! Just wanted to mention keep up the fantastic work!

  • Wow, superb weblog format! How long have you ever been blogging for?

    you make running a blog glance easy. The overall look of your website is fantastic, let alone the content!
    You can see similar here dobry sklep

Leave a Reply

Your email address will not be published. Required fields are marked *