navigation bar Audience Navigation Main Page
Joye Crowe-Logan and Camille Thompson

Visual Design

Review the sites along the lines of Williams’ design principles. Do the sites make good use of:

Contrast? – Hierarchy? Readability/Legibility? Scanability?

New Brunswick's site uses different colors to set various sections apart on its main page as well as to distinguish each page that is linked to from the top banner. This use of color brings an element of contrast that is helpful and inviting: The background color does not interfere with the text, and is also not boring, as may be a problem with some (see Williams' bad design features).

Hartford does not use much color, but one could say that when color is used, it provides the contrast needed to make those certain elements stand out. Unfortunately, a plain white background may be just as much a turn-off for some users as a poorly chosen background color.

It is difficult to find a clear “hierarchy”, in terms of presenting more important things first, on a library website, as most of the items these sites present could be seen as equally important, or important in different ways to different users.  Both sites, however, have links to what is most likely the most sought-after information right at the top of the main page:

cropped screen shot of top of Hartford Library's site

cropped screen shot of top of New Brunswick Library's site

Both sites' main pages are quite legible, though many of Hartford's other pages could be difficult for some users to read. For instance, the library's mission statement, in which the text is rather small and the simple black-against-white can be boring.

Hartford’s main page is easily “scanable”, since it is rather sparse and primarily contains headings that lead to other pages. Most of those pages are also somewhat sparse, with headings that make them easily scanable.

New Brunswick’s main page may be less easy for some users to scan due to how many things it has on it. Its use of headers and eye-catching images, however, is likely to enable most users to scan it easily enough. Most of the pages also use headers well for scanning purposes, and New Brunswick offers the added benefit of anchors, which can be used to jump to specific headers from the menu on the left-hand side.

Repetition? – What elements repeat? How does site brand?

Hartford makes good use of repetition, as it has the Hartford Library logo on each page that it directly controls, effectively branding all those pages.

New Brunswick, however, does have a few pages that are not well branded. Though most pages continue to have the New Brunswick Library banner at the top, which is good repitition as well as branding, the most obvious "orphan" is the Children’s Homepage: This page seems completely cut off from the New Brunswick Library site, even though it is in fact part of it. There is no repitition of the elements from the main page, and no real obvious branding: The main sign that it is part of the New Brunswick Library's site is that the page title does include the library's name, but even then, it has that at the end of the title, with "NBFPL Kids" at the beginning. Not all users will be familiar with New Brunswick's abbreviation of the library's full name, so this could be quite confusing.

Another example is the "Exploring the Universe @ Your Library" page, which at least has a similar look and feel to the main site, though it is not branded with the NBFPL banner. This one, however, does not have the library's name in its page title, and thus can be seen as another "orphan". Fortunately neither of these are completely orphaned, as they do both have links back to the library's main site. ("Orphans" are mentioned by Williams as bad features.)

Alignment? – Clean/Good lines?

Hartford's site could use some better alignment: In particular, the text could be moved away more from the left edge of the screen on the main page and the other pages that have the list of links on that left-hand side. (Moving text away from the left edge is suggested in the CARP vs. CRAP site.)

As previously mentioned, New Brunswick’s main page may be a bit too “jam-packed” for some users, and could possibly use some more spacing between items to ease some users' eyes. The alignment of the items, however, do create pretty good lines that keep the items organized. Also, other pages are not so full of different items, and are well aligned.

Proximity? – Like items grouped together well?

Both sites group items together rather well. Hartford's main page is pretty much nothing but grouping items together: The navigation buttons do just that, while the menus from the top navigation bar also group links to like pages together. The thing is, since links to other pages are pretty much all there is on the main page, the site design is rather poor: One of Williams' bad design features is "Navigation buttons as the only visual interest, especially when they're large (and dorky)".

New Brunswick's main page has more design appeal, but the groupings are not as clear-cut. The top banner holds a navigation bar with links to what might be the most used pages; the left side holds a different navigation bar as well as information about the library's hours; the right side groups together similar library resources that are accessable online; and the middle is used for current topics of interest. These groupings are quite reasonable and organizes the home page into a compact but attractive space.

Return to top