How to fix the top most painful website UX mistakes [examples]
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.
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.
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
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.
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 on top of image:
- 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.
- Paragraph spacing
If you’re content currently looks like this:
I’m sorry, but you’re doing it wrong.
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.
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.
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.
Share this article
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!
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.
A perfect example of a branded CTA at the top of the screen. It’s non-invasive on both desktop and mobile.
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.
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.
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.
- ^ UX design (www.searchenginewatch.com)
- ^ SEO (www.searchenginewatch.com)
- ^ ‘soft ranking factor’. (www.searchenginejournal.com)
- ^ navigation (www.searchenginewatch.com)
- ^ Forever 21 (www.forever21.com)
- ^ ecommerce (www.searchenginewatch.com)
- ^ influence users’ focus and attention. (instapage.com)
- ^ Font Pair (fontpair.co)
- ^ how it went for it (www.businessinsider.com)
- ^ Google Fonts (fonts.google.com)
- ^ how load times can impact conversions. (econsultancy.com)
- ^ image compression (www.searchenginewatch.com)
- ^ Compressor.io (compressor.io)
- ^ TinyPNG (tinypng.com)
- ^ Smush.it plugin (en-gb.wordpress.org)
- ^ WebP with Google Developers. (developers.google.com)
- ^ Chatbots (www.clickz.com)
- ^ that UX is still a bit of a mystery (www.searchenginewatch.com)
Powered by WPeMatico