8 Usability Mistakes Made By Web Designers

In the world of web design, we can look around and see so many shining examples of what makes this industry great. Though we are certainly not an industry without our faults and flaws. In fact, with that same discerning eye one can look around and see examples of our less than stellar industry moments. In fact, one can even point to common examples of balls being dropped in various areas. For example, in the usability arena of web design.

Here we can point to a handful of overlooked elements and oft made careless blunders that haunt far too many of our web design pasts. And hopefully, with this post acting as a helpful reminder, our web design futures can remain free of these usability mistakes. So take a look through them and see how many of these proverbial skeletons linger in your closet.

No Mobile Consideration

Unfortunately for so many already established sites and designs, the explosion of the mobile web market has left many brands unprepared for this new landscape. Many sites and designs are simply not compatible with all of these new devices that have begun shaping a new direction for the future of the industry. There’s not enough mobile design considerations being made. There are plenty of examples of designs breaking on mobile devices, which is about as bad as usability issues get.

At this time there are multiple solutions that one can seek to temporarily get their brands back on track in mobile contexts, but not too many that allow them to take their branding, and often costly designs along with them. So we see a bit of stalling in regards to progress in making the web a fully mobile friendly place. But as this new market continues to dominate in terms of growth, not having considerations of some kind in place for mobile is a big web design faux pas.

More on Mobile Design

Insufficient Padding and Margins

One less crucial usability error that you see a lot of around the web, is the lack of sufficient padding and margins in various areas of the design. Whether it be between stacked elements, text blocks, a combination or whatever, there are numerous areas throughout the design where we can fall susceptible to this common error. Visual comfort is a big part of keeping the reader’s on your site and consuming whatever content you are presenting them with, so it is not something to take lightly.

If any of your design feels cramped, or too constricted then your understanding of the box model could use a little bit of work. If it is employed correctly, then your spacing is guaranteed to not interfere in any way with your content. Once your content becomes compromised in this way, the design and the content have both been done a complete disservice. The more cramped the design feels, the less planned and completely professional it comes off. And that is never an impression that we want made through our work. So we need to be sure that we keep these little things in mind too as we build.

More on Margins & Padding

Not Enough Contrast for Readability

While we are on the subject of visual comfort and doing everything in your power to ensure that the content your design will hold will be displayed successfully, readability is one area that could use more focus. To be more specific, ensuring that there is enough contrast for everything to be read properly. Comfortably. This is one common problem area in web design for sure.

There are a number of web designs that fall into this trap, and at this stage in the game there really is little excuse for this slight to usability. Luckily there are services that will make any site readable even when we have not. However, if we as the designers do our jobs properly, most users will never have to avail themselves of such services while visiting one of our designs. Double checking the contrast of the text and any elements behind it should top your list of finer points tp focus on.

More on Contrast and Readability

Lack of Progressive Enhancement

This could actually be the cause of some of other errors we have brought up. If you are unfamiliar with this concept, then chances are, this ball has been dropped once or twice in your wake. The wiki definition is actually wonderfully put so we shall defer to it for a quick breakdown of this technique.

Progressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing those with better bandwidth, more advanced browser software or more experience an enhanced version of the page.

While this layered technique does require more time and work to pull off, it really does set the website up with the best possible presentation for those who can view it, all the while providing a natural degradability for others. It is somewhat of the high point of the usability peak. With the number of presentations one must consider and provide for, it is easy to see why this technique is not always employed.

But for the sake of the user. For the content. The client. Or just the design itself, progressive enhancement is the way to go when usability is your driving focus.

More on Progressive Enhancement

The Unclickable Clickables

One thing that we as web designers have to keep in mind, is that the internet is no longer in its infancy. It has grown into its adolescence and now its users come with certain expectations. One of those expectations comes to calls to action and clickable elements. When users see elements that appear to be big button like objects, they expect them to be clickable. When they are not, users tend to not be happy with the site. Confusion sets in and they suddenly feel lost.

Same goes with little things like underlined bits of text. Usually anything that is underlined, or a different color from the rest of the text, is expected to be linked to something or somewhere else. So when users come across these unclickable clickables the intuitive nature they rely on from your design gets tossed out the window. They do not know what to expect, or how to move around. This can cause them to flee out of frustration rather than sticking around to try and figure out the specifics of your design.

More on Links & Calls to Action

Too Many Options

