ePIKI – Free Article Directory Free Article Directory

GUI or Graphical User Interface is a fundamental issue in course of Software Development & Software Engineering. A good user interface always plays a big part in evaluating the quality of a 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

A. Avoid bulky features at the Top Level – Always try to stay away from too many features at the top level of your form. This cracks the flexibility & rigidness as well. In this case put features step by step. Put all the features playing under a master level & so on.

B. Avoid using many buttons – Buttons should be on the application’s parent window (e.g. MDI), maybe on a toolbar, but not on child forms. In case you’ve to put buttons e.g. Add, Update etc on the child form then try to use as minimum as possible. Such as, Add & Update role should be played by the same button in this way – whenever any 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 clicked, the label turns Update (fig.1) & it will play the role of an update button. Then after clicking the update button it will automatically becomes Add. In this way you can avoid using many buttons. The same thing you can do with the Edit button also.

C. Navigating Controls – Controls must be placed according to the rate of use. The most used field should be in the upper-left followed by the least important field in the lower right. Such as for an Inventory Management System, Bill No. & Customer ID/Name are the most important fields.

D. Symmetry Control – Lining up fields, group boxes, and buttons and other controls in proper order to make the interface much easier to use. In this course the most contentious issue is the label alignment. Take a look at following figures.

In fig2. labels (name, address etc.) are aligned right where as in fig.3 the alignment is left. Here the correct approach should be as fig.2. The space between the textbox & the label is variable in fig.2 which looks odd. Where in fig.2 the space is uniform & looks compact. One more thing, it’s easy for user to track a particular box when the form is bigger. As said, this is a contentious issue; there may be some different ideas. This idea also can be used for web-forms also.

Note following points

[1] Right-Justification of labels is recommended.
[2] Leave 12 pixels of spacing between the edge of the form & the nearest control.
[3] The spacing between controls is evaluated by multiple of 6 pixels. Leave
12 pixels of spacing between two controls for horizontal & for vertical it is recommended to leave 18 pixels of space.

E. Convert ‘Enter’ to ‘Tab’ – You can see in many popular software, where user can easily move from one field to another quite easily by pressing the ENTER key. In VB, .NET, Delphi applications by default we can do that with TAB key. But user always prefer to move between one field to another by pressing the ENTER key. So, convert the ENTER key into TAB.

F. Change the Back Color of the Active Control – It would be helpful for the users if he/she can easily track the active control.In some 16-bit application you may see that at the field where a user is entering some data is in a different color compared to other fields. In brief just change the back color when a control got focused. See (fig.4)

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

G. The Golden Ratio – (1: 1~1.5) is called the Golden Ratio. This is widely used by the artists for paintings, architects & civil engineers for their designs. In our concern the golden ratio is applied to the size of the application window & 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 is in golden ratio.

See the fig.5, which you can say is in Golden Ratio.
Height = 52
Width = 50
Height : Width = 52 : 50 = 1.04 ~ 1

H. Fonts & Colors

• Try to use general/ common windows fonts.
• Avoid using multiple fonts in a particular window or screen.
• Avoid florescent colors. Assume the target machine has only 16 colors available it is recommended to use standard windows colors.

I. Avoid Frequent Messages & Pop-ups – Try to minimize frequent warning messages & popup windows, as it breaks the workflow of the user. Use field level validation rather using warning messages.

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

K. The “Quick-Learn” Approach – Run & go with it. What I meant to say, 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 user can learn it by self. For complex application it not quite applicable, but you can try as much as possible.

L. Keep Experimenting – The most important thing is to listen your eyes, what they say about the correctness, color, fonts and alignment. Each & every single step has its own rules & standards. But I’ll never suggest you to follow exactly what a rule says; yes must be aware of those & always try to experiment something own to present your application better & better each time.

M. Keep Watching – GUI design is a very broad issue in Software Engineering. It varies from company to company & man to man. So, in this regard another suggestion is, try to use popular applications & try to learn their interfaces. Put a question to yourself, that what are the drawbacks? What should be better for this? In this way you can learn your own way to redefine GUI that you can put in your application.

STANDARD TYPES OF FORMS & WINDOWS

Modal – A modal form is a type of dialog box that retains the focus until closed explicitly.
Use – Represents a finite task.

Modeless – This is simply in contrast with a modal window that doesn’t require closing before switching to another form or window.
Use – Represents a running task.

Application Window – This is a document window that holds all the child form or window.
Use – Presentation of multiple child windows. An application window contains instances of an object comparison of data within more than one window.

Document Window – Managed by the Application window that is dynamically created when files opened or created.
Use – Multiples parts of an application represented by document window.

Secondary Window – A window that’s opened by the parent window.
Use – Generally represents application called by parent the parent such as HELP

Tool Window – It is defined by the application & add-ins. Generally tool windows are listed under the view menu.
Use – Toolbars, those are also represented by window that can be shown or hidden.

Linking Window – Multiple windows are linked together.
Use – Generally used in Tabbed window.

STANDARS OF FORM LEVEL CONTROLS

Menu Bar – 10 items
Pull-Down Menu – 12 items
Pop-up Menu – 10 items
Push Button – 6 per form
Check Box – 10-12 per group
Radio Button – 6 per group
List Box – 50 in list & maximum 10 rows

** This article was written by Milan KM and was published in Asia’s #1 Software Technology Magazine DeveloperIQ.