Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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:

Too much white space

share|improve this question

5 Answers 5

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:

enter image description here

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.

share|improve this answer
    
+1 for making me consider responsive design. –  krispy Jun 24 '12 at 20:15

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.

share|improve this answer
    
What kind of background image would you suggest (keeping in mind that this uses a native look on all platforms)? –  krispy Jun 22 '12 at 16:32
    
@krispy - Something as simple as a gradient fill might be enough to stop it looking "empty". I think this is something you need to experiment with. –  ChrisF Jun 22 '12 at 18:23
    
I'm not sure that would be enough. I'm a new member so I can't upload pictures, but here's a link to a screenshot of the issue at hand: i.stack.imgur.com/9Fy1w.png –  krispy Jun 24 '12 at 0:36

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.

share|improve this answer
up vote 1 down vote accepted

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: Small resolution screenshot of app

Screenshot at large resolution: Large resolution screenshot of app

share|improve this answer
    
Sorry, but that's a terrible idea IMHO. Responsive layout shouldn't change the nature of the controls. Tabs should remain tabs. A user who works on a tab in a small window and makes the window a bit larger shouldn't suddenly start wondering where his tab went. Two users working on different size monitors should see the same controls in the same way, you can't have it be a pane for one and be one of three tabs for the other. You can add controls on a larger resolution, but not change the type of controls who exist on all resolutions. –  Vitaly Mijiritsky Jun 25 '12 at 5:28
    
With all due respect, I disagree. In my opinion the layout of the larger window is much easier to work with. However I have to accept that some people have very small screens. At least like this, the people with large screens aren't held back by the people without. As for the users working on different size monitors. Maybe I'm wrong, but the users can't be totally lacking in intelligence. Is it that hard to see what happens? If I am wrong, would adding some kind of animation to show what's happening work? –  krispy Jun 25 '12 at 12:20
    
Actually, your initial form was overloaded to begin with (as the other answers note), and the new panel makes it significantly worse. But even if it had made the form look better, I, personally, still think that this "trick" of turning one of the tabs into a pane on resize is unacceptable. Not to mention that nested tabs are a major no-no. –  Vitaly Mijiritsky Jun 25 '12 at 16:37
    
If that's the case, then how would you suggest I do without? –  krispy Jun 25 '12 at 17:28
1  
For example, Outlook. A list of donors on the left, Details pane on the right displaying info on the donor selected in the list. The details pane contains the tabs. Place the form (name, salutation etc.) in the first tab along with the address fields, saves you real estate and solves the problem of having a nearly-empty tab. –  Vitaly Mijiritsky Jun 25 '12 at 17:53

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:

fixed size compact left aligned form

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

share|improve this answer
    
I see what you're saying, but I don't think I've ever seen a professionally developed software application that looks like this. Am I looking for a non-existent magic bullet? –  krispy Jun 24 '12 at 16:11
    
@krispy: You have a lot of screen and little content - no matter where you place your content, the screen will still look empty. –  dnbrv Jun 24 '12 at 17:46

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.