GUI Engineering

Graphical User Interface (GUI) is a fundamental subject in any course on software development and software engineering. A good user interface always plays a big part in evaluating the quality of the software. Every company or individual developer has its own kind of GUI planning or standards.

In this article, I would like to point out some issues regarding GUI to redefine your interface designing.

Some basic things to start with

Avoid bulky features: Always try to stay away from too many features at the top level of your form. This cracks the flexibility and rigidness. In such instances, put features step by step. Put all the features playing under a master level and so on.

Avoid using many buttons: Buttons should be placed on the application's parent window (e.g. MDI), maybe on a toolbar, but not on child forms. In case you have to put buttons like Add, Update, etc. on the child form, then try to use the least quantity possible. For example, Add and Update role should be played by the same button; in this way, whenever a user opens a form to feed some data he/she has to click Add first, followed by the Update button. Now when the Add button is clicked, the label turns Update (figure 1) and will play the role of an update button. Then, after clicking the update button, it automatically becomes Add. In this way, you can avoid using many buttons. The same thing can be done with the Edit button also.



Navigating controls: Controls must be placed according to the rate of use. The most frequently used field should be in the upper-left followed by the least important field in the lower right. Let us consider an example. In an Inventory Management System, Bill No. and Customer ID/Name are the most important fields.

Symmetry control: Line up fields, group boxes, and buttons and other controls in proper order to make the interface much easier to understand and use.

In this course, the most contentious issue is the label alignment. Take a look at figures 2 and 3.


                    fig. 2                                                  fig. 3

In fig. 2, the labels (name, address, etc.) are aligned right whereas in fig. 3 the alignment is left. Here, the correct approach would be as shown in fig. 2.

The space between the textbox and label is variable in fig. 3, which looks odd, while in fig. 2, the space is uniform and appears compact. One more thing, it's easy for users to track a particular box when the form is bigger. As stated earlier, this is a contentious issue; there may be some different ideas. This idea also can be used for web forms.

Here, note the following points:
a. Right justification of labels is recommended;
b. Leave 12 pixels of spacing between the edge of the form and the nearest control; and
c. The spacing between controls is evaluated in multiples of 6 pixels. Leave 12 pixels of spacing between two controls for horizontal alignment and for vertical, it is recommended to leave 18 pixels of space.

Convert ‘Enter’ to ‘Tab”: You can see in many popular software that the user can move easily from one field to another by pressing the ENTER key. In VB, .NET and Delphi applications, by default we can do that with TAB key. However, users generally prefer to move between one field to another by pressing the ENTER key. So, convert the ENTER key into TAB.

Change background color of the Active Control: It would be helpful for the user if he/she can easily track the active control. In some 16-bit applications, you may have observed that the field where a user is entering some data has a different color compared to other fields. In brief, just change the background color when the focus is on a control. See (figure 4).



                       fig. 4

In fig. 4, you can see a form where the user can enter data. Now the field ‘Name’ is in a different color when compared to other fields and, also, the cursor is there. This shows that ‘Name’ is the current active field. Now, when the cursor moves to the next field, the ‘Name’ field turns normal and the color of the next field changes and so on.

Golden Ratio: (1: 1~1.5) is called the Golden Ratio. This is widely used by artists for paintings, architects and civil engineers for their designs. In our case, the golden ratio is applied to the size of the application window and child windows. It is recommended to design a window not more than 50% longer compared to the other side. It is comfortable to watch any window that conforms to the golden ratio. Refer figure 5.

Height = 50
Width = 52

Width : Height = 52 : 50 = 1.04 ~ 1




Fonts and colors: 
· Try to use general/common windows fonts;
· Avoid using multiple fonts in a particular window or screen; and
· Avoid fluorescent colors. Assume the target machine has only 16 colors available and it is recommended to use standard windows colors.

Avoid frequent messages and pop-ups: Try to minimize frequent warning messages and popup windows, as it breaks the workflow of the user. Use field level validation rather than warning messages.

Keyboard issue: It is said that a fast typist lost about 8-10 keystrokes while moving towards the mouse. Whereas for a normal typist the number is somewhere between 3 and 5. So, try to design your application such that the user can make use of the keyboard as much as possible rather than depending on the mouse. For applications where data entry is the most concerning fact, the keyboard issue plays a vital role.

“Quick-Learn” approach: Run and go with it. What I mean to say is that when a new user opens your application, he/she should feel quite comfortable with it. Try to incorporate the application in such a way that the user can learn it by self. For complex applications, it may not quite applicable, but you can try to the maximum extent.

Keep experimenting: The most important thing is to listen and keep your eyes open for what users say about the correctness, color, fonts and alignment. Each and every single step has its own rules and standards. However, I’ll never suggest that you follow exactly what a rule says; but you must be aware of the same and always try to experiment something on your own to keep improving the presentation of your application each time.

Keep watching: GUI design is a very broad issue in software engineering. It varies from company to company and man to man. So, in this regard another suggestion is, use popular applications and try to learn their interfaces and then analyze them. Put questions like what are the drawbacks, could it have been designed better, etc.

Standard Types of Forms and Windows

Standards of form level controls

The author is a Certified Expert in software/system design. You can reach him at: mmilan@writeme.com.