Absolute Beginner's Guide to Creating AdSense Income Websites the RIGHT way! Step By Step Success Formula.
Home | Email | About Us | Contact | Policies | Advertise | Exchange Links | Submit
|
|
|
Our Other Websites |
|
|
Common Web Design Mistakes to Avoid
How to keep from winning an award on Websites that Suck!
New web designers often do things just because they can. Sadly, many pros also do things the hard way instead of making it simple, and end up with annoying features that have no purpose. We attempt to clue you in to a few of the more common mistakes that get repeated over and over on the web.
Building a website is not enough. You have to build one that helps your visitors trust you and that makes them feel comfortable being there. It has to be convenient for them to use, and it has to give them the information they want, in an understandable manner.
Many first attempts at a website are mildly awkward, or are missing features that professionals will put in. But they are not downright BAD. Some very slick looking sites still qualify as bad because they may look great, but fail to deliver useful function. Here is a listing of common mistakes, and suggestions on how to avoid them.
1. Sound Loops. Ok, I really, REALLY have a thing about these! They are VERY common on memorial sites and personal sites, and the first time through I can take it, but by the time the music has looped the fifth or sixth time, and I am only halfway through reading the story, I am pretty well sick of it. And there is no way to turn it off other than muting the sound on my computer, which I don't like to do because I am too likely to forget to unmute it later, when I DO need to hear sounds. If you use a sound on your website, do NOT set it to loop forever (or indefinitely). Set it to loop just once if it is a long one, or two or three times only if it is shorter.
Sound files also take quite some time to load onto your page, so it will tie up the download connection with no indication of what it is that is clogging it. If the sound file is too big, and your page is not very large, your sounds may not even finish loading before the visitor has moved on to the next thing in your site. Make sure the file is not too big, and make sure that the sound adds significantly to the content of the page, otherwise, leave it out!
I am not the only complainer about sound files, some marketing resource providers won't work with you if you have sounds or Flash graphics on your index page because of the time they take to load.
2. Flash Content. This is another REALLY big gripe. I see simple site content all the time that could be done with a fast and easy page design with all the same function and effect, which someone has produced in Flash. Not only does Flash require that the visitor have a plug-in (and that it be a certain version or better), but it is SLOW! You can age visibly while waiting for these things to load!
Sometimes Flash DOES add something worth waiting for. But if you use it, it had better be essential to the content of the site. Animations are cool looking, but they are not appropriate when they take more than about 100k to download, and even then they had better be worth it. NEVER use Flash for anything that you can do just as effectively in a simpler way! It wastes your visitor's time, and they cannot understand why your site is so slow when someone else's similar site is not.
3. Doorway pages with nothing on them except a huge image (or worse, a Flash animation), which you wait FOREVER to finally appear, only to be rewarded with the words "click here to enter site". Your visitor already DID that when they clicked on the link to GET to your site! You just wasted their time! They won't appreciate you for it!
Doorway pages are never appropriate if they contain no useful content. If they only provide another link to click to get into your site, then they are a waste of time. Redesign the page so that it functions as a real home page, with links to the major areas of your site, and your visitors will be much more satisfied. The search engines will also reward you with better ranking and site presentation on search pages - they don't like pages that waste time either.
4. Unnecessary pages in your site. If someone clicks a link to get to something in your site, the last thing they want after waiting for the page to appear, is nothing but another link to do what they just thought they did! If you have a link that says "go shopping", do NOT just send it to another page with a link that says, "start shopping here". Online account services are BAD about this. Click a link on the homepage to login. That takes you to another page where you choose between logging in and registering new. That goes to another page with the login info, which logs in to a page that says "get account info".Then you are taken to a page that has an "account overview" which shows a link to click to get to your actual account data! I am not being ridiculous here I have seen sites that actually do this! This could have been done with TWO pages. An account login box on the home page, which takes you directly to the account display. Many accounts do this right, but a few don't, and those just make me grind my teeth waiting to get there, especially since the pages are coded as dynamic pages, which means they take much longer for each one to appear than standard HTML pages do.
Never ever put a page on your site which does not produce useful information. The ONLY reason to have a page inserted anywhere that does not take you directly where the link suggests it will, is when you need to put in a disclaimer, terms of use, cautionary statement, instructions, or other critical information that needs to be presented before the user goes where they wanted to go. Sometimes it is also appropriate to offer a choice, such as languages, frames or non-frames, etc, but don't waste your visitor's time hoping that you can show them just one more set of ads. They won't click on them if they are annoyed!
5. Huge graphics, videos, presentations, or other time consuming elements that are not necessary to the site content. Nothing is more annoying than going to a page and seeing the top of something start to appear, or a progress bar, either one of which indicates that what is starting is so huge it is going to take forever to appear.
Regular images should be scaled and cropped to no larger than the size of a standard snapshot - and don't put more than a few of those on a page unless it is designed as a photo gallery display page. The usual rule for an image is to keep it as small as you can while still showing the detail you need to make them effective. Videos should be avoided as a required item on a site. This is one area where a simple explanation and a separate link can be a polite way of giving your visitors a choice on a page. Images and videos both can be linked to a small thumbnail image, or a short description that links to a page that shows the larger image or the full video clip. Same with other large files that take a long time to download. Give your visitors the choice of whether they want to wait for it or not.
6. Inappropriate Text sizes. Too large, or too small, can be annoying. Who wants to have to scroll every fifth line because you used huge text? And of what use is a website if the text is so small nobody can read it?
This is kind of tricky, because Macs sometimes display text smaller than PCs. And Internet Explorer has a default text display size that indicates what point size you want your pages to set a certain HTML font size at. This means that with standard HTML coding, a size 3 HTML font size can show up as small as 10 point, and as large as 16 point. That is a WIDE variance. And the font sizes are relative... that means that if you start with a size 3 = 10 point, then sizes 2 and 1 are progressively smaller than that! Conversely, if you start with the same size 3 =16 point, then everything with a larger font size gets much bigger than you had intended. There are ways to control this precisely, but they are generally not something a newbie can leap into. In general, avoid a size 1 font (smallest HTML font size), and only use the largest size when you want a screaming headline. For filler text, aim for a size 3, sometimes a size 2 when it needs to be compact.
7. Using all caps. Or worse, all lower case. It makes the site designer look uneducated, and all caps equals shouting on the web. Some people type this way in email, because they don't have to worry about using the shift key. Take the time to use the Shift key! If you take obvious shortcuts in how you create your website, your visitors will assume you will take shortcuts with them.
8. Banner ads that are everywhere. You need to put your banner ads in logical places - and do not put too many - top of the page, and bottom of the page are standard locations for these. Sidebars are also an appropriate place to put as many ads as you want. Leave them out of your content, except for context links which are text only. The rule is, put ads where they can be optionally looked at. Don't require people to wade through a bunch of glitzy ads just to sort out your information. Putting them in the sidebar is good because they are there to catch attention if someone wants to look, but they can ignore them if they just want to get to the information you are providing. Annoying someone with a bunch of unwanted ads won't make the ads more effective, in fact, it will make them leave your site in frustration. The attitude behind ad placement should be, "oh, and by the way, if you should be looking for this kind of information, here is something to consider, but feel free to ignore it if you don't need it". Avoid more than one or two animated ads, since a whole bunch of flashing ads just gets distracting to the visitor.
9. Frames that put every single link on the site into the frame window. Your frames should only apply to pages that are on your site. And like other features that can be annoying to some users, they should have a purpose. When you have your navigation in one frame, and your content in another, this is an appropriate use of frames. Some free servers also use frames as a means of displaying their ads on your site, so if yours does this (example is Register.com), then be careful how you use frames on your site so that you don't overload your visitors. If you want to encourage your visitors to stay on your site and to be able to come back easily to other links on your site, then have links that are not on your site open in a new window.
10. Busy background textures that conflict with the text. If you have a background pattern for your page that has too much detail, it will conflict with your reader's ability to view the text on the page. This is a COMMON error! Even professional web designers have made this distressing mistake. If you like a particular background pattern and want to use it, you have three choices if it is going to make the text hard to read: You can increase the text size and make it bold - doing this does not improve the professionalism of your website, but it will make it readable. You can also take the background pattern and put it into an Image editing program, and turn the brightness up, and the contrast down. This has the effect of washing out the detail, softening it down, and making it look like tissue paper instead of Christmas wrapping. This is more professional looking, but you might also have to adjust the color settings to get a little more color tint into it if it washes out too much color. The third option is to create a table with one cell, and put the text into the cell. Set the cell for 80% width so that you can see your background texture around it. Set the cell color to a pale color that coordinates with the background pattern. If you want to, you can go one step further and make it look really sharp, by setting the cell spacing to 3, and the border to 0. Then set the table color to a dark coordinating color. This will give you a patterned border around the table, and a sharp dark border inside that, with the lighter colored cell background inside that.
11. Low contrast between background color and text. This can happen because of a couple of reasons.
If you use a flat panel monitor, or a laptop, to design your website, you must realize that color intensity on your screen is affected by the angle of the screen. Try it. Tip your screen back and forth. Usually it will get darker if you tip it back, and lighter if you tip it forward. This can affect how intense colors appear to be on your screen. Colors can also appear differently on screens, depending on how your browser or HTML editor interprets the colors, and depending on the individual variances of the monitor type.
Both of these problems have the same solution: Make sure you have good contrast between the background and the colors. This means NEVER put a light colored text on a light colored background. For subtle effects, you can use a medium intensity color with a light background (usually only recommended if white is one of the colors), or medium on dark, but don't get closer than that. Also, view your page on more than just one monitor screen. If you don't have another computer you can go to the library and access your page online, or ask a friend to check and see if they can read it ok.
The third reason for this happening is if you have a background color for your page, then you put some text in a cell that has a background pattern that is in contrast to your page background - for example, your page background is set to black, and then you put a light colored background pattern into your navigation cells, and use black text to show up well on that. If someone else's browser fails to show up the background pattern, you may end up with black on black text! Make sure you set the background color of the cell beneath the pattern to a similar color that the pattern is, so if it does not display, your design and text will appear essentially the same.
The fourth reason is that someone just got careless. I see pale pink on white, pale yellow on white, and brown on brown, or other close colors often. If you are using two shades of the same color, go with opposite extremes. If you have to use pink or yellow on white, then choose an intense mustard yellow, and a darker pink. The darker yellow colors will look more sunny when put on a white background. Also, make the text larger, and bold, and only use yellow or pink as a headline, never as filler text. In general, avoid these, but if you have to use them, make sure they are easily readable.
12. Horizontal scroll problems. Getting a page to flex for browser size can be really tricky. Tables and items don't always behave themselves when they are set to automatically adjust for page size. I often end up just setting everything for a certain page size. If you do that though, assume a smaller monitor screen, NOT a larger one! 600X800 is reasonable. Very few people are viewing with monitor resolutions smaller than that now. Over half are viewing larger, but you don't want to unduly inconvenience 40% of your viewers, that is a significant amount of lost traffic. When I set things for a fixed page width, I set it at 780. That leaves room for the scrollbars on the side.
Horizontal scrolling is a pain. Requiring a large percentage of your visitors to do that is rude. But there is one thing worse!
13. Setting windows or frames to NO SCROLL. Believe it or not, I have seen this on professional websites build for MAJOR national chains! The window width was set to a fixed pixel width, and scrolling the window was not allowed, or vertical scrolling was turned off in a navigation box with text links so that when the individual browser text size was larger than the designer planned on, part of the links disappeared below the bottom edge of the page. Setting something to No Scroll means your visitor cannot even SEE what does not fit on their screen! I could not even use an online shopping cart in one store because I could not see what it was requiring! And I did not ever shop there again. I found another supplier and stuck with them. No Scroll is something I categorize as Not Too Bright!
I would advise that you NEVER use a No Scroll option, since you do not know quite what your site may do on other computers. If you don't like having the scrollbars taking up space, then take your page out of the frames. Otherwise you are not just annoying your customers, you are telling them that you don't want them there.
14. Requiring a physical address and not allowing Post Office boxes. Ok, so this is not just a web issue, it is a business issue. Yes, many people do use P.O. Boxes unethically. But there are also a large number of rural American citizens, honest and upright, who use a P.O. Box because there IS no mail delivery in their area! How are they to order from you if you assume that they are fraudulent if they use a P.O. Box? If you are concerned, ask for a physical address along with a P.O. Box number if someone uses it, or ask for a Shipping address and a Billing address. Rural customers will thank you for your thoughtfulness.
15. Email forms as the only means of email contact. Sometimes an email form is simply the most convenient method of gathering information because you can control how the information is routed. But if your email form is not also more convenient to your visitors, then skip it! It is highly annoying when the email form malfunctions (and this happens frequently enough that it is a personal gripe of mine), and your site visitors have no other means of contacting you! How can they tell you it does not work if the only means you have for them to tell you is the thing that is not working? Also, if you offer only a set number of problem categories, what is your visitor to do when they have a problem you did not plan for ahead of time? It is amazing how many major corporations have this problem, and never know it because the people who could tell them have effectively been silenced. If you MUST use email forms for contact, then provide a simple email link as an option also.
16. Pop up windows. Ok, these can have a practical purpose, but most often they are simply ads that slow things down. Most people do not even wait for them to finish loading before they kill the window. They are generally viewed as an annoyance, either good or bad.
If you feel you have information of interest to you visitor, that means announcements of specials or other things that will BENEFIT THEM as much as it benefits you, then you can create a pop-under window that pops to the top when it is finished loading. That way, your visitor is not annoyed by it until it is finished, and then they can kill it fast if they are not interested. Do not use this to waste their time or download speed!
And absolutely do NOT decide that since too many people are using pop-up blockers that you will use an "unstoppable pop-up". Talk about your dumb ideas! People stop pop-ups because they annoy them, so you are going to FORCE them to do what you know ticks them off? Not smart!
17. Mispelling, poor grammar, bad punctuation. Ok, so everybody makes some mistakes with this! Me included (please smile!). One spelling error or two per page is not going to spoil your credibility. And Grammar usage is as much a matter of setting the mood for your page as it is technical correctness. But your page should have an intelligent feel, even if it is highly contemporary. And it should at least look like someone TRIED to get it right. Make sure you spell check it (spell checkers do not catch everything though), and make sure that you have someone else read over it if you are unsure of your spelling or writing ability. Taking the time to do that makes a HUGE difference in how your audience perceives you. You will NOT be thought of as competent to sell them anything, or be thought worth bookmarking if you do not sound intelligent.
18. Downright ugly pages. Please do not combine yellow and green (unless you have a page for an organization whose colors are yellow and green), or dull brown and pea green on a page! Plenty of other techniques exist to make ugly pages, have your site checked by your friends - you know, the ones who AREN'T afraid of hurting your feelings, before you go live! Better yet, ask the lady down the street who does interior decorating for a living to check it out. She can tell you just how to improve it!
19. GIF Animations that move too fast, or that get annoying quickly. Worse, a whole page of GIF Animations that makes you feel like your eyeballs are still moving when you look away. If you choose to use an animation, do not use more than ONE per page, please, or if you have a very long page, you can put one further down so that both do not appear on the screen at the same time. More than that just gets too frenetic!
You should also avoid animations that move too fast, or that have just a few frames that repeat and repeat. If you have a program that can edit an animation, you can either slow down the frame rate (how many frames per second), and you can put a limit to how long it "loops" or how long the animation plays. You can set it to move just once, or you can set it to loop for long enough for your visitor to appreciate it, then to stop and give their eyes a rest. Animations get very distracting, very quickly. It is hard to concentrate on the page content when this thing is flashing there screaming "look at me!". They can really enhance a page if they are used well, but if they are not, they tend to annoy at a very deep level. The wrong frame rate (faster ones are worse) can even stimulate certain brain and nerve centers and can become so irritating that it can almost hurt. They can even trigger seizures in people with seizure disorders if the frame rate is too distracting!
Again, this is not something you should do just because you can. Only use them sparingly if they can enhance the appearance and message of the page, otherwise use a still version of the graphic.
20. Flashing or scrolling text. This is not always bad. It is like the Animated GIF. It should never be used more than ONCE per page, and then only for SHORT phrases. Three words AT MOST. More than that is just too hard to read. And slow it down! Flashing or scrolling that is too rapid not only is too hard to read (and what is the point of drawing attention to your text if nobody can read it?), but it is annoying and distracts the visitor from enjoying the content of your site. Catching their attention with your flashing text won't do a bit of good if your visitor leaves because it bothers them. Try reading a paragraph on your site. If you can still see the flashing text in your peripheral vision, and if it makes it difficult to read through the paragraph, then you need to change it. A bright color may do the job just as well.
There are plenty of other bad design errors that are perpetuated over and over online. I just picked out the ones that I see the most often, and have been the most annoyed by. I may add to this list from time to time, as new annoyances crop up, and as technology marches forward and a new generation of web designers conclude that just because they CAN, they SHOULD!
Written by Laura Wheeler
Owner, Firelight Web Studio
http://www.firelightwebstudio.com
Ask us about getting the website you need to help your business succeed, at a price you can afford!
We strive to provide accurate and informative resources on our website, but we are not licensed business professionals. Use this information at your own risk, and contact your own financial advisor, tax professional, legal counsel, or business expert before acting on information you find on this website. We are a community driven web portal, and cannot be responsible for the contents of pages linked to this site which are not part of this site.
Site Design by Firelight Web Studio, Copyright 2006, All Rights Reserved