Before I get started, I’d like to be clear that the points offered up in this post are gross generalizations, and certainly wouldn’t apply to all universities. These are just some of the issues I experienced at Waterloo—there are others that I won’t go into. I’m sure people who work at UW or other universities can think of additional factors to add. These points are also referencing the home page, although most of the factors listed apply to the rest of the web space as well.

Those of you who are familiar with web design in higher ed have surely seen the infamous venn diagram cartoon from xkcd:

When this was originally posted I remember seeing some talk about “web managers” not understanding usability. At least in my experience (as a former university web manager), that’s not the case at all. There are several problems at the root of this:

• University home pages are highly sensitive political objects. This can manifest itself in several different ways. Influential people may get upset if their department or project isn’t featured prominently enough. Marketing and communications staff want to keep these people happy, so they give in. In the above diagram, the Alumni profiles may be there because the director of alumni relations cozied up to the director of communications. There can also be a lot of butthurt from people if they think another department or faculty is featured more prominently than theirs is. This is a complex web to navigate. Pleasing these people is important.
• Core internal audiences (mainly faculty & staff) are resistant to change. They get used to navigating in a certain way. They use the website to do their work. If links or navigation change, it throws them off. Once I changed a label of a link on the home page, and some of the second-level naviagation, and was told (from a senior VP, indirectly of course) that I should let the campus community know about changes like that in advance.
• Universities have a lot of target audiences. Prospective students, current students, graduate students, undergraduate students, international students, faculty, staff, prospective faculty, researchers at other universities, parents, government, donors, prospective donors, local residents, and the list goes on. And all of these audiences want different things. As I mentioned in my previous post, the “external” audiences are considered to be more important. But this clashes with the internal people who will complain to the right people if they don’t like something. It’s difficult to compromise the needs of those groups.
• Web managers don’t have the appropriate level of authority and empowerment. We  are four levels down the hierarchy and aren’t considered to be important enough to make decisions. (I think this is also combined with a general and relatively widespread belief, also outside of higher ed, that web designers don’t have high level skills or expertise, but that’s another discussion). If there’s no empowerment, then nothing can get better because nobody with the appropriate expertise is responsible for it.
• The people who do have the authority don’t have the interest. They were hired to do traditional communications and public relations. They legitimately have a lot of other things to do with, and since web isn’t their area of expertise it continually falls off the radar. In my experience they can also be rather out of touch with the audience (Yes, they really think you’re interested in the promotions for campus events).
• There is never enough money to do things properly. In most cases, university web departments, like many other administrative groups and departments, are underfunded. Institutions of higher education are usually unable to match the importance of the web in their day-to-day operations with the appropriate level of staffing. I ran the central web properties with myself and a co-op student. This included responsibility for maintaining the back-end applications that made these sites work. This isn’t uncommon.
• Getting more money is important. Don’t blame the university—increasing government cuts have meant that universities have to rely more and more on other sources of funding. Institutions are competing with each other for private donations, research grants, and full-cost tuition from international students. This is why you often see things like research profiles on the home page. Universities are now hiring marketing managers from outside of higher ed. These are the people who decide that the website is a marketing tool for external audiences, not an information-retrieval tool for students and staff.
• Things take time. I don’t know about other universities and colleges, but at least in my experience there can be a general assumption that things just take time, and that’s the way it is. You can’t expect to get things done expediently. Since the web manager doesn’t have any authority, an array of committees are often created to “advise” senior management on every conceivable issue. Of course, these take forever. Major changes might need to get approval from senior people, who are usually either busy or away for some reason. And everyone knows that nothing gets done in August or December.

After all of this, a certain sense of inertia sets in. It’s too difficult and complicated to make changes, so you just avoid it. A lot of the things on the home page have probably been there for the past 10 years and nobody is willing or able to change them. By that point the website has gotten into such a bad state that you legitimately do need a redesign. Incremental change isn’t going to cut it. At least with a big redesign you can make a big deal about it and convince people that change will be good.

With the Waterloo redesign the first two points played out a bit differently, in that they were able to overcome a lot of opposition from those people by sheer force of will (not without upsetting people). But I think most of the other factors had a significant impact. There wasn’t enough money to pay a vendor to do a proper job. There was no web manager with an appropriate level of authority to oversee the project. Making a big marketing “impact” was a key objective of the project.

I think that any redesign is doomed to fail if the above points (or whatever else caused the problems) aren’t rectified. The site will just degenerate into a useless and chaotic mess, and you’ll have to do it all over again.

