Visual Interface Guidelines

VISUAL Interface Guidelines

BY FRANK COHEN

Frank Cohen has been developing software for Atari computers since 1982 when he wrote his first game, Clowns and Balloons. He later co-founded Regent Software in 1985, where he wrote Regent Base He may be contacted for more information on DELPHI (REGENT-WARE), CompuServe (75004,1573) or GEnie (ECOHEN).

When the new Atari Corp. made the decision to use Digital Research's GEM operating system in 1985, future Atari 520, 1040 and Mega ST users were given the utility of a mouse-driven operating system and the power of the Atari ST engine. Atari's choice was logical and practical; GEM had become an established option for IBM PC users who desired an easy-to-learn system that supported the "visual interface" to computing.

Digital Research patterned the GEM system after Xerox PARC mouse-based operating environment and the GKS graphics system. The Xerox PARC system was also the basis for the Macintosh operating system. These new "visual" interface systems were designed to appeal to an audience of nonprogrammers, including the huge group of people who have been apprehensive about using computers. To overcome the fears of these potential users, the visual interface was designed to be easy to learn and to use.

Several new ideas were brought into the computer realm when the visual-interface system was developed. To achieve the goals of the visual interface, the procedures to operate a computer should be based on the everyday skills that most people have learned through their normal, day-to-day social interaction. The application should feel comfortable. The user should be in control of the computer, not the other way around.

Unfortunately, when GEM was written for the Atari ST, a description of the visual interface was not included in the documentation. This lack of documentation led most developers to base their applications on their own ideas of ease-of-use and user-friendliness. This free-form environment has taken its toll on the Atari ST user community, since programs using the GEM interface are not consistent in how the user is expected to manipulate the system. This article seeks to correct this problem by outlining the visual interface as implemented using GEM on the Atari ST.

A visual interface to a computer consists of a number of basic procedures through which a novice computer user may access the inherent power of a modern-day computer system. An overall design style must be used when assigning the functions of all of the procedures. Applications may then be categorized by the type of data manipulation processed. Various object and data types are selected through procedures involving the keyboard and mouse and are dependent on the application type. The system uses windows and menus to provide the user with an intuitive method of organizing and controlling data. Text editing, the most basic form of data entry, is processed in the same manner regardless of context or definition of the application. Finally, dialogs and alerts conduct basic system-data gathering and information display through the use of specific system modes.

Style

Three words embody the visual-interface style: responsiveness, permissiveness and consistency.

Responsiveness: Responsiveness means that the user of an application should be able to perform an action and see the results in a direct fashion. This allows the user to accomplish a task without much forethought into the processes that need to be accomplished. For example, suppose the user sees a circular object in the center of the screen and would like to move the object to the left side of the screen. The actions necessary to perform this command should be intuitive and spontaneous, instead of forcing the user to think, First I have to press this key, then select that function and, finally view the results. Most people don't think in this fashion.

A typical example of responsiveness is the use of the GEM drop-down menus. When the user chooses a command from a drop-down menu, the command is processed instantly. The results of the command are shown on the screen, leaving no doubt as to what has taken place.

Permissiveness: Permissiveness allows the user to do anything reasonable. Menu-driven applications represent the opposite of permissive applications because they present a preset number of selections, which leads the user down a very definite path toward the performance of a function. A permissive application presents the user with a basic work environment and allows the user to decide what to do next inside the work environment.

Permissive programs avoid modes. A mode is a part of an application that the user has to formally enter and leave, and that formalizes the way in which functions can be performed. The visual interface avoids modes because most people don't usually operate modally in the real world. Dealing with modes enforces the idea that computers are unnatural and unfriendly.

Modes are most confusing to users when functions become unavailable in certain modes. Modes make some functions contingent upon past actions and commands. Confusion sets in further when users rely on habits and patterns they develop while using other applications and computers.

Modes also include error alerts to show the user when an error has occurred or an unavailable function was requested. An error alert may result from a disk input/output error. If the user is barraged by a constant stream of error messages, something is wrong in the design of the application. Also, error alerts should be friendly and helpful, instead of abusive or demeaning.

The concept of modes may be useful in certain applications. Most of these cases fall into one of the examples given below.

Long-term modes with a procedural bias—for example, the Word Insert mode of a word processor. Applications in general may be considered modes themselves.
Short-term modes with a bias toward unusual repetitive functions. For example, holding down the mouse button to scroll a document downward.
Alert modes to indicate to the user that something unusual or unexpected has happened.

If an application is designed to use modes, the user should have a clear visual indication of the current mode. The mode indicator should be positioned to indicate which object or function is being most affected. For example, in a graphics editor, the size and colors of a brush should be displayed near the selection of a brush.

Consistency: When a user purchases an Atari ST, an investment of time and money is made. The user spends a lot of time learning the ins and outs of every new application that becomes available for the Atari ST computer. A large portion of this wasted time could be avoided if all of the applications followed the same basic interface.

The GEM system provides all the necessary procedures required to implement a common interface across all the applications available for the ST. However, implementing the user interface in a standard way means writing additional code that isn't supplied with the ST or GEM.

