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.