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 text. The screen was 80 characters wide and 25 lines tall and that 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. These days the graphical user interface (GUI) 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 takes time and our life here has been a little easier since we decided to restrict ourselves to a few standard form sizes.

Forms are 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 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:

Form in the golden 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:

width/height = height/(width - height)

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:

1/1.618 = 0.618
1/0.618 = 1.618
1.618 - 1 = 0.618

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, another ratio close that is 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:

Form with nested golden sections

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 a new form has 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.