Development of the University of Illinois Web

Navigational System Features

Kaitlin Duck Sherwood

Because the Web is able to deliver dynamic, graphic information, navigational information need no longer be an ad hoc affair, given in words by people whose spatial memory comes with no guarantees of quality. Most people still navigate by reading notes that they scrawled while on the phone, which seem to invariably leave out or get wrong at least one crucial piece of information. The directions won't note that the southeastern staircase must be used, or that a key is required after five o'clock, or that the building is not visible from any street.

My goal was to provide a usable navigation system, one that allowed people to not only easily find information that would help people navigate through the campus but to easily link to pages that would show others how to get to the location of interest. Thus people would be encouraged to make links to maps on their home pages showing the location of their office, seminar announcements, meeting locations, and classroom locations.

Towards that end, I built a navigational system consisting of many tightly interlocking pieces:

This section will describe these pieces and how they link together from a user's perspective.

Building Information

134 of the campus buildings now have information on the Web. What information exists varies, but all buildings have information on their street address, Operations and Maintenance identification number, and full name. Most of the more prominent buildings have a list of the organizations housed in the building (hyperlinked if the organizations have Web pages) and a photo of the building. 29 have latitude and longitude coordinates for the building. Two buildings have information on their architectural history, twenty-four have wheelchair access information, and seventeen have floorplans available. For an example of building information, see the Transportation Building information page (or lobby) in Figures 11A and 11B.

People used to ask me why I included latitude and longitude information. I used to say, "I don't know, but if I put it there, someone might find a novel use for it. If I don't put it there, nobody will find a novel use for it." There is now some talk, however, of using that information to estimate travel time between points. This travel time could be used to advise registering students of overly aggressive transfers between classes.

Maps and Floorplans

Eleven of the buildings that have floorplans also have occupancy information. For example, clicking on Textual Building Directory on the Transportation Building lobby page will take the user to a listing of all the rooms in the building, ordered by occupant, as seen in Figure 12.

Furthermore, occupancy information can be determined on a room-by-room basis by clicking on the appropriate room. For example, clicking on the floorplan at room 117 (on Figure 11A) will take you to the General Engineering Department's home page (Figure 13). (To get to different floors, the user can click on the stairs or the elevator.)

Once on the General Engineering Department's home page (Figure 13), clicking on the text 117 Transportation Building will take the user to a page showing the first floor of the Transportation Building with room 117 circled (Figure 14). This "zooming out" can continue for several more layers. Clicking on Where am I on campus? on this page will take the user to a map of the Engineering campus with the Transportation Building circled (Figure 15). Clicking on All-Campus Map at the bottom of this page will take the user to the all-campus map with the Engineering campus circled (Figure 16). Two more levels of "zooming out" are possible to show the location of the campus in relation to Champaign and Urbana, and the location of Champaign-Urbana in Champaign County.

"Zooming in" is also possible. From the all-campus map (Figure 16), clicking on the top rectangle will take the user to the Engineering campus map (Figure 15 but without the circle). From the Engineering campus map, clicking on the Transportation Building will take the user to the Transportation Building lobby (Figures 11A and 11B).

All 134 buildings with information can be "zoomed in" on in this manner, and all the buildings' locations can be found by "zooming out" from their respective lobbies, with circles surrounding the building of interest the appropriate map - one of four area maps, or on the all-campus map for those outside the main campus core.

The URLs for these maps and floorplans was very deliberately kept simple. It would have been relatively simple to write code that took the name of a GIF file and x-y coordinates from a URL and based all manipulations on that information. However, human beings don't think naturally in terms of pixels on an image. Humans think in terms of rooms numbers and buildings. Thus, extra work was done so that the information embedded in the URL would be the building and the room number instead of the location of the GIF file and the bounding box of that room.

Care was also taken to allow for appropriate fallbacks. If the location of a room in a building was requested, but no floorplans were ready for that building, the program would return instead the location of the building. This was done at the time of the access, so that people could make links to rooms that didn't have floorplans. Once the floorplans were made available for that building, the person's old link would suddenly show the room circled instead of the building. No intervention on the author's part would be required.

Virtual Walkthrough

A "virtual walkthrough" of the campus is available, allowing people to get a feel for the look of the campus without needing to visit in person. A photo of a scene is displayed with navigational directions surrounding the picture. For example, Figure 17 shows what someone would see if they were facing north just west of Mathews Ave at Green Street. Clicking on Enter Metallurgy and Mining Building, will take the user to the lobby for the Metallurgy and Mining Building. Clicking on Turn Right will take the user to a photo showing what the user would see if they turned right from their virtual standpoint, namely a photo facing east on Green Street just west of Mathews Ave (Figure 18). Clicking on Go Forward will take the user to a photo facing east on Green at Mathews (Figure 19), and so on. The sequence from Figure 20 to Figure 24 shows a continuation of this virtual stroll to the front of the Transportation Building. Clicking here on Enter Transportation Building will take the user again to the Transportation Building lobby (Figure 11A and B).

In all, there are 800 pages in the virtual tour - four compass directions at 200 geographical points. The points are, for the most part, a half a block apart, and cover the University property between University Ave on the north, Sixth Street on the west, Taft on the south, and Goodwin on the east.

The tour can be accessed in several ways. Aside from typing in a URL or selecting a link from the navigation index page, clicking near the entrance of a building on a floorplan can take the user into a tour. For example, clicking near the west door of the Transportation Building floorplan in Figure 11A will take the user to a view from the west door (Figure 25). (This is happens to be the same page that the user would come to by clicking on Turn Around in Figure 24.) Users can also click on a street in an area map, and for most locations on the Quad, Engineering campus, and Agriculture/Business maps, will be taken to the appropriate point in the virtual walkthrough.

Wheelchair Access

The wheelchair access pages, available from many of the building lobbies, list elevators, stairs, ramps, automatic door openers, bathrooms, and any other obstacles that people with mobility restrictions could encounter. Furthermore, because rooms could be circled via the above system, links to exact locations could be made in the text of the access page. (See Figure 26 for an example of access information for Altgeld Hall, a particularly confusing building.)

The wheelchair pages were definitely an afterthought, something that turned out to be easy to do once all the other pieces were developed. They ended up yielding the most emotional appreciation and an award from the disabled students organization. The wheelchair access information also has a much broader utility than I had originally thought: information about ramps and elevators is very useful when moving equipment between buildings, or even for freshmen trying to figure out the vagaries of old, confusing buildings.

Features Summary

The navigational system allows users to navigate easily through a wide array of information. Information on how to get to a room, how to get to a building, what will be seen on the trip, and what one will find once there is seamlessly integrated.


Go on to
Navigational System Implementation
Go back to Framework

Go up to Table of Contents


Kaitlin Duck Sherwood