Page travel: navigation in large Web pages











For much more detailed information on innovations in 'page travel' and other innovations, see the page Web Design.

It's common to see in long Web pages an instruction of the kind 'Click here to go to top of page' or 'top of page.' It makes the simple task of going to the top of the page unnecessarily slow and cumbersome. It takes time to find the instruction before moving the cursor to it. The instruction has to be repeated at intervals. This detracts from the appearance of the page.

The rail, the blue line on the left, is used on most pages of this site. This is a far superior method of reaching the top of the page. Its consistent position on the page makes it easy to find and use. If there's a list of links at the top of the page to different areas lower down the page, then the reader can return to the top of the page almost instantaneously, at any time, to consult the list again. Most of the pages on this site make use of this method. One example is the detailed page Web Design. The list of sections at the top of the page, 'Page-home, flight-destinations,' can be easily consulted and used by clicking on the rail.

There are many, many Web pages which should be far longer. Text should generally be presented in narrow columns. The optimum width of a column of text for efficient reading is not much more than nine words only. Much wider columns are often used (as on the pages of Wikipedia.) Very tall buildings only became feasible when lifts (elevators) could be used to facilitate vertical movement within the building. Very long Web pages need the rail to facilitate vertical movement within the page (although rails can be used to facilitate horizontal movement too.)

'Large pages' are pages which are wide as well as long. Using a page which uses 'Long Page Design' and 'Large Page Design,' even pages concerned only with factual information, can be compared with taking a journey. Discussions of web navigation are generally concerned with navigation in a site made up of many pages and give guidance on how to get from one page to another. Navigation in Long and Large Page Design is far more similar to navigation as understood by travellers and explorers, navigation in a continuous environment. Here, I concentrate on Large Pages.

The starting point for journeys on the Large Page is page-home just as Home Page is most often the starting point in a site made up of many pages. Travelling in the Large Page can be achieved by scrolling but with far less effort by taking flights and by using a rail network. The 'flights' are simply the movements made by clicking on a link. The rails   are blue bands but 'invisible bands' can be used as well. The rail on the left takes the traveller in a northerly direction - from anywhere on the page, you can travel back to the top of the page by clicking on the rail. Rails can be used for other directions: south, east and west.Another technique I use is 'dual-purpose' text and images. On pages which use this technique, the reader can simply click anywhere in the text or in an image to return to the top of the page.

Large pages may take the traveller very far from home but the feeling of remoteness is removed by the fact that it's made very easy to return to home. In the page Poetry, if you click on any poem, you're given a flight straight back to page-home. This is achieved by using dual-purpose text and images. (Readers without an interest in poetry would find it interesting, I think, to use the page.) Page-home has all the facilities you need to use the page and to start on other journeys. It has a list of destinations or some other way of displaying the journeys which can be taken, such as an image which shows the destinations, the regions, the flight network and the rail network. It has an information board which gives basic information about the site. There may be other facilities too.

Sometimes, when we travel to a different region (a region within the country or in a different country) we have the feeling that 'we could be anywhere.' The regions within a Large Page can be designed to avoid this feeling, to give regional differences. In the page Poems, the regions are very different in the form, tone or content of the poems but the differences are also shown by using different colour backgrounds. The use of different fonts or text sizes is another way of making one region different from another.

A screen can only show some of the Large Page. You can quickly see much more, or all of it, get a 'bird's eye view', aerial view, by using the zoom facility of some browsers - zooming out rather than zooming in. You can appreciate very easily the organization of a significant part of the Large Page, and then return to what I call ground view. There's a real fascination, I think, in being able to switch between aerial view and ground view of the page. Aerial view gives a useful view of the layout of the page but it's very interesting, I think, in its own right.

If you use more recent versions of Internet Explorer, you can use the zoom facility (50% is often the best level to use) to zoom out from the usual level, 100%, for an aerial view. The browser Opera has offered zooming facilities for a long time and the ones in the most recent versions of the program are excellent. In both Internet Explorer and Opera, the zooming facilities are located at bottom right of the screen. Of course, all the links within the page and to other pages work in aerial view.

This is an example of a flight-node. A flight-node can be active - clicking on it takes the user to a location - or inactive. In this case, it draws attention to a link, often an underlined link. Larger flight-nodes can be used. These are large enough to be easily seen when the page is in aerial view.

The method used in Poems to return to page-home can be used in all Large Pages (and Long Pages too.) The method makes use of 'dual-purpose' text and images. Some of the poems are in text form and some are in image form. These forms are used to present the poem but they have a further use, for the link with page-home. This is to apply the design-principle that one object can have multiple functions: what I call a 'one-many' linkage. Dual-purpose text, like rails, can have many other uses besides going to the top of the page or returning to page-home.

Using the rail or dual-purpose text and images provides travel facilities which are very quick and efficient, not slow and cumbersome. If the page has a list of links at the top, then the traveller can click on a flight-link, fly to the new place on the page and consult the material there. Then, to go back to the top of the page, the traveller simply clicks on the rail. It's always in the same place. There's never any need to look for it. The traveller then makes a rail journey back to the top of the page. (Rail journeys are just as quick as flights.) Alternatively, the user can click on 'dual-purpose' text or an image to travel to the top of the page. At the top of the page are the links and the user can click on another link. An example from this site (there are many others): the page on Web Design: a very large page but straightforward to use. The page includes travel facilities for journeys east and west as well as north and south.

The page on Concrete poetry uses two vertical rails. The outer rail, very near to the left margin, is used to go to the top of page. The inner rail is used to go to the top of one section, which has its own underlined links.

Large Page Design is the design of pages which are wide as well as long. The poems on the page Poems could have been displayed one underneath the other, to make a long page. Long pages are very common of course. Instead, I place the different regions one underneath the other and the poems in each region are side by side so that the page is wide, although not very wide. Most large pages will be much wider.

I developed Large Page Design before the advent of widescreen monitors. Web design is generally failing to take advantage of these monitors. There are even more compelling reasons now to take advantage of Large Page Design.

A great deal of contemporary information is 'wide' as well as 'long' and Large Page Design is needed to present the information adequately. For example,

Designers have been using the left edge of the page almost exclusively for a long time. To do justice to content which is wide as well as long, it's necessary to head east, to explore and use more of the interior of the page.