Mode in User Interface Design - 10 December 2006

by Liang Zhang

Read this article in Chinese (English Proofreader: Nam Loc)

The logon interface of Windows XP

Perhaps you had, once or twice, experienced the following: When you logon to a software system, you are required to input a user name and password. In most situations, the system remembers your last input and the system automatically pre-fills in the username edit box, and the cursor will be directly placed in the password edit box. You tried typing in your password several times, only to be complained by the system that the password is wrong. But you are very confident that both the password and the username are correct. Just at the moment when you try to smash the keyboard with your fist out of anger, you suddenly noticed that the “Caps Lock” light on the keyboard is on… should you blame yourself? Perhaps, but why can’t the software remind you in the first place?

Microsoft has made some improvements to address the above problem in the logon interface of Windows XP, as many users may already have observed its difference with the previous versions of Windows. If you haven’t noticed it before, you can try it in the following way:

1. Firstly, press the “Caps Lock” key on the keyboard to turn on the “Caps Lock” light (this will turn the keyboard into capitalization mode).
2. Then, click in the password edit box to put the cursor within it to input a password.
3. A prominent alert box appears which says that “Caps Lock is on. Having caps lock on may cause you to enter your password incorrectly…”.
4. Continue the experiment by pressing the “Caps Lock” key again to turn off the “Caps Lock” light, you will notice that the alert box disappears.
5. Now, Click in the user name input box, then press the “Caps Lock” key to turn the keyboard into capitalization mode again, but this time there isn’t any alert box this time.

It is not so difficult to find the regularity after trying several times: when the keyboard is in upper case mode, the alert box will only appear when the input cursor is within the password edit box.

Maybe you have figured out the reason behind this design, or maybe you have experienced its benefits: it prevents you from inputting a wrong password as a result of the keyboard inadvertently set in upper case mode.

Mode in user interface design

The reason for the user’s mistake in the above logon interface example is related with a classical problem in human-computer interface design: Mode.

Jef Raskin, a famous user interface consultant and also the creator of the Macintosh, has an in depth analysis about modes in his book The Humane Interface: New Directions for Designing Interactive Systems. Put it simply, any interfaces which respond differently for the same operation are considered to have mode (or internal status). Within different modes, the same operation will cause the system to perform different functions.

Take the logon interface as an example, when the user presses key “A” on the keyboard, the actual letter inputted can be “a” or “A”, depending on the “Caps Lock” mode of the keyboard. Interfaces with mode exist extensively within many everyday objects in the real world, not just in software systems. The following are three such products that all of us are very familiar with.

The first is the TV set. The power switch on a TV set is an interface which has mode. If the current status of a TV is off, the function of the switch is to turn the TV on, and vice versa.

The second is the camera. Before automatic cameras appeared, you need to manually set the aperture, shutter speed and focus correctly to take a good photo. That means the same operation of pressing the release button will result in quite different image qualities, depending on how those parameters are set.

The last one is automobiles equipped with manual transmission. The gear setting determines how the automobile will move. The effect of the same operation of stepping on the accelerator pedal will be different when you set the gear to different positions. An extreme situation is when the gear is set in “reverse” mode and therefore causes the automobile to move backward instead of forward.

Figure 1: Manual transmission shift in a car

Now let’s look at three examples of software products.

The first one is the “Enter” key on the keyboard.

• In DOS prompt, pressing this key means executing a command or launching an application.
• In a text editor, it means starting a new line.
• In a dialog box, it normally means selecting the default button (in most situations, the default button is the OK button), thus closing the dialog box.

The second example is about the pop-up window blocking software, such as “Google bar” or “MSN bar”. If you installed these software’s, your web browser software will have modes and you may experience some strange behaviors. For example, some websites allow you to upload files. But with these software’s installed, you will find nothing happens after clicking the “Select File” button on a web page. This is because the “Select File” dialog box is blocked by the pop-up window blocking software and so it doesn’t show up. In another word, the browser is currently in a “blocking pop-up window” mode.

The last example is about the text editor software “vi”. This is a very popular and powerful text editor in the Unix world, but it is also notorious for being difficult to learn. The software has two modes: “edit” mode and “command” mode. In “edit” mode, each keystroke on the keyboard is interpreted as inputting the corresponding character. While in “command” mode, the same action is interpreted as executing a command. For example, pressing “K”, “J”, “L” and “H” in “command” mode will tell the editor to move the cursor upward, downward, leftward and rightward respectively, and pressing either “A” or “I” will switch the editor into “edit” mode with minor difference.

