Wednesday, December 1, 2010

Some principles on interface design

GUI Design - Best Practices

Software Systems are becoming complex by day; driven by the ever changing business processes. Despite this, their interfaces are expected to become more intuitive, easy and quick to use as well as able to hide all of the systems’ complexity from the user. To understand the concept of a good interface, let us take an example of a television set.

A television set internally consists of Electrical circuits that are drawn on boards using a medium capable of transmitting electrical signals. On the outer, the set consists of plastic casing which has a screen for visual output, volume buttons, program buttons, function buttons and a few others. These buttons are mapped on to the internal circuit boards. The users only see the casing and the buttons which hide the complexity of the internals of the Television set.

In order to come up with a good graphical user interface for any system, the following principles apply;

1. Understanding Targeted System Users

Television viewers enjoy viewing if they are able to set up for optimal results. While some are capable of setting up without much guidance (can use the remote controls to make complex setup), others are not able to understand even the basic setup hence need a one touch button on the casing to set the defaults.

Similarly, for the users to appreciate the system and use it effectively, they need to feel that it is easy to use. Since complexity varies for different users, GUI designers need to identify user segments for the system, understand their perception of a good interface then design the interface with this in mind. This gives a user the perception of being in control of the system.

2. Applying Universal Norms

When a TV viewer wants to increase volume, he looks on the Casing or remote control for a volume Icon. He expects this Icon to be standard for any television set. Thus if he does not find this Icon, he ends up confused.

Users tend to favor designs they are familiar with. Instead of re-inventing the whole wheel, GUI designers need to follow consistently used norms/Icons. Users will feel at ease with the system even if they haven’t interacted with it.

3. Ensuring Consistency

Imagine buying a TV with ‘Program’ button on the casing labeled “Function” and placed as the first button below the screen. One year down the line, you decide to purchase another TV of the same make. This time round the “Function” button has been renamed to “Program” and positioned as the last button above the screen!

Thus GUI structure should be consistent throughout the system. Users should be able to predict where to find a certain control on the window. For example SAVE button should be located at a constant position on all windows. Better still would be to place controls common to other widely used applications at the same position on the window.

4. Providing Visual Feedback

Imagine setting volume on the TV and there is no visual feedback that displays whether the volume is increasing or not!

Where possible, GUI designers should provide visual feed back like, highlighting buttons when clicking, projecting controls, changing control color and/or text fonts’ etc. This readily and clearly assures the user that an intended action is being or has been performed.

5. Support Keyboard shortcuts and Mouse Events

Where possible, GUI designers should provide keyboard shortcuts that a user can easily identify for quick accessibility of the system functionality. For example ctrl+v for Paste function. Where applicable, the developer should use universally identified shortcuts.

6. Appealing but Non-exaggerated Look and Feel

Imagine going to buy a television set and finding one shaped like human head! My best guess would be that, you would not be attracted to buy it for obvious reasons. It does not matter how wonderful its internal functionality is.

Users are drawn by what they see. A well designed system attracts users to want to use it. It’s only by using the system that they will appreciate the goodness, effectiveness and the seriousness of the system.

7. Positioning of windows Controls, Tool and menu bars

Picture, at one time finding the buttons on the TV casing below the screen, then next time at the back! Automatically, you tend to search for them at the front and wouldn’t think of them being placed at the back!

System controls should be consistently positioned where the user can easily and predictably find them without much ado. This serves to enhance the users’ perception of the system being easy to use.

8. Minimal Functionality Presentation on Windows

Now, visualize the TVs’ entire functionality mapped together with the buttons on the casing. Which one would you start with? How long would it take you to find the button you need amongst the many buttons? Would all fit on the casing? How messy can it get?

GUI designers should endeavor to present as minimal as possible functionalities on the window; possibly, only the functionalities affecting the processes on that window.

9. Ensuring Ease of Navigation

Picture setting up the TV and in the process you need to first quit setup then fix the aerial, then resume to setup again. After that you try to navigate to where you were before.

User interface should be well designed to allow for easy navigation between different windows and functionality. This adds to the simplicity of the system.


User interface determines how the user perceives the system, which in turn determines how one would use it. If a user believes the system is easy to use and effectively addresses his/her needs, it translates to the number of times he/ she would come back to it thus realizing its full potential. It is upon this solid foundation of carefully planned User Interface that the A1ERP has been built. It boasts of consistency, ease of use, a well managed appealing look and feel, properly planned window layouts and well designed system functionality, amongst others.

Cutesy of AT labs

1 comment: