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.

What happened, in a nutshell, is that the University decided to transfer the technical part of my job (including all coding), from Communications to IT. There is often a battle over who “owns” the web in higher ed. The same goes on at Waterloo.

The problem for me was that the job I had was probably about 70% technical. And that’s being conservative. I was responsible for the front-end code and back-end applications that supported the University’s communications efforts.As I’ve said here before, I love walking the line between design and development. It’s why I was attracted to this career path in the first place. The job I had before was probably too technical for me. That doesn’t mean that I was okay with losing the code altogether. A position where I was unable to work on any production code wasn’t something I was interested in. So I decided to move on.

Maternity leave in Ontario

Although I didn’t find out about it until much later, this change was made while I was on maternity leave. You may assume, as I did, that the organization has to keep your job for you while you’re on leave. This isn’t technically true. They are allowed to restructure in the normal course of business (sounds reasonable). If this is the case, they have to offer you a comparable position.

What “comparable” means is up for interpretation. It’s clear that the pay has to be the same, but what about the work? There’s nothing to say that it has to be comparable in nature, or in quality, quantity, or difficulty.

A lot can change when you’re gone for a year. The employer has probably forgotten about you, in the same way that you’ve probably forgotten about them. When you’re on leave, you’re not there to influence any changes they might be considering. Heck, you probably won’t even know it’s happening.

I’ve heard other stories of negative job changes that have happened to women on maternity leave. I know someone who was asked to re-apply for her own job when she returned (the employer wanted to keep her replacement). In another situation I can recall, the replacement was kept on and became the woman’s supervisor. I have a friend who is currently on leave from a job where she works on commission. Her employer is now raising prices to the point where she’s concerned that her clients won’t come back.

There’s often an underlying suspicion that the woman might decide not to come back. Lots of people do that. You might hear comments around the office along these lines. “Is she coming back”? or “Oh, you’re covering a mat leave? Well, maybe she won’t come back.” Your replacement might be hoping that you don’t come back so she can keep the job. Like the case of my acquaintance mentioned above, the company might want to keep the replacement.

I would love to hear from other women who have experienced similar problems after returning from maternity leave. It’s a difficult thing to deal with, especially when it didn’t occur to you that this could happen. It’s that same old problem of balancing work and family. It’s wonderful to be able to take a year to spend with your newborn. Is it worth risking your career for? I think most mothers would say it is, with varying degrees of certainty. That still doesn’t make it an easy choice.

Moving on

It was a rough six months, but now that I’m finished at UW I can actually think about what I really want to do. I love to work at the intersection of design and development. I enjoy the complete process of designing and building a website, with all the quirky users and browsers and search engines to deal with.

Right now I’m doing some freelancing. I might continue down this path indefinitely. It has been our long-term plan to work on our own, and hopefully to become geographically independent. I also might consider full-time positions as they come up. I have the luxury of looking for the right job, rather than the one that happens to be there at the right time

Comments on this post are moderated. If you have a story about losing your job after returning from maternity leave, please comment!

So how can I contribute? How can I combine my interests into a meaningful, fulfilling, successful career? Do I have to pick a speciality? Am I asking too much of myself? In web design we are frequently faced with the work of experts in our field. Is it unfair to compare ourselves to them? Surely, yet sometimes it’s hard not to.What I’m faced with now is the prospect of specialization. Specialization in a direction that’s quite outside my skills and interests. I like to think of the skills involved in web design and development as a continuum between the creative and the technical:

The line marks where I am on the curve. Usability and mark-up is the heart of what I do. I love the challenge of figuring out how to make something work well for people, and then actually implementing it with code.

In my previous position at work, my job was further to the right than I’d like to be. I had to deal with rails apps and server problems and other things that were quite outside my skills and interests. Now I’m being pushed in the other direction. Do I want to be a designer, without the ability to write code?

One of the things that attracted me to web design in the first place was the ability to make things happen. I did my undergrad degree in planning. A very slow moving discipline. You could spend years working on a project only to find out that the government won’t put up the money for it. Things happen at a snails pace, and that was frustrating for me.

Then I discovered web design, in the form of Netscape Contribute (version 3, circa 1997). This was IT! Creative and technical at the same time. You could code something, put it on a server, and people would see it immediately. Almost fourteen years later and I’m still trying to find the right fit.

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 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.

