What do you hate most about websites?

If you browse websites as much as we do, then there is a lot to hate. Because there are so many terribly designed, user non-friendly websites on the Internet today, we have put together this short but detailed list of things to hate about web design. In addition to compiling this list, we’ve also provided a solution for each of the problems.

When creating a web design, there are a number of things that a web designer should take into consideration if their goal is to produce a high quality, user friendly website.

1. Vomit Inducing Color Schemes

There is nothing worse than visiting a website and seeing a borderline-gruesome, mismatched, out of control color scheme. As basic as it is, some people have a terrible time choosing successful color schemes. Though there are millions of colors to choose from, it doesn’t have to be a difficult process. Whether you want to pay for a piece of software that will significantly simplify the color scheme selection process or use one of the free color scheme tools available on the Internet, you will be implementing attractive and successful color schemes in no time.

To Pay
If you want to pay for a color scheme application that will do all of the work for you, then your best solution is the Color Schemer Studio. Located at http://www.colorschemer.com and available in both Mac OS X and Windows flavors, this tool not only builds you an entire color scheme based on a single color, but it also generates monochromatic, complement, split complement, triad, tetrad, and analogous harmonies based off of that same single color that you choose. It is absolutely remarkable. There are a lot of other neat and extremely useful features built into this application, too.

Not to Pay
If you would rather not pay the $49.99 for the Color Schemer Studio (even though it is worth every penny), then there are free alternatives available. Navigate to http://www.colorsontheweb.com/colorwizard.asp and you will find a Flash based color scheme tool called the Color Wizard. Although not quite as user friendly as the Color Schemer Studio, the Color Wizard has a lot of features built into it. You can either enter a hex color code or move the sliders back and forth to find the color that you’re looking for. The Color Wizard also gives you multiple harmonies based off of the single color that you choose. The Color Wizard is a solid (and free) color schemer product. The only downside to the Color Wizard is that it is available only to be used on the Internet. In comparison, the Color Schemer Studio does not require an Internet connection since it located on your computer’s hard drive.

Less is More
When choosing your color scheme, don’t use too many colors. The statement “less is more” should always be applied during the color scheme selection process. How many colors should one use? That’s a difficult question to answer. Although there is no set number, it is generally best to work around three colors if possible:

• Primary color: The main color that occupies the majority of the page. The primary color sets the overall tone.

• Secondary color: The second color that has a purpose of backing up and reinforcing the primary color. The secondary color is usually a color that is similar to the primary color.

• Highlight color: This is a color that is used to emphasize certain areas of the page. It is usually a color which contrasts more with the primary and secondary colors, and as such, it should be used with moderation. If you’re using color schemer software like the ones mentioned above, it is common to use a complimentary or split-complimentary color for this.

There are a lot of resources available on the Internet that explain color schemes in greater detail. However, if you use any of the color schemer solutions mentioned above and follow the basic tips which we have mentioned, then you shouldn’t have a problem creating a beautiful color scheme for your website.

2. Flash-al Abuse

When used excessively or in inappropriate places, Flash is terrible for your website - terrible for Search Engine Optimization and perhaps more importantly, terrible for your visitors. Don’t get us wrong - Flash is a remarkable program that allows creative multimedia geniuses to produce some fascinating work. However, the following implementations of Flash should be excluded from your website:

Navigation
Probably the most abused and misused method of using Flash, Flash navigation is usually bad or extremely bad. Why is it bad you ask? Well, there are a number of reasons:

Search Engine Optimization: If you’re familiar with SEO, then you know the importance of having text on your website. Text is what makes indexing your website in the search engines possible. The problem with Flash is that the search engines do not go inside of the Flash files to collect the text information. What this basically means is that when the search engine spiders crawl through your website and come across your Flash navigation file, they crawl right over the top of it. If you have keywords in your Flash navigation that are relevant to the content of your website, then they won’t be indexed or even noticed by the search engine spiders.

