Update 20050923: A followup to this piece has been posted.

The University of Kent Computing Laboratory has a homepage that is completely and utterly unusable. What’s worse, it gets “tweaked” every now and then, with links and text changing in subtle ways, leaving the user to try and guess where the information they need has been hidden. If there are “standards” for page design driven by usability research, I would argue that this page is not influenced by them.

The UKC Computing Lab homepage

The thumbnail below links to a full-size screenshot of the UKC CS homepage as of Saturday, September 17, 2005.

Screenshot-Kent-External

We are immediately aware this is the computer science homepage because the top 1/3rd of the page is taken up by a title banner, as well as a relatively large sidebar, both proclaiming “Computer Science at Kent”. “News,” taking 18% of the page and nearly centered vertically and horizontally, is probably the most prominent feature of the homepage, although there is no RSS feed for me to subscribe to. (RSS, or Really Simple Syndication, will be described more fully later; it is a format that helps enable the automatic distribution of content around the WWW.) The prominent, top-right corner is taken up by links to the “Site map” and “Staff Homepages”; I hope click-through usage supports their prominent placement in the page design.

The “Search” feature is effectively hidden by it’s uniformity with “Events”, “Vacancies”, and “Sun Microsystems”. While “Events” might be a front-page item, it is another candidate for having an RSS feed. Also, the link text “Vacancies listed on the university web site:” could do without the trailing colon. “Sun Microsystems”, while an important partner for the department, is out of context in this bar; there must be a better way to incorporate the link into the page.

The remaining 42% of the page is given over to paragraph-style linking that is difficult, at best, for people to navigate. If I want to find out what research groups are active in the department, where do I go? I suppose I look to see what “information” is available under “Research”, or perhaps I scroll down to see what is hidden under “Prospective Postgraduates”? I can easily discover “Courses at the Medway site”, but what about courses here in Canterbury? If I leave the front page, I drop into navigation hell, where navigation bars at the top and bottom of the page are different, and it isn’t clear at all how they do (or do not) relate to each-other. I know the place, people, and work that takes place here, and our departmental pages confuse me; where does that leave a prospective student or researcher who is considering the department as a place to study or work?

Pages for comparison

We can compare the UKC CS homepage to homepages around the ‘net, and see if there are any patterns—conventions, even—that we might learn from. I’ve chosen a number of computer science department homepages “at random”, meaning I’ve chosen universities and colleges I know the names of, and typed “http://www.cs.<insert-university-here>.edu/”, and looked at what popped up. Each thumbnail below links to a full-size screenshot, and the school name links to the live departmental homepage.

School Homepage
Princeton Screenshot-Princeton
Harvard Screenshot-Harvard

Arizona State

Screenshot-Arizona

Brown

Screenshot-Brown

Cornell

Screenshot-Cornell

Indiana University

Screenshot-Indiana

Dartmouth

Screenshot-Dartmouth

What is the same about all of these pages? What “standards” or “conventions” have they all employed?

  1. A title/logo bar at the top of the page
  2. Persistent navigation on the LH side of the page
  3. A picture of the building or members of the department
  4. Links to current news and events
  5. Search

In most cases, the Search is provided at the top-right or top-left of the page; the top of the persistent navigation bar or to the right of the title are popular places. Given that eBay places their initial search bar to the top and left, and built-in browser search bars are often upper-right, both locations take advantage of locations users are likely to look.

Having a “fresh” homepage is good for Google rankings, and “News” and “Events” are an easy way for external and internal visitors to quickly get a taste for a department at a glance. None of the pages viewed had RSS feeds obviously available for dynamic content like news and events.

Having a picture of the place and/or people gives the viewer an impression of the department actually existing. The UKC webpage, in its washed-out blues and grays, does not give the viewer anything tangible, from the world, to anchor their vision of the department on. Indiana’s departmental pages are particularly good in this respect; each section is highlighted with a photo or photos of the people representing that part of the site.

Navigation

None of the pages in the UKC CS website take advantage of a hierarchical, persistent navigation bar on the LH side of the page. Instead, the leftmost 10% of every page is wasted on a dark-blue space that, at best, duplicates the title of the current page. This is a catastrophic flaw; it is one of the most common conventions in use on the WWW today. Weblog software, freely downloadable, provides better navigation “out of the box” than the hand-crafted Kent CS department homepage. Every one of the pages I managed to find via “random selection” included a persistent, consistent left-hand navigation bar on their site.

It is important to note what is linked in on these navigation bars as well. I have only included those links that are visible in my browser with it’s current size without scrolling (a viewable area of roughly 850×700 pixels).