Developers shouldn't have to feel restricted to using existing features; the GEM system on the ST is a growing system that places importance on new ideas. The plain-Jane functions, such as opening a document in a word processor, should certainly operate the same way so that the user can move easily back and forth between applications. The rule of thumb is, if an outline for a function is described in this article, then follow it exactly. If you don't agree with the outline, use something completely different rather than agreeing with only parts of it.

Consistency also extends into the treatment of the Atari ST's various screen resolutions. A consistent application should be able to run in any screen resolution and be able to treat a document the same, regardless of what screen resolution is being used.

The Desktop

The GEM system is based on the idea that the user will use an application in a central workspace within the computer. This workspace is called the desktop and is the first thing the user is presented with after the system is turned on. A portion of the screen contains a set of functions called drop-down menus (described later). The desktop is the portion of the screen below the drop-down menus.

Types of applications

The Atari ST screen is displayed using graphics; there is no text mode as exists on other computers. Nevertheless, a leading use of the ST is word processing, a text-based application. The purpose of a consistent operating environment is to provide a system through which the user may access textual, array and graphic applications.

We can categorize a GEM application into one of three types:

Textual applications can be arranged in a variety of ways on the screen and operate on a string of characters that may be represented in a number of ways. For example, a word processor will display a screen full of words, while dialog boxes may display only one line of text. The manner in which the text is shown might vary; however, the application manipulates the words, sentences and paragraphs as a one-dimensional array of characters.
Graphic applications create or modify drawings, pictures or concepts as collections of pictures. Graphics are pictures and icons that represent functions or ideas.
Array applications are multidimensional arrangements of fields. If an array has only one field, it is called a form. If an array has several fields, it is called a table. Form applications operate on one list of data. For example, a form would be used to fill out a membership card for a club. To the user, the data collected is not an array, however the application treats the fields in a form as a continuous array of data. Tables may be operated on as spreadsheets, with fields running left and right as columns and records displayed from top to bottom.

Icons

The ST is a graphics machine. High resolution and color capabilities should be used to best take advantage of the ST's versatile screen, with commands, features, parameters and functions displayed as graphic objects (icons).

An icon is a fundamental object in the GEM system. Icons appear as a small graphic object that is usually symbolic of a function available to the user. In general, icons should be used instead of textual descriptions as they not only aid in a visual understanding of the function, but also don't need to be translated into foreign languages.

Icons may be treated as objects. Each object should be used to perform a function analogous to an everyday function the user might perform in the real world. For example, the GEM desktop uses a "trash can" icon for "throwing away" (deleting) files. Also, the icons should employ graphics techniques to make their use more obvious. If a user clicks on an object, the object should be highlighted to distinguish it from all the other objects on the screen. If an object is to act like a push button, it should "light up" when pressed.

Icons may be grouped into palettes. A palette may be used to give the user a quick method to switch between various operations. For example, in a drawing program a palette would be used to indicate which brush style, color or pattern will be used. Palettes are also used to show currently selected options. A selected option is normally shown as a highlighted icon.

A palette may be included as part of a window (as is the case with GEM Draw from DRI) or as a separate window (as is the case with Easy Draw from Migraph). Each palette has its pitfalls. If a window is reduced to be smaller than the palette, several palette functions may be inacessible. On the other hand, if the palette is not part of the window, then it takes up extra space on the desktop that might otherwise be used as spare work space.

The Atari ST keyboard

The standard ST keyboard has several sections, each of which provides the user with various options for data entry and control of the system. The alphanumeric keyboard holds the letters and numbers and includes the symbols on the calculator keypad on the right side of the keyboard. If the user presses any alpha-numeric key, the corresponding character will appear on the screen. The other keys, such as Return, Tab, Alternate, Escape, Insert, Delete, Control/Home, Backspace, arrows, Help and Undo, are also considered character keys. However, the result of pressing one of these keys depends on the application and the context.

The return key is used to indicate that the user has completed entering information in a particular area of the document, such as a cell in a spreadsheet. The return key is also used as a signal to proceed with an operation. In this case, a dialog box is usually being used to retrieve information from the user. Once data has been entered, the return key indicates that the application should process the entered data.

The tab key is used to proceed to the next item in a sequence. In a word processor the tab key is used to move the cursor to the next tab position. In a dialog box, the tab key is used to select the next edit field for data entry.

Pressing a character key while holding down Alternate instructs an application to perform a command, rather than processing the character. This function is most commonly used to process the keyboard equivalent of a drop-down menu function.

Pressing the escape key instructs the application that new data will be entered over any existing information. Escape is normally used to clear the contents of an edit field in an array application such as a spreadsheet.

The insert and delete keys are used to add or delete characters from an array of information. Insert will add a character into the array at the insertion point, usually pointed to with a cursor. Delete will remove the character at the current insertion point.

The control/home key is used to move the insertion point of an array to the beginning of the array. Depending on the application, this key may be used to delete the contents of the array.

The backspace key is used to delete text or graphics. Backspace is further defined in the section on text editing below.

The four arrow keys are used to move the insertion point of an array of data. The up- and down-arrow keys control row movement, while the left- and right-arrow keys control character of field positioning.

The help key is used to supply the user with enough context-dependent information to perform the currently selected function. The help key may also be used to run other applications sensitive to the user's needs.