Page load time: Using Flash for your navigation will slow down the load time for your web page. Yes, using anything on your website will add to the load time; however, some things (such as Flash navigation) are avoidable. Some Flash file sizes are larger than others - the larger the file size means a longer download time means the more your visitors have to wait.

User non-friendly: The purpose of website navigation is to provide for your visitors a means of, well, navigating throughout your website. Flash navigation crosses over from bad to extremely bad when the visitor must wait for an animation to complete each time their mouse cursor rolls over an item in the menu. In case you didn’t already know, people hate waiting. There is nothing worse than having to wait even just a few seconds in order to activate a particular navigational item after rolling over it. Not only can the animations be annoying, but sometimes the menus are just downright confusing (i.e. Picture elements are used instead of words for each item).

What about people who don’t have Flash?: Not everyone is using Flash these days. Although it is usually rare that someone doesn’t have Flash activated on their computer, it still occurs. These Flash-disabled users will have no way of finding their way around your website. And since one of the key ingredients to a successful website is navigation, not having navigation to those with Flash disabled will make your website look quite terrible (and more importantly, non-interactive and useless).

The best way to build a SEO friendly, fast loading, user friendly, ultra compatible navigational menu is by using CSS (cascading style sheets). CSS solves all of these problems that you will encounter when using Flash navigation. There a number of free CSS navigational menu resources available on the Internet. Dynamic Drive CSS based navigational menus located at dynamicdrive.com are extremely popular and widely used by web designers and web developers, including us.

Flash Intros
Without a doubt the worst way to use (or should we say misuse) Flash is to have a Flash intro on your website. In case you don’t already know, Flash intros are those annoying animations that play when you first arrive at some websites. If the content of your website is engaging and useful, then there is no real reason to have a Flash intro. Adding to the fact that most people are impatient when surfing the web, many of them do not have the time or patience to watch a lengthy Flash intro.

If you’re going to have a Flash intro, then at least include a “Skip Intro” button that is clearly visible to the user. Even better, instead of making the Flash intro something that is automatically shown to all visitors, place a descriptive link somewhere inside of your website that, when clicked, allows the user to view your promotional animation (usually what Flash intros are).

Finally, be careful with the inclusion of sound in your Flash intro. If someone has their speakers turned up to a high volume, then you could be responsible for scaring the living daylights out of them (and scaring them away from your website as well).

3. Information Overload

Having too little information on pages of your website can make them seem bare and boring; however, having too much information can overwhelm the user (which isn’t something you particularly want to do). Ads, images, text, more ads, navigation, secondary navigation, content, more ads… they all start to add up.

Although there is no rule as to how much information per web page is enough, you should try and limit your web pages to the following:

Header/logo: All websites need a header/logo to identify who they are. For usability purposes, try and keep the height of your header at a moderate size. Most of our headers are no more than 200 - 300 pixels tall. Anything taller than 300 pixels and you take the risk of forcing the user to have to scroll down just to see the navigation and content of your website. Yes, we want the user to look at the navigation and content of your website; however, less scrolling makes for an easier and more enjoyable visit for the user.

Navigation: All websites must have a functional navigational system in order for users to be able to find their way around the website. Using vertical or horizontal menus are a matter of personal preference. Although one menu is necessary, try not to have more than one. Multiple navigational menus can easily confuse the user. If you have a lot of sections on your website, then try using a CSS drop down menu which will allow you to include a great deal of navigational items while taking up a minimal amount of space.

Ads: Many websites provide a service to their visitors for free. It is because of advertisements that most of these services are available for free. When using advertisements, don’t abuse their usage. Google AdSense allows a maximum of 3 ads per web page for a reason - too many ads can make your web site look like spam in no time. Placement of advertisements is also important. Don’t try to trick your visitors by placing your ads in areas where they look like actual content on your web site. People do not like to be tricked. If they want to visit your advertising sponsor, then they will click on the ad.

