2012_10_featured_Jessica Design

How To Avoid Web Design Mistakes That Interfere With Usability

This is a guest post by Jessica Velasco.

If you are new to the design field, creating a website may seem a daunting task. There are so many things to consider; you’re probably worrying about your clients’ requests, the aesthetic feeling you hope to induce, and tons of other creative nuances. However, the real challenge is combining all these requirements in a website that is usable.

If you are a veteran designer, you already know how important the usability of a website is. Yet, for both rookies and veterans, it can be easy to slip into the creative mode and disregard the true purpose of web design – to meet the needs of the users.

Have you ever made creativity a priority rather than practicality and usability? If so, your visitors have undoubtedly suffered the consequences. Here are 12 of the most common mistakes web designers make together with tips how you can avoid them to make your designs more usable.

1. No search box

Some day, when your website is jammed pack with quality content, you might pat yourself on the back. Visitors are bound to find exactly what they want on your site; after all, you have included everything a person could ever want. But how will visitors find that specific piece of information they are looking for? One very effective way to help your visitors find information is by including a search box.

Google Custom Search is a great place to start. It is simple to create your own search form, yet very effective. With a bit of copy and paste, visitors can easily search your site.


A search box is a very effective way to help your visitors find information on your site. (Source)

2. Difficult to read content

Chances are good that a stellar interface design will grab visitors’ attention. However, visitors don’t visit to your website to ogle your creativity. They come for information, and it is your task to make sure they find it. Quickly. There are many guidelines available on how to design readable web content. Here are just a few things you should consider:

  • The color scheme can make or break a site. Shop around to see how others use color on their site. Make sure you choose colors that improve, not decrease readability.
  • Use sans serif typefaces for all body copy.
  • Don’t allow for too much variety when it comes to font size. Limit yourself to three sizes – one for the main header, one for sub-headers, and one for the body.
  • Don’t allow for too much variety when it comes to typefaces. Try not to use more than 3 different typefaces throughout a single page.
  • Use text emphasis, such as bold, italics, underline sparingly.
  • Put some thought into your alignment. Left-aligned copy is easier to read than right-aligned. Full-justification is great for long lines of text but appears choppy and distracting in narrow columns.
  • Smaller paragraphs are best.

3. Unorganized content

While you might not be the one responsible for putting pen to paper, you will be responsible for how the site’s content is organized. Check out this article on content organization, for some great tips. Here is a an excerpt with three out of the nine tips covered in the article:

  • Start by meeting the visitors’ exact needs. Consider your visitors most pressing issues and address those first. Make sure this information is easy to find. Then, you can start writing about less critical content.
  • Follow your readers’ train of thought and group information in a logical and practical way. This efficiency will make life easier and more enjoyable for your visitors. Remember, the way a visitor defines related content may be different from yours. Consider asking some test subjects to offer feedback about your site’s organization.
  • Recognize that there will be different people visiting your website. Different target audiences might have different levels of expertise, knowledge and objectives. Make sure to organize your content with these differences in mind. For example, have a tab with tips for businesses and one for individuals.

4. Outdated content

Like a garden, the web is constantly experiencing new growth. Taking that metaphor one step further, we realize that even the best tended sites often need a bit of pruning.

  • Budget to hire a web gardener as part of your team. You need somebody to root out the weeds and replant the flowers as the website changes but most people would rather spend their time creating new content than on maintenance. In practice, maintenance is a cheap way of enhancing the content on your website since many old pages keep their relevance and should be linked into the new pages. Of course, some pages are better off being removed completely from the server after their expiration date.

– Jakob Nielsen

5. Shoddy navigation

If your site is difficult to navigate, a visitor won’t linger long. Frustration will lead to a quick exit. Here are some useful tips that will help to make your navigation more usable:

  • Use an easy-to-understand name when labeling links.
  • Hyperlinks should stand out from the body of the text.
  • Dead links should be removed immediately.
  • Hyperlinks are designed to be clicked so make them clickable! Don’t use a minuscule font size.