The undo key is used to restore the contents of an application's data or operation to the state before the operation of the previous function.

Since the release of the ST, many desk-accessory programs have been made available to the public that use the Alternate/Help combination of keystrokes to perform a temporary function on the contents of the screen. When the ST is started, pressing Alternate/Help will send a bit-image copy of the current screen to your system printer.

Typeahead

If the user is a quick typist, many keys may be pressed before the application has time to update the screen. The keys pressed are queued and later processed. This queuing is called typeahead.

Since the ST has so much memory, the limit to the number of keystrokes that may be queued is almost limitless. This presents a problem. Suppose the user is working with a word processor. If the user presses the down-arrow key repeatedly, the insertion point will move below the visible portion of the screen, causing the word processor to scroll downward through the current document. Since the user can type faster than the application can update the screen, it is possible that the user will be forced to wait for the application to finish processing after entering repeated down arrows. This would clearly be in violation of the responsiveness rule as described above.

The solution to this problem is to add extra logic into the application to check for another key press before updating the screen. If the key press is an up- or down-scroll command, the application should not update the screen until all other normal character keys have been processed. In this manner, the user would lose the consistency of an application, yet retain the more important responsiveness qualities.

The Atari ST mouse

The mouse provides the user of an application running under GEM with a huge amount of variety and versatility. A pointer on the screen follows the motion of the mouse on a flat surface next to the Atari ST system. Moving the mouse generally performs no function, other than relocating the pointer. Most mouse functions occur when the user moves the pointer over an icon or object and presses and releases the left mouse button.

The mouse has three basic actions:

Clicking: The user positions the pointer and briefly presses and releases the left mouse button without moving the mouse.

Pressing: The user positions the pointer and holds down the left mouse button without moving the mouse.

Dragging: The user positions the pointer over an object, and moves the pointer to another location, while holding down the left mouse button.

It is the application's responsibility to enable or disable mouse actions. GEM does not provide "mouse-ahead" functions. Unlike other visual-interface operating systems, GEM only stores a record of the last mouse manipulation when the current application was not ready to process it.

Clicking something with the mouse performs an immediate action, such as selecting an icon from a palette or activating an object.

Pressing on an object performs repeated functions. For example, in a word processor, if the user presses the down arrow in a scroll bar, the document will repeatedly scroll downward by one line until the mouse button is released.

Dragging performs various functions depending on the application and type and the object being moved. Dragging is used in graphic and array applications to select objects or groups of objects. In a textual application, dragging is used to select groups of letters for later editing functions and to position the insertion point (cursor).

An object being moved may be restricted to a certain area of the desktop. For example, the user may drag an icon from one window to another, but not onto the desktop itself. If the user releases the mouse button over an illegal area, the object's position remains unchanged.

In general, moving the mouse pointer to a different location does not signify an action. The exception to this rule is the use of the drop-down menus. Moving the mouse into the menu bar will cause a drop-down menu to appear below the menu title. Moving the pointer into the drop-down menu will cause one of the selections to become highlighted. However, the selection must be clicked for an action to be registered. To escape from a drop-down menu, the user clicks over the desktop.

Double clicks

A variation of the click function, as described above, involves performing a second press and release of the left mouse button. The speed at which this second click must be performed is set by the user from the Control Panel desk accessory. Double-clicking is most commonly used to perform immediate commands that might otherwise require a series of steps. For example, double-clicking a file icon on the desktop might be a faster method to open a file than clicking the icon once and selecting a drop-down menu selection.

Pointer shapes

The pointer is usually shown to be an arrow, although GEM has the capability of displaying any graphic as the pointer. Several pointer shapes are built into the Atari operating system. The pointer shape gives a visual indication to the user of the current activity.

The pointer shape also depends on the item under the pointer. To give the user an indication on the mouse actions possible, the pointer will assume different appearances depending on the possible actions beneath the pointer. For example, if the pointer is moved over a text field, the pointer should change to an I-Beam indicator, which may be used to select an insertion point or a range of text.

If an application uses modes for different functions, the pointer will assume different appearances in the various modes of operations. For example, in Degas Elite, the pointer assumes the shape of the current brush selection while editing and an arrow shape while selecting modes.

The six most common pointer shapes are given below.

Arrow: Used for scroll bar and other controls, window movement, sizing, dropdown menus, icon selection, etc.

Cross: Used for drawing, shrinking or stretching objects.

Thick cross: Used for selecting fields in an array.

Busy bee: Shows an extended operation is in progress.

Flat hand: Used for moving objects.

Pointing hand: Used for selecting objects.

Selecting

A basic function of the GEM system is the ability to select an object. When the user selects an object, it becomes highlighted as compared to other objects on the screen, and any operations performed while an object is selected modify only the selected object.

Groups of objects may also be selected. When more than one object is selected, any operations work on all of the selected objects.

There are three basic ways of selecting an object or group of objects using GEM: Selecting by clicking, range selection and extending a selection. Selecting by clicking is the most straightforward method. The user clicks an object and it becomes selected. Most applications will also extend the effect of selecting by using double-clicking. For example, in a word processor clicking once will select a new insertion (cursor) point. Double-clicking will select a word.

