WebJavenue logo
webjavenue.com — Java web development made easier without JSP
Demo Tutorial Resources About

RSS Icon
Use the RSS feed to stay current on new additions.

Your First Website In Java: Easier Than You Think

1.1.3. Designing For Popularity: Convenience

This tutorial is a work in progress: new chapters are published as they become available. The author welcomes readers' input and will greatly appreciate any comments, suggestions or criticism sent to: bruno at webjavenue dot com. In the meantime, please feel free to check out the demo application this tutorial is based upon.

Published: Apr 05, 2006

You can build the greatest collection of information in the world, but if it is poorly organized and unwieldy to use, it is not going to get you anywhere. The quality of a website (or a computer program, or any other man-made product, for that matter) defined in terms of its ease of use is commonly referred to as usability. There is a lot of research going on in this field, and many books have been written (see Web Resources) that explore every little aspect of usability, but frankly, you do not need a science degree to grasp the main principle:

Whatever you do, just make it convenient to use.

As applied to web design, usability has three main aspects.

  • presentation
  • navigation
  • convention

In the rest of this section, we will review each of these elements and show how simple steps can be taken that will add up to produce an elegant, intuitive and highly usable design.

Presentation

This is the easy part: all you have to do to make the textual content of your website easy to read is decide on a few text attributes:

  • Typeface and font size

    Choose a font that looks good on the screen and make it neither too small nor too large.

  • Color scheme

    Choose colors that match (use the color wheel as a guideline if you feel a lack of artistic skills). Make text entries contrast enough. Remember that the main body of text should be in dark color on lighter background, not the other way around.

  • Margins

    Just define some darn margins — it takes only one line of CSS code!

For some obscure reason, not everyone seems to be capable of getting these simple decisions right, but now that you know the basics I am sure you will not make your readers squint when browsing through your pages.

Navigation

When surfing the net, it is not uncommon to occasionally land on a page that happens to be a dead end: it gives you no clue as to where you are and where you can go from there. That is an extreme case of bad navigation, or no navigation at all. At the other end of the spectrum are websites that overwhelm you with everything they have to offer, which, too, makes you feel kind of lost. It would seem logical to think, therefore, that between these two extremities must be some middle ground, or better yet, some theory as to how to get navigation right. It turns out, there is. And the best part of it is, it's not overly complicated.

Over the years, web designers and usability specialists have developed a number of effective approaches to straightforward website navigation. The key idea here is to make the navigational elements represent the logical structure of the website, as shown in the picture below.

Website navigation diagram

Figure 1. Logical structure of website.

Of course, this is a highly simplified model, but even if you put in place only these three types of links, provided that you make a consistent use of the chosen navigational elements across the pages, you will build a solid foundation for future enhancements in a never-ending quest for ultimate usability.

Convention

You are free to put your navigational elements anywhere you like, but you will be much better off if your visitors will find them in places where they expect them to be. I am sure you are experienced enough as a web surfer to figure out by yourself what qualifies as the norm, so I include the screenshots below solely for the purpose of having a point of reference and common vocabulary in the discussions to come.

Examples of common navigational elements

Figure 2. Fragment of www.espritrafting.com website.

More navigational elements examples

Figure 3. Fragment of www.carleton.edu website.

What it all comes down to

As you should know by now, this tutorial does not aim to be an all-in-one web development resource. We just scratched the surface of web usability, and I hope our discussion got you interested enough to give this subject a deeper look some time in the future. One point I would really like to emphasize, though, is this:

Usability is not an abstract concept invented by some egghead — usability is about everyday experience, about things that make life easier. It is in your power, and, coincidentally, in your best interest to meet and exceed your visitors' expectations by making their stay comfortable, coherent and free of confusion — and the best resources you can possibly use to achieve that are your own common sense and imagination!

Now that we have briefly outlined the key components to a successful website, it's time to get down to business and take some practical steps. In the next section, we will apply the knowledge we have built up so far to verbalize what kind of website we are going to be creating.

Last edited: Apr 10, 2006


Copyright © 2006 WebJavenue

bruno at webjavenue dot com