Design of Reactive Components

Your web site may be wonderful, but if users find it to be unusable or perceive it to be so then it's unlikely they'll get far enough to discover just what's so wonderful about it. The main considerations for usability are:-

• do your users possess all the characteristics you assume ?
• do your users have browsers equipped with the technology you are depending on;
• is the conceptual structure solid, consistent, and intuitive;

Hyperlinks should be obvious. Did you feel like clicking on the word "obvious" just now ? The word should appear in blue underlined type, and if so you probably thought it was a hypertext link. On the Web, blue text conventionally signifies a hyperlink, and may mislead some people. It is also potentially misleading to make text purple, since purple is conventionally used to signify hypertext links that have recently been visited.

See Jakob Nielsen's Marginalia of Web Design for more tips.

The very least that a site can provide to make something 'happen' for the user is hyperlinks. Hyperlinks can appear as plain text, or can be implemented as server-side or client-side image maps.

After the initial home page load, your site's responsiveness will be judged by the time taken to load further pages. You can take advantage of any graphics that were loaded with the home page by re-using them on sub-pages, e.g. a company logo. Any such graphics should, if intended as navigational devices, look functional - e.g. by appearing to be a 'button', or by some means of emphasis that suggests functionality. It can be very tempting to squeeze too much onto the home page - you have a big, wonderful site, and don't want anyone to miss anything... Better to restrict the home page menu to top-level entry points and a few selected highlights.

Each of your subpages might provide a menubar (remember to offer a text menu too), to enable readers to quickly access your main pages. A few simple but meaningful icons can help people navigate your pages. One at least for your home page is most useful. Subpages should have a way to go "up" to the home page. This should be a small icon, or a hyperlink, or a menu bar, near the bottom of the page. Provide search facilities if your site is large or complex. Clearly state the scope of the collection being searched.

See Sun's advice on navigation design.

The easiest way to get user input is with a simple mailto link. It used to be that every style guide said that you should supply an email address so that users could contact you, e.g. to report problems, make suggestions, offer praise, order goods, whatever. What they didn't foresee was that your email address might be abused to send you tons of spam. That's what happened to me. Maybe 5% of my email is not spam. Don't put your email address on your web pages. Use a comments form instead.

More structured forms of user input will require much more than simple email. Historically the next level of user input was forms supported by CGI programs. This allows you to specify to the user what information you need from them; and this information is then processed by a server-side program (usually written in Perl. The evolution of JavaScript now allows a great deal of client-side interactivity (e.g. field validation) before the user's data is sent to the server).

Animation can make your site more dynamic. The earliest techniques for animation were the 'push-pull' methods, which are now essentially obsolete. The simplest is GIF animation which depends on the ability of GIF files to contain more than one image - they may also contain succesive frames of an animation sequence. A similar effect may be achieved by loading succesive, independent images by client-side code such as JavaScript or Java.

Dynamic HTML allows a Web page to change after it's loaded into the browser - there doesn't have to be any communication with the Web server for an update. You can think of it as 'animated' HTML. For example, a piece of text can change from one size or color to another, or a graphic can move from one location to another, in response to some kind of user action, such as clicking a button. With dynamic HTML, Web designers can load in huge tables of information (like a complex outline or a table of product parts and prices) and simply keep the information hidden until the user requests it.