Another usability problem you spot a lot around the web, especially the longer sites tend to be around and relevant, is that the navigation options climb high into the realm of the ridiculous. When some users face an overabundance of options they become overwhelmed and they turn back rather than push forward. The fewer initial choices that the users have to make when they first begin to look around, the more likely they are to investigate.

If they have the inclination to poke around the site and see what all it holds, and they are immediately met with dozens of places to turn, the more likely they are to think that the site holds just too much so they don’t even scratch the surface. We want to encourage users to go deeper into the site, and in order to do so, we cannot make that seem like a daunting task. We need it to be inviting. And looking after this angle of usability can go a long way towards reaching this end.

Inadequate 404

One place where usability tends to fall to pieces is the 404 page. Generally looked upon as an afterthought (or at least that is how it feels from many of the web designs out there), this error page is not often looked upon as the opportunity that it is. Whenever a user loses their way, unless they have a particularly compelling reason to try, they will often turn around instead of trying to find their way around your site.

So we need to look at the 404 page as a user refresh page for the site. No matter what caused them to lose their way, we need to appeal to the user and come to their assistance. Draw them to other content, or provide a search box so they can look for the content that they were headed for in the first place (if it is even still there). Provide them with other useful information, something to make an impression. One that will erase the slightly negative impression they may be left with given the error.

There are some really great examples of useful and impressionable 404 pages all over the web these days, so dropping this ball is another hint that this part of the design is an afterthought. There are literally showcases across the web that demonstrate the effective ways that the design can help recover whenever these errors occur. We need only take heed of these examples whenever we are working on a website.

More on 404 Pages

The Waiting Game

This is an area of useablility that we know we need to work on for Arbenting ourselves, but that doesn’t make it any less important. Slow load times for a site can be a site killer these days as users are more and more prone to instant gratification. If our designs lag or drag for them, then we risk losing some who are unwilling to play the waiting game for whatever content we have in store for them.

Once again there are numerous ways to improve the load times of our web designs to cater to our users need for speed. In fact, if you are using WP for your site’s CMS, Noupe recently had a wonderful post on ways to speed up your site. The suggestions offered are great places to start no matter what CMS its based on. If your site has not been optimized with your users load times in mind, you might want to use one of the free tools that can identify any of these problem areas your site may have.

After all, any steps we can take to improve the user’s experience should be seen as necessary ones to be taken.

More on Optimizing Your Website’s Speed

In Conclusion

Examples are all around us of these usability mistakes being made, as we pointed out, we have them here as well. But as long as we keep them in mind as we move forward, we can build a more user friendly web.

What other usability mistakes do you see running rampant throughout the web? Which do you think matter the most to your users?

Hit us up in the comments to let us know.

More on Usability

Get More

Subscribe to Arbenting

  • bltk

    It may be minor, but common punctuation mistakes impede usability for one such as I:
    “Visual comfort is a big part of keeping the reader’s** on your site…”

  • http://www.j2studio.com JJ Spelman

    Great article. Some of the points may be considered common sense, but so many folks gloss over these simple areas.

    Also appreciate the references to additional sources!

  • http://deadwingsdesigns.com Rob Bowen

    @ bltk – I understand how that can be disruptive and visually displeasing for some. :)

    @ JJ Spelman – Very true, it is often the little things we neglect because they so easily slip our minds.

    Thanks for the follow-ups!

  • Terri Sloniker

    I found this a great article on usability. I am a beginner in web design.
    I find that I need to be reminded of these basics! I like how you posted links for each topic so I can learn more! Thank you

  • http://deadwingsdesigns.com Rob Bowen

    Thanks, Terri! Always nice to know those extra steps are appreciated. Glad we could help out.

  • http://www.creativeautomaton.com/ Zachary Kraft

    The insuffieceint padding and margins will one day be an easy fic with Flex-box in CSS3 become universal, but we’ll see. In the mean time we can settle for less than Satin in web design.

  • http://www.borderwebworks.co.uk/ allen

    really nice article thanks for sharing such nice stuff.

    borderwebworksWeb Design in scottish borders

  • jhon@serpholic

    We too think that Google is getting smarter day by day and search engine optimization should be done meticulously and conciously. Not only variation in anchor texts are needed but your overall link profile should be diverse so that it looks natural.

About the Blog

The Arbenting Blog was created by Angie Bowen & Rob Bowen to give back to the design community with custom made freebies, design articles, inspiration and more. All of the freebies offered here are available for both commercial & personal use, no attribution required.