Home Page - Make it load quickly or visitors will get frustrated.

From a business perspective you'd want to have a company logo on the main page, and brand the site by having this logo appear on ever page at the top. Also near the logo would be a good tag line. Such as "The Network Specialists ™". Such as the sample:

Make sure you users know how to enter the site. Don't put so much info on the home page that it overwhelms the visitor.

Rollovers for information menus can be useful, or they can be difficult to navigate. If the menu changes where the user is, such as at at Eddie Bauer, then it's a good choice for a rollover.

A very bad use of rollovers from MoMA, and the movie The Matrix

Here's an example of a poorly designed site. Let's discuss this in class.

Lets's see if Microsoft can do a better job.

Write clear and meaningful. Don't write too much text.

Keep your text short. Users don't like to read online, so don't make them read a lot. Writes about half the text you would in printed form.

Write for scannability.

Don't make the user think. They want to see instantly what they are looking for. Write your text so that a user just looking at the screen can easily see what they came looking for.

Here are examples:

Here is some information about Fuzzy Wuzzy. Fuzzy Wuzzy was a Bear. Fuzzy Wuzzy had no hair. Fuzzy Wuzzy wasn't very fuzzy; was he.

Fuzzy Wuzzy

Use hyperlinks to split up long information into multiple pages

If you have a topic that can be of various sub-topics, split up the information across multiple pages. Such as in a newspaper. Listing summaries of the headlines and a link to the full story.

Proof read your work. Use a spell checker.

Title your web site properly. This is useful for search engines, as well as visitors bookmarks. Don't title your site "My Webpage", or anything with "My" in it. This will have no meaning to people who look at their bookmarks. If the site is "Lawrence Goetz's Webpage", that will give the users something meaningful. Use 40 to 60 characters to describe your site. Such as look at my site's title.

Bookmark in IE, Chantilly.com and then look at your bookmarks listing. This special trick doesn't work in Netscape. IE uses a special file on a server called favicon.ico in the root of the site. It's an icon used by IE showing the listing of the site. Unfortunately the atrium won't work with this, since you can't place a file on the root of the server. However, if you use tripod or a site where you can write to the root, then you can have a special icon for your visitor's bookmarks. If you check your server logs, and see how many times this file was requested, you can get an idea for how many times people bookmarked your site in IE.

Make sure your text is easy to read and that colors do not clash. Such as look at these texts:

Lawrence Goetz

 Easy to read

Lawrence Goetz

 Hard to read

Don't write text too small, unless it's fine print for a contract or a legal notice. Try and read the text below.

Don't write text too small, unless it's fine print for a contract or a legal disclaimers

Use big fonts so people can read things clearly.

Don't use blinking text. It's annoying. This works only in Netscape the blinking.

WRITING IN ALL CAPS MAKES IT LOOK LIKE I'M YELLING AT YOU. So don't do that.

Make online help pages for special applications that may confuse people. Often search engines give a help page.

Multimedia On the Web

Consider the time it takes for media to load. Not everyone's on a DSL connection. Offer an alternative low bandwidth version for people with dialup bandwidths. Use still images instead of movies or animations. Use text instead of audio.

Reduce images to a lower quality. Don't use 1024 x 768 large full size images, Crop and or resize to get lower 320 x 200 pixel images. A book I read recommends cropping and then reducing to get a nice thumbnail. Crop by 1/3 and then reduce the size by 1/3. You're image will be about 1/9 the size. This only works well, if the photograph has a wasteful background and you should have cropped to start with.

Animation has several uses. Some useful ones are.

Video is useful for:

Streaming video vs downloadable

Streaming plays as it downloads, but is of poor quality (depending on bandwidth). However downloadable you can get full quality, however you must download the file before you can view it. It does have a befit that you can generally save the file for future use. Where as with streaming it's not downloadable for future viewing.

For large videos, break up the video into smaller clips that the user can select from.

Audio can be used with menus to make a "clicking" sound, or for background on a page. You may want to offer audio stories for a news site. Streaming is great for audio of human speech. For music it's not too clear. Use MP3 for music. MIDI can be used for musical notes.

Make an alternative for hearing of visually impaired visitors.

3D is fun to look at, however it's difficult to navigate through. Use 3D for modeling physical objects.

However check out these cool 3D VRML files: text, url. You'll need a VRML plugin to view it.

Frames Page