gui design - What to do when a page's content doesn't fill up enough of a fixed area?

An application has a fixed size, i.e 800x600 px. However, a problem I often run in to is that the page's content isn't enough. It's simply too little content on a big area.

Consider the mockup below, the "box" is of fixed size:

^{download bmml source – Wireframes created with Balsamiq Mockups}

This example is a crucial step, and probably shouldn't be merged with another step. Nor am I looking to add unneeded content, since it'll only clutter the UI.. Resizing the fixed area isn't a viable option either, at least not sufficiently enough (prefarably not at all).

I'm sure I can't be the only one who encounter this problem, but what do you do when you find yourself in it? The mockup is as said only an example, but feel free to re-use it to demonstrate a solution.

Answer

I can think of four broad techniques for tackling this issue.

Firstly, it looks to me that you could probably get away with increasing the size of your UI components and copy. Text really needs to be 14px or above to be well-readable anyway, so there are practical benefits to doing this beyond just aesthetics.

Secondly, if you feel a page seems 'orphaned', and the form is an action relating to some other table or group of elements on another page, you might get away with showing the form as a lightbox. It's not great practice to choose UI elements just because they look 'nicer', but if it's appropriate from a UX perspective then it's something you should look at.

Thirdly, you can add secondary content to the page if it helps promote the activity, or provides help or advice. This is what Twitter does on its login pages (below), but be careful not to steal attention from the form itself. In Twitter's case, the bright white UI elements and subtle highlighting around them keep the form the centre of attention.

Finally, you can make the whitespace more interesting. A common technique on login and 'gateway' pages is to show a blurred stock photo background, as in the following example:

Web-savvy audiences (i.e. other designers) might find this a little clichéd, though. Another technique is a simple colour or gradient for a background. Using something darker than the page body again helps draw the eye to the form.

^{download bmml source – Wireframes created with Balsamiq Mockups}