Introduction
This post goes over some of the most common User Experience (UX) mistakes I've noticed on websites, and how you can avoid them.
Long line lengths
Forcing a reader to track lines across the full length of their monitor is a pretty big design flaw. Giving your users a pleasant experience as they use your website should be a top priority. In his book Designing With Type (originally published in 1971), James Craig wrote:
"Reading a long line of type causes fatigue: the reader must move his head at the end of each line and search for the beginning of the next line.… Too short a line breaks up words or phrases that are generally read as a unit."
The optimal line length varies based on factors such as text size and the font that is used, but a general rule of thumb is between 45 and 75 characters per line.
If you're interested in learning more about optimizing line lengths on your website, there is a great blog post on Smashing Magazine titled "Size Matters: Balancing Line Length And Font Size In Responsive Web Design."
Difficult to read text colors
When deciding what color you should use for your text, you should consider the fact that not all users will be viewing your website on the same screen, and not all users will be viewing your website with the same set of eyes. There will very likely be people viewing your website on monitors with a less than perfect picture. Maybe some users need a dimmer screen because of issues with their vision. Some users may have poor eyesight and have trouble distinguishing the difference between a light text color and a white background.
Whether your designing a section of text, a button, or choosing what color to use for links, it's important to give thought to the various ways people will view your website. The axe DevTools browser extension is a great tool for making sure your text meets the minimum color contrast ratio thresholds.
Poor paragraph text alignment
Paragraphs with more than a couple sentences should not be center aligned. Center aligning text, especially long text, requires more effort on the readers part. Instead of allow them to develop a good reading cadence, where they can read a line and immediately shift their eyes to the beginning of the next line, you're forcing them to search for the beginning of each line they read.
Paragraphs with more than one or two sentences, should always be aligned to the left, assuming your language is written LTR (Left to Right). If your language is written RTL (Right to Left), then you should align your paragraphs to the right.
If you want to read more you can read the post titled Why You Should Never Center Align Paragraph Text on UX Movement.
Images lack well written alternative (alt) text
A lot of people don't understand the importance of making sure images have alternative (alt) text. And a lot of people that do understand, don't quite know how to write good alternative text.
Alternative text is the text that gets displayed if an image is unable to load for any reason. Search engines like Google use this text to figure out what to show users when they do an image search. This is also what gets read to users visiting your website using a screen reader.
When setting alternative text for an image you want to describe what's happening in the image, rather than simply labeling the image. For example, in the image below a poor alternative text would be something like apples, while a good alternative text would be something like a barrel full of golden delicious apples.
An easy way to come up with good alt text is to pretend that you’re describing the picture to a friend over the phone.
Poor heading structure
Using heading tags appropriately is important for SEO, as well as for people that browse the internet using screen readers. A lot of people will choose what heading to use based on the size of text they want, but doing this is detrimental to the structure of the page. You should always add headings in sequential order. If you need to change the size of some heading text, you should do so using CSS.
Relevant resources
Phone numbers not being clickable
It's important to make sure phone numbers are added as links on your website so people can click them to call. Some mobile devices will automatically create links for strings of numbers that look like phone numbers, but not all of them do.
Clickable elements behaving differently than what would be expected
Have you ever clicked a link or a button and expected one thing to happen, but something else happened instead?
The most common example of this that I've experienced is clicking a link, expecting to go to another page on the website, but instead I'm taken to an external website instead. This isn't to say that all external links need an indication because there are situations where external links are commonplace (links in blog posts), so users won't be surprised by being taken to a new website.
Another common example is when a link in a website's navigation has a dropdown menu with related links. It’s a good idea to communicate to users that a link has a dropdown menu before they click it (or hover over it) by adding an indicator, such as a down arrow.
It's important to make sure your links and buttons have descriptive text, that matches the action that takes place when they're clicked.
Final Thoughts
These are some of the most common UX mistakes that I've noticed on websites and they're all pretty easy to avoid. It's a good idea to keep these mistakes in mind as you build out your website, so you can be sure to avoid them. It's always easier to avoid making mistakes then it is to clean them up later.
Was this post helpful?