Innovative Learning
  Home Instructional Design Design Journal Related Links

HCI Design Journal

This page contains examples of good and bad user interface solutions collected over the course of the semester. Each example includes a brief description and a possible solution.

Bad Error Messages

These first few are examples of "bad error messages." Simply put, a bad error message is a dialog box or error that doesn't make sense to anyone but the person who programmed it in the first place. While these do provide feedback to the user, they are not intuitive or helpful and therefore fail to meet the user interface requirements.

blackboard error message

Problem: When the user sees this they think, "'Valid authentication credentials were not provided' Hmm... I wonder if that means my password is wrong?"

Possible Solution: Use plain english and offer help: "Your password is wrong, click here if you've forgotten what it is."


macintosh error message

Problem: This error message in not helpful for the user. The feedback doesn't make sense and the bomb icon is frightening. In this case the designers were not acting a user advocates.

Possible Solution: Find another icon other than a bomb, and change the text to make more sense. If complex technical information is necessary for technical support, it should be included below a more user-friendly error message.


How do I Respond?

The next two examples are similar to the first in the fact that are not intuitive for the user. These examples deal with interfaces that request user responses that are difficult for the user to give in the context.

dialog box

Problem: User cannot answer "yes" or "no" because this is not a question.

Possible solution: Either make this statement into a question, or change the button to something that makes sense like, "Ok" and "Ignore".

Problem: This machine fails in the area of functionality. 99% off the people who use credit card machines at the grocery only want to press one button; the one that accepts the charge. For some reason, this button is very hard to find. In this case, the accept button is labled "YES", which is confusing because the question asks "is this charge OK?". Naturally, the user begins looking for an "OK" button instead of a "YES" button.

Possible Solution: Make the question match the language of the button. For example, if they want to keep the "YES" button the question could be "If this charge is correct, press YES". Then the user is looking for the right button. Next the button should stand out from the rest of the buttons on the machine.


Accessibility/Navigation Problems

These examples deal with problems with navigation. They are either inconsistent in their navigation or not accessible to users who have special needs.

Problem: Users who do not speak English are excluded from this site. If a visitor wanted to see President Hinckley's article in Spanish, they would have to click on the map image at the top right (one click), then select the language (two clicks), then select the country (three clicks), then select the article (four clicks). However, once they get there they will notice that the content is not the same as that of the English page. The worst part of this interface is that the site doesn't "remember" the user's language. If a Spanish user comes back to in 5 minutes they will have to go through the whole process again!

Possible Solution: Add a language selection option on the main page and use cookies to remember the user's preferred language. The first part of this is already being implemented on the church's newer sites (see for example).


Problem: The main navigation of this page is based on images that are not intuitive. The user must "mouse over" each of the circles in order to see a description of the menu item (as shown on the next to the last icon). This excludes users who may be visually impaired or who have a slower connection and do not wish to load the images.

Possible Solution: Keep the images, but place a text link below them.


Problem: This site excludes users of all browsers other that Internet Explorer 5 and above (and doesn't even provide a way for me to get IE 5 if I were willing to stoop to that level to view their page). In addition, this page is not aesthetically pleasing (even for an error page).

Possible Solution: Fire the web designer and find someone who cares about accessibility.


Problem: Site navigation is not intuitive and is based on scrolling images which are not accessible for those who do not have Flash (or aren't really quick with the mouse). You have to try this site out to understand (pretend you are my grandmother using the mouse).

Solution: Make navigation based on text and, if it is kept, make the Flash easier to control.


And Now for a Good Example...

Amid all of the bad examples, there are many really good examples of user interface solutions. Take a look at just about every piece of software released by Adobe Systems or Apple Computer, for example. So to end, let's look at a good user interface example.

Strengths: There are many things that Amazon does right. First of all, the navigation is intuitive (using a common and appropriate metaphor of folder tabs), and consistent throughout the site. The pages are aesthetically pleasing, using appropriate colors and images throughout the site. However, perhaps the most important user interface feature that Amazon is using cannot be seen from this image. That is that their site attempts to learn the preferences of their users. For example, if a user's last purchase was an Art book, next time they return they will be shown new Art books. They will also be shown books that other users who bought the same book also purchased.

Website Templates

Educational Software