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.