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).
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.
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…
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:
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…
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:
- Text box 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.
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:
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.
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.
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.
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.
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
A perfect example of a branded CTA at the top of the screen. It’s non-invasive on both desktop and mobile.
Chatbots
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
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.
Related reading
Topic linking comes under the wider term, internal linking. Tips and a case study on how to strategically use topic clusters to increase SEO rankings.
We caught up with Moz’s CEO, Sarah Bird and VP of R&D, Rob Bucci to learn about what they’ve been working on and trends they’re seeing in SEO.
Greg Gifford, VP of Search at Wikimotive, speaks at the Brighton SEO conference about entities and the future of SEO. Tips for a future-proof SEO strategy.
How to minimize the damage of changing domains and negate the effects of moving to a new domain? Long term effects of it on SEO and a mini-guide shared.
