The material on this page primarily consists of my subjective opinions, and should be taken as such. Some ideas may be unconsciously stolen from Jakob Nielsen of useit.com, User Interface Engineering and other usability experts. (In particular, the notion of using the standard blue and purple colors for links comes from Jakob Nielsen's book Designing Web Usability, which I recommend.)

Article legibility and navigation
Organizing your articles
Links
Link pages
New sites
Browsers
My pet peeves

Article legibility and navigation

Comments on article legibility have been moved to Web Page Legibility.

Here are some tips to make your articles easier to read and navigate:

• Limit page length. People want Web pages to appear quickly. If your article is long enough that it takes several seconds to load in a browser, consider splitting it into two or more pages. If your page consists of several articles or answers to several questions, consider putting each article on its own page. If you do leave them on one page, create anchor tags for each article. Often, I don't link to pages containing many articles because the article I wish to link to is placed far down on a long page; if I link to the page from one of my articles, readers won't know where the relevant article is, and won't want to go hunting for it.

• Don't break up articles unnecessarily. If your article or booklet fits on one page and doesn't take more than a second or two to load, it's better to keep it on one page than to break it up into several short pages. It makes it harder for visitors to read an article when they have to keep clicking in order to keep reading. If the section they're on doesn't give them the information they're looking for, they may decide it's not worth clicking through the rest of the article.

  If your article does have several distinct sections, don't force readers to page through each section, but allow them to jump to any section they choose. If the article is on one page, place a linked table of contents at the top. If the article is broken up into multiple pages, place navigational links on each page.

• Link Bible verses. In general, any book-and-chapter reference to a Bible passage should be a link. This is particularly true if you are answering Bible contradictions. bible.gospelcom.net allows you to link to any specific passage or combinations of passages and has many translations available.

• Link footnotes. The reference to a footnote in an article should be a link, and the footnote should have a return link to the article.

  It has been scientifically proven that research causes cancer in rats.¹

  ...

  1. Smith & Jones, Some Research Journal (Return to article)

  or

  1. Smith & Jones, Some Research Journal

In particular, you should strongly consider not using frames, as this will hamper people's attempts to refer others to a particular article. If you write a great article on the problem of evil, and place it in a frameset along with your other hundred articles, how will the average surfer tell someone else about it, given that they probably don't know how to get the URL of an individual frame? Even if they do send or post the URL to the article itself, the person following the link isn't going to see your frameset and consequently won't be able to navigate your site. Similarly, you shouldn't place several articles (e.g. answers to several Bible contradictions) on the same page without providing anchor links. No one wants to wait for a huge page to load in their browser and then have to search and scroll their way to the particular part they're interested in, when the webmaster could have placed each article on its own page.

Organizing your articles

If you have many articles on your site, enabling visitors to find the articles they want can be challenging. An important thing to keep in mind is that an organization scheme which makes sense to you may not make sense to others. It may be helpful to you to list your articles in alphabetical order or by the date they were created, but that's not a useful ordering to a visitor looking for a particular topic. (A site with transcripts of sermons or radio broadcasts should provide two indices: one sorted by date for church members or listeners looking for the message from two weeks ago, and another organized by topic.)

If you organize your articles into separate categories, try to make the category structure as visible as possible. Suppose that you have five top-level categories, and each of those has three subcategories. Visitors will probably be happier and find what they want quicker if they can see all categories and subcategories at once, rather than having to click on each category to see what's in it. Also try to cross-reference articles and categories when appropriate; don't force visitors to find the "correct" category for the article they're looking for. (BTW, if you have suggestions for how my subject index page can be improved, please let me know.)

If you have a series of articles on one topic, provide a table of contents that links to each article. Each article should have, at minimum, a link to the next article and a link to the table of contents. It should be easy for users to read through the articles in order if they wish, but you shouldn't force them to do so.

If you answer Bible contradictions, visitors should be able to look up a particular contradiction by verse (and ideally by topic as well). Finding a particular contradiction in a list of contradictions ordered by a Skeptic Numbering System (that is, numbered by the skeptic who originated the list) isn't fun - as an example, see the list of contradictions answered by Bumbulis, Smith and White. (Yes, that's hosted on this site; I never claimed to follow all my own rules. :-)

Links

Many Web surfers, particularly those new to the Web, are used to the paradigm that links are blue and underlined, visited links are purple and underlined and plain text is not underlined. This paradigm is reinforced by popular web sites like Yahoo and Google. While experienced users will recognize that text in a different color is usually a link, using a nonstandard way of identifying links may confuse less experienced users.

