Web design mistakes to avoid

No website can appeal to everyone, but some common web design mistakes turn visitors away from websites. If a design aspect makes a website annoying to some people or interferes with usability, it can cost website owners traffic and therefore revenue.

Contents 1 Unpleasant first impressions 2 Poor color choices 3 Web page layout problems 4 Usability problems 5 See also

Unpleasant first impressions

That first impression begins from the moment people click on a link to the site or enter the address in a browser. If their first impression isn't good, they may not get past the landing page. Some common first impression problems:

• Background music is playing. Site visitors might be at work and don't want to draw attention to the fact that they're surfing the Web. Or they may be at home, where other family members are doing other activities or they have their own background music playing. Aside from those scenarios, your taste of music isn't going to appeal to everyone, and many people find website background music distracting and annoying. It can be a reason for visitors to hit the Back button even before they've read anything at the site.
• Pages don't display well in all browsers and resolutions. Web pages can look good in one browser and resolution and terrible in others if they aren't designed to work in all browsers and resolutions. Be sure to check pages in different browsers and in various resolutions before making the site public.
• Errors appear on the page. Database or code error messages look messy and unprofessional. They may also be an indication that something won't work for site visitors.
• The site appears incomplete. Avoid "under construction" pages and links to pages that don't exist yet.
• The site doesn't appeal to the target audience. A web hosting site targeting business professionals won't appeal to the target audience if it looks like it was designed for teenagers. Similarly, a site targeting a younger audience won't draw them in if it looks too corporate for their tastes. Know who your target is and design for them.
• The site doesn't look professional. Even if the target audience is young, a business site should convey professionalism. Overuse of free clipart, for example, gives the site an amateur appearance. So do the other problems listed on this page.

Poor color choices

Some colors work well together, and some don't. Some colors look good as part of a website design, and some don't. All color combinations create an impression on site visitors who are able to see colors. Some tips to avoid poor color choices for websites:

• Design for your target audience. Choose a color palette that fits with your business and the customers you want to attract to it.
• Avoid too many bright colors. Some bright colors can enhance a site if used in moderation. A good use of bright colors is in small amounts to draw attention to key content or page section.
• Avoid colors that clash. Some colors never look good together, and others might work together in print but not when viewed via a monitor. Learn color theory or at least use online tools that provide color combinations that can work well together.
• Provide enough contrast between text and background. A gray font color on a light gray background can make text difficult to read, especially for older eyes. It might look good on the page, but if people can't easily read the text, they aren't going to stay at the site.

Web page layout problems

A web page is like a canvas to design on. Where you place everything and how you design around it can enhance the page or detract from it:

• Place the main content above the fold. Above the fold is an expression borrowed from newspaper use, where the most important content goes above the newspaper fold. On web pages, the content above the fold or above the point where visitors have to scroll to read it needs to be good enough to entice visitors to keep reading.
• Design around the F pattern. Studies have shown that when people read web pages, their eyes follow the pattern of a capital letter F. Content along the top of the page, along the left margin of the page, and out in the middle is read more than content in other places. Use these areas for your most important content.
• Draw attention to key content. Use colors, headings, white space, and other design elements to draw readers' eyes to your key content. For example, when advertising web hosting packages, your design elements can help separate each package and highlight key features that you offer.
• Don't make the page too busy. Too much content can overwhelm site visitors and leave them not knowing where to look. Give each page a focus.

Usability problems

No matter how good a site looks, if visitors have difficulty using it, you'll lose conversions. Some usability problems to avoid:

• The pages load too slowly. Problems from coding errors to large files can slow down a page's download speed to the point that some people won't wait for it to load.
• Navigation is lacking. A site menu is only part of the navigation. Link within content between relevant pages so that visitors can move easily from one page to another from wherever they are at the site.
• Links are broken. Broken links make the site look unprofessional and lead to frustration.
• Forms don't work for everyone. They might have worked when you tested them, but will they work for everyone? For example, if the email field requires the domain extension for the email address to be one from an internal list, visitors whose domain extension isn't on that list won't be able to use that form. Or if the address field requires visitors to choose a US state from a drop-down list and not all of your site visitors are in the US, again, the form is unusable for some people.
• The text is difficult to read. Text layout that looks like a novel is not easy to read online. Online text should have headings throughout the page to make it easy to skim and scan, and content should be broken into not-too-long paragraphs and bulleted lists.

See also

• Website usability
• Successful landing pages
• Improve web page download speed
• How to choose a web hosting site template
• How to get started with a website