11 Common Web Design Mistakes

Here at PSD to Final, we work with designers every day to bring their concepts and visions to life. Making sure a site’s layout, UI and UX is initiative can be a bit of a battle at times (especially if the end-client has something “very specific” in mind, that’s not quite web-compatible). Here are some design tips from This post is written by Brujo Owoh (originally written for Hongkiat.com). Image courtesy Quick Meme.

---

 

There are tons of website on the Internet, and hundreds or probably thousands are created by day. Here’s a very interesting thing to ponder – What are the elements of a good website?

Image Credit: tveskov

Building a website can be daunting but the real challenge lies in making it usable. The problem is most web designers forget that the website wasn’t created for themselves but to solve the users’ needs. They give creativity priority over practicality and usability.

In this article, we would like to highlight 11 web design blunders that web developers and designers make and some suggestions how these mistakes can be easily avoided.

1. Where’s the Search box?

The web is like an archive of information. Whether it’s a corporate website or merely a blog, a search box is essential. The visitor might be looking for something that is hidden within the website, with the search box, chances are, visitors will get what they want.

Suggestions:
Google Custom Search is a neat, simple and effective way to get started. It enables visitors to search your site in an efficient manner. Just copy the HTML code from the control panel and paste it on your website and voilà, you’ve got a search function right on your website.

Here’s a simple form code to display Google’s search engine on your site too. All you have to do is change the site name to your website’s name. Plus, you can modify the submit value to anything you like.

More: Designing The Holy Search Box: Examples And Best Practice– This article details guidelines for designing the search box.

2. Poor Readability & Legibility.

This is a crucial element of web design. Of course, a good interface design will grab the users’ attention but users have to read text to be able grasp the information they desire. Some websites use the most bizarre font styles and sizes that make reading a pain.

Suggestions:
Fortunately, there are simple ways that you can do to improve the users’ reading experience on your website.

1. Compare color schemes of most major sites and notice how the colors improve readability. A good place to try out different color schemes isAdobe Kuler.
2. Use a Sans serif typeface as it allows for easy reading on the web.

More: Here is a good article that will gives you more tips on improving readability – Readability – Making Web Pages Easy To Read.

3. Unorganized Content Layout.

A website’s content is what drives traffic to it. How the content is structured is what will make it a success or a failure. Users do not read unless absolutely necessary but scan through information and pick out points of interest on a web page. Some designers just put a block of text on the web page and totally neglect headings, sub-headings, bullets, keywords, paragraphs, etc.

Use an appropriate page title for each web page so users know exactly where they are. Some designers even forget to name the web page.

Overall, the worst in this category will be putting inaccurate, inaccessible, insignificant or out-of-date content on your website. The content must coincide with the overall theme of the website and be useful. If a page is under construction, why bother putting it up? If a designer really must, then it is only temporary and 3 weeks will no longer be deemed temporary.

Suggestions:
Organize content on your website using HTML and CSS should be used when creating the design of your pages.

1. Create enough whitespace between your text and images by using margins.
2. Update and be consistent. The purpose of updating is not just to add new content but to spot and correct past mistakes. Jakob Nielsen suggests you hire a web “gardener”.

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

4. Bad Navigation.

Navigation within a website should be seamless. Users should be able to find their way around easily. While there is no standard for navigation within a website, especially now as more new web development technologies emerge, it is imperative to understand that navigation must be intuitive and consistent.

If text is used as navigation, it should be concise. Visual metaphors should not be re-invented. If hyperlinks are used, then they should stand out from the body of the text. Dead links should have no place on any web page whatsoever. This increases user confusion and wastes time. And one that is even just as worse is having a link on the homepage that links to the homepage.

Suggestions:

1. Make navigation smooth by using textual descriptions for all links. Provide alt text for images. Use alternative text description techniques for Flash or Javascript links.
2. Organize and structure your navigation in tandem with the theme of the website. Personal websites can afford to be more creative yet accessible but a business website requires more efficiency and clarity.

Remember, if users can’t find what they want in less than 3 clicks, most will leave immediately.

More: Implementing Effective Website Navigation – This article gives more insight on implementing an effective navigation for your website.

5. Inconsistent Interface Design.

