More Bad Interaction Design - University of Vermont

Part something in a continuing series about bad interaction design on university home pages.

OK, more nitpicking. Take a look at the University of Vermont home page. Mouse over the black and white photo. Kewl. It slides over to reveal a story. I don't really have a problem with that, though I wouldn't do it that way.

My problem is elsewhere. Look above the photo, just to the right of "University of Vermont". What does "✓FULL MEDIA" mean? Is it just a piece of system status information? Is it a link?


Ah! When you click on it, it changes to "✓ LOW MEDIA" and the Flash animation is replaced by a static image. Oh...so "Full Media" really meant "High Bandwidth" and "Low Media" meant "Low Bandwidth". Why didn't they say so?

But what's this? If I click on it again it changes to "✓ TEXT ONLY" and just text is displayed instead of the image.

Cool!!! Or is it?

Not really. Why? Because I really had no idea that it was a link at first. And clicking on it didn't really function as we would expect a checkbox to operate. There is a well-defined and consistent checkbox metaphor on most Operating Systems. Checkboxes are supposed to be checked or unchecked but the options aren't supposed to change. This checkbox violates that model by leaving the box always checked but changing the option. That's wrong. You shouldn't mess with metaphors that people understand.

In addition, I had no idea what the options were. Once I clicked on it, I figured that it was just a toggle between high and low bandwidth. I had no idea that there was a further option. That's poor communication on their part.

How to Fix It
They have a couple of options.

• Ditch the Flash animation. Stick with the static photos
• Don't use a checkbox metaphor unless people can see the options and the box is going to function according to the standard metaphor
  
• Show all the options. Perhaps moving it to the lower right-hand corner of the photo.
  
• Change the words to match familiar terms: "Full Media" to "High Bandwidth", etc.
  

Moral of the Story

• Don't use Flash animation unless it really adds something to the content.
• Don't mess with metaphors people understand. It confuses and frustrates them
• Don't hide options or people won't know what choices they have
• Use terminology that people are familiar with

Here's one relatively unobtrusive idea, but certainly not the only - or even best - one. Notice that it uses radio buttons instead of checkboxes to be consistent with standard OS interface widgets.

Where's the Branding?

A good example of bad site branding.

OK, you have five seconds to tell me what school this is. Go!

Come on, folks! You really need to hit people over the head with your branding. Prospective students are going to look at dozens, maybe hundreds of college and university sites. Yours needs to be clearly identified and memorable.

What school is this? You have five seconds to tell me! Oh...you didn't need even half a second, because the home page screams the school's name. Or at least, it screams the name of the state the school is in.

MECA is a tiny little school with no where near the name recognition that the University of Wisconsin has. They need to make a greater impression with their name and brand that UWisc does - by far! So why hide their name? Dare I suggest that an artist and not a Web designer designed the site? Perhaps that's unfair, but it wouldn't surprise me.

Cool Home Page Stuff - Student Blogs

A brief discussion of using student blogs on your home page.

On this last day before Christmas break (oh man, do I need it), I thought I'd start a recurring post on cool stuff universities are doing on their home page. This is just my opinion (and as we all know, I don't know jack), so feel free to ignore or deride it. I'm stealing most of this stuff from collegewebeditor.com anyway.

Student Blogs

• Capital University
• University of Montana
• Maine Collage of Art
• Philadelphia University
  

OK, these are university-sponsored student blogs, and so have some strings attached. Typically, students are compensated and there are often rules about not bashing professors by name or writing in gory details about the underage kegger/orgy that took place Saturday night.

A lot of schools have sponsored student blogs, but not that many feature them on their home page.

The value of sponsored student blogs are several:

1. Students are blogging anyway, so you might as get involved and have at least a little control over the message.
2. Prospective students are very tuned into social networking on the web, and getting the direct perspective of other students is highly valuable.
3. Blogs personalize your Web presence, and can make your site appear more personal, friendly and honest.

The downsides include:

• Picking the right students with the commitment to post regularly
• Maintaining control over the message (at least to the point of preventing explicit or inappropriate posts)
• Cost. Students are usually compensated, often with digital cameras and such that they use to maintain their blogs
  

Some sites, like Capital University, allow people to subsribe to the blogs, so that they can easily follow what's happening on campus over time.

Overall, most campuses that have used student blogs as a recruiting device have been very happy with the result.

Links

• Admissions-sponsored student blogging can get real results for your institution
• Blogs and Wikis at collegewebeditor.com

Home Page Branding Photos/Spotlight Stories

An examination of how the main photo area on the home page is used.

In looking at the home pages of the Top 20 university sites, I kept looking at the main photo area of the pages. Though some of these pages may have many photos on them, there is virtually always a "main" photo prominently placed on the home page (see graph, below).


And, of course, I was supposed to look at that main photo. That's what it's there for: to catch and hold the viewer's attention. And as you can see, most universities give the most important real estate on the page to these photos.

So, guessing that it might be important, I decided to take a look at exactly what universities were doing with these photos.

