Thinking... The Obscure Interface

- Gerry Gaffney. September 20, 2002.

Download 'printer-friendly' PDF version (File size: 86 KB)

Introduction

User interfaces, whether internet-based or 'traditional' applications, are often difficult to learn and use.

There are many reasons for obscurity at the user interface layer:

• Inexperience, or lack of knowledge of established standards and practice may cause designers to invent unnecessarily, and to fail to maintain consistency with established norms.



• User Interface designers may be under pressure to produce interesting, entertaining, exciting or engaging user interfaces - with the inherent danger that this will be done at the expense of usability.



• The need to design a product that can be used by international audience may incline developers to use icons and graphics, in the belief that an iconic language may be truly international.

Inappropriate metaphor

The screen shown here is the main menu on a language learning program called 'Tell me More'.

The program itself is excellent - comprehensive and fully featured. Unfortunately, the user interface renders the program more difficult to learn and use than is necessary.

The metaphor used is that of a movie set. Some elements of the movie set map relatively directly to activity of learning a language:

• Clicking on the microphone leads to pronunciation exercises
• Clicking the clapboard leads to dialogue activities
• Clicking the stack of books leads to reference works
• The door provides an exit from the program
• The notepad goes to 'exercises'
• The mixer console leads to 'options'
• The teleprompter with the large question mark provides access to 'Help'.

Some elements have a more tenuous connection with their referents:

• Clicking the globe leads to 'online services'
• The Oscar leads to 'lesson report'
• The clothing rack leads to 'choice of lesson'.

Of course users of the program can learn relatively quickly to recognise these elements. In addition, as the mouse cursor moves over each element a text description pops up.

It is also interesting (and important) to note that several people to whom I showed this program had quite a positive reaction to the screen, even though they subsequently encountered difficulties in using the program.

The screen also contains elements that are not in fact active. For example, the spotlights cannot be clicked, nor can the movie camera (although apparently this provides access to video material in the Japanese version).

The essential difficulty is that the process of learning a language is not like a movie set. The user interface imposes an alien concept on the user.

The metaphor in fact interferes with the ability to create an effective mental model of the software. The presentation of a host of available options in a way that gives each equal prominence makes it difficult for the user to discern any workflow or sequence.

One of the arguments we occasionally encounter when attempting to persuade developers to simplify user interfaces is that 'users are clever' and will certainly be 'able to work it out'. There may be a perception that the focus of usability activities is to 'dumb down' the program. This is a pejorative term that implies simplification is in some way pandering to the users.

In reality, the users of most programs do not require intellectual engagement with the user interface. Certainly a student studying a foreign language faces sufficient intellectual challenge without having to contend with an additional layer of complexity at the user interface.

Another indication of an inappropriate metaphor is the failure to be able to apply it throughout the interface.

For example, the 'lesson report' in this program uses tubes, containing various levels of different colours, to show the student their progress. The relationship between the movie set and these tubes is not apparent:

Over-reliance on graphical elements

During design sessions, we often hear the phrase 'a picture is worth a thousand words'.

There are many instances when this is true. For example, a painting or photograph can convey nuance and emotion in a way that words cannot. A graphical element such as an icon can communicate with a greater immediacy than words, particularly if it is a formal or de-facto standard:

A degree of variation from the formal or standard version is also possible with little loss of meaning:

In some cases, icons are so clear that they are readily interpretable, even if they have not been previously encountered. For example, the following icon is from a Fisher & Paykel refrigerator carton:

However, the set of readily identifiable icons is relatively small, and is also audience-specific. I may recognize a 'printer' icon, but someone unfamiliar with using computers is less likely to do so.

Outside of the relatively small set of identifiable icons and symbols, the probability of graphical elements being understood is lower than many people believe. One very quick, easy and inexpensive way to gauge the value of icons is to test them with target users, to discover whether the meaning and purpose can be inferred readily.

Designers often justify the use of relatively obscure icons by coupling them with 'tooltips' or 'alt text', so that an explanation or title for the icon pops up when the user hovers the cursor over it.

Unfortunately, this is not an effective solution. Not all users are in the habit of exploring an interface to see what text may pop up, and not all users will leave the cursor on the graphical element long enough for the text to pop up.

In fact, the only real way around the problem of unidentifiable icons is to include a text label that is always visible. This of course increases the amount of real estate required, and raises issues of localisation (translation into different languages).

This is not to suggest that icons - and even relatively obscure ones - should never be used. For example, the toolbar at the top of the screen as I write (using Microsoft Word) contains some icons that I have never used and whose purpose and function is unknown to me. However, as there are several convenient ones that I use frequently, the toolbar adds value:

Consider some aspects of these icons:

• Familiarity. The 'cut', 'copy' and 'paste' icons are used, with minor variations, in a wide variety of programs and applications.



• Redundancy. None of the icons provides functionality that cannot be accessed in other ways.



• Unobtrusiveness. The toolbar is subsidiary to the use of the program. Users can choose to ignore the icons completely, without suffering detrimental effects, or can choose to learn them at their own convenience.

What can we learn?

The requirement to make interfaces attractive and interesting is legitimate and must be accommodated. However, there will always be a risk that such interfaces make applications less usable. Simple testing with a small set of representative users can reveal whether there are in fact usability problems with such interfaces, and how severe those problems are.

Any metaphor that is adopted should bear a close relationship to task at hand. For example, an appropriate metaphor for a language learning program might be a classroom, a language laboratory, or even a foreign country.

The drive to make interfaces global will continue to force designers to consider the user of icons and graphics, in preference to text menus and labels, as a primary access mechanism. Again, there is an inherent risk that this approach makes interfaces less usable.

Icons in such instances should be consistent with established usage where possible. Where completely new icons are required, there should be a clear strategy for how they are designed, with designers developing and applying a consistent graphical syntax.

Positive comments from users about the appearance of a user interface should never be taken as an indication of usability. We consistently find that users rate highly the visual appeal of interfaces which they are clearly unable to use effectively.

There is no substitute for testing.

About this Series

The 'Thinking...' series is not intended to simply complain. Real-world constraints often force designers to make choices that are not optimal from a usability perspective, and it is all too easy for an outsider to be harshly critical. The series is an attempt to analyze and learn by examining existing designs. Contact Gerry Gaffney with comments or suggestions.

Download a 'printer-friendly' PDF version of this sheet (File size: 86 KB)

Download Adobe's free Acrobat Reader (TM) for PDF files