Double-clicking is most commonly used to perform immediate commands that might otherwise require a series off steps.

Range selection is performed by dragging a box around the objects to be selected. The user positions the mouse pointer over a corner of the Objects to be selected and presses the left mouse button. This point is called the anchor point. The mouse pointer is moved to the opposite corner of the group of objects while holding down the left mouse button. When the mouse button is released, the objects wholly within the dragged region are selected. The location of the pointer when the mouse button is released is called the endpoint of the range.

Extending a selection is performed by holding down the shift key and clicking the left mouse button. In a textual or array application, the result of a Shift/Click operation is always a range. The position of the mouse pointer where the mouse button is clicked becomes the new endpoint or anchor point of the range; the selection can be extended in any direction. If the user extends a selection within the previous selected range, the new range will be smaller than the old range.

In graphics applications, a select is extended by adding objects to it. Unlike the textual or array extend function, the objects to be added do not have to be adjacent to the previous selection range.

Selecting text

Regardless of location, text edit fields are selected and edited in a consistent way. The keyboard and mouse are used to select, modify, add and delete text.

A block of text is a string of characters. When text is selected, a subset of the overall string of characters is chosen. The selection range can have a length from no characters to the whole block.

If a range of text has not been selected, a cursor will appear at the insertion point. The user determines the cursor position by clicking between two characters. The cursor appears at the insertion point. If the user clicks to the right of the last character on a line of text, the cursor will appear at the last character on that line.

The cursor indicates to the user where the next key pressed or contents of a Paste function will appear. After each key is pressed, the insertion point and cursor move one position to the right.

If the user drags a range of text, the selected characters appear highlighted as compared with the rest of the document. The user may also double-click the mouse while pointing to a word to select the entire word. Words are defined as groups of text separated by a space before and after the characters of the word.

Selecting graphics

Several methods have been established to show the user when an object or group of objects has been selected. Usually a group of knobs are drawn around the selected object or objects. The knobs indicate the perimeter of the object and its midway points both horizontally and vertically.

Selections in arrays

Arrays can be one- or two-dimensional arrangements of fields. As noted previously, a one-dimensional array is called a form. To select a field in a form, the user moves into it with the tab key or by clicking on the field with the mouse.

The tab key cycles through the fields in the order defined by the application, selecting the "next" field in the list. The sequence usually begins at the top of a form and moves left to right and top to bottom.

Two-dimensional arrays of fields are called tables. Columns are displayed from left to right; records are displayed from top to bottom. A column of data in the array may be selected by clicking the column header. If multiple columns are to be selected, the user drags through more than one column before releasing the mouse button. The same functions apply to row actions.

Windows

Windows are rectangles on the desktop that display information. Several types of windows are possible: document windows, desk accessories, dialog boxes and alert boxes. The typical window is divided into two parts: the work area and the border area. The work area holds the data to be displayed inside the window.

The border area is comprised of several objects that allow the user to control the contents of the work area. The title bar displays the name of the document or graphic file that is being operated upon by the application. A close box allows the user to signal that he is finished with the current document. The full box allows the user to signal that he wishes to expand the window to the full size of the desktop or shrink the window to its original size. A size box allows the user to change the boundaries of the window. Vertical and horizontal slide bars allow the user to signal that he wishes to move the current view of the data being worked upon.

Multiple windows

Some applications may be able to show more than one window on the desktop, and the user may position them according to personal preference. Each window can overlap those behind it and can be overlapped by those windows in front of it. Different windows can represent data in the following way:

Separate documents being viewed or edited simultaneously.
Different presentations of the same document, such as graphic views of' spreadsheet data.
Related parts of a logical whole, like the listing, error report and symbol table of an assembly-language program listing.
Different parts of the same document.

Each application deals with the display, context and creation of multiple windows in its own way. The advantage of multiple windows is that the user has the ability to isolate unrelated groups of data from each other. On the downside, the desktop can become cluttered, making it more of a nuisance than an aid.

Opening and closing windows

Windows are opened in ways appropriate to the application type, and the application determines the initial size and position of its windows. The application also determines the stacking level of a window that is opened.

Most windows include a Close Box that the user uses to signal that he is finished working with the data contained in the window. When clicked, the application should remove the window from the desktop and, if applicable, remove the window to a smaller object, such as an icon. When a window is closed which contains data that has been modified since the data was first loaded, such as a word-processor document file, the user is given the choice of closing the window and losing the modifications, or of saving any changes made before closing the window.

The active window

If more than one window exists on the desktop, the user will only be able to work with one window at a time. This window is called the active window. All other windows are inactive. When a window becomes active, two actions are performed:

The active window's title bar is highlighted, the border contents are displayed, and any controls inside the window become active. If the window contains an edit field, any text selection range that was in effect when it was deactivated is highlighted.
The window is displayed as the topmost plane, so that it is shown in front of any other overlapping windows.

The user activates a window by clicking on it. Once active, all controls, border objects and functions associated with that window are available for use.

Moving and sizing windows

The application determines the size and location of a new window. The user can move the window to a new location by dragging the active window's title bar. While the user drags the title bar, a dotted outline of the window is shown corresponding to the mouse pointer location. When the mouse button is released, the application draws the window at the new location. Moving the window does not change the contents of the data within the window, just the window's overall location.

