Design Considerations for the LCC Library Web Site (2000-2004)

Early on, the LCC Library had two sets of web pages, designed to fulfill different functions.

Back in the late 1990s, the library only had one web-based research database, so the library's home page had mostly information about the library's services and resources. The public computers in the library, on the other hand, defaulted to a web page that was designed to support the online research process, which included links to web index services like Yahoo!, Lycos, and AltaVista, as well as information about Internet resources and the research process, a link to the web-based research database, and a link to a page listing some useful web sites. These two sets of web pages had links to each other, so a researcher could find information about the library, and visitors to the library home page could perform online research.

As time went on, more and more online databases became available with a web interface. There was greater pressure to put links to these databases on the main library home page, which some felt was already too dense with information as it was. Some people expressed a desire for a much simplified main page, but I felt it’s also important not to make someone drill down through too many pages to find often-sought information.

It seemed to me that there were two main functions that people expected of the library web site -- to supply information about the library, and to provide access to the library's electronic resources. What I came up with was a main page split in half down the middle. Information about the library on the left side, a box with a colored background with links to electronic resources on the right.

To reduce the density of information on the main page, I moved a lot of information that was on the old main page off onto separate pages. I tried to develop a logical and hierarchical arrangement of the main page, to make a lot of information easy to find. Links to pages giving information about the library's hours, phone numbers, location, etc. were clustered at the top of the left column. Information about library services were grouped together below, with prominent links to each of the two main service categories, Circulation and Reference/Instruction, accompanied by brief descriptions of the information that was on those pages. These descriptions contained links to often-sought information associated with those services, so you could jump directly to them. Similarly, links to information about library resources were grouped below that.

In the online resources box, different types of resources were also grouped together. Two links to the University of Hawaii's Hawaii Voyager online book catalog system (one link that limited searches to materials in our particular building and another that didn't) as well as a link to information about the catalog system were clustered together at the top. At the bottom of the box was a list of our research databases, largely stripped of descriptions to keep the list compact, but with a link to a page giving detailed descriptions of these resources for anyone who wanted to read it.

My goal for that design was to make it possible for someone who knew what he or she was looking for to get to it quickly, while making extra information easily available to those who needed more guidance.

There were other design goals I strove for that aren't readily apparent.

I tried to keep the web site compatible with a wide variety of browsers, by keeping the design of the web pages relatively simple and straightforward. The web site remains functional, even when accessed by older browsers, older computers, or even text browsers like Lynx. I also make a point of including "alt" descriptions of graphic images, and take other steps to make the web site accessible to disabled persons, without the need for a separate text-only version.

I try to minimize variations in the layout of web pages that can result from differences in browsers, fonts, computing platforms, window size, and screen resolution. One technique I use a lot is to use HTML tables to draw boxes and/or to position elements on the page. This makes for rather plain square boxes, but the advantage of doing that is that the layout will often adjust itself and still work. Somebody with a visual impairment can enlarge the displayed text using browser controls, and boxes will enlarge to contain its text, and elements intended to have a particular spatial relationship will continue to have that same relationship.

This and other techniques were used to keep the layout of the main page fairly constant, regardless of the size of the browser window. The top level page retains its 50/50 split layout, without horizontal scrolling, in any window with a width of around 620 pixels or greater, so the look remains as intended on older low-resolution monitors and newer high-resolution displays, as well as when displayed in frames on others' web sites, or in reduced-size windows. The slogan under the title graphic displays as a single line, centered on the screen, in windows wide enough for that to fit; it displays as two lines, both centered on the screen, in smaller windows.

I always try to use proper grammar, punctuation, and capitalization as much as possible, as I believe that this makes text easier to read, for both native and non-native English speakers.

Other design rationales:

• Fonts were carefully considered. The two halves of the main page were prominently headed by phrases (worded to be brief, yet unambiguous) in a large, bold font that is distinct from every other font on the page. The use of san-serif fonts was limited to titles, headers, labels, and short phrases, usually to distinguish it from surrounding text. Seriffed fonts were used extensively, as they are easier to read. Small fonts are used only for things like the revision dates at the bottom of pages.

• In the yellow Online Information Resources box on the main page, color and lines, in addition to the font, were used to make the section headers easy to pick out. This was important because the space and the content made it impractical to indent the text within the sections, or to use blank lines extensively. The same design was not used on the left side because I felt that the clustering, blank space between clusters, and the indented explanatory sentences was sufficient, and I didn't want to overuse the effect.

• The way the subscription databases were listed on the web site had to be re-thought over the years. It used to be common to subscribe to a particular database from a vendor, so it made sense to list the name of the database. Over time, it became common to subscribe to a package of databases from a vendor, whose proprietary database interface took on a brand identity of its own. In the case of our service from EBSCO Publishing, we used to subscribe to only one database, and now we subscribe to more than 20. Along the way we switched from saying "Academic Search Premier, and other EBSCOhost databases" to "EBSCOhost databases, featuring Academic Search Premier" -- not a decision made lightly, because of the implications for our instructional materials.

• I struggled with Hawaiian diacritics in web page text. There are ways to encode proper diacritical marks in Hawaiian words, but they don't always work properly on all browsers. Years ago, I followed the lead of Hawaiian-language web sites produced by folks who thought long and hard about this problem, and omitted the diacritical marks. When I began to learn techniques to creating diacritics, I started to use them in a limited way on the library web site. I did, however, make it a point to use proper diacritical marks when I created graphical images with Hawaiian words in them.

• The library mission statement is the first item in the "Information About the Library" section of the main page because the head librarian asked that it be placed there. My preference would have been to make it the fifth item in that cluster, as I believed that people are far more likely to be looking for the library's hours. The lines would have also broken more gracefully on the common 800x600 pixel display.

Other little touches:

• The page showing the library's hours is designed to look like message boards we use to display the hours in the library, with a black background with horizontal grooves that we stick white plastic letters into. I took a slight liberty by using both upper and lower case letters, just because it looked a little too harsh to use upper case letters only.

• The background image on the page describing the library's collections was made from a photo of the bookshelves in our Hawaii-Pacific Collection.

• The background image of the Circulation Services page depicts a barcode label, similar to the type we use to make circulation transactions more efficient. The last seven digits of the number is a phone number used by the Circulation department.

• The background image of the Reference and Instruction Services page depicts a catalog card, which itself is a joke, as the card catalog was eliminated after the library was automated in the mid-1980s, long before the web even existed. The catalog record shown on the card is for the library's web site. The "call number" in the corner of the card is the site's URL.

When the University switched from the UH-Carl system (which used a terminal-based public access catalog) to the Hawaii Voyager system (which has a web-based public access catalog), a new web page was created to be used as the default web page on the library's public computers. The new page had links to the Voyager system, to the research web page, and to the library home page.

Back to the home page
Rev. Aug. 21, 2004