|
|
...making Linux just a little more fun! Design Awareness: For Prince Henry and St. Brendan!By Mark Seymour
This was supposed to be a month in which I did some navigating of my own (I'm currently awaiting a hiring decision which will require me to, hopefully, relocate to the same port of call as the editor of this very publication), so I thought we'd look at navigation on the internet. To get to this page, of course, you already had to click on a link from the table of contents for this issue of Linux Gazette. That required clicking on another link from the LG home page itself. That home page was acquired either by a bookmark from within your browser, or a prompting link displayed in an email. These chains of links are so common now that we hardly notice them; I get dozens of emails a week from friends with URLs embedded in them and, if the context seems interesting, click on them without even reading the HTTP address. [ This is, of course, very dangerous behavior - but it's very common as well. URLs can very easily be used as traps for the unwary: e.g, the HTML version where the link text is completely different from the link target; the "misspelled" URL that's one letter off from a bank site - and LOOKS exactly like that bank site as well; the "trick" URL such as http://microsoft.com\important\free\download\no\really@3515134258 (most, but not all browsers these days are too smart for this; when opened with, e.g. "links" or many version of Internet Explorer, the above will take you to http://redhat.com); etc. Caveat emptor... -- Ben ] But it's when we finally arrive at a page whose contents we intend to explore, that internet navigation really takes over. The distinction is so significant that I'm going to assay some jargon creation here:
These are examples of internavigation we see every day: Because of the commonly-accepted convention that blue text, especially when underlined, is intended as a link to Somewhere Else, we immediately roll our mouse over it and click without pondering what will happen: if it's blue and/or it's underlined, it had better take us somewhere when we click on it, right? But when nothing happens (because the linkage is broken or the designer underlined and/or made blue the text without intending it to be a link), we get startled, and then usually get pissed off. (The little gloved hand icon is a good indicator that something, blue or not, is a link, but it doesn't, alas, work on all browsers and all operating systems and all pages.) But now you've internavigated to a particular page, like this one, and you want to move about, not only within the displayed page but among the pages of the site. Anchors are a simple way of navigating a single page; you will often see the word Top or the phrases Back to top or Top of page used to bring you back up from a long descent into a page's content. (If you click any of these, you will go to the top of the page.) Text linked to anchors can also provide a way to move quickly to related material, whether on the same page or another page. The reason to return to the start of the page, of course, is to provide access to navigation tools. Internavigation tools are typically icons or text buttons, which represent links to pages within the site or on other sites. Intranavigation tools, unfortunately, often look exactly the same; making them look different (especially from tools that take you out of the site) is tricky, but worthwhile. Even if they don't have any graphic quality to them, linked-text tools are really buttons (these are just examples and don't really go anywhere, so don't bother clicking them, even though they're blue and underlined):
With some modest formatting, they begin to look more like 'real' navigation tools (don't click these either):
But what should they look like? Are they part of the 'design', or are they just HTML-generated buttons like these?
The other problem that comes up is, where to put them? Do you just run them across the top of the page, as these might be? What then happens when you want to add more (or, more properly, the client wants you to add more, a lot more, like maybe a dozen more)? Do you make them smaller? Run them in two lines? (Don't laugh, you'll see that farther along.) Or do you start to stack them down the left side of the page? If so, should they be in their own frame, so that they always stay visible as you scroll down the page?
A non-scrolling frame has its own awkwardness, of course, and seems to have fallen out of favor with many designers. But a list of buttons down the left side is almost a universal solution these days, as shown in these (half-size) examples (none of which are in non-scrolling frames, by the way):
The same issues apply to navigation bars at the top of the page, as shown in these examples (see, two lines!):
Running out of room everywhere else, sites are beginning to wrestle with navigation at the bottom of the page:
Now there's some visual complication! You've got (roughly, from the top) blue underlined links, button links, a data-entry box, a pop-up requiring a 'go' button, a reversed underlined page link, radio buttons, a selection list, a clickable image, blue underlined links, another selection list, another date-entry box with its 'go' button, blue underlined links in an unnumbered list, blue underlined links with clickable images, yet more blue underlined links, a data-entry search box with yet another 'go' button, and bottom navigation using many black underlined links, reversed underlined links, and blue underlined (though not in blue, just to be different) links. Whew. This shows what we've grown accustomed to as 'conventions', even for links to other pages: traditional (and now almost quaint) blue underlined text, buttons, images, and text of varying colors and underlining. You can tout your ability to do CSS and 'handcoding' all you want, but if you can't decide what a link should look like better than that, I don't want to hear about it. Oddly enough, we've gotten so used to information overload that (most of the time) we can focus on what's important to us, even in a page as complex as this one. On the other hand, why should we have to? Why does every page have to have access to every other possible page in the site? By my count, there are links to over one hundred other internal pages on that one weather.com page. That's like putting the entire table of contents on every page of a book, just in case...
If the two header bars shown above, after being carefully introduced on an earlier page, were merely used as links at the bottom to 'jump' pages carrying a list of the 80-odd other pages they represent, not only would it save a lot of page room (hey, every bit helps when you're paying for transmission or waiting for bandwidth), but reduce eye irritation immensely. Okay, we're looked at several 'professional' web layouts, and seen a few constants:
My advice for internavigation and intranavigation tools is this: determine your internal conventions early and stick to them. Some rules, for those who like rules:
|
But for a look at some really exciting navigation issues, let's
try weather.com (click here to go to a 
Prince Henry
St. Brendan
St. Isidore![[BIO]](../gx/authors/seymour.jpg)