Usability problem of the day (first impressions)

Gatsby Automobile magazine

In the courses I teach about human-computer interaction, I typically open each class with an example of a usability problem. I'm putting these online, in case others find them useful.

First impressions can be important in user interfaces. We tend to judge the quality of a manufactured object, whether a physical device or a software artifact, by the fit and finish of its exterior. When I come across a Web site that looks if it it were cobbled together by a novice, I wonder about the resources that were available to build the functionality under the hood.

My university maintains a Web portal for students, faculty, and staff. Let's take a look.

The first two lines I read are "Message not found" and "Do not show me this message again." It appears that a programmer has neglected to test one of the conditions under which the system will operate.

Information display isn't the only problem. A great many small visual design problems combine to give a poor first impression. Notice the oddly jagged white-and-red border along the top of the page. Above the border, on the right, the navigation menu items are jammed together without spacing, making them harder to read. Notice the mismatch in styles between the MyLinks pop-up menu and the other choices; the superfluous line graphics; the clashing red and gray lines; the tiny, non-standard icons. We can see that the History and Main Menu items are menu headers--unless we mistake those downward pointing triangles for tiny bits of dust on the screen. The page is functional, but we could have said the same about 1957 Aurora at the top of this post. (The bulbous windshield was meant to prevent head injuries in an accident, in the days before air bags, and the cowcatcher front bumper was to limit injuries to pedestrians.)

Moving to another page we find similar first impression problems. How many different fonts do you actually need on a page? Is half a dozen too many? Probably.

And if too many different fonts aren't distracting enough, the text/background color combinations make things worse. Red on white, white on red, white on black, black on beige, dark green on light green. Gray, medium blue, blue gray, purple, ...

General principles of user interface design are missing on this site: consistency, simplicity, and so forth. Fixing the problems is less a matter of dealing with them one at a time, and more a matter of following well-established procedures to prevent them from happening in the first place.