Content strategy and Governance are two hot topics in higher ed web discussions these days. A lot of the issues I mentioned above fall within those two realms. I am a bit wary of topics like this because I think you’d end up needing a committee for that, which would take a year. Then you have a big report that nobody reads, and need to get a decision from someone higher up, which takes 6 months. By then everyone’s forgotten about it, and you still don’t have a person or group who is actually able to take responsibility for your web space.

As a sidenote, I think these reasons also cause many higher ed redesigns to end up at more or less the same point. Witness Oxford vs. University of Toronto (big horizontal photo, boxes of links in a grid, blue). Or how about College of William and Mary vs. Dalhousie? (big photo with promo stuff on top; more promo stuff in a horizontal row of boxes below; horizontal main nav; utility tools at the top, green). Similar problems often lead to similar solutions.

Comments are moderated. Come to think of it, I think I’ll do that on all my posts… looks like I’ll need to find a module plugin to do that.

Until recently I was the “web manager” for the central Communications department. I was on maternity leave for most of the redesign process, but I did make some plans for it before I left (that weren’t used, to my knowledge), and worked intimately with the delivered designs after I got back. There are some things I really like about it, and some things I really don’t. I’m going to focus on the home page here, since I think that’s what where a lot of problems are. The other areas are okay, particularly some of the content and information architecture.

I’m going to refer to Jared Spool’s wisdom throughout  this article. I attended his workshop on “Designing for Content-Rich Sites” at DrupalCon in March, I think his work is very relevant here.

Screen real estate and the photo

It’s a big risk to sacrifice all your screen real estate for the sake of impact. Doing this automatically makes it harder to find anything, since there are very few navigational links available. Users can’t quickly scan to find their trigger words (more on that later). They have to work for it.

This might be an interesting idea in the appropriate context, but University websites are informational in nature. People are there to find content. Often boring content. Course descriptions. Financial aid information. Names and contact information.

In a November, 2010 article on Photos as Content, Jakob Nielsen points out that:

Some types of pictures are completely ignored. This is typically the case for big feel-good images that are purely decorative.

On a practical level, it’s also very difficult to find an appropriate photo that works in that space. It has to work with the words on top of it, and the four links on the right side. It can’t look funny when the slide-down panels are open. It has to be big enough to work when it extends to the left at high resolutions but also fit well in the 1024px box at low resolutions. It has to work when the box expands vertically as well (try resizing your window, or zooming out and you’ll see what I mean). And it has to communicate a strong marketing “message”.

Trigger words and the scent of information

Spool talks a lot about the “scent of information” and “trigger words”. When people come to a site  they have an idea of what they’re looking for. They have certain words in mind, that may or may not match the words used on the site. Spool calls these “trigger words” – the words that trigger a user to click (The Right Trigger Words, 2004).

The scent of information describes the process of looking for this content on a site. Link labels and text content lead users around the site in search of content. The scent comes from trigger words, and it should get stronger as the user gets closer to their goal.

According to Spool, the home page has one purpose: to get the user to the content page they want. They don’t care about what’s on the home page, they are about the content they’re looking for (DrupalCon workshop). Based on Spool’s research:

… users were far more successful at finding their targets when the description words, which they told us before they saw the site, appeared on the home page. In the tasks where users successfully found their target content, the description words appeared on the home page 72% of the time. When users were unsuccessful, their words only appeared an average of 6% of the time on the home page. (The Right Trigger Words, 2004)

Because most of the screen is taken up by the photo, there are very few useful links to chose from on this page. If you don’t know exactly what you’re looking for you have to try the audience links and hope for the best. Navigational paths get more complex, which reduces the chances of success.

The “Panel” content

The main content on the home page is in the “panels” that drop down from the main navigation bar. The bulk of this content isn’t new. The About Us section will have some new content (and very well written content, from what I’ve seen). Most of the “Today at Waterloo” content was on the home page before. The Faculties & Academics and Offices & Services panels are improved designs of previously existing content.

My problem with the latter two sections is that you have to know what you’re looking for in order to use them. There are a lot of links in those scrolling boxes, and you need to do a bit of work to find the one you want. It wouldn’t work well if you didn’t know exactly what the link you needed was called, or had to choose between multiple possible paths. This might work well for internal audiences, but I’m guessing external groups would have trouble. If it was up to me, I would have put links to those two pages near the search box and made them accessible from every page. Useful secondary links, but not appropriate as a primary method of navigation.

The home page is for “external” audiences

One of the overriding premises behind this design is that the website is for “external” audiences—prospecitve students, international students, donors, government etc. “Internal” audiences (students, faculty, and staff) are supposed to use the audience links in the top-right.

