Tag Archives: usability

Directory Updates for September

The first meeting to review the feedback posted to the Web Makeover Blog for the online Directory occurred this afternoon. We agreed to a set of updates that will be made to the Directory prior to the start of the academic year in anticipation of the retirement of the print version of the Directory. These changes will focus on ensuring that the information included in the print Directory is accessible in the online version and small improvements in the online interface. We won’t be completely revising how the Directory work at this time, as we expect further changes to occur as a result of the Web Redo Project’s revisions to our overall Search strategy.

Here is what I’ll be working on changing:

  • Add the Department contact information to the Directory as a downloadable PDF. This is already done! We heard loud and clear that the information in the front of the Directory needed to be accessible online, and we’ve added a link to a PDF containing this information. The added advantage of this being in PDF form, for now, is that we recognize that this is the type of contact information people might need when they are not able to access a computer, either because the power’s out, or they’re working in a location without access to a machine, or traveling. You can print out this information at your leisure as a quick contact list for these situations.
  • Add A-Z links at the top of the Directory interface. Clicking on a letter will show a list of people whose last name begins with that letter and you can click on their name to see their record. This will give you a quick way to glance through the Directory.
  • We will add a field to the search form that lets you specify whether you want to search for only Faculty, Staff, Students, Language School personnel, MMLA, etc.
  • We will add a field to let you search by just first name, or just last name.
  • Approval of new photos will transfer to HR, and possibly other departments as makes sense.
  • In coordination with HR, we’ll review the current display settings for each field. There may be changes to how display settings permissions are handled in the Directory.
  • We’ll investigate a way to provide access to an online form year round that lets people update their Directory information.

This may not appear particularly ambitious, but we wanted to focus on what could be completed by the start of the academic year and not set ourselves up to be in a position where we’d have to redo this all depending on the work we’ll be doing for the rollout of the new website in January. I personally think this list helps address many of the concerns raised in the comments on the Web Redo Blog.

Should hyperlinks be underlined?

We’ve had some back-and-forth discussion this afternoon in both the Design/IA committee meeting as well as on Twitter over whether hyperlinks should be underlined on a site design, or if we were far enough along with this whole “web” thing that this was no longer a usability requirement. The party line in usability (from the stodgiest usability expert on the block) has been for a long time that hyperlinks should be underlined and set in a color that distinguishes them from page text.

And so, when asked in the Design/IA meeting whether I thought we should remove some underlined hyperlinks from the page, I suggested that we should keep them… and that it’d be great to have the rest of the links underlined as well. Later, when asked whether adding underlines on mouseover (like the New York Times does) would work in place of having them there all the time, I said:

In my opinion, that’s a cop-out to try and back-door in the usability after the fact. If your cursor is already over a hyperlink on a page, you already know it’s a hyperlink so what does the mouseover behavior get you? Usability studies have consistently shown that effective links on sites have two features:

– They are underlined
– They are all the same color and that color is different from the color of regular type

The NYT site fails at both of these things, though they come close on the second as most of the links are that blue color, offset from the regular type. However, I didn’t know immediately whether the OPINION and TRAVEL links on the right were actually links. I had to mouseover them to find out and that’s lost time.

I know for a fact that our sites are not going to strictly adhere to these usability guidelines because it’s the belief of some that they lower the visual appeal of a page. But what we can get out of this is that using hyperlink underlining and color schemes for links are ways to highlight those areas of the site that you *really* want people to click on.

As I said in my blog comment in response to the designs, I’m no design expert and I’ll leave the little decisions like this up to the designers we hired to complete this project, but it does sadden me to know that the site won’t turn out to be as easy to use as it could be, in my opinion.

But Jakob’s usability advice was written in 2004 (though he does mention at the end that he echoed his advice at a conference this year). Has the reality of links on the web changed since then? It’s hard to say. Most of the usability guides out there simply echo Jakob, usually with a link back to him. Most mention that, at the very least, links need to be set in a different color than text and that this color should be consistent on the page. Another site advises that hyperlinks don’t necessarily need to be underlined, but they should have a style (other than just color) that sets them apart:

Style – There are many styles that can be applied to links: adding underlines, making them bold, changing font family, and more. A link should not have the same style as other elements on the page.

(emphasis mine)

Jason Pontius, the President of White Whale, the design firm handling our site mentioned on Twitter:

@imcbride @kristenbyers Often we like to only underline them inside paragraphs: p a { text-decoration:underline; }

This seems to agree with other advice that begins by stating what the convention has been almost since the first web site appeared:

The de facto convention has been that hyperlinks are rendered in blue with underlines, that they turn red when clicked, and that visited links are purple.

The most readable way to render most text is black on a white background, and making text hyperlinks blue (#00f) works very well on white. It is clearly distinguishable from regular black text, while still providing enough visual contrast to be readable.

But then continues with advice I consider spot-on:

I think underlining becomes unhelpful when there are numerous inline links in paragraphs, in lists of links, and when there are lots of sets of links on a page..

When the link text is close to other link text, underlining makes the text appear cluttered and hard to read, but when hyperlinks are set as part of a body of text or appear inline, adding the underline helps to distinguish them and set them apart.

I always interested to hear what others think about stuff like this, so if you have any good resources that expand on this issue, send them my way. On a more practical issue, given the information I’ve linked to above, should I change this blog’s theme so that the hyperlinks on the right are not underlined by default?