Content: Each web page should have an area for content. This main section should be the focal point for each web page. Having a lot of information about the topic for each web page is absolutely fine. Make sure not to include too many different topics on one web page. Instead, split the topics up and allow for each to have its own page.

Images: Use images moderately and only when necessary in your content area. Images take longer to download than text. Make sure that your images are properly compressed so that the download time for your web pages are not compromised due to large images. Nothing says “amateur web designer” more than having large, uncompressed images that take minutes to load.

Footer: The information contained in footers vary from website to website. Try not to stuff too much information in the footer - especially important information. Not all users scroll down to the bottom of web pages to see the footer - some stop at the end of the content. If you have important information that must be placed inside of the footer, then begin the footer soon after the content area ends. Placing the main links for your website in the footer is a practice commonly used by designers.

There may be additional things that a website requires depending on the topic and the industry; however, all websites should contain these 6 elements. Developing a navigation and layout strategy before building a website is essential in guaranteeing that your website doesn’t suffer from information overload.

4. Image Text: A Big No No

Like a car inside of an airplane hanger, text does not belong inside of an image. The only exception to this should be using text inside of a logo. Yes, it can be boring using the same text that everyone else uses for their websites. However, you can still make rich and compelling designs without sticking fancy text inside of your images.

There are a few reasons why using text inside of images is a no-no:

Larger image file sizes: Each piece of information inside of an image adds size to the file. As we mentioned earlier, the larger the file size means a longer download time means the more your <em already impatient</em visitors have to wait.

Not SEO friendly: Just like Flash files, search engine spiders cannot detect the textual information inside of image files.

If you have an image that requires text, then try an alternative method using CSS layers. Not only is this method easy to implement, but it will help keep the image file size smaller. It is also SEO friendly.

5. Attack of the Columns

No, this isn’t a spin off of the Star Wars movie. Attack of the Columns is a phrase we use when a web designer uses more than a few columns in their layout. Some designers believe that by using more than a few columns they can better organize and display the information on their web page. The problem is, just like information overload, using too many columns will overwhelm the user.

When more than 2 or 3 columns are used, a focal point is usually eliminated from the web page. Without a focal point, the user has no idea where to look. Instead, the user’s eyes wander aimlessly throughout the web page. This will cause the user to feel confused and overwhelmed and might make them go to a similar website with a cleaner, less-busy layout.

Even if there is a focal point, there is probably going to be too much information on a 4+ column layout. If huge sites with massive amounts of content (i.e. Amazon.com) are able to work with a 3 column layout, then there is no reason that any other website can’t do the same. Plan your layout before you start building your website and you will find that even if you have a lot information and content, a 3 column layout is more than enough.

Happier Visitors

These 5 Things to Hate About Web Design are very important - perhaps the most important things a web designer should take into consideration when building a website. All 5 of these items have one thing in common: when followed, the user will have an easy, fast loading, straight forward experience when they visit your website. What more could they ask for? Well, maybe less advertising.

by Chromatic Sites

Web design focuses on appearance and aesthetics. SEO focuses on text quality and quantity.

Web designers don’t really like to clutter their designs with text. They prefer to see the images stand out on their own. SEOs on the other hand don’t like images that much. Sure, an image can be optimized for the search engines by adding relevant alt attributes and titles, but this is not enough for a site to be properly optimized. Page copy still plays the most important role in website optimization for SEO.

As a business owner you are caught in the middle of this conflict. For your website to convert you need both design and optimization. There is no middle way. You cannot have a little bit of this and a little bit of that and still be competitive. You cannot have just one of the two either. Without optimization your site is invisible to the search engines, hence to your potential customers. On the other hand, without a good design your site, although not invisible, will get nothing but hits. Web users are picky and if they find nothing of interest on your site they will just surf to the next site.

When you pay for web design don’t automatically assume that by paying thousands of dollars on a layout you’ll be a hit on the Web. The Web is a highly competitive place. There are already thousands entrepreneurs who, just like you, invest in design and hope to become the new “it.” Without online marketing (SEO being an important part of the discipline) all these entrepreneurs will remain in the shadow, with their beautiful websites closed to the world.

