Every Website Has At Least One of These Problems
In 2020, I performed UX audits on nine websites. I audited brand new websites right before they launched, websites that hadn’t been touched since 2015, and a few websites in between. One recurring fact I uncovered was that there’s room for improvement on every single site.
Some issues are easy to fix, like retooling the copy so that it focuses first on the customer, rather than the brand. But other issues, like messy or non-existent style guides, require a bit more work to nail down and improve upon.
Here are some major and minor issues I repeatedly came across this past year — and some easy steps you can take to remedy the problems.
Oversized images
If your website is slow, chances are your images are too big.
I worked with some amazing developers in my previous corporate job, and one of the first things they told me was to keep all images at or under 100 KB. Yes, even that giant banner on your homepage must remain under 100 KB.
Not sure of the size of your images? Try saving the photo in question to your desktop, then inspect the file size. You can also use one of my favorite tools: Google’s PageSpeed Insights. PageSpeed Insights tells you how long it takes your site to load on both mobile and desktop, and how to improve upon that time.
If, after reviewing your photo file sizes, you find they’re too big, here’s how to decrease file size without diminishing quality:
Save your photo as a .jpg. Most photos with a large file size are saved as a .png. You can cut hundreds of kilobytes from your file size by simply swapping out the file type.
Make sure your dimensions are accurate. It’s okay for the file dimensions to be larger than the screen, but you’ll never need a website banner that’s 5,000px wide.
Decrease the image quality in Photoshop. I almost always knock the image quality down to 70%. But you can usually decrease the quality even more without affecting the actual appearance.
Inconsistent heading styles
On one particular audit, I counted eight different heading styles on the homepage alone. That’s way too many. In addition to the overabundance of headings, there was no consistency in their use. While one section may have kicked things off with an H1, another identical section led into the content with an H3.
Web standards tell us our websites should have three to four heading styles. Headings are used to group content and help users navigate (read: skim) the page. Headings are also an important part of web accessibility and are a crucial tool for screen readers.
When you have more than four heading styles, and when you’re using said styles inconsistently throughout your site, it not only clutters the page, but it also makes it difficult for users to effectively navigate the site.
Here’s a quick rundown of how to best use headings on your site:
Heading 1 (or H1): This is the primary heading on your website. It’s the heading with the most hierarchy and it should correctly represent all of the information beneath it on the page. An H1 is best used as the first, main title on the page.
Heading 2 (or H2): This is a subheading on your website. It’s a second-level heading on your page and it should represent the main points throughout the page. An H2 is best used beneath an H1. It helps break up content within the page and makes it easier to scan.
Heading 3 (or H3): This is sub subheading on your website. It’s a third-level heading on your page and it should call out sub-points within the content. An H3 is best used beneath an H2. It helps further break down content, which improves scan-ability.
Too many calls-to-action
You don’t bombard someone you’ve just met with 20 questions before they even have a chance to shake your hand. So why do websites treat visitors that way?
One website I audited had 12 CTAs above the fold on the homepage. That’s way too many choices for users who’ve just landed on a new website. Users presented with that many options may not know exactly what to do or where to go next. Worst case scenario: they exit your site out of frustration.
You can condense and cut down on the number of CTAs in two easy steps.
Think about your goals. What are one to three things you absolutely want a user to do when they land on your website. Prioritize that content and those CTAs, and push things like your email address further down the page.
Do the work for the user. You don’t need to lay out every possible path available to the user. Group content where it makes sense. Make sure you aren’t repeating CTAs within the same screen. And roll up multiple action items into one simple CTA that represents the group.
Does your website suffer from these problems?
I’m on a mission to make the internet better for my dad, and I think the first step in doing that is improving the UX of websites that already exist.
If you think your website might suffer from one of the problems I listed here, or if you think there are other issues preventing your website from being the best it can be, please reach out to me. You can schedule a call or contact me via email.