First of all, I decided to add 10 universities to my list of the top 20. I guess I'm just getting bored with the same old 20 home pages. These were randonly picked out of the Google search results, somewhere on page 6 or 7. The additional 10 are as follows:

1. USC
2. Oregon State University
3. Vanderbilt
4. University of Connecticut
5. Rutgers
6. University of Wyoming
7. Washington State University
8. Michigan State University
9. SMU
10. University of Montana

All of the 30 sites had some sort of main photo area, even if it was relatively small. Of the 30 home pages, 7 (23%) were using a Flash-based animation for the main photo area. Twenty (67%) of the sites had photos that randomly changed, either as part of the Flash animation or upon refreshing the page. Six sites (20%) had photos that only changed periodically (once a day, once a week, etc.).

Twenty-three (77%) sites included at least some text with the photo, ranging from a short caption to a story headline and/or teaser. Half of the sites tied the photos to some sort of feature article or spotlight story, and even more put a link with the main photo area (67%). Those sites that were not using the main photos for a feature or spotlight linked to a variety of things, from a slide show of the campus to a mission statement to a eCard builder.

Photos of What?

The subject of the photos also varied, with some campuses focusing heavily on faculty and research and others more evenly spread out between faculty, students, etc.

Totals in the above graph don't equal 100% because most sites had changing photos that featured multiple subjects.

Of the 15 sites that used the main photo area for links to features/spotlights, 12 (80%) had photos of research or faculty. Only seven (47%) had photos/stories of students.

Of the 15 sites that did not use the main photo area for links to features/spotlights, 11 (73%) had photos of campus scenes (environment, buildings, etc.) and only 3 (20%) had photos of research or faculty.

People or Scenics?

On our campus, there is some discussion of what the ratio of people photos vs. campus/nature photos should be. The "consensus" (i.e., two people threw out that number) is that 3 to 1 is proper.

In order to see what other universities were doing, I tried to look at every photo on the sites (19 of the 30) that had randomly rotating photos (as opposed to photos that only changed daily). I broke down the photos into categories where the photos were primarily of people, primarily of the campus (though people may be in the photo), scenics (areas not on campus), sports and other (most commonly art or research oriented).

The results were as follows:

As you can see, people-oriented photos are only slightly more common than photos of the campus. If you add the sports-oriented photos to the people photos, the gap widens a bit. But overall, there is a fairly even balance between campus/scenic photos and people/sports photos.

To me, this makes sense. I never had any desire to visit the University of Wisconsin or the University of Montana until I saw just how beautiful their campuses and environs were - as revealed by the photos on their home pages. CSU, Chico has both a beautiful campus and a beautiful setting; those should be exploited in attracting prospective students to visit the campus.

Home Page Flash I Don't Like - UCLA

A look at a flash implementation at UCLA that isn't bad, but doesn't give the user enough control.

I'm not feeling so good today, and that makes me hate every Web site I see, so today I'm going to complain about Flash on university home pages. I know, yesterday I was all peaches and cream about the FSU home page, and I still like what FSU has done, but today I feel like whining.

Let's start with UCLA's home page. Overall, I really like the look of the UCLA home page. It's very clean. And their use of Flash isn't totally gratuitous. But there are a few things. First of all, what's with the "'Tis the season to be mellow"?? What a waste of real estate! Sure, stress management is important... but not on the home page of a major university!

But my main issue is with the Flash-based "Happenings" on the right side of the page. First of all, there really isn't anything to indicate that these are changable. Yes, there are up and down arrows, but they don't really scream "interaction" to me.

And then, if you do try to click them, they don't act quite as you'd expect an arrow button to work. In fact, you can't click on them. Mousing over the button causes the happenings to scroll up or down at a constant rate.

Though this is OK, it takes control away from me the user. I'm impatient. I don't want to sit there and watch the thing scroll at it's snail's pace. I want to control the speed. How about making it so mousing over the arrows causes it to scroll, but clicking on the arrows causes it to skip ahead to the next screen of happenings? That gives control back to me. I control my experience, not the Flash developer.

Flash on Your Home Page - FSU Does it Right

Incoherent babblings about using Flash on your home page, including one good example.

Everybody loves Flash animations. Everybody except usability designers, that is. Usability designers are into functionality, simplicity, accessibility - all things that Flash excels at doing poorly. Well, to be fair, it isn't just that Flash does these things poorly; it's more that it encourages Flash designers to do these things poorly.

Ah, but things have changed, you say. Flash is being used more appropriately and provides real functionality. In some cases, there is actually a tiny grain of truth to this. Let's go so far as to say that flash isn't being used quite so gratuitously these days.

It's not that I hate Flash - I used to be a Flash developer. But no matter the thousands of considerations you have as you build your university's Web site, remember that content is king. Forever and always. People go to any Web site for one of three reasons (sometimes all): to find some information, to conduct some business, or to have some social interaction. That's all about content. Sure, maybe that information is porn, maybe that business is online gambling, and maybe that social interaction is a singles chat room. But finding information, doing business and interacting socially are the three main classes of Internet activities. And they are all ruled by content.