SEO is the key to that virtual door you need to open for your customers. It is important that you consider this tool when you first conceive your site. Web design and SEO don’t need to be enemies. There are enough professional agencies that employ both web designers and SEOs who work together to develop a good business website, a site that is SEO ready, accessible and readable with any browser. You just need to take your time, research and send a few inquiries. Then balancing content with visual appearance shouldn’t be such a difficult task. Aside graphics and artwork you have to choose proper font types, in a readable size, with colors that harmonize with the layout of the site and so on. If your site is not SEO ready from the first stage of the project you’ll face additional costs after you launch. SEO ready means a site that is properly coded (errors in the HTML code might stop some search bots from crawling and indexing your site correctly), with good navigability and good internal linking structure.

On the other hand, SEO and appearance are not the only traits of a good site. Brand conscious companies should look at the broader picture … instead of debating what is better online entrepreneurs should ask themselves what works best to convert visitors into clients.

Studies show that an over optimized page might hurt the user-experience of people with disabilities. For example, many SEOs stuff the image alt attributes and their alternative titles with keywords. Blind and other visually impaired people who use screen readers to access the Web and read the pages cannot see the images and, instead of listening to a relevant image description, they\’ll hear… nonsense.

Usability and accessibility are equally important as design and optimization. Strangely enough images are better for usability. They give focus to the design and when properly optimized they provide for less cluttered website content. The problems appear when the images slow down the loading times, but with the use of CSS loading times should not be a big concern.

As search engines prefer fast loading sites it is easy top understand why good coding and optimization are so important. Poor coding raises many other problems aside loading times and might increase costs when you need website updates, especially when your website administrator is not the one who created your site.

It is a fact that links have always been a vital part in the Internet navigational process. Depending on the links and also on the content of the site that the link leads to, Internet users decide on the worthiness of coming back to that site or not.

One cannot fail to notice the latest trends imposed by web 2.0 - the emergence of a new writing genre designed to cater for the new needs and tastes of internet users and also the transformation process that search engines undergo.

Broadly speaking, users go from page to page selecting only the most important information or just the information that is easier to spot; they need to be able to make a quick assessment of the page content, get the information they are seeking and go to another page.

Usually, web authors employ hypertext links to create or reinforce concepts: a list of related links can serve as the focus of a site. The problem posed by links has little to do with the web but is rather related to the concept of hypertext. A collection of links does not have the same effect on the reader and is not as legible as conventional linear text.

In the case of linear text, readers have to work harder in seek of needed information. Links also become a technical problem, because most web pages have a certain rank on search engines due to links. Links are to be used as a reinforcement of, not a substitute for content.

What is worth mentioning when tackling the link issue is that designers are supposed to use relevant link labels, give consistent click ability cues and also differentiate links that have been clicked from those that haven’t.

1. Use relevant link description
Users’ confusion must be avoided at all costs. In this respect, they should be able to look at every link and be able to predict to some extent the destination or the website they are about to visit. A negative example in this case is using the label - Click here-, which is rather confusing and does not provide any kind of information about the link destination.

Another relevant case is that of embedded links — when employing embedded links, the link text should accurately designate the link’s direction. Users have a certain tendency towards ignoring the text surrounding embedded links; consequently, it is recommended that you should not create embedded links that use the surrounding text in order to provide hints about the link’s destination.

2. Be aware that textual links
do have certain main characteristics like: underlining and color.
The second trait is not as important as the first one, i.e. underline can be eliminated in some cases like the one when an area functionality is absolutely obvious - for instance, we could think of a site menu where everybody expects a content summary as a presentation.

Thus, you should provide users with sufficient clickability cues. Trying to put the cursor over different parts of the page is time consuming and not quite “affordable” with a view to gain more traffic. At the same time, it’s worth keeping in mind that there area certain clickability expectancies regarding different regions of a web page; for instance, items on the center, left, right side have a high probability of being links.

