Changing Font Size with Direct Manipulation

This article describes a new idiom for changing font size with direct manipulation. An extension to the idiom is also described that provides a mini toolbar for changing other font characteristics, including font name and styles such as bold, italic and underline.

1. Introduction

This article describes a new idiom for changing font size with direct manipulation. An extension to the idiom is also described that provides a mini toolbar for changing other font characteristics, including font name and styles such as bold, italic and underline. Section 2 describes the disadvantages of the current methods of changing font size. Section 3 describes the user interface control for changing font size with direct manipulation.

2. Changing Font Characteristics

The standard idiom for changing font characteristics is to select a piece of text and invoke a dialog that contains the controls for changing the characteristics. In Microsoft Word, for example, font characteristics are changed by invoking the Format->Font dialog. Invoking a font dialog has several disadvantages. The first disadvantage is that users must open the dialog and then position it so that it does not cover the selected text. Opening and positioning dialogs are examples of interface excise—tasks that must be performed to manipulate an interface to enable the user to perform his or her real task (Cooper 2007).

The second disadvantage of a font dialog is that the changes made to the controls are not reflected in the document until the dialog is dismissed by pressing the OK button. If the changes made to the font dialog controls do not produce the desired result, users must reopen the font dialog and select new values. Opening the font dialog, making changes, closing the dialog and checking the results often degenerates into trial and error.

Some applications implement live updates to a text sample in the dialog to solve the problem of trial and error. However, text samples aren’t the same size as the text in the document, which makes it difficult to change size accurately. Toolbars provide a partial solution by placing commonly used controls in the main window; users are then able to see the changes in the document (although the font dialog must be opened to access less frequently used controls). However, toolbars do not remove trial and error altogether because changing font size by entering a number or selecting a number from a list is the only strategy supported by current software. When the user does not know the font size but knows the size he wants when he sees it, he must start with the default size or his best guess, and iteratively increase or decrease the size until the desired result is produced. Users would often be better served by a different strategy—to select the font size by modifying the text itself. One way to do this is by direct manipulation.

3. Direct Manipulation

A new idiom for changing font size is to directly manipulate the text with the font resize quasimode. After selecting the text to be resized (a), the font resize quasimode is activated by pressing and holding the shift key which displays the resize control to the left of the selection (b).

(a) Selecting text to be resized
(b) The font resize quasimode displays the resize control

The font size of the selection is shown to the left of the resize control. The font size can be changed in three ways. First, the user can drag the top arrow of the resize control up and down to increase or decrease the font size:

Dragging the top arrow of the resize control up and down increases and decreases the font size

As the font size changes, the size of the selection changes to provide immediate and rapid feedback, as shown below. The resize control is placed to the left of the selection to ensure that it does not move when the size of the selection changes. If the resize control was placed to the right of the selection, it would move right and left as the size of the selection increased and decreased.

The size of the selection changes as the font size changes to provide rapid feedback

The second method of changing font size is to move the mouse scroll wheel forwards and backwards. Moving the scroll wheel forward has the same effect as dragging the resize control arrow upwards, and vice versa. Users can also change the font size by editing the numerical value to the left of the font resize control:

Moving the scroll wheel forward has the same effect as dragging the resize control arrow upwards, and vice versa

Releasing the shift key hides the font resize control and leaves the text selected to enable users to apply further commands.

The font-size quasimode works in addition to the dialog and toolbar methods of changing font size rather than replacing them. The direct manipulation idiom can be extended to provide a mini toolbar that enables users to change the font name, style, and other characteristics. The following illustration shows a mini toolbar that provides font name and style controls. The font name is selected with a drop down menu and the bold, italic and underline styles are selected with toggle buttons. The mini toolbar is displayed and hidden at the same time as the font resize control.

The direct manipulation idiom can be extended with a mini toolbar that provides font name and style controls

References

  • Cooper, A., About Face 3: The Essentials of Interaction Design, 2007.