School Nav Links
Princeton Academics (Course Information, Course Catalog, Graduate Program, Undergraduate Program, Interdisciplinary Programs), Research (Research Areas, Colloquia, Technical Reports), People (Faculty, Graduate Students, Undergraduate Students, Research & Technical Staff, Administrative Staff, Alumni/ae), About Princeton (Contact Us, News & Events, Facilities, Industrial Affiliates, Visit Us), Job Openings (Open Positions), Links (CS Computing, SEAS Links)
Harvard Intro/Overview, Research (Projects/Groups, Technical Reports), People (Faculty, Staff, Students, Visitors, Alumni, Directory), Academics (Courses, Graduate, Undergraduate, Admissions), News & Events (CS Colloquium, Theory of Computation, Newsletters), Contact Info, Industrial Relations, Computation and Society, “Information, Technology, and Management”, Jobs, Support
Arizona Acadmics (Courses and Information, Graduate Programs, Graduate Admissions, Undergraduate Program), People (Faculty, Staff, Students, Visitors, Open Positions), Research (Research Areas, Seminars, Technical Reports), Calendar (Colloquiums, Event Calendar, “Clubs, News, and Activities”), Resources (Contact Us, University Web site…)
Brown About Us, Contacts, News, Events/Talks, Courses, Graduate Study, Undergraduate Study, People, Research, Software Catalog, Rooms & Labs, Computing Systems, Publications, Industrial Relations
Indiana University Contacts, Courses, Academics, Research, People, Calendar, Resources, Facilities
Dartmouth General (Home, About, People, Jobs, Contact/Administrative), Admissions (Undergraduate, M.S. Admissions, Ph.D. Admissions, M.D.-Ph.D. in CompBio, Graduate Student Life), Teaching (Undergrad Major/Minor, Graduate Programs, Undergrad Courses, Graduate Courses), Research (Labs and Projects, Seminar Series, Departmental Report), Publications (Books by Faculty, Technical Reports)

Representative navigation links

The content of the navigation links on these pages is remarkably consistent; a review of 20 more sites would provide us with a set of links that could be construed as a “consensus” on essential navigation for a CS departmental homepage. However, even our short review reveals conventions and design patterns that the UKC CS homepage could benefit from.

  • Both Indiana and Brown choose not to “explode” their navigation on the main page; only by selecting a top-level item do you see what is underneath it. Not terribly useful (as the user must guess where their content might be), and furthermore there is a great deal of screen real estate that goes to waste.
  • Dartmouth has one of the “cleanest” site designs (minimal background shading and other distractors), and is the only page in this set to explicitly flag “Admissions.” In a tough recruiting climate, making it easy for students to find out about what they might be doing, and how to apply, makes sense. Once they’re here, they can fight with some other, internal, poorly designed webpage—they won’t complain. Much.
  • All of the pages make it easy to determine what research is going on—and to locate “groups” or “areas” of research from the main page.
  • Colloquia, talks, or seminars are highlighted in the persistent navigation of every department except for Indiana.
  • None of the navigation bars are dominated by “internal” concerns; if there are “internal” pages that are for current faculty, staff, and students only, those pages are located somewhere else. Perhaps those internal pages are located at an easy-to-remember URL like “internal.cs.<insert-univeristy-here>.edu”, and therefore hidden away where we, as browsing outsiders, cannot see it?

Lessons learned

The single biggest lesson to be learned from these departments is that their homepages are sales documents. They are selling their program and their research. They want excellent students to come join them at the undergraduate and graduate level, and they want excellent faculty to join their ranks so they can attract more funding and more (excellent) students. Industrial relations feature prominently into the navigation of most of these departments as well.

The Kent Computing Laboratory homepage fails to provide the level of usability of any of these pages. In sacrificing usability, it therefore fails to sell the department effectively. It is likely that more than half of the homepage could be moved to “internal.cs.kent.ac.uk”, freeing up the homepage to sell the excellent research, teaching, and opportunities we have to offer to prospective undergraduate, postgraduate, and researchers, and faculty alike.

Markets are conversations

I mentioned RSS—Really Simple Syndication—more than once. This machine-readable XML format allows aggregators like Google (blogsearch.google.com), Technorati, Feedburner, Bloglines, and others to automatically add content from the RSS feed to their search indices. As we can see, some of the top CS departments in the US have failed to take advantage of simple technology that has driven the weblog revolution; undergraduates in our department have weblogs that provide more, timely information than the UKC CS homepage. The specifications are open, the tools are free, and the benefits are that more search engines and potential viewers can access our content, and therefore, our brand.

If you extend this idea to its limit, we would provide every research group, faculty member, postgraduate, and undergrad with a weblog, thereby providing the tools for everyone to generate content, and therefore traffic flow, to a site in the cs.kent.ac.uk domain. It would make Kent one of the first (if not the first) CS departments to transition from the notion that research and teaching are static publications to a department that acknowledges that research and teaching are markets operating in a bazaar, and that markets are conversations.

I won’t, however, hold my breath.

Comments? Feedback? Feel free to email jadudm at gmail. Anonymity is preserved, by-and-large.

Update, 20050926


Creative Commons License
This work is licensed under a Creative Commons
Attribution-NonCommercial-ShareAlike 2.5
License
.

The text of this post is available under a Creative Commons Attribution-NonCommercial-Sharealike license. Feel free to rip, mix, and burn, as long as you provide a pointer back to this document.

Comments are closed.