Design of Reactive Components
| ||||
| Usability | Navigation | |||
|---|---|---|---|---|
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:-
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. | |||
| User Input | Dynamic Pages | |||
|
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. | |||
| ||||
|
|---|
|