About   -   Contact   -   Purchase   -   Search   -   What's New

Size is Everything
Although the contents of this article may seem obvious to some people, you would be surprised at the number of Windows that I see which although functionally correct look a complete disaster just because the developer did not take the time to get the sizes correct.

The first thing is buttons, try to keep the width of a button to a minimum, the prompt should be meaningful but where possible keep it less than 20 characters, use tool tips to add extra narrative if required. The golden rule of buttons is to make sure the width and height of ALL buttons on the same window are the same. All buttons in your application MUST be the same height, and if possible make them all the same width.

All controls should be lined up and buttons are no exception, most development tools provide a facility to do this automatically so use the tool, don't use your own judgement. If you have a dialog with buttons on the bottom then right align them with the edge of the rightmost button aligned with the right most edge of the right most control on the window.

Data Lists
The height of a header in a list of data that has a scrollbar should match exactly the height of an arrow header of the scroll bar, even one pixel either way looks very ugly. Try to make any data in the row have a pixel above and below for clearance, this will aid readability for the user. Make sure the right number of rows fits perfectly for the data list height, increase the size of the list a single pixel at a time and run the window, when a new row appears the size of the list is correct. Make sure the data fits the width of the control, only use horizontal scrolling when you REALLY HAVE TO.

Make sure all of the fields on the window have the same height, unless the field allows a large description and wraps at the edge of the control. Where possible make a vertical lists of fields all the same width, if two or more fields are much shorter than the rest, double them up on a single line and right align then edge of the field to match the longer fields.

Make all the single line field prompts horizontally centered with the control, all other prompts should be aligned the same number of pixels from the top edge as the horizontally aligned prompts.

Dropdown Lists
Make sure all dropdown lists have the same number of items available for selection and that the number of rows shown fit exactly, no little blank spaces where half a row could fit. Eight is a good number as it does not obscure too much of the display but allows the user a good view of the data. In PowerBuilder this can be achieved by setting the number of rows attribute in the properties of the edit control. You should not use horizontal scrolling in a dropdown list. You can however make the width of the dropdown wider then the width of the dropdown control, this is especially useful when you want to show extra fields in the dropdown that are not displayed in the edit field. In PowerBuilder use the width property to increase this.

Follow these simple rules and your interface will look slick and give your application a professional look.


Top of Page

Legal Notice

Ken Howe 2011