This takes up time. Time I could be spending with more valuable contributions to the forum. I could write more valuable posts. I could add more functionality that would be helpful to users.  I could write more blog posts. I could write more articles for A Padded Cell. I could clean my house.

The topic of SEO

Most of these spammy posts come in the SEO and Marketing forums. I suspect that many of these people work for those companies that send you unsolicited email telling you that they can get your site to the “top of Google”. Unfortunately, many unsuspecting website owners fall for that.

These people think that forum signatures are a good way to get backlinks, and they have a tiny bit of knowledge of SEO (seeing as how they work for an “SEO company”), so they post a bunch of crappy posts in our forum. Thus, our forum becomes filled with crappy SEO posts.

We don’t want to be an SEO forum!

We don’t! And yet, because we rank well for “Webmaster Forums”, this is what we have become. If given the choice, we wouldn’t call that. This is a legacy thing for us. This forum was started back in the 90′s. It was one of the first forums of it’s kind. In those days, SEO was only one of the many things as “webmaster” might do. In those days, web people weren’t nearly as specialized as we are now.

What I’d really like to do is ditch the Webmaster Forums domain and  merge everything into A Padded Cell. Then we might have a better chance of attracting the kind of members we want. The problem is that we’re currently first in Google UK for “webmaster forums” and second in Google Canada. How can you abandon a #1 ranking in Google?

Where do these people come from?

We have noticed that the majority of these spammy posts come from South- and South-East Asia. Normally I’m a big fan of diversity. It’s always been one of the strengths of our community. But this is starting to become a bit of an issue. Lately they’re even becoming more open about where they’re from. They used to say they were from the US or Britain, but now they’ll be honest (which I don’t mind, because lying about where they’re from really annoyed me).

Why is it an issue? Well, mainly because I think it can be off-putting to other members. They may think that everyone in our forum is from these regions and therefore they don’t fit in. These members don’t write English very well and their posts often don’t make sense. They also tend to use wording that would seem strange to native English speakers (e.g. calling other members “dear”). Add this to the fact that the actual content of these posts is not very strong.

All of this would be fine in smaller amounts, but when the majority of our posts have one or more of these issues it tends to lower the quality of the forum overall. If the quality of the post content was better none of this would be a problem.

Of course, I don’t mean to say that all members from South-east Asia are problems. They’re not.  We have some very good members from that part of the world. It just so happens that most of the spam comes from there too.

Do people even want to talk about design & development?

It seems that few people want to talk about anything other than SEO. I was wondering what it is about these topics that make them more popular than others. There are a few factors that could contribute to that:

• In design & development, forums aren’t that important. I imagine there are a lot of designers and developers who have never participated in a forum community. In SEO and Marketing, the opposite is true. Forums are an important part of the professional community, and there are a lot of them. In comparison, there are relatively few forums that focus more on design and/or development. Why is that? Do people just not want to talk about web design? I actually think that the SEO community overall is much stronger than the design and development communities (but that might be a topic for another post!).
• SEO is easy to talk about. It’s easy for people to have an opinion about simple questions like how to improve your site ranking (not that these opinions are necessarily good ones!). It’s also easy to articulate what these techniques are. How do you explain a process of problem solving in design or programming? How do you explain a design approach that is innate?
• Design & development questions often don’t prompt ongoing discussion. A question on SEO, such as “how do I get more traffic” can get a lot of responses over time. In contrast, design and development qustions are often very specific. This doesn’t line up in IE6. How do I fix this code? They don’t need answers from multiple people, let alone an ongoing discussion. Once the problem is solved the topic is over.

We are also targetting a more beginner level audience. These people don’t live and breathe web design like the professionals do. It might be a hobby, or a tiny part of their job. They might just be starting out in the profession. Engaging these users is tough. Currently I am reading the Art of Community by Jono Bacon and it’s giving me a lot of ideas.

The sentimental value

I met my husband on this forum. I have spent a tremendous amount of time over the years posting, deleting spam, and otherwise improving the place. This alone is the main reason why I keep doing this.

I have been on maternity leave since October so I’m not entirely sure of the reasons for this decision. I know that some people went for training on the Open Text system in November and found it to be very cumbersome and difficult to use (something I thought was evident from the beginning, to be honest!). I think there were some other issues as well but I don’t know too much.

Needless to say, I am thrilled!  There is a tiny bit more information on the Kitchener Waterloo Drupal User’s Group, as well as in the UW Daily Bulletin.

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.