3. Use different colors for visited and unvisited links
Links that were clicked must differentiate one way or another from the ones that were not; the best way of doing that is the color contrast; links are supposed to stand out on the computer screen as much as possible; in this respect, bright, vivid colors are preferable - links should differentiate from linear text in any case.

Conversely, links that were already clicked should employ a rather pale and “washed” color. The effect of using different colors but both at the same level of chromatic intensity might result in a failure to establish a concrete content relationship between those links, users won’t be able to tell visited from non-visited links.

Even though some compromises would be acceptable (like using other colors), using blue for text is an exception. Blue is a color with the most notable perceived affordance of clickability.

4. Colors for text are to be avoided
It is recommended that colors should be used for hyperlinks only. Nevertheless, there are generally recognized and allowed colors for certain words such as red for “error” or green for “ok”. Technically speaking, when referring to document colors, it is advisable that you specify all of the colors (BGCOLOR, TEXT, LINK, VLINK, ALINK), to ensure an enjoyable and legible composition. Find out more about choosing the right colors for your web site.

The main reason reinforcing this idea is that some users may have certain colors set as default, so if you don’t specify all the colors of a document, they may end up with an illegible document. In addition, even when using a background image, you should still specify BGCOLOR, because the user may not have the image loading on.

5. Don’t use “special effects” when the cursor hovers over a link
As previously clarified, underlined text is the most obvious hint that the user deals with a hyperlink. Still, there are some particular cases when you might not employ underlined text for hyperlinks without major loss in usability. For instance, you could indicate clickability only when the user hovers over a link - let’s say that a text gets underlined only after being hovered, as a sign of clickability.

Nevertheless, using bold effects is not advisable due to the prospect that the text might realign. On the contrary, other effects like link titles could prove quite successful in creating a useful website (in terms of navigational usability). Not until recently, users had a lot of trouble because they weren’t aware of the direction of certain links. In order to respond to the users’ needs, some browsers included in their features a slight preview of the link direction. The effect of this inclusion was a notable reduction in users’ disorientation. Therefore, you shouldn’t miss them when providing a hyperlink; also, they are quite easy to add.

6. Ensure that the text is big enough and that the links are not too close together
Internet users should reach a certain destination voluntarily, not because of the fact that due to link size they missed to click on the link they wanted. This rule might be skipped in the case of legal information in which people are not so interested. At the same time, this advice should be given due consideration in case some of the people targeted belong to the third age.

7. Be sure to make important content accessible from more than one link
Setting several ways to access the same information will certainly help users to find what they need. Different users might attempt different ways to find information, depending on their own interpretations of a problem and on the layout of a page. Some users find important links easily when they have a certain label, while others may recognize the link best with an alternative name. Read more about how can you gain site accessibility.

8. Employ text links rather than image links
By and large and as mentioned before, text links do have a greater perceived affordance of clickability. Text links usually have a faster download speed, are preferred by users, and should change colors after being selected.

Even judging from a technical point of view, it is usually easier to place a link’s destination in text, rather than using an image. In many situations, users demonstrated considerable confusion concerning whether or not certain images were clickable.

9. Employ sensible link lengths
Hyper links should be long enough to be understood by users and short enough to minimize wrapping. Generally speaking, it is advisable that links do not have a grater length than one line. As far as this issue is concerned, studies showed that when users scan prose text, links of nine to ten words do have best performance.

10. Try to warn visitors in case they leave the page
It is best for internet users to be able to realize when they are going to leave the site and head for another. Generally, users expect, when given a link, to head for a new page that belongs to the same site. In case this does not happen, they will become confused. So, the bottom line is that, when building a site, people should take into consideration the prospect of giving visitors warnings when they would leave a certain site.

