Spin controls have great potential for improving usability and making a GUI more efficient for the user. In the 1980s Macintosh® implemented many GUI elements that most personal computer users had never seen before, including the spin control.

In Figure 1 the spin control is displayed to the right of the RAM Cache text box. Clicking the up or down arrows automatically increments or decrements the value in the text box as appropriate. It was a great control, but to a new user, it wasn’t necessarily apparent that the spin control was associated with the text box to the left.

Figure 2 shows a screen shot of the Windows® 3.0 Desktop dialog.

Notice the three spin controls in the lower right of this dialog. Rather than placing the spin control just nearby, as Macintosh did, this implementation has the spin controls immediately adjacent to their associated text boxes. This gives the understanding of it being a single control, improving the usability. The current Microsoft Developer Network (MSDN®) Library description for spin controls explicitly states the importance of combining the spin control with its associated text box, creating a spin box.

Figure 3 shows the Page Setup dialog from Word® 2010 on Windows 7.

Note the five spin boxes at the top of the dialog. It’s great to see Microsoft continuing to follow the spin box standard from two decades ago. It was well implemented back then and there is no need to change something that works so effectively. (Change happens far too often, just for the sake of change.) Of course, clicking the arrows works as expected. What’s more, using the keyboard up or down arrow while the caret is in the text box simulates a mouse click, showing the spin arrow highlighted with the keyboard action as the text box value changes appropriately. It’s a great implementation.

Unfortunately, even though Macintosh had spin controls before Windows did, their implementation is not nearly as good even after all this time. Generally, I’m pretty positive in my views of the Mac®, but spin controls are an area where it really falls short.

MISSING IMPLEMENTATION

Figure 4 shows a screen shot of the expanded iTunes® Print dialog on Mac OSX®.

This is a dialog where multiple spin controls should have been used, but none were. There are text boxes for Copies, From, to, and Scale which all would have benefited greatly from the use of spin controls. In addition, using the up and down arrow keys with the focus in any of these text boxes only moves the caret around, but does not adjust the value. Not awesome. (Note that the Pages per Sheet control is appropriately a drop-down list of discrete values, because they are not sequential: 1, 2, 4, 8, 16.)

INCOMPLETE IMPLEMENTATION

Figure 5 shows a screen shot of the General tab of the Mac OSX® System Preferences dialog.

Notice the spin control in the middle of the dialog next to the Log out after text box. The spin control is still separate from the text box, though in this particular layout it’s much more obvious that they go together. However, the keyboard arrow keys are not tied to either the text box or the spin control. Placing the caret in the text box and using the up or down arrows on the keyboard only serves to move the caret to the end or the beginning of the value. That is not very useful. (That’s what the left and right arrow keys are for.)

One would think that Apple would want to be setting the standard for good GUI on its own platform. Fortunately, other developers for Mac are doing a better job. Figure 6 shows a screen shot of the Columns dialog from OpenOffice® 3.0 for the Mac.

The spin controls on this dialog follow the Mac display standard of being separate from the text boxes, but the implementation is much better in that the keyboard arrow keys actually function as expected, incrementing or decrementing the value appropriately. They even increment by decimal amounts that make sense for a particular control. Nicely done. (It would be even better if the keyboard arrows would simulate clicking the spin control arrows, as does the Windows example in Figure 3.)

WRONG IMPLEMENTATION

Figure 7 shows the X11® for Mac Print dialog, Advanced tab.

This dialog has text boxes with drop-down lists rather than with spin controls. The text box is provided so that other values besides those in the list can be entered from the keyboard. The discrete list of values (each 0.100 apart) is so long that the list scrolls in order to show all the values. It is unwieldy and the list stretches far beyond the limits of the dialog. There is no benefit to the list. It would have been much better to simply implement a spin control with keyboard arrow keys that adjust the current value by increments of 0.100.

IMPLEMENTATIONS THAT ARE GREAT

Figure 8 shows the WordPerfect® 9 Print dialog.

The Print pages option on this dialog has two spin boxes for selecting the page range. Both are keyboard activated. Even better, though, is the fact that they work in conjunction with each other. Changing the first value to 3 and leaving the second text box blank will print all pages from 3 to the end. If the to value is then incremented either by the keyboard or by clicking the spin control, the to value immediately jumps to the first valid value (3, in this case) and then continues to increment from there. Also, the screen shot shows the spin control up arrow is depressed, though it was activated by the keyboard. This is an excellent implementation of spin controls. (In the interest of full disclosure, I must state that I created this particular dialog. )

Figure 9 shows the OpenOffice 3.1 for Windows Options dialog.

Note the highlighted spin control on the middle right side for hours and minutes combined. This control is not only keyboard activated, but it increments and decrements correctly for the hour:minute display, and it even will increment only hours or minutes if the caret is placed in one of those areas instead of selecting the entire text box value. (I’ve seen similar hour/minute implementations that also have an AM/PM area in the text box that can adjust independently.)

Figure 10 shows how the spin box value changes when the keyboard arrow keys are used. The top display is the default, with the text box value selected. Pressing the up arrow once keeps the entire text selected and increments the time value by 1 second from 00:10 to 00:11. Next, placing the caret to the far left (in the hour display) and pressing the up arrow twice causes the hour to increment: first to 01:11 and then to 02:11. The last display in the Figure is after the down arrow is pressed three times, resulting in the final value of 00:01. The same functionality is seen when the caret is placed in the minute section of the text box and the arrow keys are used to increment or decrement the minutes independently. Fabulous!

KEY DESIGN POINTS

1. Don’t provide a text box by itself when a spin control would be helpful, and then always implement keyboard arrow keys.
2. Don’t use a drop-down list with discrete selections when a spin control with logical increment/decrement values can provide the same functionality.
3. If you have spin boxes that are related to other controls, or have multiple values within the same text box, make sure they automatically adjust as appropriate.

ACKNOWLEDGEMENTS

Thanks to Marcin Wichary and guidebookgallery.org