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.

1. You poured over pages of free clipart, looking for tiled backgrounds and horizontal rules
2. You actually learned how to make an animated gif (and not just for ads!)
3. You were thrilled to have a tool for making complex page layouts. And that tool was a table.
4. You remember having to use spacer.gif’s to get your table widths right
5. You checked Webmonkey for new articles every week
6. <font> was your friend
7. You have coded html in UPPER CASE (<BODY>, anyone?)
8. You remember having only a vague understanding of who the W3C was
9. Netscape 4 and IE 3 were your browsers of choice
10. Your website directory consisted of a bunch of .html pages and an images folder
11. You used Server Side Includes with a .shtml extension
12. You displayed shiny “awards” graphics on your site
13. You learned how to make 3D bevels and metallic effects in Photoshop
14. You installed “CGI” scripts written in Perl
15. You had to find out if your server supported PHP
16. Your site had a visible counter displaying how many “hits” you got
17. You put up “under construction” notices, and asked people to “come back soon!!!”
18. Headers? Who ever uses those anyway?
19. 10MB on a shared server was plenty of hosting space
20. You actually had a chance of getting your first choice of domain name, even with a .com extension!
21. Your site had a Guestbook
22. You had free web space on Geocities, Xoom, or Tripod (bonus points if you used all three!)
23. You had tons of webrings on the bottom of your home page
24. You had to do rollovers with JavaScript
25. You had to code the same thing twice for IE and Netscape (remember <body leftmargin=”0″ topmargin=”0″ marginwidth=”0″ marginheight=”0″>?)
26. You submitted your site to the Yahoo web directory … and actually got in (for free)

Can you think of more?

I will be looking at four major Canadian Olympics sites:

• The Official Vancouver 2010 site
• The CTV Olympics site (official broadcaster)
• The CBC Olympic site
• The Toronto Star Olympics site

For each site, I will look at the home page, the event schedule, and a sample sport page (Nordic Combined, since I always forget what that is), as well as a few other standout features or things I come across.All four sites feature similar basic layouts with grid-based design and horizontal navigation. They all feature news content, video and interactive features, sport and athlete profiles etc. Three of the four have chosen to use a large graphic background image.

The Good

The CBC Olympics website is my favourite of the four. I like the clean, bright layout. Their colour scheme ties in to both the Vancouver 2010 site (blue) and the team Canada colours (red). It’s a unique combination that really makes their site stand out. The ribbon motif in the background didn’t make much sense to me at first, but now that I look at it I can see the movement that is reminiscent of many winter sports (sledding, figure skating, downhill skiing).

Their home page has a similar layout to the others, and also includes lots of features, but unlike the competition they have done a good job of highlighting interesting features. There’s more differentiation between the different features which helps to lead your eye down the page and focus on their best features. They’ve also used some unobtrusive javascript to fit more content on the page and help you to navigate more conveniently.

Before the Games began they had a nice, simple schedule in table form (similar to the one on the official site). Now they’re showing a weird table with little squares for events and blue dots for medal events. Hello, confusing! Lesson: when displaying complex information, it’s usually best to keep it simple rather than attempting to come up with something clever that just doesn’t work.

On the individual sport pages, content can sometimes be lacking (which sort of makes sense since they aren’t an official broadcaster). The Nordic Combined page, for example, features a lot of content that isn’t specific to Nordic Combined at all. The menu for this individual section is further down the page and easy to miss, especially since it’s buried between unrelated content.

I’m having fun with a cool interactive feature showing the geographic distribution of medals over the years (and also by sport). It’s fun to see how things changed after the breakdown of the Soviet bloc. This is a great example of how to use Flash appropriately. Just do the interactive parts in Flash (what it’s good at, and HTML/CSS is currently not), while keeping the text content as HTML.

The Official Vancouver 2010 site is a close second for me so far. It’s more complex and some of the details haven’t been worked out as well as they could be. For example, they’ve taken care to fit the design into a 1024 window while adding interest at higher resolutions, but haven’t considered what happens to people who don’t maximize their windows, and therefore see a cut-off image on the right side. There’s a big hunk of white space in between the end of the content and the footer (every time I see that I want to get into the CSS and fix it!).

I also like what they did with the event schedule. Simple list of events by time, with an option to view by sport with a drop-down from the top. In previous years they usually had complicated tables with icons for which sport was happening on which day, and you had to click through to see which events were on at what time. This makes it much easier to see what’s happening (and print for reference).

The Nordic Combined page is similar to CBC’s, but with more content and an easier to find navigation menu. I enjoyed reading about the history of the sport. There’s even an interactive quiz to test your knowledge of the sport (love the Millionaire style cheats available!).

This site also has an interactive feature showing medal distribution over time. I like this one as well, although it feels a bit less responsive than CBC’s (this one is done in JavaFX, not Flash).