Make sure people can easily identify clickable areas on your site. The comments on Hacker News are clickable, but not different than the rest of the text.

6. Inconsistent design

You might be a genius web designer and surely you are eager to show as much of your abilities as possible. But never try to showcase all your creative within one website. To a visitor, this can easily become obnoxious and annoying. While you may find this hard to believe (and probably even harder to implement), simple is best.

7. Using a horizontal scroll bar

Be mindful of screen resolution when designing your site. The optimized layout for a desktop design is 1024 x 768 pixels. Don’t make your visitors use a horizontal scroll bar — chances are good that you’ll irritate them. Before a revamp, consult your Google Analytics for information about about the monitor resolution that is being used most for accessing your site. With the myriad of mobile devices in use these days, it is helpful to know how your visitors are viewing your site.

8. Being ignorant of the importance of whitespace

Above the fold doesn’t just apply to newspapers, but also to websites. It refers to the information that is seen without scrolling. Because this coveted location is the most prominent and visible, it tends to be the most important. For this reason, it is common for web designers to cram as much goodness as possible into that area.

However, this tactic ignores the fact that readers actually get overwhelmed with too much information. As a result, chances are good that they leave quickly and without appreciating what you have to offer. Don’t be a cocky designer; acknowledge that whitespace can look attractive, professional, and legible. Decide carefully where you put the focus of your design and carefully guide your visitor’s line of sight.

9. Using music

Music is a delicate topic when it comes to web design. While there are websites that gain authenticity through some background tunes, such as music labels or budding artists, most sites don’t gain much value through the unexpected blaring of music. Think carefully about the purpose of your site and your target group before you decide to include audio. Also, if you do include music, make sure it loops continuously and doesn’t change each time a new page is loaded.

10. Being greedy

Pagination – or splitting up content into several pages – is a must for some sites. For example, ecommerce websites often profit from split pages. If you tried to show all the images in the product gallery on one page, it would take forever to download. However, pagination within an article is unwise; rarely is there a piece long enough to require it. In reality, pagination is being used within an article to boost page views. Since advertising revenue is determined by page views, we all know you are just trying to pad your count. However, this is bad for two reasons. First, you will annoy your readers. Second, you will hamper your SEO efforts by diluting your content.

11. Being unreachable

User engagement is important in building customer loyalty. Customers appreciate it when you answer their questions quickly, fix their problems, and let them know you care. What does it say to your visitors if you make it virtually impossible to contact you? What will a visitor think if your contact page redirects to a FAQ page? What does a contact page sans email or phone number tell a person? It all says you don’t really want to be contacted.


Don’t give your visitors the impression you don’t want to talk to them (Source).

There are a variety of ways to connect with your visitors. You can publish an email address, utilize live chat sessions, or create a simple contact form. Using social media and online forums are also great ways to stay in touch. Not only do your visitors get to connect with you, they also have the opportunity to interact with other visitors too.

12. Too much registration

Be mindful of ways you are using registration. Try to offer as much substance as possible so visitors don’t have to identify themselves in order to enjoy the functionality of your site. For example, a lot of sites will ask visitors to register before posting a comment. Sure, this will decrease the amount of spam; however, it will also decrease the amount of comments. Also, make sure your log-in barriers don’t lock away features that don’t really need to be locked up. If you must use registration, keep the process as simple as possible. Don’t ask for information you don’t need.

Your thoughts?

There you have it — a handful of blunders most commonly made by web designers. Have you fallen victim to any of these creative trappings? Do you know of a mistake we left off the list? Do you have advice to share with other designers? Let us know what you think!