Excessive creativity can be just that. Excessive! Some designers take it to another level when creating websites by creating different designs for every web page within a website. This is by no means confusing to the user. And utterly annoying. No matter how outstanding and attractive a website is, if the overall look and feel is not consistent, users cannot relate to it and feel less in control. Thus, leaving as soon as they arrived.

Suggestions:

1. Use a standard consistent template for every page with links to the main sections of the site.
2. The keyword is simple. Create aesthetically simple designs and users will never get confused on your website.

6. Unfriendly Screen Resolution.

I’m sure we’ve visited websites where you have to scroll horizontally. This is an absolute no-no in modern web design. A good designer will develop websites that fit on most screen sizes. The current optimized layout for websites currently is 1024 x 768 pixels.

Suggestions:
It’s hard and almost impossible to cater the design to fit every resolution especially when visitors are now surfing from mobile phones and netbooks, but we can get a rough idea what are the generally used screen resolutions with these following ways:

• Check your stats – Analyic services like Google Analytics provides you information about what monitor resolution they are using. These are useful information you should know before initiating your next revamp.
• W3 Schools Browser Stats – W3 Schools gives clear lists of the most popular browser used by netizens and sort them according to popularity. There are other interesting and important statistics too.

7. Complicated Registration Forms.

Registration forms are tricky. How much information do you require from the user? Gone are the days where a user had to enter a zillion details to register to your website. Some websites make most registration fields mandatory and validate the fields to the extent where the user is frustrated after a few tries. Remember, users visit a website to acquire information. Not the other way round.

Someecard‘s simple form makes registration painless.

Suggestions:
Compare registration forms across communities on the web and understand what basic information is required of the user during the registration process.

More: 9 Common Usability Mistakes In Web Design – This post on Smashing Magazine takes an in-depth look at registration forms amongst other usability mistakes.

8. Unscrupulous Use of Images/Animations.

Too much images on a web page is a huge turn off. Images can be used to capture users’ attention but it can also be a distraction or just plain aggravating. Images should be used to illustrate and guide the user where appropriate.

Animations are awesome and a powerful medium. Especially when used appropriately. When it’s a cycle or just too much on a web page, it gets on the users’ nerves. Users don’t have the patience, time or resources so designers must offer alternatives or better yet, the skip button, if it’s a full page animation.

More: Flash: 99% Bad – Use Flash appropriately. It’s been almost 10 years since Jakob Nielsen published this article but it’s still relevant in terms of Flash usability especially the Breaks Web Fundamentals piece.

9. Cluttered Pages, More Whitespace.

Too many designers forget about whitespace and its importance. They are so engulfed in their own design creativity that they forget that it’s not about them. Thus, they try to cram as much as they can onto a single page. End result? A busy, cluttered and unreadable page.

kylestanding make good use of whitespace in their design.

Here are few articles to give you a good idea on the importance of whitespace in web design:

• A Comparison of Four White Space Layouts
• The Value Of White Space
• Whitespace

10. No Background Music, Please!

Users don’t want cool, they seek efficiency. And yes, 99 percent don’t care about the music on your website. Some designers make it worse by putting different background music on every web page.

Suggestions:
Don’t use background music, but if you must, create a frame for the code and user controls. That way, the music loops continuously, instead of changing each time a new page is loaded within the website. And the user can stop or pause whenever.

11. Test, Test and Test.

This cannot be overemphasized. How many times have we been to web pages that can only be viewed on a certain browser? Web developers have to have a checklist of sorts when testing websites.

• Can the website be viewed in different environments?
• Is the design layout consistent in all browsers?
• Can the website be viewed in different settings such as Images turned off, JavaScript turned off, etc?

Suggestions:
W3C offers tools to test for quality assurance. Check out W3C Quality Assurance Toolbox and Web Page Validation.

Conclusion:

Keep it simple, stupid (K.I.S.S).That’s bottom line. If it’s simple, it’s usable. All in all, great websites keep it simple and usable. Do your homework and it comes easy and naturally.

What are your experiences in web design projects?
What other tips and thoughts would you like to share on web design mistakes?

Editor’s note: This post is written by Brujo Owoh for Hongkiat.com. Brujo Owoh is a Multimedia Systems undergrad, specialized in Web Design and 2D Animation. He enjoys reading fiction, hanging out with his mates, and keeping up with design trends on Twitter. Visit Brujo’s blog.