Speaking of the T. J. Maxx syndrome, it is very important to keep your target audience in mind.  Some people LIKE the idea that T. J. Maxx hasn't spent much money in store layout and design.  The implication is that the savings are passed along to the customer.  Web design references will emphasize consistency, color themes, etc., but we also know that teens prefer more motion, more animation, and more color than their "older" counterparts.  What I might think of as gaudy, they might love!   What about small children?  Disney and Kellogg's go easy on the text and "talk" through images.  E-Bay has one of the most inconsistent design formats you'll EVER see on the Web, yet they are one of the most successful online businesses to date.  The point is, there are guidelines for good Web design, but keep in mind that these are guidelines.  They will change based on your target market, your purpose, and your creativity.  There are always exceptions to the rule.

That being said, first be certain that you have reviewed Dr. T's Web page design tips (Flaherty, 2001).  Next, what are some of the specifics you should keep in mind while you are creating your Web pages and sites?  Below are some tips from Mark Pearrow's publication, Web Site Usability Handbook:

Don't create orphaned pages.  While some believe they are being clever as they guide their visitor through the pages as they see fit, most often this is done as a navigational oversight.  Make sure that your visitor can get out, and normally with something other than the "back" button.  A series of navigational buttons or links on a page template, such as the one on this page, can be helpful.

Be careful how you name your links or topic headings.  Make sure they identify something that your visitor can recognize.  Use the user's natural language.

Keep elements consistent.  Make sure that every page on your site has some commonality that reminds the user of the site he or she is on.  Use consistent navigational styles throughout the site.

Back to the top

Test your work in many browsers and conditions.  Many people are only going to test their work in the browser of their preference.  Don't do this!  You will get an analytical tool near the end of this course that will help you with this task.  Be aware that browsers may view identical code differently.  Then adapt accordingly.

Keep important information "Above the fold."  Newspapers place headlines and key graphics above the fold, so do the same with your Web pages.  Since many of your viewers won't scroll beyond what's on the original screen of each page, you've got to "grab them" quickly.  While you're doing this, don't forget that different visitors with different browsers and screen resolutions will view your pages differently.

Don't make users scroll horizontally.  Your page should always fit on a screen running at a width of 640 pixels.  Browser "real estate" is a valuable commodity.  Don't waste it!

Think globally-maybe.  Your site has the potential to be viewed globally, but do you really care what the Germans think of your chapter Web site?  If you need to adapt, then do so.

Back to the top

Keep your pages to less than 50K in total size.  This trend may be changing as the price of DSL and cable modems comes down, but as long as a significant portion of viewers are using dial-up modems, this rule is critical.  Let me repeat-keep your pages to less than 50K in size.  Sometimes this even means rethinking your entire page.  You may not be able to adhere to this with every page, but research shows that--depending on who you ask--your visitors will only stick around for between 8 and 20 seconds while a page is loading.  After that, sayonara!  If your page gets larger than that, really evaluate the benefit of what is making it larger.  Can you do without it, or is it really that beneficial?  Be objective.  You'll get some tips on how to easily check and reduce page size in lesson 10.  I promise.

Warn users about file size.  If you have something for your page so earth shattering that you feel it necessary to violate the rule above, make your visitor aware with obvious text.  At least they'll be prepared for the wait, and won't just think that they are hung up.

Use the top and left of screen for navigation.  Don't get overly clever.  Research shows that Web site visitors can stare right at links/images on the right-hand side of your page and not really "see" them.  We've grown accustomed to looking at these locations for navigational information.

Provide supplemental navigation.  If you use images for navigation, you should also have a set of text links.  And no surprises!  The text should make it clear to the visitor where they are going when they click on the link.

Back to the top

Think before you link!  While hyperlinks to other pages are critical, be careful how you use them.  Don't make it TOO easy or tempting for your visitor to leave.  And if you send them to another site, use the TARGET="_blank" tag.  If this sounds Greek to you now, don't worry, I'll explain in lesson 10.  For now, just be aware that it opens your link in a new browser window.  The advantage is that even if your visitor "strays" from your site, they've got to close that window sooner or later, and then they'll remember from whence they came!  Try it right now by clicking here.  I'll explain in greater detail in lesson 10.

Use ALT tags.  I know, more Greek and techie stuff.  Don't sweat it, it's more lesson 10.  Hold your pointer over the ball .  That's an ALT tag.  It does many things for you.  If you put some thought behind it before you name them, ALT tags show visitors what is loading while they wait, allows them to get some extra information from you, and allows you the opportunity to use/repeat your main keywords (which is very important in search engine positioning).  Notice I didn't just call it "ball."  More in lesson 10. 

Repeat images, where possible.  Don't get boring, but do reuse images if and where you can.  Once an image is downloaded onto your browser, a copy of the image is stored in cache (pronounced cash), and is instantly loaded from cache each time.