11. Provide links on your website to helpful information
It would improve navigation on your web site, if you were to give hyperlinks to further definitions, explanations or descriptions. So the main purpose of these links would be to clarify certain concepts so that less experienced users can successfully use the web site.

12. The problem posed by reserved characters
This is a rather technical problem: certain characters are reserved and need encoding in a hexadecimal format in order to be used as URLs. Some browsers may show these characters properly anyway, but this is not indicative of the fact that these characters should be used without encoding in any browser.

For instance, spaces are seen as special characters and consequently, they should be encoded. By and large, it is recommended that you should avoid the use of characters that may require encoding. At the same time, another problem that might cause some trouble is that of URL case sensitivity. It is recommended that you make them case sensitive from the beginning to avoid changing them when you move from one server to another.

And…
…don’t forget that this could turn into a major downside for your site if this rule is missed. You should keep in mind that grouping related links in a certain section is of vital importance.

It seems that when visiting a web page, most screen reader users expect at least the main site navigation menu presenting the main sections of the web page before the content of the page.

There is little evidence to support the idea that screen reader users would rather have the content presented first. It is highly desirable however, to present the content of the page before extraneous information, such as advertisements and related links, as well as the page footer.

Search Engine Friendly

There is no point in building a website unless there are visitors coming in. A major source of traffic for most sites on the Internet is search engines like Google, Yahoo!, MSN, Altavista and so on. Hence, by designing a search engine friendly site, you will be able to rank easily in search engines and obtain more visitors.

Major search engines use programs called crawlers or robots to index websites to list on their search result pages. They follow links to a page, reads the content of the page and record it in their own database, pulling up the listing as people search for it.

If you want to make your site indexed easily, you should avoid using frames on your website. Frames will only confuse search engine robots and they might even abandon your site because of that. Moreover, frames make it difficult for users to bookmark a specific page on your site without using long, complicated scripts.

Do not present important information in Flash movies or in images. Search engine robots can only read text on your source code so if you present important words in Flash movies and images rather than textual form, your search engine ranking will be affected dramatically.

Use meta tags accordingly on each and every page of your site so that search engine robots know at first glance what that particular page is about and whether or not to index it. By using meta tags, you are making the search engine robot’s job easier so they will crawl and index your site more frequently.

Stop using wrong HTML tags like <font> to style your page. Use CSS (Cascading Style Sheets) instead because they are more effective and efficient. By using CSS, you can eliminate redundant HTML tags and make your pages much lighter and faster to load.

Rules in Website Design

When it comes to your website, extra attention should be paid to every minute detail to make sure it performs optimally to serve its purpose. Here are seven important rules of thumb to observe to make sure your website performs well.

1) Do not use splash pages

Splash pages are the first pages you see when you arrive at a website. They normally have a very beautiful image with words like “welcome” or “click here to enter”. In fact, they are just that — pretty vases with no real purpose. Do not let your visitors have a reason to click on the “back” button! Give them the value of your site up front without the splash page.

2) Do not use excessive banner advertisements

Even the least net savvy people have trained themselves to ignore banner advertisements so you will be wasting valuable website real estate. Instead, provide more valueable content and weave relevant affiliate links into your content, and let your visitors feel that they want to buy instead of being pushed to buy.

3) Have a simple and clear navigation

You have to provide a simple and very straightforward navigation menu so that even a young child will know how to use it. Stay away from complicated Flash based menus or multi-tiered dropdown menus. If your visitors don’t know how to navigate, they will leave your site.

4) Have a clear indication of where the user is

When visitors are deeply engrossed in browsing your site, you will want to make sure they know which part of the site they are in at that moment. That way, they will be able to browse relevant information or navigate to any section of the site easily. Don’t confuse your visitors because confusion means “abandon ship”!

5) Avoid using audio on your site

If your visitor is going to stay a long time at your site, reading your content, you will want to make sure they’re not annoyed by some audio looping on and on on your website. If you insist on adding audio, make sure they have some control over it — volume or muting controls would work fine.