The golden ratio in form design

Designing a form was very much easier back in the days when all we had was a monochrome screen displaying 80 columns of text. The screen was 25 rows deep and so 80x25 was the shape of your form. FoxPro 2 for DOS gave us character-based windows but for most of the time we still used the entire screen area from force of habit. The graphical user interface (GUI) of Visual FoxPro has given us lot more flexibility but this flexibility brings the drawback we have to make a lot more design decisions every time that we start a new form. Making decisions always takes time and our life has been a little easier since we decided to restrict ourselves to a few standard form sizes.

Forms are always rectangular and rectangles come in many shapes. At the extremes a rectangle can be tall and thin or short and fat but somewhere in the middle of the range there must be a shape that looks to be just right. Artists and architects believe that the "just right" proportions are when the ratio between the lengths of the sides is close to 1.618:1, the Golden Ratio. The form shown below is 491 wide by 303 pixels tall and has sides in that ratio:

The Golden Ratio is used everywhere by designers. As a quick example, take out your credit card and measure it. Sizes vary slightly but 86 x 53 mm is a typical size and 86/53 is 1.62.

Properties of the golden ratio

A rectangle in the golden ratio has the unusual property that you can cut a square out of it and be left with a smaller rectangle which is also in the golden ratio. In mathematical terms:

If you multiply this out and solve the quadratic equation you'll get answers of 0.618 and 1.618. Simple arithmetic proves that these answers are correct:

The value of 1.618 is not exact because the golden ration does not have a precise value to three decimal places. Like e and pi it is an irrational number and mathematicians use the symbol phi (φ) to represent the exact value of 1.618033988749895 ...

The FoxPro invoices form above is 491x303 pixels. It's not quite the Golden Ratio but it's as close as I could get without using fractional pixels.

If you remove the green square of 303 pixels you are left with 188x303 pixels, another ratio close that is to 0.618. Remove the blue square of 188 pixels from this smaller rectangle and you are left with 188x115 pixels, again very close to 1.618.

Splitting the form horizontally in the ration 1.618:1 gives a nice balance between the two main areas of the form. The left-hand square of 303 x 303 pixels holds the name and address information and the right-hand rectangle of 188x303 holds the rest.

Form sizes

Going back the the original point about having to decide what size the forms have to be, we've bypassed this decision by picking four basic sizes for our forms:

• 794x491 - fills an 800x600 screen nicely
• 491x303
• 303x187
• 187x116 - big enough for a textbox and a couple of buttons

Using this restricted range holds the application together nicely because the user sees a consistent range of forms rather than a mixture of short and tall and fat and thin. The two larger forms always appear in landscape orientation but the smaller ones are sometimes useful in portrait form too.

Just as an aside, we usually design for an 800x600 screen even though most monitors are now larger than that. We can never rely on being able to use the full height of the screen because the user will always have the Windows status bar at the bottom of the screen and may well have a Terminal Services bar and Office bar taking yet more pixels off the height.

Summary

These form sizes are only a guide. If a form really needs to be a different size then we choose a size which meets the needs of that particular form. Most of the time though we just pull one of these standard forms out of the library and get on with the job.