elements of ui design — csmates.com

Elements of User Interface Design

User Interface is a collection of design elements so that end-user should be satisfied with our product. These design elements are:

Menus

The requirement to decomposition the user dialog into elementary operations also means that the input of commands should take place via a minimum of individual actions. Menu commands provide a means to achieve this goal.

• Pop-up Menus:- It proves more efficient because they can appear at any position therefore they require less mouse movement.
• Pull-down Menus:- This permits better structuring of an extensive set of commands and are easier to use with a single-button mouse.

The user can click on the menu bar with the mouse to display all the commands belonging to a menu and can select a command, likewise with the mouse.

Menu Command Classification

Here are three types of menu commands

• Directly executable commands.
• Commands with parameters.
• Commands for switching modes.

Directly Executable Commands

Directly Executable Commands including all menu commands that require no parameters or that operate on the current selection.

For example, commands Cut and Paste are elementary operations.

With a simple mouse click, the user causes the system to carry out an action that normally involves processing data.

Commands with parameters are similar in effect to those in the first class. They differ primarily in the user actions that are required to execute them.

For example, text editor commands Find and Find Next locate certain characters in a text.

Find has an implicit parameter, the position at which searching is to begin. The execution of the command prompts the user to input additional parameters. Input prompting is normally handled via a dialog window. The execution of such a command thus requires several sequential inputs from the user.

To simplify the repeated execution of commands with the same parameters, it can be useful to use a dedicated, immediately executable menu command Find Next.

Commands for switching Modes

Instead of manipulating data, the menu commands for switching modes cause a change in the mode that affects subsequent commands or the way in which data are displayed.

Switching between the insert and overwrite mode and the command show controls in a text editor to display normally invisible control characters.

General Tips About Menu Commands

A frequently neglected task in the design of a menu system is the choice of appropriate wording for the menu commands. Apply the rule that the command should be as short as possible, yet still meaningful.

In the design of a menu system, similar commands should be grouped together under the same menu.

The more frequently a command is used, the higher in the menu it should be placed to avoid unnecessary mouse motion.

The basic possibilities for handling the situation where a command is invoked/access in a mode where it can’t be executed are:

The command has no effect

An error message is displayed.

• This possibility is preferred over the first because the user can be advised why the execution of the command is impossible.
• If the same situation arises repeatedly, however, the recurring error message tends to irritate the user.
• The command is disabled.
• The best choice is to prevent the selection of a senseless command from the start.
• To achieve this goal, the command should not be removed from the menu,, which would confuse an occasional user and cause a search in vain for the command.
• It is better to mark non-executable commands as disabled in some suitable form.

Modes

A program mode is a situation in which the user can only execute a limited number of operations.

Windowing technology can provide valuable services for modes. With the help of windows, the user can process various subtasks simultaneously in different windows representing different modes.

The key to avoiding modes in the decomposition of the overall user dialog into elementary operations.

In modern text editors, a block of lines of a text can be moved to a new position in the text by four elementary operations.

This cut-copy-paste principle permits the user a change of mind or corrections after each elementary operation.

The user first determines what is to be manipulated and only then what is to occur whereas in command language the user first establishes the operations and then specifies the parameters.

Dialog Windows

The dialog window should be structured to minimize static text. Static text is used for titles, labels, and explanations.

In particular, avoid long explanations by means of adequate labeling of the elements available to the user. As far as possible, use editable text only for inputting character strings. For the input of numbers, other user interface elements do a better job of eliminating errors.

Some Important elements of dialog windows are:

• Command buttons trigger immediate action. Typically an input dialog window contains an OK button to confirm input and a Cancel button to abort an action.
• Checkboxes permit the selection of Boolean values.
• Radio buttons allow the selection of one alternative from a set of mutually exclusive possibilities.
• Pop-up menus provide an alternative to radio buttons. A mouse click on a framed areas presents a list of available possibilities from which the user can select. Compared to radio buttons, pop-up menus require less space and can be arbitrarily extended. That they normally don’t display all available options proves to be a disadvantage.
• Sliders enable the input of continuous, variable values. Use sliders wherever precision plays no role, e.g., for adjusting brightness or volume.
• Selection lists serve a function similar to pop-up menus. Use them when the number of alternatives exceeds the capacity of a menu.
• Direction buttons allow the setting of values in discrete steps. Their function resembles setting a digital watch. Direction buttons make it easy to restrict the numeric range.
• Icons frequently provide a space-saving alternative to verbal description.
• Use them when the number of

Color

Some of the guidelines that are suggested by Apple in 1997 that may be used for the design of color user interfaces:

• In general, the color should only be used where the task requires it, such as in graphic editors. In all other cases, the color should be used at best as a supplementary means for highlighting, but never for more decoration of a user interface.
• To avoid excluding such color-blind persons from using a program, color must not serve as the sole source of information. Another form of highlighting should be preferred over color.
• Experts recommend avoiding red and blue to display text.
• Red serves as a danger signal. However, because the user’s eye is drawn to red, it would be wrong to employ red to mark dangerous actions. Color “support” in such a case would have the reverse effect.
• Light blue on a white background is hard to read, especially for small objects or thin lines. Thus important things should never be displayed in light blue. Still, this effect can be exploited, for example, to set grid lines in the background as unimportant.

Sound is an excellent way to attract attention. It should only be used when the user’s attention is really required, but never as simple background for other actions.

Appropriate applications of sound include error situations and the occurrence of temporally uncertain events such as the end of an extended procedure.

Some important guidelines for the design of sound user interface include:

Sound as an alternative indicator

• The sound should only be used to underscore a message displayed on the screen, but never as the sole indicator of an exceptional situation.
• Otherwise, an important message can be missed because the user is hearing-impaired, works in a loud environment, or has left the office.

Use different sounds for different events

Avoid loud and shrill sounds

• Imagine a large office where every few minutes another computer trumpets an alarm.
• For the same reason, avoid sounds with more than three sequential tones; such signals become irritating when heard too often.

Don’t use continuous sounds

Even in particularly pressing emergencies, never employ a long, and continuously sound.

Such sounds can create panic and provoke erroneous action from the user.

It is better to use a short, uninterrupted sound and to repeat it an intervals of one minute until the user reacts.

Originally published at https://www.csmates.com.