Not long ago an xkcd strip about university web sites made the rounds. I even had two people send it to me on the same day!
Over the summer, WIU started rolling out its new website. There are quite a few changes behind the scenes which don’t show to the casual user. A new content management system (CMS) was licensed, and I don’t know all the details, but as usual implementation was slowed when a considerable gap appeared between what the vendor promised and what they actually delivered. (Insert “We should have gone with open source” aside here.) So the rollout has been rather gradual, and there are many high level sites at Western, such as the Registrar, still using the “old” (2006?) look. Other sites are mixing it up, like English & Journalism, which, thankfully, I no longer manage.
Overall, I’m still very glad we are ditching the old look. And I’m glad to see some changes from the mockup, especially the width, which was 1100+ pixels before. The 960px width is effective and gives folks like me who often use smaller screens more flexibility. But of course, I still have criticisms. Hopefully constructive.
Last summer, I shared the review I submitted about the mockup WIU circulated for feedback. I concluded by saying:
Finally, the home page is just one piece of the pie. Current WIU web pages have excessive navigation on most pages, making design of pages very difficult. Given that I can’t see what child pages look like, I would give this design an “Incomplete” if I had the option. I hope that a horizontal navigation scheme will be used on child pages.
Now that the new design is out, child pages have emerged, and I’m afraid the navigation issues which plagued the previous design remain. The main navigation for the university includes the old navigation structure (Academics, Admissions…) and adds audience-specific options and more. The end result is a little overwhelming, and some of the choices are still questionable. Navigation for individual sites remains vertical with popouts. As a consequence, long pages (like, say, this graduate school page on travel awards) have a fair amount of trapped whitespace on the left margin. Breadcrumbs have been added, which I have mixed feelings about: does a university really break down into such a neat, hierarchical system? Do all sites need breadcrumbs? Should they map onto navigation categories? Note also the widely different approaches to navigation: compare the yellow popouts for the libraries with the grey ones for English & Journalism. “Home” links are sometimes at the bottom of navigation (Provost), sometimes at the top (Administrative Services), and sometimes absent (uTech). I think the site needs fewer links in the header and footer, and guidelines for site-level navigation.
I find a strong disconnect between the page hierarchy, visual and otherwise. The university branding and navigational structure overpowers the content. For example, here’s the front page for Equal Opportunity and Access. “Equal Opportunity and Access” is visually buried on the left side, and not a clickable link. It’s in the breadcrumbs, though. I wonder about this repetition. This name of the organization–pretty important, if you ask me–is shoehorned into a small rectangle, wrapping awkwardly. Units like the “Department of Computer Science and Information Systems” or the “Vice President for Advancement and Public Services” will have to abbreviate. (I can’t imagine international studies folks are happy about “School of Distance Learning, International Studies, and Outreach” getting abbreviated to “Distance Learning” online.)
Headlines are strange, too. The actual headline and title of the above page, “Office of Equal Opportunity and Access,” carries an H3 weight. Here’s the complete hierarchy:
- H1: Western Illinois University: Macomb Campus
- H2: Audience Menu
- H2: Web Tools and Search Bar
- H2: Top Navigation
- H2: Equal Opportunity & Access
- H2: Side Navigation
- H3: Office of Equal Opportunity & Access
- H4: The Role of the Office
- H4: What is Affirmative Action?
- H3: Office of Equal Opportunity & Access
So the actual content is displayed here as a subset of both the University site (H1), and after multiple navigation headers (H2). Hrm. I’m not sure why “Office of Equal Opportunity and Access” comes after everything. It’s the content. It’s what users want. Shouldn’t it be first? (Side note: I don’t think I’ve ever used an H6 head on a web page. I could see doing that with this template, since only four headline levels exist for the actual content, and arguably the H3 should not be repeated.) Without knowing how the CMS software works, I can’t say how difficult a fix would be. Another way to say that: I hope this odd structure isn’t an artifact of a funky approach to headlines by the CMS.
We can see the same issues, too. Here’s a screenshot of the Office of the Provost front page, with red shading applied to the University branding and blue to site-specific navigation:
I have to think WIU-specific branding could be applied with fewer pixels … not to mention without making all pages look the same. I fear the branding is going to become like advertising on web sites: people will stop looking at it and using it.
The provost’s web page also highlights another problem: having two web sites, one for Macomb and one for the Quad Cities campuses. (Three, if you count the simply broken WIU.com, which should just redirect to the main site.) The sites are just different enough to be visually jarring. Go from WIU-QC to the provost, or EOA, and the colors, fonts, and navigation choices shift slightly: enough to make unfamiliar users feel a little lost. Certainly, there are campus entities site-specific to the Quad Cities, and separate sites for those make sense–but not under a separate umbrella. We are not two universities. Having two web sites gives a strong impression that we are. Without strong data to show the need for a separate site, it is a mistake.
There are also questionable differences between usual web site behavior and the WIU way:
- The front page includes photos of interesting things. But they are not links. “Hey, here’s the cutest dog in America. But we’re not going to tell you why we have his picture here.” As XKCD points out, some people don’t care. But many do.
- Phone numbers are separated with bullets: 309•298•1414. I’ve never seen this anywhere else.
- Too much ALL CAPS in the header and footer.
- URLs are full of underscores. Un-der-score. Three syllables. Yuck. Try explaining that to someone’s mom over the phone.
- URLs are often really long. Our site went from wiu.edu/english to wiu.edu/cas/english_and_journalism/ — when it should become wiu.edu/enj or wiu.edu/cas/enj/ if hierarchy is enforced.
- Link text is often inconsistent. The front page says “EO/AA.” The employment page says “AA/EO.” And the office responsible for both is EOA, with the URL “equal_opportunity_and_access”. Which is it?
- The WIU logo in the footer doesn’t link back to the home page.
- No media-specific style sheets–so printing is a mess.
The most disturbing thing is that we spent goodness knows how much for this software and we are still using the crappy homegrown calendar that everybody hates and which is completely independent of our crappy groupware. But that’s a story for another day.
Most of these are solvable problems, and I hope some issues here are just kinks in the system. In the past, WIU web managers have adopted a typical Cathedral approach towards updates: few and far between. I hope they’ll be more incremental now that software is in place which makes that possible.