Six Basic Tips for Website Design

 –  Comments Off on Six Basic Tips for Website Design

Owning a word processor won’t make you a great writer, and having web-publishing software doesn’t mean that the pages you create will necessarily be attractive, or even usable. Presumably you created your page because you have something you want to share … but you fail to share it successfully if your visitors get annoyed, or if they leave quickly without reading what you had to offer.

Fortunately, the most common website mistakes are very easy to prevent or fix. Here’s a guide to doing just that.

Taken from http://websitehelpers.com/design/.
Written by Michael Bluejay.

Avoid Distractions

A. Don’t distract your visitors with blinking text, scrolling text, animated GIFs, or sound files.

Animation and sounds are distracting. How can anyone read what’s on your site when they’re subjected to the equivalent of someone standing next to them poking them in the shoulder repeatedly? Also, visitors who have dial-up connections instead of high-speed connections may resent that you wasted their time by forcing them to load animations and sound files against their will. Research shows that animated banner ads may be no more effective than static ads, anyway.

B. Don’t annoy your visitors with pop-up windows.

Nobody likes them. They waste time and space.

C. Avoid clutter.

Don’t just throw a bunch of stuff up on your page in a haphazard fashion, forcing visitors to pick out content like it’s a jigsaw puzzle. (Maybe this seems obvious, but people do creates sites like this, so it’s apparently not obvious to everyone.)

Don’t Bog Your Site Down

D1. Compress your image files.

Nothing is more annoying to readers than waiting for a 100k graphic to load when it should be only 20k instead. Graphics software can compress files so they take up less room on your disk, and therefore take less time to load into your visitors’ browsers. Get some graphics software and shrink those file sizes! GifBot is quick and easy, and shrinks your graphics right on a webpage. Or you can download graphics software: Windows: HVS GifCruncher and JPEG Wizard. Macintosh: GraphicConverter, available at Download.com.

And as mentioned earlier, don’t bog your site down with auto-playing sound files, either.

D2. Don’t let flashy multimedia ruin your site.

Flashy graphics and multimedia controls may look nice, but they’re bad when they make it hard for visitors to get the information they want from your site. Nobody wants to be annoyed by having to use a cumbersome Java scroller to see all the text in a field, much less wait for all the doodads to load … if they even work at all. Stay away from sitebuilders like Moonfruit.com. (The exception, of course, are sites whose content is art rather than information.)

Be Accessible

E. Put your contact info, or a link to it, on the top or bottom of every page.

Don’t waste your readers’ time by making them hunt around your site for how to contact you. Make your contact info easy to get to. Put your contact info (or a link to it), on the top of every page.

If you’re not printing your phone and/or email anywhere because you don’t have the resources to handle inquiries, then do your readers the courtesy of letting them know that, so they don’t spend forever hunting in vain for contact info that doesn’t exist.

And while this should be obvious, when you list your email address, link it so that people can click on it to email you. (Amazingly, some people don’t link their email address.)

Make it Easy to Find Stuff

F. Include a way to get back to the home page, on every page.

When users get lost they like to start over from square one. Make it easy for them to do so. If you’re including a clickable logo on the top of every page, make sure to also include text that says something like “Back to Home Page”, because some users don’t realize that logos take you back to the home page.

Also remember that users might not be able to hit the “Back” button to go back to your home page, because they might have entered the middle of your site after clicking a link to it from a search engine or from some other site.

G. Include navigation tools on every page.

While you should provide a way for users to get back to your home page quickly, you shouldn’t force them to go home before they can go somewhere else. Either include a navigation frame on the left or the top, or include navigation links at the top (and possibly bottom) of each page.

Many designers harbor a definite bias against frames, supposedly because “users don’t like them”. But this bias is clearly misguided. It’s one of those pieces of “conventional wisdom” that exists only because it keeps getting passed down from one generation of web designers to the next. Usability studies clearly show that users find sites with frames “Easy to Comprehend”, “Easy to Navigate”, and “Easy to Find Info”.

Don’t put navigation links only at the bottom of pages, because then users will have to scroll down to the bottom to get to them (unless your pages are very short). Users clearly dislike links at the bottom of long pages. On long pages, you’ll want navigation elements on BOTH the top and bottom, so that users who have read a lengthy page don’t have to scroll back up to get to the navigation parts.

H. Explain what you’re linking to.

In your Links section, include a short description of each site you link to, say 1-5 sentences. That way visitors have an idea of what’s on those sites, which will help them make their decision on whether to visit those sites, and help them find what they’re looking for, while avoiding what they’re not looking for.

Nothing is less useful than a whole bunch of links to other sites when those links consist of nothing more than the names of those sites (or worse, the urls). Without any description of what you’re linking to, readers are forced to visit each and every site to get an idea of what’s there. Imagine 100 of your visitors all repeating that same laborious surfing, needlessly. You could have told them what’s on those sites, because you (presumably) visited those sites yourself, so you know what’s on them. Do your readers a favor and share your knowledge with them.

H2. Make links blue or underlined, or both.

Users expect links to be blue and underlined, because that’s the way they appear on 99% of other websites. If you use a different color then at least the underline is a clue that a link is a link. Likewise, if you remove the underline but keep the link blue, then the color is the clue that a link is a link. So it’s best to use both blue and underlined, but using at least one or the other is acceptable.

What’s wrong is doing neither … having links that aren’t blue and aren’t underlined. How are users supposed to know what’s a link at that point? We ran across one page (no longer up) whose main link is red with no underline. To make matters worse, elsewhere on the page they use blue text, which looks like a link, but which isn’t. (We tried to bring this to the attention of the site but owner he bragged that nobody else has ever complained.)

Make sure it works, and that it keeps working

I. Test your links.

Make sure your site works! Load your site in a browser from the Internet (not from your hard disk), make sure all the images appear correctly, and click on all the links. This may seem obvious, but if it’s so obvious, then why do I constantly find sites whose images and internal links don’t work right? If you’re using a link checker that’s built in to your web editor and your site is framed, then you can’t depend on the link checker, because it can’t check for framing problems (e.g., pages load into wrong frames, clicking a link results in frames within a frame, etc.). Check it yourself.

J. Remove dead external links periodically.

If you link to any external sites, some of those links will almost certainly stop working at some point as the sites move or become extinct. Don’t waste your readers’ time by forcing them to follow broken links. Check your links at least once every few months. You can use software to automatically check your links to external sites to see if any of them have gone dead.

K. Include a “Last Modified” date on the bottom of the main page.

If your site contains information that could become outdated, then do your visitors the courtesy of letting them know when the information they’re reading was written. That way, visitors won’t have to wonder whether the info was written last week or five years ago.

You can omit this only if the content on your website by its very nature can’t become outdated. (e.g., poetry, stories, art, website design tips)

Readability

L. Use contrasting colors or simple backgrounds to make your text easy to read.

It’s hard to read light text on a light background, or dark text on a dark background. Also, it’s hard to read text on background images that have a wide mixture of light and dark; background images should be simple and mostly dark or mostly light. You can improve readability of text on a background image by increasing the text size and/or making it bold.

M. Don’t type more than a few words in ALL CAPS.

Words that are in ALL CAPS draw attention to themselves because they seem different from the small letters around them. But if you type everything in all caps, then you completely lose the effect, since everything looks the same, so none of it looks important. If you want to draw readers’ attention to something, make the headline stand out … bold, bright color, maybe a little larger … but keep the text that follows it normal.

N. Don’t underline words if they’re not links.

On the web, something that’s underlined is supposed to be a link. If you underline gratuitously, readers will be annoyed when they try to click those underlined words only to discover that they’re not really links. If you want to emphasize something, use italics (or boldface, or another color).

O. Never use more than one exclamation point!

Typing several (or worse, a gazillion) exclamation points does not make your text seem any more important than just one. In fact, rather than conveying urgency, what multiple exclamation marks really scream is “Amateurish!”.

P. Use a spelling checker.

Obviously, people who spell poorly may not notice or care that your site is badly misspelled, but literate people may notice and care, and they’re in the majority.

Q. Don’t make your page too wide.

Your page should be 770 pixels wide at most (so people with 15″ screens can read it). If your pages are wider than that, then most readers won’t be able to see everything without scrolling left to right.

R. Make the text large enough to read.

This ought to be a no-brainer, yet just today a webmaster referred me to his site which I had to squint to read. Don’t punish your visitors if you want them to actually read your content.

Related Reading:

PHP and MySQL for Dynamic Web Sites: Visual QuickPro Guide (4th Edition)PHP and MySQL for Dynamic Web Sites: Visual QuickPro Guide (4th Edition)It hasn't taken Web developers long to discover that when it comes to creating dynamic, database-driven Web sites, MySQL and PHP provide a winning ope... Read More >
PHP and MySQL Web Development (4th Edition)PHP and MySQL Web Development (4th Edition)PHP and MySQL Web Development, Fourth Edition
The definitive guide to building database-drive Web applications with PHP and MySQL

PHP ... Read More >
Modern PHP: New Features and Good PracticesModern PHP: New Features and Good Practices

PHP is experiencing a renaissance, though it may be difficult to tell with all of the outdated PHP tutorials online. With this practical guide, you... Read More >

Filed in: Site Design Tips

Comments are closed.