Go EASY on the animation!  Remember the dancing monkey? Animation is a good thing, used wisely.  It looks very amateurish when overused.

Back to the top

Avoid images that look like banner ads or buttons.  People are learning to tune those things out, so don't be mistaken for one.

Don't overuse emphasis.  The use of colored, bold, and italic text should be used carefully.  If you overdo it, it'll lose it's impact.  Never use underlined text on your pages.   It is too easily mistaken for a link.  And as for blinking text....  AGH! (However, there is a time and a place, usually if you are changing specific text on an existing page, and you need to draw attention to the changed text for a short period of time.)

Use common fonts.  While some fonts may look really cool on your site and are very appropriate, if they are not installed on your visitor's machine, they won't be able to read them.  Some of the most common are Times New Roman, Arial, Helvetica, and Courier. For Example, this is written in RA"S HAND HOLLOW, but the odds are you don't have it installed, and to you it looks like your default font (it's a pretty spooky font.  You'll know it if you have it!).

Optimize your images!!! - Another critical point that is similar to the overall size of your page.   If you don't know how to "shrink" the size of your images, you will following lesson 10, and you'll get a free tool that will do it for you.

Provide contact information on every page.  Provide contact information on every page.  Provide contact information on every page.  Provide contact information on every page.  Provide contact information on every page.  There,  I said it.  Provide contact information on every page.  Have you ever wanted to contact a company and couldn't discover how?  AGH!  It can be as simple as an e-mail link, but do it!

Physically provide e-mail addresses.  While it might look clever to say, "To contact Joe, click here," and while it may work most of the time, be considerate of those who don't have POP3 e-mail accounts on their computer.  Some people cannot e-mail from the computer using the configured e-mail client.  This holds true for many school teachers.  Their computers  at school aren't set up that way.  If the address is shown as text, it can be copied into a Hotmail or other online account, or jotted down for later use.  Try rewording the sentence above to read, "Contact Joe at JoeDooToo@hotmail.com.

Back to the top

Have a FAQ page.  Yes, I know, we're all guilty of not doing this one, but it should still be done.  It helps the visitor to get immediate answers, and it helps the recipient of those questions to save time.

Use sans serif fonts.  Sans means without, and serif means those little lines and "feet" that you see on some fonts, such as the little feet you see in Times New Roman.  Look at these "f's" side by side: f f.  See the "foot" at the bottom of the second "f"?  Recent research shows that, contrary to ordinary print fonts, online fonts are better viewed without the extra lines, assuming they are at least 10 pt. in size. (King, Smart Computing, January 2001)

Avoid frames.  There is a time and a place for frames, and rarely do they occur!  The advantage to frames is to the organization, but detracts from the visitor's experience.  More often than not, even when they are used, they are used improperly.  For an organization they can be used as a navigational tool, imprisoning the visitor and not allowing them to leave your site.  That's good from the organization's viewpoint, but doesn't enhance your visitor's experience.  They also provide an organization a great opportunity to gain more "impressions" as their logo, slogan, etc., stays in front of the visitor while they navigate (designed properly, of course).  However, is this really worth the trade off?  The trade is that frames consume valuable monitor "real estate," making the viewing window significantly smaller and the visitor's experience less pleasant.  It also has a significant impact on search tool results, decreasing the odds that you'll ever get found in the first place.  Read the excerpt below from Kimball Enterprises:

2. FRAMES: You may be interested to know that the AltaVista spider (at least as of this writing) will not follow links that are in frames. This means that if our opening page is created with frames, then the spider will find absolutely nothing else on our site and we will seriously limit our exposure to people doing searches for us unless we submit each secondary page manually.

Other "why's" on search tool placement go beyond the scope of this course, but notice how infrequently you discover framed sites as a result of your searches.  The exception to the rule is with search directories, such as Yahoo.  If you want more information as to why, contact me and I'll explain.

Back to the top

The four-screen rule.  Any time your page is four or more screens long, include internal links, such as Back to the top.  People don't like to scroll that far anyway, but if it makes sense to layout your page this way, then use internal links.

The three-click rule.  Everything on your page should be "findable" to your visitor within three clicks from where they currently are.  No one seems to know where this rule originated from, but it has shown up in every usability or design book I have ever read.  I trust them.  Use it.

Don't assume that you alone can objectively determine ease of navigation!  Yes, I know your site is perfect, but visitors are not.  It is best to have someone view your site, wandering through it all.  If they have navigation issues, they'll let you know.  I hope you'll let me know if you've had any difficulties with this site.  You're bound to catch something I didn't).  Just like a doctor, get a second opinion.

Information on this page has been adapted from Pearrow, Mark.  Website Usability Handbook, 2000, Charles River Media, Rockland, Mass.

Back to the top