Scaling an Address Form on Resize

Question

My application has a form for filling in the names and addresses of a donor. Each donor gets a closable tab and each tab has an address form.

The problem is that the application runs in a regular application window and therefore gets scaled to all different sizes. If I make the width and height of the text fields static, they all stay in the upper left of the window on a big screen. If I make them dynamic, the form looks bad because of massive boxes for relatively small amounts of text (i.e. first name). If I space them out dynamically, I end up with large gaps in between the boxes.

What is the best way to deal with this issue? Is there a UI construct normally used for this? So far the only one I've seen used has been to put the form in a non-scalable modal dialog, which I can't do because of the tab-based UI.

Here is a screenshot showing the problem:

Answer 1

Nice question.

I see a couple of ways of approaching this.

1. Consider uniting the contents of this tab with one of the other tabs and getting rid of it altogether.
2. Along similar lines, consider distributing your content differently among the tabs. Maybe there's an alternative effective grouping, that lets you make the tabs more balanced?
3. Do what websites do, when supporting larger resolutions than the one the website is optimized for. And I'm not talking about responsive design, which you already mentioned. I'm talking about old-fashioned margins. Before responsive design was the next big thing, websites had margins which could be scaled to any reasonable width and still look good. The difference between this and the options you've considered is that you're suggesting to scale the content area. The white part of the tab is the content. The margins are the gray background. See how much better this already looks, and I didn't reduce the white area by much:

Figure out what's your largest tab and make that the fixed size of the tab control. Fill the rest with background and you'll be covered.

Answer 2

I don't think there's a "best" way.

Personally I'd make them scale up to a certain size and (as you have done) anchor them at the top of the window. I'd be tempted to centre them - but top left is OK. I don't think people will be bothered by the empty space - especially if the tab is effectively a transient window.

If you really don't want the large expanse of empty space you could have a background image that only appears if the window is above a certain size. Displaying anything else would distract from the purpose of the tab.

Having seen your screen shot, I see why you are concerned, but it might be a case that there really isn't a problem. If you centre the fields horizontally but keep them at the top of the screen I think that that would look OK to people.

Answer 3

Given the cognitive load imposed on the user by the form above the tabs, I'd suggest the positioning of the form within the tab is the least of your worries.

Before they get to the tab, the user has been forced to shift their focus back and forth across the entire width of the page several times.

Aesthetically, my preference is for a top left alignment, but I agree with ChrisF that it doesn't matter much. On the other hand, I would be wary of adding in a background image to "fill the space". This may just add another distraction, drawing the user's attention away from the critical workspace.

Much more important than form alignment on the page is the design of the label/field relationships, and so instead, I'd suggest you take the opportunity to start implementing some form design best practice.

A respected expert on the subject is Luke Worblewski, who advises that

When the time to complete a form needs to be minimized and the data being collected is mostly familiar to users (for instance, entering a name, address, and payment information in a check-out flow), a vertical alignment of labels and input fields is likely to work best.

This seems to apply in this case. You can see an example of vertical label alignment on Luke's post: http://www.lukew.com/ff/entry.asp?1502

I'd add that, when dealing with repetitive data entry tasks, field/tab order can make a big difference to completion rates and accuracy. You should aim to allow users to avoid switching between mouse and keyboard, and where possible, group the most commonly completed fields, to minimizes the number of fields that need to be skipped in the most common cases.

Focusing on these sorts of issues will, I suspect, have a bigger impact than the alignment of the form as a whole.

Answer 4

Using a responsive layout that turned tabs into panes ended up being the nicest looking solution to this one. When the window would get large enough to support it, the most important tab would become a pane.

Screenshot at small resolution:

Screenshot at large resolution:

Answer 5

I think it boils down to proximity being your friend here, because:

1. A smaller area makes the form easier to scan and understand
2. Users using the mouse instead of the keyboard to navigate don't have to move the pointer all across the screen to reach the next field

With these benefits going for proximity, I don't really think empty space is an issue and I'd definitely go with a fixed size compact left aligned form like this:

Also changed the alignment and made the field sizes consistent to improve readability.