Harmful mode and harmless mode

Interface with mode doesn’t always cause usage problems or make the user error prone. For example, people seldom make mistakes when turn on or turn off the TV set. In the case of using manual cameras, however, amateurs often take bad quality pictures due to not being able to set the camera correctly. Or, in the case of driving manual transmission automobiles, the engine will be damaged if people don’t change the gear correctly or in time.

So, in what situation will an interface with mode cause people to make errors, or what factors will make a mode harmful? A quick and simple method is to check whether the internal status which causes the system responds differently to the same operation is presented clearly to the user. A mode is considered harmless if that status is presented, and harmful if not. In the case of the on/off switch of a TV set, the function of the on/off switch is determined by current power status of a TV set. It is obvious that this internal status is indeed presented to the user, as we know very well whether the TV is powered on or off. So, users seldom make errors when using the on/off switch to turn on or turn off a TV set.

Some careful readers may have found that, however, users still tend to make mistakes when using manual cameras although the factors affecting the final picture quality have been displayed clearly on the LCD screen, such as shutter speed, aperture, etc. To account for this situation, we need to revise the above mentioned simple method in the follow way: besides being presented clearly, the internal status which determines the outcome of an operation must also be presented in such a way that it can’t be easily ignored by the user. Thus, a mode can be considered harmless only when both of these two criterions are met.

Figure 2: Aperture and shutter speed have been displayed on the camera LCD

In the example of on/off switch of a TV set, the determining status is the on/off status of TV set. When the user starts to perform the operation of “pressing the on/off switch”, his/her purpose is just to change its status. So the user’s attention is the same as the internal status of the mode. While in the case of taking photos, the user’s attention is focused on the image that he can see through the view finder. For example, the user will be concerned about whether the object of interest is within the view finder. For most users, they will probably forget about all other factors that will affect the quality of the final image, such as shutter speed and aperture.

An interface with “harmful” mode is considered to be acceptable if it can give immediate feedback to let the user perceive the undesired or wrong result, thus the user can take appropriate measures to correct the problem. In another word, an acceptable “harmful” mode will not lead to serious errors without the user’s knowledge.

Again, let’s take camera as an example. An important difference between digital cameras and film based conventional cameras is that the former will allow the user to see the final image on the LCD screen immediately after the user takes a photo. This will enable the user to quickly notice any possible over exposure or under exposure of the image, which is due to incorrect settings of shutter speed or aperture. If that does happen, he can immediately adjust the settings and take another photo again.

Another example of an acceptable “harmful” mode software interface is related with inputting letters using keyboard. For the same operation of a key stoke, the “Caps Lock” status of the keyboard determines whether you are inputting an upper case or a lower case character. Furthermore, this “Caps Lock” status is presented to the user via a LED indicator on the keyboard. However, instead of looking at the keyboard LED, users often pay their attention to the input area on the screen (especially for people who are very good at using keyboard). So, the user may not be aware of keyboard’s “Caps Lock” mode until he finds what he has just typed are all upper case letters. However, as the system displays the inputted letters on the screen, the user can immediately notice the error and fix it right away.

Can you imagine a text input interface that doesn’t display on the screen what you have just typed? That will be truly bad, is you will not know whether you have typed the correct letter or if the letter case is correct. Unfortunately, there indeed exists such kind of text input interface, just as the password input example mentioned at the beginning of this article has demonstrated. For security reasons, for all password input fields, the letters typed by the user will be displayed as asterisk (*). But by doing so, the interface will not be able to give feedback to the user about what he has just typed.

The design beauty of Windows XP logon interface is that, by applying the usability principle of immediate feedback, it converts a “harmful” mode into a “harmless” mode without sacrificing its security requirement. The prominent alert dialog box is used to actively draw the user’s attention, so the keyboard’s “Caps Lock” status is very unlikely to be ignored. Thus, the user will know clearly whether he is inputting lower case or upper case letters.

The origin of mode and how to cope with it in product design

Jef Raskin explained why an interface with mode can cause a product to be difficult to use in terms of cognitive psychology. He believes that a mode will interrupt people’s thinking and force them to care about extraneous factors which are irrelevant to their main task. This will incur too much memory burden and lead to cognitive difficulties when people are using an interface.

