|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.
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
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.
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