UX vs UI vs CX

UX vs UI vs CX

What’s the difference and why is each so important?

As seen on The Future of Commerce Blog:

When it comes to commerce, we hear a lot of terms used to describe customer experience.

When it comes to commerce, especially digital commerce, we hear a lot of terms used to describe experience and how it relates to users or customers. These are often used interchangeably and can mean different things to different people.

In trying to understand what these terms mean, one of the main challenges is that there aren’t actually any official definitions. If you Google the terms, you’ll find a variety of definitions proposed by hosts of experts.

While I’m certainly not the ultimate authority on these subjects, I have spent two decades consulting with many different brands on digital commerce, and therefore I’ve tried to explain my definitions of UX, UI, and CX within this article.

UX vs UI vs CX

In trying to consider each of these terms, it can help to visualise them as concentric circles, starting with UI in the centre and working outwards into UX, then finally into CX.

This visualization defines UI as a subset of UX which, itself, is a subset of CX. They are definitely different things, but are very closely related to, and have a dependence on, one another.

 

Let’s consider what UI literally means. It’s user interface; the interface with which a user interacts with a brand within a particular part of their journey.

The obvious example of this is the checkout part of a website. The form fields the user fills in and the buttons that they click on form the UI. A less obvious example would be the shelves that goods are placed on in a physical store, the physical basket that the customer puts groceries into, or the self-checkout.

These are all things that the user uses to interface with the brand during their particular journey. UI is certainly not UX. It doesn’t reflect the entirety of a user’s experience during a particular journey, but it is one (or multiple) elements that are part of that user’s experience.

If we look at the example of someone driving to a supermarket to purchase groceries, they’ll interact with multiple user interfaces during their customer journey.

They’ll park and maybe need to purchase a ticket from a machine, probably use a basket or cart, are likely to take goods from a shelf, and they’re going to go through a checkout. All of these interfaces are separate and physically very different from one another, but they all form part of a single customer journey across a single channel and will influence the user’s overall experience.

User experience is often the term that I find is most confused. Many different definitions of this term exist and a quick Google search can leave you more confused than you were before you looked. (This is where most confusion around UX vs UI exists).

For me, UX is the experience a user has with a brand during a journey across a single channel (this is one important distinction). A user experience will probably involve multiple UIs which are used at different stages of that journey.

We often think of websites when we think of UX, but it applies to all touch points a brand has with a customer and all of their journeys.

Let’s, again, consider the example of a customer visiting a grocery store. Their user experience was affected by how easy it was to park, how easy it was to find the goods they required, the layout of the store, how tall the shelves were, how crowded the store was, and how easy it was to checkout. It could even be affected by how easy it is to return an item later on.

All of the user interfaces they interact with throughout this journey matter, and all have an impact on the user experience.

If we now consider the example of someone buying from the same retailer online, the journey will be very different using a different set of UIs.

They’ll visit the website, either at the homepage or a deeper link, browse, add to the basket, and checkout. One key thing to consider here is that their journey does not finish with the checkout. There’s an order confirmation email, a delivery, a possible interaction with customer services, and maybe a return.

All of these are part of a journey and a user experience, but, crucially, this is a different UX than when they visit the retailer in person, as, in this definition, a user experience is confined within a single channel. Therefore, a user can have multiple experiences with the same brand, with each experience using multiple UIs.

Each of the UIs that contribute to a user experience is important. I’m sure we’ve all used a frustrating UI at one point or another during a journey with a brand. A poor UI can ruin an otherwise positive UX (think of many supermarket self-checkouts when they were first introduced – you could have a great shopping experience until the point at which you tried to checkout and ended up leaving the store frustrated).

We’ve seen that a user experience can be influenced by multiple user interfaces and a user can have multiple experiences with a single brand.

Customer experience should be considered as the sum of all touchpoints a brand has with its customers, across any channel and at any time.

Customers don’t see channels as different and siloed businesses. The brand is the brand. If we shop with a retailer in-store and online, we may have two completely different user experiences, but the sum of all of those experiences is our customer experience.

This is why every single touchpoint and user experience matters. It’s no good to have a great in-store experience but a poor online one, or vice versa. It’s no good to have a great website but a poor delivery experience.

If your 3rd party delivery driver throws the package containing a fragile item over the fence, the customer is going to blame you, and this is going to damage your overall CX, no matter how good the purchasing experience was.

If we consider the examples of shopping with a supermarket in-store and online but also add the email marketing I receive from them, the petrol I purchase from them, the TV adverts I see, as well as other services such as insurance and credit that I buy from them, all of these separate journeys, touchpoints, and user experiences form the customer experience.

Illustration showing User experience, user interface and customer experience

UI is part of UX is part of CX

