Scott Services: How to fix the top most painful UX mistakes [examples]

In today’s market of evolving website functionality, UX design has become more important than ever to businesses, globally. Here’s a roundup of top UX mistakes and how to fix them.

We want users to navigate our site freely, without obstacles and without friction. If your site makes finding information a challenge, you can bet your bottom dollar your competition already knows that, and is capitalizing on it.

Both UX and SEO are user-centric, which makes them a formidable pair when you get them right.

But get it wrong and you could see high bounce rates, low conversions and even a slight hit on your rankings as Google’s John Mu considers UX a ‘soft ranking factor’.

If you’re finding that users aren’t spending time on your site (or converting) there could be issues. We’re going to help you find out what they could be.

Cluttered navigation

Your site’s navigation is the gateway to your content and service pages. It’s where you (really) focus on building a funnel that is both frictionless and easy to understand.

Your navigation should be an architecture of well-structured, groups of pages; either commercial or informational (depending on your business).

example of cluttered navigation, bad for UX and SEO

Some of the most common mistakes we see are:

Links without value in the main menu
Excessive anchor text
Non-responsive (yep, it still happens in 2019)
Too many sub-menus
Relies on Javascript (with no fallback)

How to fix your site’s navigation

The golden rule here is to make your navigation accessible, responsive and clutter-free.

Think about your categories, your most valuable pages, where users spend most of their time and, more importantly, who your users are.

Forever 21 does a great job of linking through to the main areas of its site in a structured and visually pleasing way.

example of forever 21 good site navigation to main pages

Let’s say you run an ecommerce store for pets (because everybody loves animals).

You sell products for dogs, cats and rabbits. Here’s how you can structure your navigation…

example of good site navigation

Aesthetics are everything

People are visual creatures. We like websites to be aesthetically pleasing.

One of the biggest cardinal sins of UX is poor imagery, color choices and font selection. In fact, I’ll extend that into most areas of any online marketing; social media and display ads.

Here’s an example of all three on a single site:

example of bad site nav, has bad colors, fonts, and images

I don’t think I need to go much further into why this could be improved. But, I will go into the how.

Even the big brands get it wrong…

boohoo example of bad site navigation, how one poorly sized image affects UX of whole page

Notice how a single, poorly sized image has affected the feel of the whole page?

Fixing poor page structure

Things to consider when it comes to site layout are: margins, padding and alignment.

As you can see in the example above, alignment is a big issue and even a small amount of misaligned content/imagery can look unprofessional. Web pages work in columns which provide a structure for designers to create landing pages which can influence users’ focus and attention.

Combining text and images together is normally where layouts can become difficult to manage as we’ve already seen.

Luckily for you, we’ve put together a number of page layout examples below which make structuring your content and images simple.

Image aligned to the right of text:

example of image aligned to right of text

Text on top of image:

example of text on top of image

Text box overlaid on carousel image:

example of text overlaid on carousel image

Working with fonts

When you consider fonts, you need to think about how your content will appear at all sizes. From your header hierarchy to your bullet points.

We recommend limiting the amount of different fonts you use on your site. It’s easy to get carried away to give different sections of your site its own ‘feel’.

Once you’ve chosen a single font family or families, consider how you can create contrast between header and body content.

Single font selections with varying font weights can create a very visually pleasing contrast between sections of your page.

A poor font selection can even make a retail giant, such as Amazon, look untrustworthy and unprofessional.

example of poor font selection on Amazon product page

If you’re struggling for ideas on font pairing, you can find use Font Pair to put together different font types. It’s important to remember that font readability will play a huge part in how users consume content.

Consider:

Size
Width
Paragraph spacing
Weight

If you’re content currently looks like this:

example of how typography can go very wrong

I’m sorry, but you’re doing it wrong.

Even a minor change to fonts can cause the greatest of upsets to users. Just ask Amazon how it went for it.

Most CMS platforms will come with pre-installed fonts, but if you need more of a selection you can always use Google Fonts.

Finally, consider how your font appears on desktop and mobile.

If your font size is too big, it would take up too much of a mobile screen. If it’s too small, users will struggle to read it. It’s worth testing different sizes to cater for overall legibility.

This is an example of how Zazzle’s homepage appears on an iPhone X – using a font size of 18px.

example of site nav on mobile

Page load times