One of the more controversial changes that was made was removing the links to the internal tools (email, course management system, library, student information system etc.). In the old design, these were on the home page, and roughly 65% of visitors to the home page clicked them. Students, faculty, and staff, used them almost every day. Now they’re supposed to get to them from the audience links on the top-right. This is a case where the redesign has actually removed a solution to a problem entirely. These links should be more accessible, not less.

Internal audiences aren’t invalid. Removing the links they use the most sends a message that you don’t care about them. You’re just not going to solve their problems at all. Marketing people would say that the website isn’t for the internal people, it’s a marketing tool to engage the external audiences. But internal people use the site much more frequently. They need it to find information to complete their coursework or do their administrative work. It’s essential.

Even forgetting that for a moment, does the design that was implemented actually suit the needs of the external audiences? If you don’t know exactly what you’re looking for, how do you navigate this? Let’s say you’re a prospective graduate student wanting to know what programs Waterloo has in your discipline. How do you navigate to that information from this page? You have to go through that little “Future students” link way up in the top-right, or guess and hope you can find the right name for the department you’re looking for in the Faculties & Academics panel.

Whose needs does this suit, then? There’s a lot of “impact”. There’s supposed to be some “feature stories” that will pop-out from that right side block area, sometimes with videos (Spool: “Featured content gets clicked 1.3% of the time” – DrupalCon workshop). It’s hard to come up with any particular audience group that this design targets well.

The other page templates

There were several other page templates delivered as part of this process, with two options for the multitude of micro-sites within the Waterloo web space:

The question is: what are these templates for? Which sites should use which template? The “Institutional” template on the left looks good, but what is it for? There’s no provision for a micro-site title, so is it just for certain central pages?

The “Faculty/unit” template one on the right looks good with the various faculty colours applied, but I can tell you it’s not-so-pretty with the “Departments & Support Units” grey.

There are lots of big administrative sites, such as the Library or the Registrar’s Office. Which one should they use? The one that’s ugly in “Departments & Support Units” grey, or the one that doesn’t have a space for the site title?

These designs are partway there. They look good, but they don’t solve the right problems. One of the biggest problems a large-ish University has is the variety of micro-sites it needs to accommodate. Small sites, large sites, academic sites, marketing sites, administrative sites, etc.

Solving problems like this should have been the point of a redesign project. Heck, that should be the point of any design project. Design without problem solving is art. A website for a university is not art.

Wrapping up

Stay tuned for my next post, where I’ll discuss some of the reasons why things like this happen to university websites.

Comments are moderated on this post. Feel free to comment anonymously if you have something interesting to say.

Also Relevant

• Fresh vs. Familiar: How Aggressively to Redesign (Jakob Nielsen, 2009)
• The new Redesign Must Die talk (Louis Rosenfeld, 2011)

Both of these sources include examples from higher education.

I have created some views to replicate these pages with more filtering options. View Bulk Operations does come with a sample view for content, but I found that this view didn’t contain the options I wanted. Each view comes with two pages: one to replace the default admin pages (admin/content/node, admin/content/comment, and admin/user/user) and one for a tabbed interface of all three views. It would be nice if these could be the same page but you can’t have more than one URL for a page. These are in use on The Webmaster Forums. Some of the terminology might need to be adjusted for your site, particularly the label for the taxonomy filter (forums are taxonomy terms). Views Bulk Operations is used to allow operations to be run on multiple items at once.

Warning: These views have a lot of complicated filters that may not be suitable for some users. You may want to restrict this to advanced users only (although I’m not sure there would be a situation where a user would have the administer nodes permission but wouldn’t be sophisticated enough to work with this interface!)

Below are screenshots of the three views (click to enlarge) with links to download the views.

1. What is this?
2. What do they have here?
3. What can I do here?
4. Why should I be here – and not somewhere else?

The user needs to have some clue as to whether this page or website will give them what they want (have the information they need, the products they want to buy etc.). In that sense, what appears in the fold – whatever size that is for them – is crucially important.

You also need to make sure that it’s evident that there is more content further down to scroll to. I recently visited this page on the Exercise TV site (screenshot). On my screen the fold ends around Jillian’s mid-thigh. With the blue background, the text ending where it does, and the visual focus on the photo, it wasn’t apparent to me that there is more content further down. I actually didn’t realize it until I clicked on the link to browse videos and realized that it pointed further down on the same page. With widescreen monitors the scrollbar may be out of direct view, so conscious design is needed to tell the viewer that they should scroll to see more.

Via For a Beautiful Web, where Stephen Frein has a useful comment.