The Bad

The Toronto Star is sort of a third party to the Olympic Party – not an official broadcaster or local city paper. But of course, they have to get in on the party too, and  it’s not all that pretty. As usual with their sites, the Olympics site is complicated with small text and lots of (intrusive) ads. They have used the same colour scheme as the Official site, which shows a direct link to the main event.

Their schedule page is very simple, with just a list of events. It’s not bad, but it’s a bit harder to read and takes up a lot more space than the Official site’s schedule. They don’t seem to have a page for Nordic Combined, so I looked at the Cross Country page instead. The design isn’t much, and there’s not a lot of special features, but they do have very strong news coverage (appropriately enough!).

The Ugly

CTV is Canada’s official TV network for the Games (unfortunately outbid CBC for the next 2 Olympics.). Their site takes on a simlar form to the others – grid-based layout with lots of features on the home page. I find this one to be the most cluttered looking of the four. Their colour scheme doesn’t tie in to the Official 2010 colours, working with Canadian team colours instead.

Maybe it’s just me, but I don’t find the graphic design to be very attractive. Their sharp, icy motif is a harsh contrast with the bright, clean look of the Official site and CBC’s. They use a lot of gradients and drab grey. Take a look, for example, at the centre section of their home page with the Results Spotlight, Latest Photos, and Medal Table. They use the same design scheme for their television graphics, where they aren’t any more successful.

Someone also made the (really bad) decision to create a separate domain rather than putting the Olympics site on a subdomain or folder on their main site. All that link juice down the toilet.

Their schedule is a grid with grey backgrounds to represent events occurring on that day and gold circles to show medal events. There are two dimensions of information that people might want to see on a schedule: What’s happening on that particular day, and when events are scheduled for a particular sport. This schedule attempts to show both, but doesn’t do either particularly well. The official site chose to optimize for events having day by day, while allowing users to click through to the event pages for the individual event schedules. Lesson: if you can’t accomplish all your goals in one interface, it’s sometimes better to optimize for one goal, while providing another interface for other objectives.

The Nordic Combined page, like the rest of their site, is very complicated and graphically heavy. A lot of the content isn’t directly related to Nordic Combined, but there’s no graphical differentiation to tell you what belongs and what doesn’t. Sometimes it’s hard to tell if a block is related to the page topic or not.

Other examples?

Have you seen other examples of Olympic websites that you’d like to share? What are the media outlets in your country doing?

There is a lot more I could say about the four I’ve chosen to profile here, but I only have so much time to type these days with a four month old at home!

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.

I first read about this in James Kalbach’s Designing Web Navigation (p. 45) just last week. The point is that people have better experiences with visually attractive things, making them easier to use. Emotions are a central part of any user experience:

“When you felel good it is easier to make decisions, brainstorm, and be creative, for instance”

Makes sense, doesn’t it? If you’re in a good mood you’re a lot more forgiving. On the other hand, if you’re in a bad mood, you get frustrated more easily, give up faster, and generally have a hard time thinking rationally.

In the ALA article, author Stephen P. Anderson also points out that:

• products have personalities, which influences user perceptions
• visual design is used to evaluate credibility

Next you can apply this to a design project. How does your design make people feel? Is this in line with user expectations? I think we do this instinctively as designers but it’s useful to think about it deliberately. You can also think about how your design may affect different audiences in different ways. Some audiences have different ideas about what looks good and what would make them feel good about using something. Consider any OFAD types you know

Now, about the term “eye candy” – Anderson equates “eye candy” to aesthetics. I never interpreted the term that way. Who knows, maybe it’s being used in different context from what I’m used to in some other circles. To me it means visual emptiness. Flash intros. Animated graphics. Mystery meat navigation. Something the PHB wanted the designer to put there to “catch attention”, which becomes lame and annoying after a month or two. That’s eye candy. Momentarily tasty, no nutritional value.

Replace colours in a vector graphic

1. Save your graphic as an SVG. You can use Inkscape, Illustrator, or pretty much any other vector program to do this.
2. Make note of your “before” and “after” colours as hex values.
3. Open the .svg file in a text editor. You’ll see some mark-up that looks much like HTML (that’s because SVG an XML specification).
4. Search for your “before” values and replace with the “after”.
5. Save.

That’s it! Now, if only Internet Explorer would support SVG so I didn’t have to export these as png’s…

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?

I also upgraded my photo gallery from Gallery 2 to Zenphoto. Liam ended up having to write a complicated sql statement to convert it, but I’m much, much happier with the new system. I’ve been using zen for a work project and find it to be much easier to work with than Gallery 2.

If you notice anything that doesn’t look right please do let me know. I haven’t tested the new design much in IE 7 and I know it doesn’t work right in 6 (too bad).