The application determines the availability of a size box in the bottom right corner of a window. If a size box is shown, the user may drag the size box to change the size and shape of the active window. Dragging the size box draws a set of dotted lines indicating the new size of the window. The window's location on the desktop is anchored to the original location. Only the size and shape are changed.

When the mouse button is released, the window is redrawn in the shape of the dotted outline. The contents of the window are not changed, just the portion of the contents view is adjusted.

The application may set boundaries in which the window must reside. Moving and sizing limits are determined by the application. The application should ensure that the contents of a window can never be drawn completely off the screen.

There is one exception to the sizing function, that of scaling graphic data. Programs such as Easy Draw and GEM Draw allow the user to change the scaling of the view to fix the size of the window. If the user changes the size of a window, the application may change the scaling of the view.

Scroll bars

Scroll bars change the portion of the document or array being viewed in the active window. A scroll bar is a dotted horizontal or vertical shaft with square boxes labeled with arrows at each end. Inside the shaft is a dark rectangle called the thumb. The shaft is a one-dimensional proportional representation of the document or array being viewed. As the user moves the view of the document, the thumb indicates which portion of the document or array is being viewed. If the document or array is smaller than one shown in the window, the scroll bar becomes inactive and should not be shown.

Scroll bars permit the user to move the view of a document in three manners, as given below.

Sequential scrolling moves the view in the opposite direction from the scroll arrow that was clicked. For example, in a word processor clicking the down arrow causes the document to be moved upward and the view closer to the bottom of the document. Pressing the up or down arrow causes repeated scrolling of the view until the mouse button is released. The distance moved is determined by the application (e.g., word processors may scroll one line of text, spreadsheets may scroll one row of data, etc.)
Paging advances the view by one view-size of data. The user clicks anywhere in the dotted portion of the shaft to page the view. For example, clicking below the thumb causes the application to move the view of the document one view-size of data downward. Pressing the dotted portion of the shaft repeatedly scrolls the view until the mouse button is released.
Direct positioning allows the user to drag the thumb to a new position within the shaft. The relative position of the new location of the thumb within the shaft is used by the application to determine the new position of the view. Movement of the thumb is limited to the size of the shaft. If the user tries to drag the thumb outside of the shaft, the position within the shaft changes according to the axis of the shaft (e.g., vertical shafts only change the vertical alignment of the thumb, while horizontal shafts only change the horizontal alignment).

Commands

When data or a group of data has been selected, the user may select a command to modify the selected data from lists of commands called drop-down menus. Menus are selected by moving the mouse into the area of the screen above the desktop, signaling the application that a command is to be issued by the user. The user can then select a command from a list of commands that appear.

Most drop-down menu commands either perform a function or change an attribute that will be used in a function later on. Functions are displayed as verbs, while attributes are shown as adjectives. Drop-down-menu commands may either apply only to the currently selected objects or to the whole document or window.

Drop-down menus are an intuitive method of making command procedures and options readily apparent to the user; however, they might not always be the most ideal way to initiate a command. For example, copying files from the GEM Desktop program is more efficiently processed by dragging a file icon from one window to another instead of using the drop-down menus to perform the same function.

Menu bar

The portion of the screen above the desktop is called the menu bar. It contains a number of words and phrases indicating the titles of the menus associated with the current application. Each application is responsible for maintaining its own group of menus and titles.

The menu titles do not change when an application is running; however, desk accessories may temporarily change the menu titles when they are activated. As a side note to this rule, VIP Professional changes the menu titles in context with the command being processed. This makes the menu bar confusing to the user, as the locations of each command vary depending on the mode of the spreadsheet. (Also see why modes should not be used as discussed previously.)

Choosing a menu command

The user chooses a menu command by moving the mouse pointer into one of the menu titles. A list of commands will appear below the mouse pointer. As the pointer is moved over a command entry, the entry becomes highlighted. The user clicks on the desired command entry to select it. If the user wishes to not choose a command once a menu title becomes selected, the user may click anywhere on the desktop outside of the currently open command list.

Command groups

Menu commands are split between verbs and adjectives. To the user these two categories are seen as actions and attributes. Menu titles are normally grouped by actions or attributes. For example, the Edit menu-command list would include functions such as Cut, Copy, Paste and Clear.

An attribute menu title might adjust the font or style to be used in a word processor. For example, the Style menu-command list would include attributes such as Bold, Underline, Italic, etc.

Menu-command lists may be broken down into smaller groups, depending on the association of a group of commands. Each group of commands is usually separated by a gray dotted line. In associative groups, commands are grouped together in which one or more of the commands may be selected to affect attributes to be used by a function. For example, in the above Style menu, one or more of the attributes may be selected.

Exclusive menu-command list groups put commands together in which only one of the commands may be selected. For example, the Style menu-command list might also include a group of font sizes. Only one size command may be selected at a time.

Finally, a command-list entry may toggle between two or more titles showing the user the presence or absence of an attribute by the toggled entry. For example, in The Informer, an entry in the Display menu reads "Show Headers." When selected, this menu entry changes to "Hide Headers," and the data within the active window is redrawn. When using a toggle command entry, the wording of the command must make it obvious to the user that the commands are opposites.

