The golden ratio in form design

Designing a form was easy in the days of DOS. The screen was 80 characters by 25 lines and that was the shape of your form. FoxPro for DOS gave us character-based windows but for most of the time we still used the entire screen area. These days the graphical user interface (GUI) has given us lot more flexibility and we have to make design decisions every time that we start a new form. Work goes faster when you don't have to make decisions so we standardised our form sizes some time ago.

A rectangular form can be tall and thin or short and fat or just right. Artists and architects believe that the "just right" appearance comes when the ratio between the lengths of the sides is close to 1.618:1, the golden ratio. This form is 491 x 303 pixels and has sides in that ratio:

If you want to see an everyday example of the golden ratio, take a look at a credit card. 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 an exact value. It is an irrational number like pi and mathematicians use the symbol phi (φ) to represent the exact value of 1.618033988749895 ...

The form above is 491x303 pixels, as close as I could get to a ratio of 1.618 without fractional pixels.

If you remove a square of 303 pixels you are left with 188x303 pixels, a ratio close to 0.618.

Remove a square of 188 pixels from this smaller rectangle and you are left with 188x115 pixels, again very close to 1.618.

Golden ratios within a form

Looking at it geometrically:

Splitting the form horizontally in the ration 1.618:1 gives a nice balance between the two main areas of the form. The square of 303 pixels holds the name and address information and the golden rectangle of 188x303 splits into a smaller square and yet another rectangle.

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 because that seems to have replaced 640x480 as the lowest resolution we see in commercial office use. We can never rely on being able to use the full 600 pixel height of this 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.

Back to FoxPro Developers' page