Articles Comments

GUI Journal » Controls, GUI Design, Mistakes » GUI Design: Lost in Space

GUI Design: Lost in Space

Nothing gives a GUI a look of being unprofessional and unpolished like controls that are the wrong size for what they contain. Whether a control is too large for its intended contents or too small, the feeling is the same: the designer should have taken more time. A related problem is a control that allows unreasonable input. These problems can be a result of using a generic control, using the same control for multiple needs, or simply carelessness. But in any case, it really makes the presentation rough.

Figure 1. OpenOffice® 3.1 Calc® Insert Sheet Dialog

Figure 1 shows a dialog that I recently came across in OpenOffice® 3.1 Calc® running on Windows® XP. This dialog is invoked by selecting  Insert | Sheet from the menu. This dialog is unusual in several ways, but for this discussion first take a look at the control following the label No. of sheets. Notice how narrow it is. I found that no matter what value I entered into the text field, either by clicking the spin control arrow buttons, or using the keyboard digits or arrow keys, I could only see a single digit (and sometimes the right edge of the digit was cut off).

In order to verify that I really had a number larger than a single digit, I used the keyboard to [CTRL]+[A] (Select All) followed by [CTRL]+[C] (Copy) and then pasted the result into a text editor. I actually had a 9 digit number! Not only was the number not shown, but the GUI allowed me to enter a number that was completely unreasonable for the action. I went ahead and clicked the OK button at this point to see what the application would do. Apparently there is a limit of 256 sheets, because that’s what I ended up with.

Figure 2. Resized Insert Sheet Dialog in Calc 3.1

 

The other unusual aspects of this dialog include the fact that it has no title and that it can be resized. I used the resize feature in an attempt to expand the control and perhaps see all the digits that were entered. Figure 2 shows the resized dialog. Notice that both the Name and From file controls expand horizontally, but the No. of sheets did not. (I also expanded the dialog vertically, which is reflected in the height of the buttons along the bottom and in the spacing between all of the controls: I cannot see that this is useful in any way.)

Figure 3. OpenOffice® 3.2 Calc® Insert Sheet Dialog

For the sake of comparison I took a look at the same dialog in OpenOffice 3.2 running on Windows® 7 as shown in Figure 3. Gratefully, the No. of sheets control now has adequate space to show more than a single digit. And perhaps for the sake of style, it was made to be the same width as the control below it. Unfortunately, where the Name of the sheet could likely use the allotted space (and more),  a three-digit number doesn’t need nearly so much room.

This dialog has the same resize capability, so I expanded the dialog to see what would happen this time. Figure 4 shows a text field expanded so much that the spin controls are now nowhere near where the number is displayed and the text field is large enough for at least a 40-digit number!

Figure 4. Resized Insert Sheet Dialog in OpenOffice Calc 3.2

The maximum value for No. of sheets is still 256, so why would anyone think this control should be so long? It’s certainly better than the text field that was too narrow, but this control should be made to fit three digits and no more.

Microsoft® Word® 2010 has a similar problem on the Font dialog as shown in Figure 5.

Figure 5. Microsoft® Word® 2010 Font Dialog with Error

Note that the text field following the Kerning for fonts: label has a huge number that I entered from the keyboard. When I clicked OK the error dialog popped up stating the limits. The same problems exist: first, why is the area so wide when 1638 is the maximum value, and second, why was I allowed to enter an unreasonable number?

Sometimes controls are made larger than needed simply so they will line up with other controls above or below, but that’s not the case here, so there’s no excuse for the first problem. With regard to the second issue, it is common to detect keyboard input as it happens to prevent the user from entering data that is not valid. That should have been done here. The advantage this dialog has over the OpenOffice example is that at least I was told of the error, instead of just having it reduced to the maximum without my knowledge and proceeding as if nothing was wrong.

Figure 6. Font Dialog with Expanded Combo Boxes

Notice also the first three controls (combo boxes) on the Font dialog in Figure 5. The first two combo boxes are the same width, but not the third. Why? Figure 6 shows three screen shots of this dialog with each of these combo boxes expanded. There is no apparent reason for the Scale: combo box to be so wide as it holds nothing longer than three-digit numbers and a percent sign. The Spacing: combo box, too, appears to be about twice as wide as necessary. Only the Position: control seems to have a width which is appropriate for its contents. One could argue that the first two are the same width for the sake of consistency, but then what about the third control? One could also argue that the extra width takes into account translating the text into other languages, but that would only apply to the second two controls, not the first. The only possible conclusion here that this is a result of carelessness. It looks sloppy and unprofessional.

KEY DESIGN POINTS

  1. Make sure text fields have a width that is appropriate for the acceptable contents (neither too wide nor too narrow)
  2. Capture keystrokes to make sure entries are always valid, instead of popping up annoying error dialogs
  3. If your GUI allows unacceptable input, don’t simply adjust it and move on without a warning

GUI Design

GUI Design Guidelines

Graphical User Interface

User Interface

Graphical User Interface Design

Graphical User Interface Design Guidelines

Written by

Carl Andersen currently works for Micro Focus International as a Senior Development Manager. Carl has led teams at NetIQ, Novell, and WordPerfect and been the principal designer of multiple GUIs which have received analyst acclaim.

Filed under: Controls, GUI Design, Mistakes · Tags: , , , , ,

Leave a Reply

*


3 + = nine

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>