Nov 27th, 2007
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
Great advice, Dennis.
Keep ‘em coming.
In the Profile dialog, the Personal data groupbox is useless visual clutter. There’s nothing else in the dialog so you don’t need to separate these items. Otherwise good advice.
Xofis: You are likely right. That’s why I wrote “may improve”. As for me, I often use group boxes without title in such cases.
My vision is not so great, so I have Firefox set to use 24 points default font rather than the normal 16. The text at the top of your site is about to run outside of the fixed size boxes. If I hit CTRL +, it gets really bad.
You need to work on your site, Dennis!
I had read that right-aligning the text labels made the dialog easier to read because there is a constant distance between label and text box. Apparently it makes it easier to parse visually.
Mark: The blog is running on WordPress, an open source blog engine. Plus, I use a third party design template for this blog. It wasn’t designed by me also. I agree with you - unfortunately many GUIs and designs in this World aren’t convenient for people with weaker vision.
Ian: Yes. This is another style of combining labels and input fields. I should mention it also. Thanks.
I have seen studies that claim it’s easier for users to parse your forms if the labels are placed on top of the input fields, instead of to the side.
Ed: I can argue. We read left-to-right first, and only then top-to-bottom.
All these are common sense.. why waste time, space, and bandwidth on a stupid article like this?
spz: Unfortunately common sense is what we often forget. I regularly see software products with ugly or inaccurate GUI made by developers who never spend their valuable time to follow the common sense.
At least, now I won’t explain each junior developer these simple principles. I will simply send them to this (and further) post.
Similar guidelines apply to both software and hypertext systems.
Compensate for warning and error messages.
Style focused elements.
Excellent - there is a great acronym here SAD/DAS.
For further ideas on general design/layout may I suggest the following book?
The Non Designer’s Design Book by Robin Williams, Peachpit Press.
She uses the acronym C R A P, which my students love!
Contrast
Alignment
Repetition
Proximity
Keep up the good work!
Objective study regarding placing text labels above input field and right-aligned to input field at:
http://www.uxmatters.com/MT/archives/000107.php
When text label on the same row as input field, it is good practice to keep localization (string length) in mind.
cheers, great post!
This was a great post. Thanks for putting it together. I love the conciseness. I’m looking forward to the rest.
P.S.
Its very difficult to make out the characters in the verification box. Case sensitive? Capital O or zeros? 3x to fill it out.
I like your visual way of presenting material. Great article, thanks for taking the time, and keep ‘em coming
JJ: Thanks for the book prompt. I will check it.
Jayhilwig: Great study. I read it before.
Keith & Nara: Thanks.
Good stuff here. I just wish you didn’t set your text size so small on this blog.
Hi Dennis,
Good advice, I even agree with most of it.
Under “Hierarchy” you refer to “dependable control” - I think that should be “dependent” (I like to hope that ALL my controls are dependable).
Excellent advice, Dennis. I agree with it
One point on dependancy, you should really put a frame or groupbox around the controls which are dependant on the control which sets them - for example, the “Login Required” should be a checkbox/groupbox which enabled or disables the contents.
Hope you’re well, look forward to your next post!
Mike (Mike on Software)
Hi,
Thanks for the clarity and I have been doing these for year and it is great to confirm they are correct.
I would love to know if there are GUI patterns.
For example these days applications really can look old or modern. What goes into making things modern?
I feel it is the layout.. Some examples I would like to know are..
Modern starting screen - eg Outlook explorer bar on the left OR a nice background with menu buttons across the bottom.
Then some layouts for the list view of data. Position of edit, delete, sort buttons.
Then for the details screens - tips for balancing the headers, large heading maybe with an image right aligned? modern tabsheets to group data entry.
Obviously there are also other considerations - like if data entry speed is a priority over aesthetics etc..
Thanks for the post !!
Michael