Adding to the confusion are sites that use blue as a color for plain text, use two or more colors for plain text, underline plain text, or even have underlined blue text that's not a link. Plain text should all be in the same color, particularly if you don't underline your links. Blue should be reserved for links (it's not a good color for text anyway, as the short wavelength of the color makes it hard for the eye to focus on when it's used for small things like characters). Plain text should be bolded or italicized rather than being underlined.

It's harder for visitors to navigate when it's not obvious what is and is not a link. If you don't follow the conventions for links, at the very least use a different color for links and make sure it's clear where the links are when you only look at the page. If the only way to be sure something is a link is to mouse over it, visitors are forced to hunt for links with the mouse (and Netscape 4.x users and others with browsers that don't support the hover attribute for links will be lost).

Finally, anything that can be a link probably ought to be. If you refer to an article on your site or write out a URL, the reference or URL should be a link. If you're redirecting your visitors to another area of your site, give them a link, not directions on how to get there.

Link pages

In order for a link page to be useful, it needs to point visitors to quality sites, not just a huge quantity of sites. If a site isn't worth visiting, don't link to it. This applies even if the site links to you and the owner requests a link back. You're not helping your visitors find quality Christian sites if they have to wade through a lot of poor or average sites before they get to the good ones.

Link pages should have a short description with each link that tells visitors what the site is and why they should bother visiting it. If there are many links, they should be organized into categories.

If you want to warn visitors to be discerning when they visit sites you've linked to, do so on your links page. Forcing them to go through a "Warning! You're leaving our site!" page whenever they click on an outside link is both annoying and unnecessary.

New sites

If you have a new site, the best thing you can do is add content to it. You should try to get a moderate amount of content (e.g. 10 or more articles) before you start advertising your site and requesting people to link to it. A site with little content doesn't give webmasters a reason to link to it and doesn't give visitors much reason to return. Seasoned webmasters know that the Web is littered with "good intentions" - sites with messages like "Under Construction - Come back soon to see new content!" followed by "Last updated 7/1/99." They will wait to see if you follow through and build a substantial site before they link to it. (Well, okay, maybe they won't, but I will. :-)

The other good thing you can do is not put up "Under construction" signs or links. All Web sites are always under construction, including this one. Don't advertise or put a link to something on your site until it's actually there; no one likes clicking on an interesting link and coming up empty-handed. Suppose you visited a site with a navigation bar or list of features, and two out of three links you clicked on took you to a "Coming Soon" page. Would you be inclined to click on any other links, or would you leave the site?

Browsers

You should look at each page of your site in Internet Explorer and Netscape 4.x. While IE is the predominant browser, there are still many people who use Netscape, particularly on UNIX platforms; and Netscape has enough differences from IE (not to mention enough bugs) that it does require separate testing. (Netscape 6+ should be regarded as a third browser, as it's based on Mozilla, which was written from scratch instead of using Netscape 4's code.)

Tips for fixing Netscape 4.x errors:

• If Netscape displays things wrong, your HTML may not be strictly correct. Right-click and select View Source. If Netscape thinks there is an error, it will cause the offending part of the code to blink.

• If your HTML is correct and Netscape is doing things like inserting spaces in words or suddenly ignoring your font and style specifications, it's likely a Netscape memory bug. Inserting a comment before the problem occurs (<!-- Netscape hack --> often works for me) often fixes it.

• Avoid style attributes (e.g. <div style=...) as Netscape has problems dealing with them. Use stylesheets and class attributes (e.g. <div class=...) instead.

• Netscape does a poor job of rendering radio buttons and checkboxes on colored backgrounds. View this page in Netscape to see what I mean.

  Bad radio button

  Good radio button

  In the above case, the good radio button was fixed by creating a style class:

  .bg {color: #339999; background-color: #339999}

  and assigning it to the radio input:

  <input type=radio class=bg>

I've found a new pet peeve: mouse trails. This is yet another gimmick that seems neat when you first see it, but becomes immensely annoying after three seconds or so. Sure, it's nifty to watch the little numbers follow your mouse and then swirl around and turn into a clock. But when you return to looking at the site itself and start trying to navigate it, you're hampered by animation that follows your mouse as you try to click on links or roll over image maps.

Another pet peeve is text that changes its font style when moused over, thereby causing it and any surrounding text to jump around. I've seen this lately in navigation bars. Try mousing over these links (this won't work in Netscape 4.x):

Home Page | Bible Studies | Christian Humor | Cool Links

Imagine trying to use this as a navigation tool for a site. It's disconcerting and annoying to have the entire bar jump around whenever the mouse happens to pass over it.

Back to Usability articles