There is a reason why most websites have similar basic elements. It’s called usability. When users are trying to accomplish a task (find information, buy something etc.) they don’t need to figure out an entirely new navigation structure and page layout. They need sites to behave in relatively similar ways so they know what to expect and how to accomplish their tasks.

The Web can be a repetitive and boring place. Many Web sites look the same or are created based on the same basic principles.

That’s actually a good thing There is a time and a place for trying something new, and that’s valid, it’s just not something that’s appropriate for most websites.

So, the question is, what are the most innovative web designs of all time? I’ll have to give that some thought.

On Wednesday, October 8th our websites suddenly disappeared. Our VPS (virtual private server), hosted by VPSville, was completely unavailable. There was no explanation on their website. Our only information came from a thread at Web Hosting Talk.

The VPSville site was still live, but their forum was no longer active. Supposedly they did post something on their forums early on, but quickly took the forums completely offline. Over 24 hours passed before VPSville let their customers know what was going on.

The original announcement was vague. In light of later news that some of their servers had been hacked and all the data erased, this announcement was outright misleading. Needless to say, this was completely unacceptable. Not just that they lost the data. No, the worst part was that they didn’t tell their customers what was happening.

What do do when things go wrong (revised)

1. Find out what actually happened.
2. Fess up. Admit that your systems weren’t able to handle the traffic (or whatever the problem was). Do not blame the users.
   1. Make sure this information is published and availble to clients.
   2. Ensure that communication channels are open. Make every attempt to respond to customer questions.
   3. Do not attempt to cover up the problem.
   4. If you don’t know all the details, that’s okay. Tell people what you do know.
3. Promise to get things working ASAP.
4. Do get things working ASAP.
5. Give paying customers a refund for services lost.
6. In the future, make sure your servers can handle the traffic, or plan other ways to avoid the problem.

“A spokesperson for the CRTC said the site ‘worked fine’ when it launched at midnight, and said she didn’t know what had caused it to freeze up.

She speculated that the number of people trying to access the site may have blocked access to some users

‘Try it later and cross your fingers,’ she said.”

They don’t know what happened???? “Cross your fingers”?? Did they not realize that when they announced this they’d be getting a flood of traffic? Had their web developers never heard of the Digg effect? Similar problem when you’re announcing a very attractive service in media outlets across the country.

What do do when things go wrong

1. Find out what actually happened.
2. Fess up. Admit that your systems weren’t able to handle the traffic (or whatever the problem was). Do not blame the users.
3. Promise to get the site working ASAP.
4. Do get the site working ASAP.
5. In the future, make sure your servers can handle the traffic, or plan other ways to avoid the problem.

Do you find these to be effective? I think from a design perspective they solve a lot of problems. Get a lot of links on the home page without cluttering the main interface.

The problem I find is that as a user I often miss them entirely. On Jason Santa Maria’s site it took me several visits before I even noticed it was there. Why? Because I didn’t scroll that far (on the actual articles there are often many comments, making the pages quite long. Most users wouldn’t read all those comments.)

What about my home page? Will people notice the Recent Posts block at the bottom? Will they think to scroll past the white? Granted, I was intentional in what I put there vs. what I put on the sidebar. It’s not exactly essential stuff.

Usability experts have found that users have learned to scroll (early usability research found that users wouldn’t scroll past the fold). But, do they scroll the whole page? Prioritizing Web Usability, Jacob Nielsen points out that users often won’t scroll further if they get the visual impression that there is no more content on the page. If users assume that the navigation ends with the top or left navigation bar, will they try looking further down for more links?

What do you think?

Then I read this:

HTML is easy — so easy that even a first-time user can do it. That’s because you don’t have to learn HTML to use it.

Leading word processing applications, such as Microsoft Word and AppleWorks 6, actually generate HTML webpages for you with just a few clicks of a mouse.

Noooooooo….

* link only available while my work computer is on, which is only when I’m at work, or you can try this one.

What else could they do?

1. Provide an language option when purchasing the product and only provide documentation in that language.
2. Skip the paper documentation and provide a little card with a link to the download site. Nobody reads the documentation anyway, might as well save some trees.

And the worst part about it is that the user’s guide is mostly a bunch of bullshit. Thank you for purchasing this product blah blah blah, this is what it’s does, and this is what’s included in the package. Um, I bought the product I think I know what it does!

The connection instructions are on a separate poster with diagrams only, no words at all. I’m not sure which is worse.

The dock was also wrapped in molded syrofoam, unlike the LaCie external hard drive that arrived yesterday (not for me), which had egg carton like cardboard packaging. Boo to Lenovo (although I really like my laptop so I won’t criticize them too much!)