What’s the difference between UX and UI?

Google caused a stir in mid-2020 when it announced an important update in its algorithms. In addition to high-quality content, marketers would also have to focus on user experience.

In its guidelines, Google defined three ‘core web vitals’:

• Time taken for largest content elements to load
• Time between elements loading and the ability to interact
• Obstacles to user interaction e.g. elements blocking others

We’ll outline the technical specifics of this update below, but first, it’s important to understand the key principles of user experience, and its sister, user interface.

What is user experience?

When it comes to designing a website, app or other user software, user experience refers to making things as simple as possible. User experience experts are not designers by nature; rather than making a tool aesthetically pleasing, their first concern is to make sure it works.

This starts with customer research — understanding exactly what users want to gain from a website or service. The next phase is usability testing, ensuring there are no barriers to giving the customer what he/she wants — and indeed, making sure the site converts.

In digital marketing terms, a UX designer may focus on issues such as:

• Simple user navigation e.g. accessible menus in both mobile and desktop
• Slow loading pages
• Broken pages or bugs preventing app pages loading
• Elements that may obfuscate buttons or other calls to action

The UX designer needs to get into the mindset of the user. Whereas a web designer might be concerned with website structure, the UX designer needs to ensure users can navigate through these structures easily.

What is user interface?

Rather than being completely separate from user experience, user interface and UX complement one another. Like web design, which focuses on structure and aesthetic, UI focuses on the visual elements. Specifically, it focuses on how these visual elements can elicit a response in users.

User interface designers will need to have an intrinsic understanding of psychology, and how design elements can impact buying decisions. They need to stay true to the brand, while maintaining the principles of UX. User interface design might comprise:

• Colours and photography
• Font styles
• Graphics, icons and illustrations

These designers want the user experience to be pleasurable. The user interface needs to look good while it serves its purpose. It also needs to engage users, for example through push notifications or ‘gamification’ — turning mundane tasks into games.

Keep in mind, also, that user interface isn’t the domain of web design alone. There are graphical user interfaces, like a computer desktop, but there are also voice controlled interfaces, and even gesture controls.

Why are UX and UI so important?

The modern-day digital user has little patience. Depending on the source you consult, you can have anywhere between three and 20 seconds to get your users’ attention once they land on-site. This means your digital marketing approach needs to be two-pronged: you need to have valuable content, and it needs to be accessible.

With thousands and thousands of competitors vying for your customers’ attention, it’s easy for visitors to go elsewhere.

Accessibility

Not a minute too soon, digital accessibility is becoming increasingly important. Your content needs to be accessible to everyone, so crucial elements like alt text will ensure you reach as many users as possible. The Web Content Accessibility Guidelines explain this in more detail.

Cross-device use

Remember how we mentioned that voice assisted technology is part of UI? By 2024, there will be 8 billion voice assistant devices in the world, so it’s time to adapt for the future now.

SEO considerations

Remember, Google wants to deliver the most useful pages for all search engine queries. Not only should these pages have great content; they should also not inconvenience the user in any way. We’ll see more of this in 2021 with the latest Google update:

Watch out for the Google page experience update

In addition to standard checks like HTTPS for web security, and mobile optimisation, Google will be running three more checks to rank sites. These are known as:

• LCP: the largest contentful paint refers to the largest piece of content on a page. If it takes too long to load, this could affect your rankings.
• FID: the first input delay is the time it takes between all of your elements loading and the ability users have to interact. This should be milliseconds, but sometimes, there are non-visual elements which could slow a page down.
• CLS: cumulative layout shift refers to elements moving around on a page. Google gives us a great example with a simple GIF, outlining the difference between deleting an item and adding to basket. Sites should be designed so that there is no overlap.

You should also watch out for too many pop-ups. You can use the Google Lighthouse tool to check your site’s current performance.

How can I fit UX and UI into my strategy?

Both user experience and interface can have far-reaching effects on your existing and prospective content.

SEO quick wins

With existing content, check to see if you can snag any SEO quick wins. Simple changes like minifying CSS may speed up pages, satisfying the new algorithm changes.

Consistent branding

Prospective content needs to be reflective of your brand. For example, if you’re branching out from a website into a mobile app, you need to make sure your colours and typography are consistent.

A/B testing

Other ways to test UX and UI include A/B testing. This serves two different versions of the same content to different users. This may help you to determine user journeys, and identify any issues before you launch further campaigns.

Optimising for voice search

You may have spent considerable time on standard search engine optimisation, but don’t forget that this now transcends traditional hand-held devices. This largely involves many of the same principles, for example, tagging content as rich snippets.

If in doubt, ask us!

As experts in A/B testing and user growth, The Growth Guys are here to help.