Nov
27
User Interface Improvements: Positions
As you may know, before I founded Indigo Byte Systems in 2004 I used to be a senior developer in a mid-size software development company. I dealt with various projects from hardware drivers, to Web applications, to distributed corporate systems. Nowadays, I also teach students the programming methods at the IT department of Samara State Aerospace University. So, I test and evaluate various software applications every day. I see that many programs by different authors have the same problem. That problem is GUI, Graphical User Interface. Designing usable and clear interfaces usually requires significant efforts and experience. Nevertheless, often I see things that authors may improve just in minutes and make their programs looking more professional and attractive.
That is why I decided to write a series of articles devoted to GUI quick improvements. In the first post I will write about how to position the GUI elements properly. As English is my second language I will follow “Less words, more pictures” principle in this post.
Align, Size, Distribute
Positioning GUI elements properly is critical. The scattered controls and labels make the whole program looking inaccurate and amateurish. Look at the picture and remember these three verbs: Align, Size, and Distribute.
Always start with this rule. The modern IDEs, like Visual Studio 2005, have built-in visual aids that allow to easily align, distribute and resize GUI controls in drag-n-drop style. In majority of other IDEs there are buttons or commands for these operations.
Semantics matters
Although the similar elements must have the same size you should remember what kind of information does each control represent and you should resize the controls according to their semantics. For instance, if a text field is intended for a sentence input then it’s better to set its width as long as possible to make the whole input text visible to a user. On the other hand, if a text field is intended for a two digit number input then you should reduce its length accordingly.
Appreciating the control semantics during design will make your GUI more intuitive for users.
Groups
If you have many controls in a single window then you must divide them into logical groups. Try to keep the maximum number of elements in a single group up to 5-7. Many items are difficult for user perception.
Name the groups according to the information they represent.
Margins
Many developers never care about margins while margins make any GUI looking elegant and clear. Adding group box to the window may also improve the appearance of your software.
Also, check if margins of all sides are equal. Otherwise the whole form will look inaccurate.
Margins will save your GUI from congestion and will make it spacious.
Hierarchy
If some controls’ states or behaviour depend upon another control’s state then you must clearly show this dependency. Shift the dependable control to the right and to the bottom a bit.
Reposition your GUI elements to emphasize the hierarchic dependencies and the logic of your program.
Structure
Wide text blocks are difficult to read and to understand. Users often don’t read long instructions and therefore ignore them. Always keep your instructions short and write them in structured style.
Keep only essential information and make it as easy to read as possible. Place text near the referred elements.
That’s just a set of the basic principles of properly positioning your GUI elements. Look at your own software and check if its user interface may be easily improved. Next time I will write about how to modify the structure of GUI elements to make your software more intuitive and easy to use. Stay tuned.
More useful info on GUI design:
The GUI Design Handbook
Using Grid in GUI design