What does Flash contribute to these activities? Not much usually. Sure, there's Flash video, but it ain't the only game in town for video. Yeah, there are Flash-based shopping sites, but how common are they?

Nope, Flash doesn't really contribute much to the content of a Web site. And whatever content your Flash doodad might have is inaccessible. Ditto for kewl animated Flash navigation. Oops! That's a no-no in the CSU.

So, death to Flash, right? Well, not so fast. Flash can have a role to play, and some schools and businesses are using it reasonably well in that role. Flash's strengths are in visual presentation, animation and interaction. Obviously, all of those can be good things on your home page if not over done.

From my perspective, Flash can be used well as a marketing tool on the home page, as an attention-getter - providing visually interesting views of the campus and campus life, teasers for spotlight stories, or other visually heavy but content light material. Certainly, it should not be used for core home page content or navigation (because of accessibility issues).

Take a look at Florida State's home page. They have a Flash-based rotating spotlight teaser, mostly about faculty research and achievements. What's nice about this?

1. It's visual. Each piece has a photo related to the teaser.
2. It's personal. Most of the pieces have a photo of the faculty member looking at (visually engaging) the viewer.
3. It's prominent. It takes up the prime real estate on the page and the text is large enough to read easily.
4. It's short. Though I think the text could be a bit punchier, the headline and teaser are short and to the point. A "More" button lets users see the rest of the story.
   
5. It gives the user control. With built-in "previous", "next" and "pause" buttons, the user can skip to the next story, go back to the previous story or stop the animation altogether.
6. It isn't annoying. The animations are simple and relatively unobtrusive. And there is no audio.
   

If you're going to do Flash on your home page, this is a great way to do it.

Personally, I would mix it up more. Fewer faculty and more students. I get the impression that FSU is trying to appeal to potential doctoral and post-doc students, and maybe potential research faculty. Maybe that's the kind of institution it is. I don't actually know.

But for Chico State...well, need I really say more? We're obviously going to be appealing mostly to potential undergraduate students, so highlighting student life (the beauty of the campus, local activities, etc.) and student achievements might be a better focus. A lot of it depends upon who the primary audience for our home page is.

Analysis of Navigational Links on Top 20 Home Pages - Part 2

An analysis of the labeling and terminology used in links on the top 20 home pages.

This Analysis is based partly on this post.

In Part 1, I looked at the most common navigational links on university home pages. In this post, I'll be taking a look at labeling and terminology.

Labeling is vital because the words and phrases that we use can have very different meanings to different people and audience groups. Ambiguous labels can confuse and frustrate users. And the use of non-standard labels can leave users lost at sea.

The value of understanding labeling is in being able to use terms and labels that your users both understand and expect. Some labels become so common as to be de facto standards; witness the "home page" and the "shopping cart". Everyone knows what these are, but there is no defined standard requiring that people call them that. Those standards arose solely through common usage.

In the same way that "home page" has become an ubiquitous label, other terms have risen to the point of de facto standards on university Web sites.

Academics and Research
"Academics" and "Research" are the two most common home page link concepts. As such, they need to communicate clearly, and you would expect - or at least hope for - some uniformity in terminology and labeling.

Term	Number
Academics	15
Academics & Research	2
Academic Programs	2
Research & Innovation	1

Term	Number
Research	15
Academics & Research	2
Research & Libraries	1
Research & Innovation	1

Both "Academics" and "Research" are overwhelmingly used in one permutation or another on virtually every site. Personally, I think that "Academics" seems potentially vague and ambiguous to me, but it is clear when you follow the link that "Academics" has a well-defined and accepted meaning. What do you find when you click on "Academics"? The following are the most common links:

• Schools/Colleges
• Departments/Academic Units
• Undergraduate Education
• Graduate Education
• Advising
• Centers & Institutes
• Catalogs
• Academic Support Services

It seems obvious that - unless we intend the term to mean something very different - we should follow the de facto standard that has clearly been created in labeling links to "academics".

“By creating a label we are building the site's information architecture. The labels define the categories of information, and the categories define the site's structure.”

Looking further into this you begin to realize that it isn't really just about labels and terminology; it's really about the structure of the site itself. By creating a label called "Academics" and placing the items in the above list there, we are building the site's structure. The labels define the categories of information, and the categories define the site's structure.

Audience Groups

Some audience group names can only be expressed in certain ways. "Alumni" are always referred to as alumni; "faculty" always as faculty. But other groups are a bit more open to interpretation. For example, there used to be some consensus that prospective students would be referred using that label, but more and more sites are now using "Future Students" to describe that audience group, though "Prospective Students" is still more common. This change may be occurring for several reasons. Universities may see "future students" as more hopeful, encouraging, and welcoming than "prospective students", or it may simply be a matter of trying to squeeze the phrase into a limited space.

Term	Number
Prospective Students	9
Future Students	3

Once you get past "prospective students" to parents, friends, visitors, etc., it becomes something of a free for all.

Term	Number
Visitors	7
Friends	5
Parents	3
Community	3

Other Terms

Athletics/Sports

To me, "Athletics" and "Sports" carry two slightly different meanings, where "athletics" are the official university extramural sports and "sports" is that plus the recreational and intramural campus sports. But that's just my personal take.

Term	Number
Athletics	10
Athletics & Recreation	2
Sports	2
Sports & Recreation	1

Jobs/Employment
No real consensus here, though the word "employment" appears in eight of the labels.

Term	Number
Employment	5
Jobs	3
Staff & Employment	2
Working at…	2
Job Opportunities	2
Employment Opportunities	1

Analysis of Navigational Links on Top 20 Home Pages - Part 1

An analysis of the most common links found on the top 20 university home pages.

Purpose
The purpose of this analysis is to examine the navigational systems used on university home pages, in order to shed light on:

1. Which links and types of links are most common
2. Which types of organizational schemes are most common
3. Which types of labeling and terminology are the most common

This analysis focuses only on navigational systems (e.g, "menus") and not on all of the links on each page. Links to specific news or feature stories, events, specific schools or colleges, video clips, etc. were not included in this analysis.

Methods

For this analysis I counted the number of times a particular link appeared on the 20 home pages. In some cases different terms were used to describe functionally equivalent things (e.g., "Athletics" and "Sports"). In those cases I group the items under the same heading. In addition, I only counted those items plainly visible on the home page; items occurring in pop-up menus were not included in the count (45% of sites used pop-up menus to one degree or another).

I did not always count every single link on each page. There were some links - that I either felt weren't relevant to my goals (e.g., links to specific news and feature stories, privacy policies, "About this Site" links) or that were unique to the specific site - that I did not count. In total I counted 78 different links, and a total of 493 links on the 20 home pages (an average of 25 links per page).

Loosely following Rosenfeld and Moreville's (2002) list of organizational systems, I divided links into one of four types:

1. Topical/informational - pertaining to specific topics
   
2. Organizational - pertaining to the organization of the university
3. Audience - addressed toward specific audience groups
4. Task - pertaining to actions and things that can be done
   

I chose these four types as opposed to Rosenfeld and Moreville's "topic", "task", "audience" and "metaphor" both because I felt that they ignored the fact that many Web sites organize their sites to reflect their internal organization, and because metaphoric organizational systems are pretty much a thing of the past (for good reason). These four types follow those used in my post on the Navigational Structure of the CSU, Chico Home Page.

Defining the types of some links was difficult. Is "Libraries" and organizational link or a topical link? How about "Directory"? I made my best guess and you may not agree

Results

The links that I counted and their relative frequency appear in the table below.

Link	Percent of Sites		Type
Academics	100%		Topical/Informational
Research	95%		Topical/Informational
Alumni	90%		Audience
Faculty	80%		Audience
Athletics/Sports	75%		Topical/Informational
Libraries	75%		Organizational
Contact Us	75%		Task
Jobs/Employment	75%		Topical/Informational
Students	75%		Audience
Staff	75%		Audience
About	70%		Topical/Informational
Giving	65%		Task
Admissions	60%		Topical/Informational
Parents	60%		Audience
Administration	55%		Organizational
Arts/Museums/Culture	55%		Topical/Informational
Calendar	55%		Topical/Informational
Campus Map	55%		Topical/Informational
Directory/Index	55%		Topical/Informational
Prospective Students	55%		Audience
Colleges & Schools	50%		Organizational
Visiting	45%		Topical/Informational
Medical Center	40%		Topical/Informational
Continuing/Distance Ed	35%		Topical/Informational
Email	35%		Task
International	35%		Topical/Informational
News	35%		Topical/Informational
Visitors	35%		Audience
Financial Aid	30%		Topical/Informational
Friends	30%		Audience
Departments	25%		Organizational
Diversity	25%		Topical/Informational
Facts	25%		Topical/Informational
Photos/Video	25%		Topical/Informational
Portal	25%		Topical/Informational
Recreation	25%		Topical/Informational
Student Life	25%		Topical/Informational
Tours	25%		Topical/Informational
Academic Calendar	20%		Topical/Informational
Application	20%		Topical/Informational
Campus Life	20%		Topical/Informational
Centers & Institutes	20%		Topical/Informational
Community	20%		Topical/Informational
Graduate Studies	20%		Topical/Informational
Health & Safety	20%		Topical/Informational
Offices	20%		Organizational
Outreach	20%		Topical/Informational
Services	20%		Topical/Informational
U & Town	20%		Topical/Informational
Business & Industry	15%		Topical/Informational
Computing	15%		Topical/Informational
Disability/Accessibility	15%		Topical/Informational
Events	15%		Topical/Informational
Find People	15%		Task
Housing	15%		Topical/Informational
Site map	15%		Topical/Informational
Technology	15%		Topical/Informational
Patients	15%		Audience
Community	15%		Audience
Advising	10%		Topical/Informational
Catalog	10%		Topical/Informational
Courses	10%		Topical/Informational
Help	10%		Topical/Informational
Majors	10%		Topical/Informational
Transfer	10%		Topical/Informational
Donors	10%		Audience
Bookstore	5%		Topical/Informational
Class Schedule	5%		Topical/Informational
Collections	5%		Organizational
Fellowships	5%		Topical/Informational
Human Resources	5%		Organizational
Orientation	5%		Topical/Informational
President/Chancellor	5%		Organizational
Spotlights	5%		Topical/Informational
Tranportation	5%		Topical/Informational
Tuition/Fees	5%		Topical/Informational
Undergrad Research	5%		Topical/Informational
Foundations & Corps	5%		Audience