Special menu features

Many other special features may be used in menu-command lists in addition to command groups and names. Given below are several options which may be used.

A check mark or color variation may be used to indicate an active attribute from a group of nonactive attributes.
A disabled command entry is shown as a gray or dimmed object. If the user moves the mouse pointer over a disabled entry, it is not highlighted so it is unavailable to the user.
A command entry may be shown in bold, underlined, italic, outlined and shadowed type style to indicate textual attributes.

Key	COMMAND	Usage
^C	COPY	Edit menu, copies text into scrap buffer.
^V	PASTE	Edit menu, moves scrap buffer into document.
^Q	QUIT	File menu, quits and exits application.
^X	CUT	Edit menu, cuts text into scrap and delete.
^Z	UNDO	Edit menu, retrieves last modification.
UNDO	UNDO	Edit menu, retrieves last modification.

A command entry can include an icon as a nonverbal explanation of the command.
A special form of menu may be drawn by the application. For example, GEM Draw (DRI) draws its own menu showing the possible fill patterns for drawing operations.
A command entry may also include an indicator to show a command's keyboard equivalent. If the keyboard equivalent keycode requires the control or alternate key to be held down while the key is pressed, the command entry should show a caret (X) symbol or ALT symbol respectively. The Atari logo (Fuji) character may also indicate an ALT symbol.

Several key characters are reserved for special purposes. Since almost every application has a File and an Edit menu, the keyboard equivalents in these menus are strictly reserved. The reserved keys are given in Table 1.

The keyboard equivalents for the Style menu are optionally reserved. If an application does not have need for a Style menu, these keys may be used for other functions. However, if a Style menu is used within an application, the reserved keys are given below.

Key	Command
_______	____________
^B	Bold
^I	Italic
^O	Outline
^P	Plain
^S	Shadow
^U	Underline

The escape key is used for two functions that do not have drop-down menu equivalents. Escape is used to clear the contents of an edit field in forms and to abort the current operation in applications processing.

Standard menus

Presenting the average user with a consistent selection of drop-down menus makes the wide selection of applications familiar when first run. This prevents the necessity of forcing a user to learn a new group of commands each time a new application is used. The Fuji Symbol, File and Edit menus appear in almost every application. The Font, Fontsize and Style menus are used when applicable.

The Fuji symbol

The Atari ST is not a multitasking machine. It can run only one application at a time. However, smaller applications called desk accessories may be run while a larger application is being used. When the user wishes to use a desk accessory, the Fuji Symbol menu lists the available desk-accessory applications.

The Fuji Symbol menu also contains the "About..." menu entry. When the user chooses this menu entry, the application optionally opens a dialog box indicating the name and copyright information for the application, as well as any other information the developer wants to display. The "About..." menu entry may also be used to initiate a user-help dialog box, as is the case with Microsoft Write.

The File menu

The user may perform simple filing operations without leaving the application and returning to the GEM Desktop by using the File menu.

It also contains the command for printing documents or graphics and exiting the application. The standard File menu contents and description are given below.

New: Opens a new, untitled document or array. The user names the document for the first time when it is saved. This command is disabled when the maximum number of documents allowed by the application is already open.

Open: Opens an existing document. To select the document, the user is presented with the standard GEM item selector. The selector dialog shows a list of all the documents on the disk that can be handled by the current application. For example, a word processor will display a list of all the text files available. The selector dialog also gives the user the opportunity to select documents on other diskettes.

Close: Close the active document or desk accessory. If the user has made modifications to the document since it was opened, the application will ask the user if the changes should be saved before the application closes the document. Clicking the Close box of the active window performs the same function.

Save: Saves a document or graphic. For new documents, the application will ask the user to enter the name of the document before processing the save function. Once the save function is completed, the active document remains present. In the event that not enough disk space is available to save the document, the application re-opens the GEM File Selector allowing the user to save the document on another diskette.

Save As: Saves a copy of the active document using a new filename that the user enters. Once the function is completed, the active-window title bar changes to the new document name, and all further operations affect the new document file.

Page Set-up: Runs a dialog box which controls the applications-printing parameters, for example, page length, margin length, printer drivers, etc.

Print: Prints the document or array of the active window. Optionally, the application will run a dialog box to gather miscellaneous information about the print operation before actually printing the document, for example, number of copies, starting page, etc.

Quit: Exits the application and returns to the calling application, usually the GEM Desktop. If the application has modified any open documents or arrays since the last save, the application first asks the user if the changes should be made permanent or ignored.

Other optional menu entries included in the File menu include the following:

Print Draft: Prints a rough copy of the active document or array in a faster printing mode than Print.

Print One: Prints one copy of the active document or array using default parameters without showing the Print-parameters dialog box.

The Edit menu

The commands contained in the Edit menu control the selection and manipulation of objects and data, and includes commands such as Undo, Show Clipboard and Select All.

Cut: Copy the current selection to the Scrap Buffer, and then delete it. The application may choose to store the Scrap Buffer onto the Clipboard, so the cut data may be transferred into a different application.

