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
- Why Mobile Design Should Never Be an Afterthought
- The Mobile Design Process
- Adaptive & Responsive Design with CSS3 Media Queries
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
- Understanding Progressive Enhancement
- A Complete Guide to Progressive Enhancement
- Progressive enhancement demystified
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
- Give Clickable Elements a Pointer Cursor
- 4 Simple Design Elements Behind a Good Call to Action
- Simple CSS: How To Make Clickable Areas Bigger
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.
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
- Building a Constructive 404 Error Page (With Examples)
- How to Create a Custom Error 404 page for WordPress
- 5 Tips to Make Your 404 Page More Usable
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
- How To Minimize Load Time For Fast User Experiences
- How to Test and Increase Website Load Time Speed
- Best Practices for Speeding Up Your Web Site
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
- 25-point Website Usability Checklist
- 12 Website Usability Testing Myths
- Tools To Improve Your Website’s Usability
- The Ultimate 20 Usability Tips for Your Website