Select Page

When it comes to UX it’s often the smallest things that cause the biggest headache for our users. These somehow slip trough our testing and end up in the final version or they are added later when more content is published and not tested properly.

We may not even know these issues exist until someone points them out…

Luckily they are usually very easy to fix.

Here are some of the most common mistakes I see even the biggest brands make over and over.

Form fields

One of the biggest frustrations on mobile is filling forms, these can be a real pain on a small touchscreen keyboard.

Trying to put in an email address while your iPhone starts to autocorrect and capitalise it. That’s when I’ll start wondering if I really need this free ebook or guide so bad after all?

Input specific keyboards

Luckily with the additional form input types introduced with HTML5, most modern mobile browsers will give you a different keyboard or input method for things like phone numbers, emails and date fields.

All you have to do is actually remember to use them.

Broken mobile layout

Here’s another very common mistake, and it’s all due to lack of testing.

Yes, our website may be built and designed mobile first, and yes we tested the crap out of it on every device before launching.

Unfortunately, that’s not enough. When the on-going content publishing starts happening, you might have multiple people working on different blog posts and pages, usually from laptops or desktop computers.

Do we test every piece of new content on multiple devices? Don’t think so!

That’s when things start breaking on mobile, and it’s usually one of these:

  • Long words in headlines
  • Images
  • Videos or other embedded content
  • Popups

You’ll avoid all of these by simply testing before you publish. Most of the common desktop browsers will have developer tools built in where you can test the layout simulating a mobile device. It’s not 100% accurate but should help you spot problems like these.

If you’re working with a larger team, just ask your colleagues to test it on their own mobile devices before you publish. Sharing work with the whole team is a good way to get other feedback as well.

Once you spot a new element that breaks the layout, try implementing a fix with a global CSS class that will prevent similar scenario happening in the future.

Lack of social meta tags

For some, if a link is missing a proper share image or description, they simply won’t share it. Either way, that’s bad for you.

We all want our content to be shared, so make sure it looks the best it possibly can when done so.

Here’s a handy guide on Moz blog with templates covering the most common social networks.

Pagespeed

Slow page load time

Ok, this one is hard, but it’s something that you should not ignore.

Page speed is a major issue especially for mobile users, and for the same reason it’s also a big SEO ranking factor for Google.

So if you want to be hitting the first page in your niche, you absolutely need to get this sorted.

Luckily Google has a tool you can use to find out what your page speed score is, this is the very same score they use when ranking your website for search.

Simply go to Google PageSpeed Insights and type in the URL of your homepage or the specific page you want to improve and you’ll get back a list of  suggestions, how critical they are and instructions on to fix them

Don’t get obsessing over the score, it’s nearly impossible to hit 100%, especially if your running plugin heavy WordPress or using a lot of external tracking scripts, web fonts etc. As long as the score is not red it’s good enough!

If you want to dig deeper on the page speed score, this third party tool gives you much more details on each ranking factor and what steps you can take to improve them.

Another great tool to use is Pingdom Website Speed Test. It gives you a bit more insight on what elements of your page are causing the delays and the actual page load time.

Having these sorted out you should see improvement in both page speed score and load times:

  • Minify and optimise JavaScript, HTML and CSS
  • Optimise images
  • Enable server side and browser caching
  • Make sure you use a fast hosting provider

Conclusion

Always be testing!

It’s not just testing before you launch a new website, it’s testing every single time you publish or add a piece of content. We live in a mobile-first world, so make sure you test on real devices whenever possible.

Have you got any other common UX issues in mind that absolutely drive you nuts?

Let me know in the comments below!