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.


Align, Size, 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.


Semantics

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.


Group

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.


Margins

Also, check if margins of all sides are equal. Otherwise the whole form will look inaccurate.


Equal margins

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.


Hierarchy

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.


Outline

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

… to be continued …

Share
4149cc55f8ec6e81aa2450a9264e9bbe
Submit to reddit

21 Responses to "User Interface Improvements: Positions"

  • Xofis says:
  • Dennis Crane says:
  • Mark says:
  • Ian says:
  • Dennis Crane says:
  • Dennis Crane says:
  • Ed says:
  • Dennis Crane says:
  • spz says:
  • Dennis Crane says:
  • JJ says:
  • jayhilwig says:
  • keith lovgren says:
  • Nara says:
  • Dennis Crane says:
  • Jonathan says:
  • Ramón says:
  • Mike Wilson says:
  • Michael says:
Leave a Comment

Captcha
Enter the letters you see above.