Analysis

Far and away the most common type of link on university home pages are topical/informational in nature.

Type	Total	Percent
Topical/Informational	54	69%
Audience	12	15%
Organizational	8	10%
Task	4	5%

However, when you look at only the most popular links (occurring on 50% or more of home pages), a somewhat different picture emerges. Audience links double in frequency, accounting for 30% of the most popular links, and indicating that audience-oriented links are among the most popular. In fact, 18 of the 20 sites had a specific navigational structures for audience groups.

Type	Total	Percent
Topical/Informational	10	48%
Audience	6	29%
Organizational	3	14%
Task	2	9%

Other than that, there's no discernable pattern as to the nature of the most common links. Of course Academics and Research get a lot of play, but so do Jobs/Employment which is on a clearly different hierarchical level than the first two.

On the other hand, there is a long tail of links that occur on three or fewer sites, suggesting that there are many different potential approaches in building home page navigation and that different universities have different needs and priorities for their home page navigation.

Discovering and addressing those needs is perhaps the biggest challenge in redesign the CSU, Chico home page.

References
Rosenfeld, L. & Morville, P. 2002. Information Architecture for the World Wide Web. O'Reilly. 2nd Edition.

So What's It All Mean? Part 2 - Most Viewed Pages

A discussion of the most commonly viewed pages on the CSU, Chico Web site.

This post is based on this analysis.

In some ways there is less to learn from the list of most viewed pages than there is from the most popular searches.

For one thing, many of these pages are buried deep within the hierarchy and are part of specific courses. Certainly, "Skull Model" (#14) and "Indian Caste System" (#17) are parts of very popular courses. The Skull Model has been around for years and has always been a highly viewed page.

One thing that is new is the rise of social networking pages, like "Progressive Students Union WIKI" (#2) and "Taiwanese Students Association" (#8, #19). Pages like these aren't part of the "official campus web presence" that is somewhat centrally maintained. So, though they are an important part of what is going on on campus, they aren't about to appear on the home page any time soon.

What's left is pretty much the usual suspects; library, class schedule, campus directory, catalog, etc. Student Computing is prominent, but that's because all of their labs computers use that as a home page.

There are a number of "deep link" pages in the top 30 most viewed pages. Some of these, like "Job Opportunities" (#21) are important enough to consider placing on the home page. However, most of the deep links can be reached via from the home page via a main page link (e.g., "Athletics - Baseball" can be reached from the "Athletics" link on the home page). The only real anomoly is the "Career Planning - Cover Letter Examples" page (#6). This page might have been used in a course or other activity, so without hard evidence I'd hesitate to consider placing a link to this on the home page.

Overall, based on the analysis, most of the bases are covered with respect to having the most viewed pages linked from the home page.

So What's It All Mean? Part 1 - Search Terms

A discussion of what to do about the most commonly searched for terms on the CSU, Chico Web site.

I'm a big advocate of the school of thought that says that your most popular search term is your hardest to find page. In other words, if people prefer to browse first and search after a browse fails (see this post), then a large portion of searches are for things that they couldn't find via browsing.

So, what does that mean? Should we put big flashing links for campus map, transcripts, and financial aid on the home page?

Maybe it does.

These are obviously high demand pages and should have high visibility. Of the top 30 search terms, only eight had visible links on the home page (campus map, class schedule, athletics, bookstore, portal, Orion, library, and catalog).


When you look at the placement of these eight links, you can see that all of them are either in the lower part of the page, or use very small text (or both in the case of "campus map").

Five of the links occur in the "photo/link" strip toward the bottom of the page, suggesting that perhaps this bar either is not highly visible or does not communicate effectively the fact that there are links there.

In any case, none of these links are prominently placed on the page, and this probably contributes to their popularity as search terms.

Another seven popular search terms appeared in the blue pop-up menus on the home page (financial aid, housing, jobs, academic calendar, records and registration, human resources, and associated students), indicating that the pop-up menus perhaps don't get as much use as we would like.

So overall 15 of the top 30 searches appear some place on the home page, but none of them have a high visibility.

Recommendations
I don't actually recommend big flashing links on the home page, but I do recommend that we take a closer look at who is doing the searching and whom the home page is serving.

A close look at who is likely doing the searching reveals the following about the top 57 search terms (based on this post):

Likely Searchers	Terms	Percent
Current Student	54	95%
Prospective Student	20	35%
Community	6	11%
Staff	5	9%
Alumni	3	5%
Faculty	3	5%

If, in fact, current students are likely to be searching for 54 of the top 57 terms, then I think it becomes clear that they are the major audience for our home page as it exists. It doesn't have to stay that way, of course. Humboldt State redesigned their home page to be a marketing tool for recruiting new students. That's great, but right now I think it's clear that current students are doing searches more than all other groups combined and would most benefit from a redeveloped home page.

IF the goal of the home page remains to serve current students, then a reorganization of the link structure to increase the visibility of the most popular search terms is an obvious idea.

How to do it?
Some campuses put a list of "Quick Links" on their home pages (University of Michigan, Princeton, for example); a list of supposedly popular links. But I'm not a fan of these for the same reason I'm not a fan of FAQ pages: it's an unorganized grab bag of stuff and there is no apparent reason for me to expect that what I'm looking for will be there. The "information scent" is too faint for me to want to go down that trail. In the case of the U Mich site, they at make them all visible (though they're in no discernible order).

Personally, I'm more of a fan of the approach that the University of Florida takes, which is to have main headings with a list of popular links below it, reminiscent of the old Yahoo! home page. Western Washington University does something similar. In fact, I suggested something similar during the last redesign in 2003:

What's the advantage?
The advantages of this approach IMO are:

1. Links are part of a clear organizational structure (e.g., "campus map" could go under "About Chico State") instead of a haphazard list-o'-links.
   
2. Links are plainly visible on the page without having to click on a "Quick Links" list or a pop-up menu.

The challenge is coming up with an organizational structure that includes as many of the high profile search terms as possible.

However, page structures like this have fallen out of favor in recent years, probably because people think that pop-up menus are more effective. This is certainly true from a space usage perspective, but I'm not actually convinced that this is the case from a findability perspective. My feeling is that pop-up menus are OK if the user knows they are there and if the menus are short and clear enough to be quickly scannable, but otherwise may actually reduce findability by making links on the home page less visible.

This is just one idea, and I'm sure that there are other ways to do this that present the links as part of an organized scheme and doesn't hide them in a drop-down list or pop-up menu somewhere.

Another Approach for Campus Map
The University of Wisconsin has put a link to their interactive campus map in a very prominent place on the home page, using an icon to draw attention. For something is as high demand as the campus map (and something that lends itself to a visual representation), this is not a bad approach. This wouldn't work for everything, of course, because the page would be littered with icons, but for the campus map (which is a perennial favorite), the idea has some merit and would make it clearly stand out.

Search vs. Browse

Insane babblings about why people use search instead of browsing, and visa versa.

Why do people use search instead of browsing or visa versa? We'll I'm sure that there are studies out detailing why, but I prefer to wing it based solely on opinion with no facts to support me. So here are my reasons why people prefer searching:

1. They think it's quicker (but will try browsing if searching fails)
   
2. They know exactly what they're looking for
3. They don't trust (or have had a bad experience with) the site's browsing architecture
4. They want to get instant results without a lot of steps (this is a combination of 1, 2, and 3)

Ultimately (particularly for a younger audience who are a) more web savvy, and b) want instant results without intermediary steps) searching is about getting to the desired information as quickly as possible without having to make decisions and without thinking about choices. This approach is referred as teleporting. Whether or not this is a good thing I'll leave to others to debate.

However, "The Perfect Search Engine Is Not Enough: A Study of Orienteering Behavior in Directed Search" (now I'm starting to do my research) suggests just the opposite, that people tend to browse first and search only when that fails, and that people tend to return to browsing (or "orienteering") even after a successful search.

One interesting paper (Effects of Scent and Breadth on Use of Site-Specific Search on E-Commerce Web Sites) found that the decision of a user to use search or browse approaches to finding information depended on several things, including:

• How clearly organized and labeled a site's menu system was ("information scent")
  
• How prominent search and browse areas were
• The user's inclination to search or browse
  

Here's an article that summarizes the two papers mentioned above - that I found only after I found the other two.

The Upshot
What's the upshot of all this for administrators and others trying to plan a new website?

My take on it is this: If it's true that people prefer to browse (I plan to test this hypothesis), then we need to make absolutely certain that our site structure is extremely clear, well-designed, intuitive and easy to use. As Katz and Byrne say, "providing site search should not be used to compensate for poor menu design, and provide[s] further evidence regarding the design of effective menu structures."

Let's face it, a perfect search engine would always give you exactly what you wanted the first time every time. If that happened, no site would even have a menu; they'd all look like the Google home page.

But search engines aren't perfect for several reasons (ambiguity of terms, lack of context, limited algorithms, and poor labeling being just a few). And if people prefer to use menu systems over search, it is a condemnation of the ability search engines to return desired results, because we all know how poorly organized most menu systems are.

People are choosing the lesser of two evils in this case. And though there are a few things we can do to improve search results, we have much less control over that than we do over the information architecture and menu systems of our sites.

References
Katz, M. A. and Byrne, M. D. (2003). Effects of Scent and Breadth on Use of Site-specific Search on E-Commerce Web Sites. ACM Transactions on Computer-Human Interaction, 10(3) pp 198-220. (Link)

Teevan, J., Alvarado, C., Ackerman, M. and Karger, D. (2004). The perfect Search Engine is not Enough: A Study of Orienteering Behavior in Directed Search. Proceedings of ACM CHI 2004, pp. 415-4422. (Link)

Home Page Structure of the Top 20 Sites

Analysis of the layout, structure and space usage on the top 20 university home pages.

I was curious as to what were the most common page elements on the top 20 sites. How many sites included news or events or welcome messages, as well as how many used left hand navigation vs. top navigation, etc. The following analysis breaks down my findings.

Most Common Page Elements

Element	Percent of Sites
Search Box	100%
Photos	100%
Top Banner	90%
News	85%
Copyright Notice	75%
Left Navigation	70%
Feature/Spotlight	55%
Quick Links	45%
Top Navigation	35%
Contact Info	30%
Events	30%
Right Navigation	15%
Inside "University"	15%
Directory	10%
Announcements	10%
Calendar	5%
Visit	5%
Recruitment	5%

Surprisingly, a search box and photos were the only things that all 20 sites had on their home page. But maybe that's not so surprising given the difficulty in organizing something as complex as a university website.

Of course, all sites also had identity/branding that identified the university on the home page.

Content Analysis

In terms of actual content (as opposed to structural or navigational elements), there was less agreement among the 20 sites. Only two items - News and Feature/Spotlight occurred on more that 50% of the 20 home pages, and the majority of content types occurred on 10% or less of the sites.

Element	Percent of Sites
News	85%
Feature/Spotlight	55%
Events	30%
Inside "University"	15%
Directory	10%
Announcements	10%
Calendar	5%
Visit	5%
Recruitment	5%

Page Element Placement

Another thing I was curious about was the placement of page elements on the page. I know that the issue of where to put the search box will inevitable arise, and I wanted to have hard data on what the "big boys" are doing.

Surprisingly, there were no real surprises. If you've read Neilsen, you realize that everybody is pretty much following the banner-on-the-top/navigation-on-the-left standard.

The following "heat maps" (OK, they're not heat maps in the traditional meaning) show where each of the most common page elements were placed on the page. To make these maps, I took a screen shot of each home page and then drew transparent rectangles over each page element. When I was done I removed the screenshots, leaving a stack of rectangles behind. Note that not every page was the same width, and I made the screenshots the size of the biggest page.

Top Banner
As expected, most sites use a top banner of varying heights, and most of them are placed - unbelievably enough - at the top of the page.

Identity/Branding
Here I'm only referring to the campus name and a logo or seal, if any. Some campuses put their logo in various places on the page, but almost all campuses put their name in the upper left part of the banner.

Search Box
Search boxes tend to be scattered around a bit more than the identity due to page layout considerations, but it's still clear that the most popular location is in the upper right-hand corner of the page.

Navigation
Instead of trying to break down the navigation into different types, I just highlighted any area that was clearly navigational in nature. Many home pages had multiple navigation areas. Again, no surprise as the left side of pages and the area directly below the banner were the most popular locations for navigation.

Photos
Photos are used to create interest and connection on a home page, humanizing the content by bringing people/and or the environment onto the page. Photos also add visual richness, whatever their content. Many sites use photos as part of features or spotlights on the home page, so there is considerable overlap in the placement of photos and the placement of features.

Again, not surprising, photos - with their attention-grabbing abilities - are most commonly prominently placed in the upper center of home pages. Many sites had photos in multiple areas of the home page, serving a variety of purposes.


News/Announcements
News and announcements (mostly labeled "News") were the most common content element on home pages. Though there was no overwhelming consensus on the placement of News, the most common location was near the center of the page, or on the center left, just to the right of the navigation.


Feature/Spotlight
Features or spotlights are either short articles or article teasers placed on the home page, mostly highlighting some interesting or newsworthy aspect of the campus. For example, Cornell spotlighted a talk given by Shimon Peres; UW spotlighted sports stories and student research in ANWR.

Placement of Features varied widely, but was most concentrated in the center of the page, and closely follows the placement of photos, since virtually all Features were accompanied by photos.


Events/Calendars
Events and/or calendars only appeared on about a third of home pages, but tended to all be placed lower center or lower right portion of the page.

Quick Links

Less than half of sites contained "Quick Links", typically as a drop-down list of links, but in a couple of cases as an actual list of links. The placement of Quick Links on the home page shows no discernible pattern.

The "Average" Home Page

On the "average" home page, 21% of the page area is taken up by photos, and 13% is taken up by navigation. Over a quarter of the page is taken up with white space or other content.

The following graphic shows the relative average size of each content area, in proportion to each other and the page.

The "Perfect" Home Page

Assuming that you wanted to build your home page based on the most common practices (which might or might not be a good idea), you would probably lay it out something like this:


Of course, this doesn't take into account the purpose of your home page, the primary intended audience(s) for your home page, your campus's particular branding, etc., etc.

Review of the Top 20 University Home Pages

Introduction to the analysis of the top 20 university home pages.

As part of the preparation for the redesign of the CSU, Chico home page, I decided to take a look at what other universities are doing on their home pages (following my personal mottos of "reinventing the wheel is for idiots" and "steal from those who actually know what they are doing").

Methodology

I conducted a simple Google search for "university" on November 27th, 2006, and took the first 20 sites that came up. I choose this approach because I didn't want to bias the results by selecting site that I personally liked, and because I felt that the top sites listed in Google would have a level of prestige and legitimacy that a truly random selection might not.

The top 20 sites were, in this order:

1. Harvard
2. Stanford
3. University of Florida
4. University of Michigan
5. Yale
6. Cornell
7. University of Delaware
8. University of Washington
9. Duke
10. University of Texas at Austin
11. University of Virginia
12. Georgetown University
13. Columbia University
14. UC Berkeley
15. Princeton
16. Indiana University
17. University of Pennsylvania
18. University of Illinois at Urbana-Champaign
19. University of Wisconsin - Madison
20. New York University

I eliminated all sites with table-based layouts as being too old and non-standards compliant for consideration. This eliminated eight universities (highlighted in red, above). I then proceeded down the list of results in the Google search until I found the next eight CSS-based university home pages. I ended up looking at 45 university sites before finding 20 that were CSS-based, meaning that less than half of the top listed universities in the country have CSS-based home page layouts. The final list appears as follows:

1. Stanford University
   
2. University of Florida
3. University of Michigan
4. Yale University
   
5. Cornell University
   
6. University of Washington
7. Duke University
   
8. University of Texas at Austin
9. Princeton University
   
10. University of Illinois at Urbana-Champaign
11. University of Wisconsin - Madison
12. New York University
13. Ohio State University
14. Boston University
15. University of Colorado at Boulder
16. Florida State University
17. Brown University
18. University of Arizona
19. Utah State University
20. Syracuse University

Basic Analysis

I took a look at the DocType for each site and ran the W3C HTML validator and the Cynthia Says accessibility validator against each page. I also wanted to see the minimum width of each page (the point where content would be hidden and scrollbars would appear). Here's what I found:

University	DocType	Validates	Sec 508	Min Width
Stanford University	XHTML 1.0 Strict	Yes	Passed	789
University of Florida	XHTML 1.0 Transitional	Yes	Passed	770
University of Michigan	XHTML 1.0 Strict	Yes	Passed	820
Yale University	XHTML 1.0 Transitional	No	Failed	783
Cornell University	XHTML 1.0 Transitional	No	Passed	809
University of Washington	XHTML 1.0 Strict	Yes	Failed	942
Duke University	XHTML 1.0 Transitional	No	Failed	718
University of Texas at Austin	XHTML 1.0 Strict	Yes	Passed	775
Princeton University	XHTML 1.0 Transitional	Yes	Failed	796
University of Illinois at Urbana-Champaign	HTML 4.01 Transitional	No	Passed	770
University of Wisconsin - Madison	XHTML 1.0 Strict	Yes	Passed	762
New York University	XHTML 1.0 Strict	No	Failed	815
Ohio State University	HTML 4.01 Strict	No	Passed	767
Boston University	XHTML 1.0 Strict	Yes	Failed	795
University of Colorado at Boulder	HTML 4.01 Transitional	No	Failed	765
Florida State University	XHTML 1.1	Yes	Passed	797
Brown University	XHTML 1.0 Strict	Yes	Passed	765
University of Arizona	XHTML 1.0 Transitional	No	Passed	858
Utah State University	XHTML 1.0 Transitional	Yes	Passed	788
Syracuse University	XHTML 1.0 Strict	No	Failed	721

DocType
The most common DocType was XHTML 1.0 Strict, with nearly half of all sites using this DocType. Next most common was XHTML 1.0 Transitional, with 35% of sites.

Validation
Of the 20 home pages tested, only 11 (55%) actually validated, regardless of the DocType. Seven of the nine XHTML 1.0 Strict site validated, indicating that the people who maintain these sites are paying attention.

Section 508 Compliance
Only 12 (60%) of sites passed Cynthia Says automated accessibility validation. The most common problem was lack of labels on input elements.

Minimum Page Width
Minimum page width measures the smallest window width a page can viewed at before content begins to be obscured and horizontal scrollbars appear.

The narrowest page was 718 pixels wide (Duke); the widest was University of Washington at 942 pixels. The average minimum page width was 790 pixels, and the majority were between 760 and 800 pixels.

Use of Flash

Six of the 20 sites (30%) used Macromedia Flash technology on their home page. The most common uses were to provide rotating photos with stories and links and to provide pop-up menus. However, Boston University uses Flash to create an interactive recruiting environment with stories, photos, interactive maps, and multimedia pieces including video.