This shouldn’t be news to you by now.

There are multiple case studies available about how load times can impact conversions. So, I won’t go into that here.

The most common reason for page load times being high, is images. Images are something most site owners can change with little dev input. It ultimately comes down to saving the right file type, using the right dimensions and compressing high-resolution to preserve quality, whilst reducing size.

Savings in KB can often make a huge difference.

Take a look at what happens when image optimization is ignored.

example of slow page load times

For the sake of anonymity, we’ve hidden the brand’s identity.

However, this is the page we were greeted with for over five seconds. It’s a medium-sized ecommerce website that caters to children’s clothing.

By optimizing the images, we found that there were savings of up to 900kb – a significant weight lifted off of a browser.

Consider how this feels for users? First impressions are everything. What’s to stop traffic bouncing due to content/images not loading?

Think about that for a second!

How to fix image bloat

Firstly, you need to find if this is an issue.

You can run speed tests using Google’s Lighthouse or GTMetrix to get an understanding of which files are too heavy. It’s simple to find poorly optimized images for individual pages.

For batch analysis, we recommend using a tool like Sitebulb which has an incredibly in-depth section attributed to page speeds.

If your images are already on your site and you don’t really fancy opening Photoshop and resizing them all, you need to run batch compressions to reduce the file size.

There are a range of image compression tools available online, we recommend Compressor.io or TinyPNG.

It’s often thought that compressing images means poor quality. However, take a look at the image below and assess the quality difference for yourselves.

example of image size reduced, image compressor — Image size reduced by 37%, over a 1.3MB saving

For those of you using WordPress, you can use the Smush.it plugin to compress and resize the images on your site.

New image formats

Google Developers introduced a new file format which is considered to be superior to its PNG and JPG equivalent.

It offers fantastic lossless and lossy compression for images.

Shaving milliseconds off your load time, especially on poor mobile connections, can stop a user from leaving your site. Google has said it actively rewards sites that are seen to make incremental improvements to site speed.

The great news?

More than 70% of browsers support this media format!

You can read more about WebP with Google Developers.

Pop-ups

No UX mistake roundup would be complete without mentioning pop-ups.

They seem to get more aggressive and more disruptive each year. You’ll find it hard to come across a website without them.

Sorry Sumo, but this is one of the worst.

example of a bad scroll-triggered popup on a website

This is considered a scroll-triggered pop-up. Whereby, the page waits for me to interact before the pop-up is shown.

There is one major rule that you must abide by: do not disrupt a user’s experience with pop-ups. We know this is a bold statement but… who likes pushy sales?

If you want to help users, do it natively.

Remember, we’re creating a frictionless journey.

How to use pop-ups — the right way

First things, don’t ever use interstitial pop-ups. It will annoy users and could defer the rendering of your page in search engines.

Both are bad for business.

We recommend using pop-ups in a more subtle manner.

Top banners

example of a brand CTA at the top of a screen

A perfect example of a branded CTA at the top of the screen. It’s non-invasive on both desktop and mobile.

Chatbots

good example of a website chatbot

Chatbots are a great way to help users find what they’re looking for, without disrupting their experience.

You can incorporate lead generation, discount codes or just offer general customer advice. It can help improve operational efficiency (reducing calls into the business) and improving conversion rates.

If a customer is finding it hard to find a particular area of the site, chatbots can remove this friction quickly to help retain users.

Native CTA banners

good example of native CTA banners

Another smart way to offer discounts to users is to integrate CTAs within product selections or even at category level as a header banner.

We find this to be a great way to preserve UX and still help drive incentivized clicks to sale or discount pages.

It’s always important to remember to design banners to match size and resolutions of your products.

Summary

UX is as important to your website as your content. Data shows that UX is still a bit of a mystery to many marketers, but it should be the most important factor on any site design.

Website innovation is encouraged but not at the cost of your users. When you’re considering how to improve your user’s experience, you need to remember how you feel navigating a poorly put together site.

Consider the easy fixes; fonts, images, colors and navigation first, before you think about CRO (conversion rate optimization).

Remember, we’re in a market driven by user behavior so, try your best to cater to that as much as you can and you’ll win!

Ryan Roberts is an SEO Lead at Zazzle Media.

Scott Services

Monday, 24 August 2020

How to fix the top most painful UX mistakes [examples]