UI, UX and CX are very different to one another, but are intrinsically linked and wholly dependent on one another.

A customer experience is the sum of all touchpoints and user experiences that a customer has with a brand. User experiences are contained within a single channel, so most brands will provide customers with multiple user experiences.

A UI is simply the interface with which the user will interact with a brand at a particular point of a journey. Most user experiences will involve multiple user interfaces and a customer experience will be made up of all touchpoints and user experiences across all channels.

In summary, when it comes to UX vs UI, you can’t have a good CX without a good UX, and you can’t have a good UX without a good UI.

More Insights

You may also be interested in...

3 smilies as evaluation criteria, the green one is ticked off

Read more

KPS & thinkTribe: CCv2 Migrations

Together with thinkTribe, we have helped our customers see some fantastic results from their migration to SAP Commerce Cloud.

From reduced operational costs to increases in ROI, AOV and site capacity, find out just some of the results customers have seen by making the move.
UX is part of UI is part of CX

Customer Experience

Create customer experiences that deliver brand loyalty

At KPS, we are on a mission to simplify the buying journey and make your customers' experience more enjoyable. Our unified commerce approach delivers a consistent customer experience across all touchpoints, providing you with an intelligent, integrated and scalable platform for managing all customer interactions. 
Omnichannel Vs Multichannel: The Body Shop webshop on a laptop

Read more

Omnichannel vs Multichannel: What’s the difference?

Cast a wide net, offer a tailor-made experience. Omni-channel and multi-channel are very similar-looking terms that describe subtlety different approaches to the way brands communicate with their customers.

Privacy settings

We use cookies on our website. Some of them are essential, while others help us to improve this website and your experience. With your consent, we use cookies to analyse the usage of our website.

We also use cookies for marketing to help us measure the success of our marketing efforts. In the settings you will find detailed information about the individual cookies, and you can refuse the use of cookies.

You can change or revoke your selection at any time on any KPS.com page in the footer under Privacy Settings.

Essential Cookies

Essential cookies enable basic functions and are necessary for the proper functioning of the website.

Cookie Banner

  • Cookie Name: kps-privacy-settings
    Value: PrivacyLevel_0#a
    Storage Duration: 4 weeks
    Description: This cookie is required to save cookie settings. It is a purely technical cookie.

HubSpot:

  • Cookie Name: __hs_opt_out
    Storage Duration: 6 months
    Description: This cookie is used by the opt-in privacy policy to prompt the visitor to accept cookies again. It is set when you allow visitors to disable cookies. It contains the string "Yes" or "No."

  • Cookie Name: __hs_d_not_tracking
    Storage Duration: 6 months
    Description: This cookie can be set to prevent the tracking code from sending information to HubSpot. It contains the string "Yes."

  • Cookie Name: _hs_initial_opt
    Storage Duration: 7 days
    Description: This cookie is used to prevent banners from being displayed every time visitors access your website in strict mode. It contains the string "Yes" or "No."

  • Cookie Name: __hs_cookie_cat_pref
    Storage Duration: 6 months
    Description: This cookie is used to capture the categories a visitor has consented to. It contains data about those categories.

  • Cookie Name: __hs_gpc_banner_dismiss
    Storage Duration: 3 months
    Description: This cookie is used when the Global Privacy Control banner is dismissed.

  • Cookie Name: hs_ab_test
    Storage Duration: Until the end of the session
    Description: This cookie is used to ensure that visitors see the same version of an A/B test page they were shown previously. It contains the ID of the A/B test page and the ID of the variant selected for the visitor.

  • Cookie Name: __cfruid
    Storage Duration: Until the end of the session
    Description: This cookie is set by HubSpot's CDN provider in accordance with its rate-limiting policies.

  • Cookie Name: ___cfuvid
    Storage Duration: Until the end of the session
    Description: This cookie is set by HubSpot's CDN provider in accordance with its rate-limiting policies.

  • Cookie Name: ___cf_bm
    Storage Duration: Until the end of the session
    Description: This cookie is set by HubSpot's CDN provider in accordance with its rate-limiting policies.

Functional cookies

Functional cookies are used by third parties or publishers to display personalised advertisements. They do this by tracking visitors across websites.

Google Analytics

Cookie Name: _ga
Storage Duration: 2 years
Description: Used to distinguish between users.

Cookie Name: _gid
Storage Duration: 24 months
Description: Used to distinguish between users.

Cookie Name: _gat
Storage Duration: 1 minute
Description: Used to throttle the request rate. If Google Analytics is provided via Google Tag Manager, this cookie is named dc_gtm<property-ID>.

Cookie Name: hide-cookieinfo
Storage Duration: 30 days
Description: Cookie set for querying the cookies.

