Kurt McKee

lessons learned in production

Hey there! This article was written in 2007.

It might not have aged well for any number of reasons, so keep that in mind when reading (or clicking outgoing links!).

Northwestern's new NU Link

Posted 7 April 2007 in northwestern-university, nu-link, opinion, review, semantics, and usability

Northwestern University's Associated Student Government (ASG) has launched a new website today. Unfortunately, it features poor usability and is a semantic disaster. Let's break it down.

Purpose

The new website, NU Link, appears to be primarily designed to disseminate information to the student body. To that end, they've tried to include a number of features that would make the page useful enough to serve as a homepage for students.

A screenshot of the entire NU Link webpage as launched on April 7, 2007

There are several key features:

  • Links to important Northwestern websites
  • Links to popular external websites, such as GMail and Facebook
  • Calendar of Northwestern events
  • Built-in feed reader (links only)
  • Miscellaneous items, such as local weather and search features

These features together probably address most students' needs. As a portal, NU Link seems to be fairly useful.

Usability

Links

Most everything on the page is a link. Absolutely nothing looks like a link, however. Worse, there is absolutely no consistency to link behavior. It is the most confusing mess of links and link behavior I've seen in a long time. Most links are not underlined by default. One is! Most links are underlined when you hover your mouse over them. Some aren't! Most links are black text. Some are displayed in purple or white!

What happens when you click on a link is equally confusing. Some links open in a new window. One of the ads was a link to a PDF file of a JPEG image of an ad!

Let's get some standardization of both the link appearance, and link behavior.

Feeds

A screenshot of the feed reader and its tabs

The feed "reader" is a series of links to the latest stories from various news agencies, such as the Daily Northwestern and the New York Times. The feeds are organized by news agency into various tabs. The behavior of the tabs is quite vexing, however.

The very same moment your mouse moves over the tab, that tab is selected, and its associated links displayed. What I found was that I constantly switched tabs by accident when trying to click on news story links. I recommend that, in order to change from one tab to another, the student must click on the tab they're interested in. This will bring NU Link's tab behavior in line with established tab behavior.

Search

I cannot express how frustrating the search forms at Northwestern are, and for exactly one reason: they violate Fitts' Law with a vengeance. The search form on NU Link can be used to search the Northwestern Directory, the Northwestern website, or Google. In order to change search providers, however, you have to click on the appropriate radio control, which on my computer is rendered as a 10x10 pixel area. Clicking on the text next to the controls...hang on, they're links!

A close-up view of the search entry and radio controls

The point is, the text next to the radio controls should be enclosed with <label> tags that link them with the appropriate radio control. This gives the user a much larger area to click on. (Incidentally, it is due to Fitts' Law that the feed reader's tabs are so frustrating.)

Oh yes, and one last thing about search: go ahead and make Google the default search provider. Seriously.

Semantics

NU Link is not a web-friendly place, and I mean that in the same way I would refer to a Geocities webpage from 1997.

Markup

Many of the images (particularly those that are secretly links!) do not have alt attributes. What this means is that users with impaired vision who are using screen readers need not apply.

Similarly, most of the content is organized in a bunch of tables. This has no meaning because the data is not tabular in nature. A better organization would involve ordered or unordered lists, particularly for the feed reader and link lists. These lists could then be styled appropriately.

Javascript

The calendar relies heavily on Javascript. However, there is no reason for links to require Javascript: the href attribute can point to actual content, but the click can be intercepted using the onclick attribute of the the link. In this way, people with Javascript disabled (and search engines) can also participate.

Links

Sorry, but these links are just atrocious, and I have to revisit them from a technical perspective.

The majority of the links on the page are redirection links. That is, they don't take you straight to the page you're after; they take you to a page that knows where to find the page you're after. The problem is that redirect links are confusing, because they hide where the user is being directed to. No longer is the user able to look at the status bar and know where he or she is going. As an example, the link to GMail isn't to mail.google.com. The link goes to asg.northwestern.edu/nulink/redirect.php?p=1039.

The second major problem is in how they've been implemented. In particular, NU Link issues temporary redirects (HTTP 302). This is a problem because GMail is not temporarily available at mail.google.com. If NU Link must redirect, at least use a permanent redirect (HTTP 301). A better solution would be to cut out the redirection entirely.

I assume NU Link's admins are wanting to get stats regarding how many clicks each link receives, but it would be a more web-friendly solution to use Javascript to intercept the clicks and notify NU Link that the user is going to visit GMail. The added benefit to this technique is that the feed reader links can also be monitored, so that the default news source choices can be fine-tuned.

Conclusion

I think that covers the majority of my immediate thoughts. I wish ASG the best as they improve the site.