Copy: Copy the current selection to the Scrap Buffer, but do not delete it. The application may also choose to store the cut selection onto the Clipboard as noted above.

Paste: Replaces the current selection with the contents of the Scrap Buffer or Clipboard.

Clear: Deletes the current selection without copying it to the Scrap Buffer or Clipboard.

Undo: Reverses the effects of the last operation. The Undo function is very application dependant. Textual applications should support Undo functions for most menu items and typing sequences. Typing sequences are a series of keyboard values including backspace, return and tab, but not including keyboard equivalents of menu commands. An application should not allow the user to undo selecting, scrolling and window-manipulation procedures. However, typing sequences that occur before these functions should be "Undo-able." The application may also show the potential effect of an Undo command by displaying the menu entry as "UNDO xxx," where xxx is the name of the last operation. Microsoft Write supports this function.

Show Clipboard: Toggles the display or hiding of a window which shows the contents of the Scrap Buffer or Clipboard. If the user chooses this command entry, the entry changes to "Hide Clipboard" for future use. The Clipboard is a special document that contains data that has been cut or copied from an array or document. Its contents stay intact from application to application, and its major use is to transfer data between applications. The Clipboard window looks like a document window with a close box, but with no scroll bars.

Select all: Selects every object in a document or array. This command entry is most useful in array and graphic applications and need not appear in textual applications.

Text entry

In addition to the already mentioned controls that affect text entry and modifications, the user has several other options available. The user may make use of several text-editing techniques to enter or edit text including:

—Inserting new text.
—Deleting characters that are backspaced over.
—Translating mouse activity into text selection.
—Deleting selected text and possibly inserting it elsewhere, or copying text without deleting it.

All text-editing functions support the same procedures. Therefore the user does not have to learn a completely new system of text manipulation for each application. For example:

—Select text by clicking and dragging with the mouse.
—Double-click to select words.
—Invert highlighting of the current text selection or display of a blinking cursor at the insertion point.
—Cut (or copy) and paste within an application via a Clipboard.

A cursor appears in the edit field as an indication of the insertion point. When the user presses a key, the character will be inserted into the text at the location of the cursor.

Pressing the backspace key will move the cursor one character to the left and delete a character. The left- and right-arrow keys will move the cursor one character in the corresponding direction. The delete key will delete the character under the cursor. The insert key adds a space at the cursor location. The Control/Home key clears the contents of the edit field. Pressing the tab key moves the cursor five positions to the right. The cursor may then be repositioned anywhere within the edit field by moving the mouse pointer to the new position of the cursor and clicking the left mouse button once.

The mouse is also used to select a range of text. The user moves the mouse pointer over the beginning character of a range of text. Then the user drags the mouse pointer to the last character of the range. The selected range of text will appear highlighted as compared to the rest of the text or document.

Once a range of text has been selected, several options become available. The Edit drop-down menu controls cut, copy and paste operations. Selecting the Cut option copies the selected text into the Scrap Buffer or Clipboard, and then deletes the selected text. Copy performs the same procedure as Cut, except the selected text is not deleted. Selecting Paste inserts the text on the Clipboard at the cursor's location.

The user may also replace a selected range of text with the contents of the Clipboard by first using the "click and drag" procedure to select a range of text, then selecting the Paste drop-down menu option.

To clear a selected range of text, the user may press the backspace key or select the Clear entry of the Edit menu when the range has been highlighted with the click-and-drag procedure.

The user may also select a word by double-clicking the desired word. The application should provide "intelligent" Cut-and-Paste functions when using the "select a word" function. For example, suppose the user double-clicks the word "ONLY" within this sentence:

THE READER ONLY WANTED SOME POPCORN.

The word "ONLY" (but not the spaces located on both sides of the word) would be highlighted. If the user clicked the Cut function of the Edit menu, the word would be removed from the text leaving this line:

THE READER WANTED SOME POPCORN.

"Intelligent" Cut-and-Paste functions are sensitive to the character immediately to the left of the selection range. When cutting the selection range, the application removes the character if it is a space. When pasting, the application adds a space if the character to the right of the insertion point is a space.

Dialogs and alerts

Certain operations require the application to request that the user enter more information before the application can perform a procedure. At other times, the application might be unsure of the results of the procedure. In both of these instances, the application may make use of two additional procedures.

Dialogs, to allow the user to provide additional information before a command is executed.
Alerts, to notify the user whenever an unusual situation occurs.

Controls

The visual interface mimics objects that the user might find in his day-to-day life. These objects stress the importance of direct cause-and-effect: The object performs a function. The user is presented with a group of graphic objects that cause instant action when directly manipulated with the mouse. There are four types of controls: buttons, check boxes, radio buttons and dials.

Buttons: Small objects, normally located inside a window, labeled with text. Clicking or pressing a button performs the action described by the button's label.

Check Boxes: The user chooses among a group of values for an object. When selected, a check-box object displays a small check mark next to the object. The absence of a check box indicates the option has not been selected.

Radio Buttons: Groups of objects of which only one object may be selected at any one time. If another object within the group is selected, the previously selected object is deselected. Highlighting or a check mark is used to show the selected object.