HubSpot

Cookie Name: __hstc
Storage Duration: 6 months
Description: The main cookie for visitor tracking. It contains the domain, the user token (hubspotutk), the first timestamp (of the first visit), the last timestamp (of the last visit), the current timestamp (for this visit), and the session count (increases with each subsequent session).

Cookie Name: hubspotutk
Storage Duration: 6 months
Description: This cookie tracks the identity of a visitor. This cookie is passed to the HubSpot software when submitting a form and is used for deduplicating contacts. It contains an opaque GUID to represent the current visitor.

Cookie Name: __hssc
Storage Duration: 30 minutes
Description: This cookie tracks sessions. It is used to determine whether the HubSpot software needs to increment the session count and timestamps in the __hstc cookie. It contains the domain, the number of page views (viewCount, increases with each page view in a session), and the session start timestamp.

Cookie Name: __hssrc
Storage Duration: End of session
Description: Whenever the HubSpot software changes the session cookie, this cookie is also set. It determines whether the visitor has restarted the browser. If this cookie is not present when HubSpot manages cookies, it is considered a new session. It contains the value "1" if present.

External media

Content from video platforms and social media platforms is blocked by default. If cookies from external media are accepted, access to this content no longer requires manual consent.

LinkedIn Tag

Cookie Name: bcookie
Storage Duration: 365 days
Description: Browser Identifier cookie to uniquely identify devices accessing LinkedIn to detect abuse on the platform and for diagnostic purposes.

Cookie Name: bscookie
Storage Duration: 365 days
Description: Used for remembering that a logged-in user is verified by two-factor authentication and has previously logged in.

Cookie Name: JSESSIONID
Storage Duration: Session
Description: Used for Cross-Site Request Forgery (CSRF) protection and URL signature validation.

Cookie Name: lang
Storage Duration: Session
Description: Used to remember a user's language setting to ensure LinkedIn.com displays in the language selected by the user in their settings.

Cookie Name: lidc
Storage Duration: 1 day
Description: To facilitate data center selection.

Cookie Name: sdsc
Storage Duration: Session
Description: Signed data service context cookie used for database routing to ensure consistency across all databases when a change is made. Used to ensure that user-inputted content is immediately available to the submitting user upon submission.

Cookie Name: li_gc
Storage Duration: 180 days
Description: Used to store consent of guests regarding the use of cookies for non-essential purposes.

Cookie Name: li_mc
Storage Duration: 180 days
Description: Used as a temporary cache to avoid database lookups for a member's consent for use of non-essential cookies and used for having consent information on the client side to enforce consent on the client side.

Cookie Name: UID
Storage Duration: 720 days
Description: Cookie used for market and user research.

Cookie Name: UserMatchHistory
Storage Duration: 30 days
Description: LinkedIn Ads ID syncing.

Cookie Name: AnalyticsSyncHistory
Storage Duration: 30 days
Description: Used to store information about the time a sync took place with the lms_analytics cookie.

Cookie Name: lms_ads
Storage Duration: 30 days
Description: Used to identify LinkedIn Members off LinkedIn for advertising.

Cookie Name: lms_analytics
Storage Duration: 30 days
Description: Used to identify LinkedIn Members off LinkedIn for analytics.

Cookie Name: li_fat_id
Storage Duration: 30 days
Description: Member indirect identifier for Members for conversion tracking, retargeting, and analytics.

Cookie Name: li_sugr
Storage Duration: 90 days
Description: Used to make a probabilistic match of a user's identity.

Cookie Name: _guid
Storage Duration: 90 days
Description: Used to identify a LinkedIn Member for advertising through Google Ads.

Cookie Name: BizographicsOptOut
Storage Duration: 10 years
Description: Used to determine opt-out status for non-members.

Cookie Name: li_giant
Storage Duration: 7 days
Description: Indirect identifier for groups of LinkedIn Members used for conversion tracking.

Cookie Name: oribi_cookie_test
Storage Duration: Session
Description: To determine if tracking can be enabled on the current domain.

Cookie Name: oribili_user_guid
Storage Duration: 365 days
Description: Used to count unique visitors to a website.

Cookie Name: ln_or
Storage Duration: 1 day
Description: Used to determine if Oribi analytics can be carried out on a specific domain.

Cookie Name: ar_debug
Storage Duration: Session
Description: Supports Google attribution reporting API integration to mitigate signal loss.

Lead Forensics

Cookie Name: __lfluuid
Storage Duration: 10 years
Description: The _lfuuid cookie allows a website to track visitor behavior on the sites on which the cookie is installed. Tracking is performed anonymously until a user identifies himself by submitting a form.

Changing privacy settings

Imprint

Data protection statement