In the example of automobiles equipped with manual transmissions, people are mainly concerned about speed and direction when they are driving. But in order to control speed, besides using accelerator pedal and brake, the driver still has to set the gear to a correct position first. Here, the thinking about “set correct gear” will interrupt his focus on controlling the speed.

We can also analyze mode from another perspective: when a product has more functions than the available visible control elements (such as buttons), an interface will need some sorts of mode to make all of its functions accessible to the user. In this case, there will not be a one to one relationship between product function and control element. For example, if a device with 20 functions has only 11 buttons, it is obvious that we can’t assign each button a unique function. A way to solve this problem is to use one button as a special mode button. Its function is in fact to determine the function of all the other 10 buttons. This design will enable us to use 11 buttons to perform 20 functions.

Figure 3: An old radio with only two knobs

Look at this picture of a radio in 1970s’ or earlier. It has only two knobs. One is for adjusting volume, another is for station tuning. That is all. Most people will have little difficulty of using it. Now think about your MP3 player. It can easily have dozens of functions. With only very few buttons, often less than ten, it is inevitable that the device will have modes. It can be imagined that the interface will be very difficult to use. In fact, sometimes you even have to read the user’s manual in order to use a certain function.

Figure 4: A modern MP3 player

With the above knowledge about mode, we are able to pay attention to it in product design and alleviate or even eliminate those usability problems which are caused by mode. Specifically, we can achieve this by following these three steps:

Firstly, whenever possible, we should eliminate mode altogether and ensure that each of the user’s action will carry out only one function in all situations. It is not so difficult to do this if the product has very few functions. For products with many functions, however, it may need advanced technologies in order to eliminate mode, and this will directly lead to an increase in the cost of products. In the example of taking photos, automatic cameras allow people to take good pictures without having to hassle with shutter speed, aperture, etc. However, to make this happen, the automatic cameras need sophisticated components to automatically determine what shutter speed and aperture to use by considering the light of the environment, the distance of the subject, the film speed, etc. Similarly, in the case of automobiles, automatic transmission is the solution for the mode problem in controlling speed. Of course, the automatic transmission box is a very expensive component. With all other configuration the same, an automobile with automatic transmission is more expensive than its manual transmission counterpart. Basically, whenever a product has the word “automatic” or “intelligent” in its name, chances are that the designer has used some technology to overcome the mode problem, thus improving the product’s usability.

Secondly, if it is impossible to assign each control element a unique function due to some reasons or constrains, then efforts should be made to ensure that you have a “harmless” mode. That is, the determining internal status which affects the outcome of user’s operation should be presented clearly. Furthermore, you should also make sure the way the status is being presented is within the user’s focus of attention and thus will not easily be ignored by them.

Lastly, if you still can’t design an interface with a “harmless” mode, you should at least provide immediate feedback to the user to let him see the outcome of his actions. This way, the user can be aware of any possible mistakes and thus take appropriate actions to rectify it.

Summary

With the continual development of technology, it can be foreseen that products will have more and more functions. However, if people can’t easily use these functions or even don’t know how to use them at all, the product’s value to the user will be greatly discounted. It is therefore a great challenge for the designer to make all the functions easy to use and less error prone within the constraints of limited control elements or screen area. The mode problem in user interface design explained why some products are difficult to use. By paying attention to mode, you can come up with a product that is easy to use, thus making the user experience more satisfying.

Now it is time to have a review of the objects and software’s that you have found difficult to use. Try to see if you can identify mode problems in them and see how you can improve them.

References

Jef Raskin The Humane Interface: New Directions for Designing Interactive Systems;, Addison-Wesley Pressional, 1st edition (March 29, 2000)

Mr. ZHANG Liang is a senior software engineer at Sybase R&D center in BeiJing. He got his master’s degree in Artificial Intelligence and Pattern Recognition in the National Laboratory of Pattern Recognition, Chinese Academy of Sciences.

Possible Related Articles:

• 2009 Mobile Trends - (Part One)
• Of Mice and iPods, or The Death of the Designer
• Culture in the Further Development of Universal Design
• Adopting the Universal Design Approach Instead of the Stigma That Creates Poorly Accessible Enviroments
• Universal Design – The Time is Now
• Is Universal Design Really Universal?
• The Concept of Universal Design
• Five Rules for Communication between Machines and People
• The application of model matching principle in user interface design - Part 2
• The application of model matching principle in user interface design - Part 1