19 comments

  1. Alan

    “Use sans serif typefaces for all body copy”
    - what gave you that idea?

    Serifs improve readability. We used to avoid them back in the day when our devices did not anti-alias the edges of text. Now, they have been doing so for quite some time, and serifs are therefore most welcome if they fit the design scheme.

  2. Mariken

    <3 great article! Thanks.

  3. jithin

    Really awesome post thanks for sharing this … :)

  4. Gerald Band

    Having background music is a big NO for me. It makes your site less professionally done.

  5. Maneet Puri

    Impressive post Jessica! Web Design mistakes tend to be inevitable as we often mix our own prefrences with our potential client’s expectations. You have mentioned some vital tips here. Nevertheless, I would like to add that while taking care of the look n’ feel of a website, we should have an effective plan laid down in advance and the foundation of our plan will be a perfect mixture of simplicity, explicitness and the prevailing market trend. With millions of websites at their convenience, it is not necessary that a client will be sparing much time on your website, which is why you have to work magic within seconds of his visit.

  6. Aleks

    Some really good points, Cheers.

  7. MindMade Technologies

    Really awesome post,very useful and informative, sure will consider all these points while designing a website.Thanks for sharing this post.

  8. Albert

    Awesome Blog! You are right these are the common mistakes which we need to avoid for a perfect search engine friendly website design.

  9. william Bamford

    Great article Jessica Velasco thanks in advance to share with us there are lot of thing to get here. Normally people are looking for simple layout with simple color mixing unfortunately most of web designers are not consider about much. they try to include much java script code, pictures, dark colors etc, but the point of as user most of website which got my interested are with very simple layout and simple color mixing

  10. web designer kent

    Hi Jessica. There’s some great advice in this post. Making sure that your site’s design makes content easily accessible (with clear navigation and site structure) is not only great for readers – it’s handy for search engines crawling your site.

    Best wishes, Alex

  11. Veruca

    Lots of great points in your post, Jessica. I have to admit one of my pet peeves is having music blared at me when I land on a webpage.

    Thanks for this helpful article!

  12. kaju-web-designer

    nice article Jessica Velasco thank your very much, yes u are right in 5th point, If site is difficult to navigate, and frustration will lead to a quick exit.

    you could also tell about bread-cum navigation.
    Breadcrumb navigation is a way to show the user where he is in the navigation hierarchy.
    web-designer

  13. Jessica Velasco

    Thank you for all your comments! I’m happy to know you enjoyed the article. I find there are tons of articles online with tips and suggestions. We often pat ourselves on the back because our site has everything they recommend. Rarely do we think about the design aspects we use, but shouldn’t!

    Alan – Serif fonts lead the eye on to the next letter, making for a smoother read. But this only works at high resolutions (print). When using serif fonts at low resolutions, the extra complexity decreases clarity. Additionally, the reduced whitespace between letters makes recognition slower. Sans-serif fonts, on the other hand, are more readable on pixel-based displays (websites) because they are simpler. The broad font and extra space between letters makes reading website context easier.

    Maneet – I agree! Just like going to the grocery store with a pre-made list! :)

    William – Exactly!

    Kent – Great point about the correlation between navigation and crawling success.

    Gerald & Veruca – Just yesterday, I put my son down for a nap, went to check something online, came across a site with music, and got knocked upside the head. Since I had mistakenly left my volume quite high, the blast woke the baby! I think it is safe to say my annoyance with that site might prohibit my return!

    Kaju – I like the idea of displaying navigation hierarchy. You’re right; too often we don’t see that on sites.

  14. Mikael

    Good points. Sure a lot of those are massive design misstakes but its silly how often they occur.

  15. Anna

    Thanks for sharing. This will really help business owners to avoid mistakes on their website designs.

  16. Brisbane Website Designer

    You are right about these 12 lists of the most common mistakes web designers. Good to know all the solution for those issues. Thanks for sharing such a great article.

  17. Digital reviews

    Great post for designers who looking for increase conversion rate by focusing visitor satisfaction

  18. Priyanka

    Great tips. I couldn’t agree more. I personally dislike when blogs use white text on a black background, it just feels so unnatural and difficult to read after a while.

  19. web designers

    Great tip, very useful as a website designers we blindly follow the footsteps of our seniors and we need to read these types of articles to differentiate ourselves from the crowd

Leave a Reply

Your email address will not be published. Required fields are marked *