• HowTo

User Rating: 5 / 5

Fundamental design guidelines

Software developers usually have some kind of training in designing user interfaces or they benefit from having a specially staffed department for this task. Administrators usually don’t have the time and don’t get paid to attend UI design classes or study on their own. So we thought an article outlining some basic good practices and general rules about which control to use for what might be a good idea.

Basic controls

Button	The button control causes an application to perform an action when selected. Dialogs usually feature at least an “Ok” and a “Cancel” button. In forms a button control is usually used to invoke a secondary dialog, e.g. to select a file or folder. In forms with multiple input options a “Submit” button is often used to execute an operation after all required data has been entered.
Check box	Check boxes typically allow a user to select an optional parameter for an action. For example when an application runs a search it may offer the option search case sensitive. When several options are grouped together with a check box the individual items must not be mutually exclusive. Each checkbox should represent a single independent option.
Radio button	The term “Radio button” comes from those station buttons on radios from the olden days. Remembering the name and analogy will always help you to remember this controls specific use. It allows a user to select mutually exclusive settings. Just like you can listen only to one station at a time on a radio, your options here must be mutually exclusive within a group.
Combo Box	Combo boxes are a hybrid of a list and an edit control. They can be used to select one of many mutually exclusive items while using a much smaller space than the equivalent number of radio buttons. Think about a user having to select his home state; 50 radio buttons would be cumbersome to handle. In this case the edit control is read-only. The property “DropDownStyle” is set to “Drop Down List” Another use is to make the edit control writeable so the user can enter any desired text. The fold-out list can provide preset values that a user can choose to ignore. As an example think about entering a search term. The list would then provide previously searched items for selection but the user is free to type in a new term. The property “DropDownStyle” is set to “Drop Down” Note that the “Simple” style is usually not used anymore.
Text box (single line)	The text box or single line edit control is the basic element for user input. Any place where you want the user to enter a single data item rather than selecting one you can use a text box. They have the advantage over specialized controls that you can paste data copied from elsewhere. As an example imagine that a user has to enter a date. If the user routinely could copy that date from a report, web site or even a console and paste it in your form or dialog then a text box is a better choice than a DateTimePicker.
Label	It’s just a simple little piece of static text, but it allows your users to identify the purpose of controls which do not have a title or text built in. Providing clear labels to all user input fields using common terminology will help your users navigate your forms much easier. In case of questions is also allows the user to identify the field by its unique name.
List box	The list box allows you to present values for selection to a user. For a larger number of items it uses less screen real estate than an array of check boxes or radio buttons. Also, unlike with separate buttons, you can easily fill the list with items at run-time instead of having to know the values at design time. So if you need a user to select a server from a list that you load from a file, a list box would be the control you choose. For the three items shown in the sample image you could just as well use a combo box. So why choose a list box? If you want the user to see the choices at all times because it is the main selection in your user interface would be one reason. If you need the ability to allow the user to select multiple items rather than use one specific item you cannot use a combo box.
Group box	Group boxes are like labels, they are not really active controls but they help immensely in guiding a user. If, for example, you have multiple distinct groups of radio buttons, a group box around each helps the user determine where one selection ends and another one begins. Use them also to encompass groups of controls where the labels get duplicated. Think of shipping and billing address fields as an example. Each has the same basic field setup. A group control around each will make it easier to see which field belongs where.
Text box (multi-line)	The multi-line text box is our default output control. Unless you have the need to further process the output or to present it in a very special way, the text box will suffice. It allows the user to take any output your script generates and copy it for further use. Maybe email it, save it to a file or feed parts to anther application. If your UI consists of gauges, dials and percentage bars it might look more impressive to the uninitiated but it prevents further use of any output. Keep it as simple as you can.

With these basic controls, you can create a UI for almost anything. There are others not listed here, but for now try to utilize these basic controls. They are all widely recognized by users and easy to operate.

See also: Single Form or Multiple Dialogs?

• Prev