Dials: Display variable values and positions, as opposed to a check mark or radio button which either turns on or off. A dial is an analog device, displaying magnitudes rather than binary values. The most common example of a dial is the scroll bar of a window. The thumb of a scroll bar is the indicator of the dial showing the relative position of the window's view.

Dialogs

When an application requires data from the user, it may use a dialog box. The dialog box gathers the necessary data and returns the values to the application. To the user, this approach is simple and consistent over a number of applications. A dialog box is a rectangle that may contain icons, text, edit fields and controls. The text of a dialog is used to indicate to the user the purpose of the dialog.

When started, the first edit field of a dialog should be active; so the user may begin typing keys to enter data. If no data has been preloaded into the edit fields, the insertion point (cursor) should appear at the first character of the field.

The tab key accepts the changes made to each edit field and moves control to the next edit field in the sequence determined by the application. The mouse may also be used to click on another edit field to accept the changes made to the current edit field and move control to the requested edit field.

Dialog boxes are either modal or modeless, as described below.

Modal dialog boxes

A modal dialog takes control of the system until the user enters the requested information. For this reason, the main use of a modal dialog box should be to gather information that must be entered before a procedure may be processed.

The user has two methods of signaling that he is finished with the dialog: clicking a button labeled "OK" or clicking a button labeled "Cancel." The modal dialog may also be terminated by a keyboard equivalent to these buttons. For example, the return key may be assigned by the application to be the keyboard equivalent of clicking the OK button. The modal dialog may also have other buttons which dismiss the dialog box when clicked. Any button which causes termination of a modal dialog box is signified by emphasizing the object with an outline or bold marking.

A modal dialog box may also have no buttons. In this case, the application may display the dialog box to inform the user of the state of a process without need for a reply. The application then removes the dialog box after a certain amount of time has elapsed. For example, when Regent Word II is printing a document, a modal dialog is displayed, indicating a printing function is being processed.

Modeless dialog boxes

A modeless dialog box allows the user to perform a number of processes before the dialog box is dismissed and normally contains a close box. The user may click on a button within the dialog box or click the close box to dismiss a modeless dialog box.

Modeless dialog boxes may also be dragged around the desktop. The sequence of windows may also be determined by the application. The controls within a modeless dialog box usually indicate that a function will be processed when clicked.

Alerts

In the event that the user does something unexpected, an alert box may be used to signal to the user the problem that has occurred. Alert boxes act like modal dialog boxes in that they retain control of the entire system while they appear on the desktop.

Alert boxes usually contain an icon showing the type of alert, text describing the problem and several buttons allowing the user to choose the method of resolving the problem. There are three types of alerts, as given below.

Note: A procedure is about to be performed that is unusual, but not disastrous, if left alone. For example, a word processor might inform the user when it begins to get close to the end of memory. The GEM icon used for this type of alert is the exclamation point.

Question: A procedure is about to be performed that may or may not cause harm to the program or data. For example, the user selects "Close" before saving the modifications of a document. The standard "Are you sure?" alert falls into this category, and the GEM icon used for this type of alert is the question mark.

Stop: A situation arises in which the user must fix a problem before proceeding with a function or action. For example, during a disk copy the user might have to swap diskettes. The GEM icon used for this type of alert is the stop sign.

The preferred (safest) way for a user to respond to an alert should be clearly marked in the alert box by emphasizing a button within the alert box.

Alert boxes should be helpful, rather than critical. Alert messages should be constructive and polite rather than abrupt. It is better to refer the user to external documentation for further clarification than to provide lengthy explanations of the cause of an error.

The friendly user interface

The visual interface system was designed to appeal to an audience of nonprogrammers, including the huge group of people who have been apprehensive about using computers. To overcome the fears of these potential users, the visual interface was designed to be easy to learn and to use. The guidelines presented were designed around the idea that a computer shouldn't be aggressive. The user should feel comfortable and in control.

On a final note, here is an overview of the design style of the visual interface.

Give the user complete control over the application's actions and responses. Whenever possible, allow the user to change the appearance, arrangement, size and visibility of the objects shown on the screen.
Use verbs as drop-down menu command titles.
Use easy-to-understand English when displaying alert messages. Use icons instead of text whenever possible.
Use controls and other graphics instead of relying completely on drop-down menu controls.
Sprinkle the screen with as many descriptive icons as possible. They make the user feel more at ease and in control.
Don't overuse modes, including modal dialog boxes. Nothing feels more uncomfortable than losing control of the system to an annoying modal dialog box or alert.
Don't force the user to use the mouse when the keyboard is more suited for a function. The same holds true for the keyboard. Don't use the keyboard when the mouse is more suited for a function.
Try to make the screen look as close to the finished product as possible. For word processors, this means a what-you-see-is-what-you-get update of the screen.
Use the standard menus whenever possible. Don't confuse the user with your own menus that use the standard menu's titles.
Don't import applications from nonvisual interface computers and pass them off as a GEM application.
Provide Undo functions using the ST keyboard Undo key to remove the effects of the previous function.

On a side note: Leonard Tramiel of Atari Corporation reviewed this article and made several comments which have been incorporated into the contents. Jim Needham, Atari ST GEM Product Manager for Digital Research, Incorporated, also reviewed this article and made comments which were used in the body of the text.