Originally written as classwork for the University of Illinois LIS program.
For my library website analysis this week, I decided to analyze the University of Illinois library website. The site recently underwent a complete revision, with the new version I believe just becoming live to the public this past January.
In the lecture for this week, we looked at the old UIUC library home page as an example of a not-so-great library website. This is what the old site looked like (archive from the Wayback Machine, thus the messed up chat window):
I won’t go very far in listing out the problems it had here, since I’ll be looking more at things that have been (hopefully) improved in the re-design throughout this post. But real quick to summarize I would say that this design had a few critical issues:
- overly cluttered
- no clear hierarchies (it took me awhile to figure out that “Most Popular Resources” was a tab referring to the links in the center column of the page, and not the navigation links beneath it)
- no clear starting point besides the search box
- not mobile friendly
This is what the new design looks like:
Briefly, some pros in my opinion:
- clearer hierarchies than the old site
- color scheme makes the sections of the site more obvious to the user
- responsive and mobile-friendly
And some cons:
- still pretty cluttered
- link to library catalog not very prominent
- design not consistent throughout the rest of the library pages
That said, I think there has been a lot of improvements made in the re-design, and I found it useful to look at the two different versions to make comparisons and really see some examples of some of the ideas Krug talks about throughout Don’t Make Me Think.
Where to Begin (Ch. 1 & 7)
In the first and seventh chapter, Krug discusses some things that users should not have to think about when initially viewing a web page, including questions such as “Where am I?” and “Where should I begin?” (17). Although both the old and new versions of the UIUC library site have similar content, I think that the new design does, for the most part, a better job of alerting users to what options are available, in a way that requires less thinking on the part of the user.
The “Easy Search” section stands out in a darker blue colored box than the rest of the page. There are also tabs above the search box that indicate what category is being searched. But if users aren’t sure what exactly they’re looking for, the main navigation links above the search box provide useful starting points for browsing, with clearly labeled sections to choose from (“About,” “Find a Library,” “Special Collections,” etc.). Since Krug says that users are “usually trying to find something” and have to “decide whether to ask first or browse first” (54). I think the design of the new site is helpful in presenting these two options in clear, visually prominent locations at the top of the site, more likely than not the first things to draw the attention of users when loading the page for the first time.
This said, I also find the main search box to be not necessarily as useful as it seems on first glance. For instance, if I type in a query, I’m going to get a whole lot of results on a page leading me to other resources (a lot of them electronic, the main library catalog often buried down in the list of links). Although I often am looking for electronic resources, I find this manner of listing results cluttered and confusing. More than that, I don’t see why the catalog isn’t the first link listed in the results.
I go to the main catalog almost every day in my current grad assistant position, since a large part of what I work on is acquisitions. I find it confusing and frustrating that a link to the main catalog isn’t provided in a more prominent location like the easy search box, but is instead sort of hidden under the “Catalogs” drop-down menu. It might seem like a sort of silly complaint, since I can (at this point) easily get there in two clicks, but I still think it would make more sense to have some sort of way to at least click on a tab in the easy search box that will let me search the catalog or go to the page to search the catalog.
Ch. 2: How We Really Use the Web
In the old version of the site, the navigation menu was located on the side. This made it not necessarily visually prominent or obvious, since the menu sort of blended in/was overwhelmed by the other links in the middle of the page.
Like Krug says, users aren’t going to want to have to stop and figure out that these options are a starting point for browsing more library info. Something about their positioning and design on the page should just alert to users that this is a case. I think this is much more successfully done in the newer design with the main navigation links being placed at the top of the page:
They also have been edited down to have clearer labels and better organization in the re-design, which I find easier to process. This is especially true in light of Krug’s discussion of scanning and satisficing, since users more often than not “glance at each new page, scan some of the text, and click on the first link that catches their interest or vaguely resembles the thing they’re looking for” (21).
That said, I do think that the design is still somewhat overwhelming to new or unfamiliar users. I think it could benefit from a calmer and clearer design like some of the examples from the lecture, maybe with clear indicators of what the different sections on the site are about (like the “Find,” “Request,” “Interact” example).
Ch. 3: Billboard Design 101
One thing I think the new design accomplishes well is providing the type of visual cues discussed in chapter three. Krug talks about how “it’s important to make it obvious what’s clickable and what’s not” (37). Links are pretty consistently indicated throughout the UIUC library main page, by either being in a colored box or having a small downward arrow next to the words. Nothing looks particularly like a “button,” but I think that everything is consistently clickable throughout the home page, so I don’t necessarily see this as a problem, although I can also see how it could be a potential problem for some users. When hovering over links, most change to a darker background color. All have a dotted outline indicating that what is being hovered over is in fact a link.
Ch. 4: Mindless Choices
In chapter four, Krug talks about how users like mindless choices, and what this means for designing websites. I think the new design does a good job of providing such choices in the area that lists “Libraries and Hours,” “Resource Guides,” etc. This section is well done in my opinion because these links do not load in other pages — allowing users to “painlessly” click on the different tabs, while having “confidence that they’re on the right track”and can easily backtrack if necessary (41). No matter which choice a user makes, all the same options remain, and they don’t end up on an entirely new page, having to potentially find their way back to start their browsing over again.
Another huge improvement is the re-designing of the “Most Popular Resources” section. In the old version, these are listed throughout the main page of the site, and once again are not necessarily visually appealing or all that intuitive to browse through. Instead, they make the page feel cluttered, confusing, and overwhelming.
By moving this section to be directly under the search box and condensed into drop-down menus, I think it is in a more logical placement on the page than previously. But as I mentioned before, and as the lecture for this week emphasized is the case with many library users — when I think of searching a library site, I think mainly of searching the library catalog. For this reason, although I appreciate the minimized clutter in comparison to the old design, I still think there could be an improvement that somehow makes this section more noticeable and more clearly identified (a large label like the “Easy Search” that perhaps says something about “Finding Resources”?).
Ch. 5: Omit (Needless) Words
To me, the main library site seems like it does well in adhering to this principal. I think the designers were cognizant of the cluttered, too-many words feel of the old design, and as such, a lot of information that was previously dumped everywhere on the page is now organized into different tabs or drop-down menus. There’s also not really any examples of too many words or instructions on the main page that I can find. Individual library websites throughout the university are another story….
Ch. 6: Street Signs and Breadcrumbs
As one leaves the main library page, the design of pages is rather different, which is one aspect of the UIUC library sites overall that I think could use improvement. It definitely would be nice to have a consistent look and feel across library pages that matches the newly designed home page. But I also understand the reasons behind the way the different library sites look, especially considering the way the library’s CMS is currently set up.
At the very least, all the library pages use breadcrumbs to alert users to where precisely they are on the site overall. For instance, if one were to click on the first drop down link under “About” on the main page to view the “Welcome from the University Librarian,” they would be brought to this page:
It’s not a particularly pretty page, and as mentioned, it doesn’t match the new look and feel of the home page. But the title does indicate (though rather wordily) what page the user is on, and what that particular page is about. And the breadcrumb above the title shows where in the overall structure of library sites the user is — in this case, in the Office of the University Librarian page in the Administration section of the main Library site.
Conclusion (Ch. 8 & 10)
Overall, I think the recent re-design of this university library site was successful and addressed some critical issues from the old design. I know (from hearing about it in a web design class I took while the re-design was in process) that the process also involved a lot of user testing, and that a crucial point to those involved in the actual design team was to involve the community of users who would actually be using the site every or several days a week/month/etc. And one huge success about the new design is how responsive and mobile-friendly it is. All of the same content is available regardless of device the site is being viewed on, with each section condensing and/or moving around the screen to be accessible at different screen sizes.
Like we saw in Subject to Change, design is not a process that can be solved with one-size fits all solutions or equations. It is complex and involves many different spheres, including cultural and emotional contexts of particular users within a community. When we approach designing for our users and community in ways that respect this complexity, we can work on cultivating the “goodwill” Krug talks about in chapter ten, by making things obvious and easy to use, saving users steps and time, predicting what questions users are likely to have, and more (166-167). But like the lecture for this week also covered, there are certain best practices for library websites that can serve as good starting points for designing or re-designing sites, some of which I think the UIUC home page could still use for further improvements.