forms - Show data gradually or all at once?

I'm building a site that shows military allowance for housing (BAH). My site not only computes the BAH allowance, but shows estimated costs if one were to buy a house in that area. You can see the site here: http://bahcalculator.org/

I'm worried I'm confusing the user with too much data at once. The user needs to select a state, base, and grade (rank) to see their actual numbers. Should I change the site and put a very simple form that says Select State > Select Base and Grade, then have a hidden panel show up with all the numbers using jQuery? Or do you think I'm on track by showing everything at once?

Answer

I think your instincts are right. There is too much information.

• I had to search for the action area - from a graphic design point of view, the boxes (with the big colourful headings) draw more attention than the form, which is the task entry point.


• I had to make sense of what the boxes actually stand for, so you made me think unnecessarily.


• There was a default option, so information that has nothing to do with me was given. I had to make sense of it and you took control from me (regarding what is it that I want)

See many of these and related here.

• Users will enter your site with a specific task in mind. Spare them any information that is not relevant. One the form is filled, so the results.


• Users don't read, they scan. You made me scan for the form, making my job harder.


• By giving more information than needed you promote cognitive overload. Why display irrelevant information before the user has taken an action?

From a information design point of view, the additional expenses section draws more attention than the BAH rate/Home Purchase as it has a bigger heading in close proximity and it takes 100% width of the screen. This is counter what I believe is the really important information. You should really drop the BAH rate/Home Purchase to be above the additional section and have a heading as big.

I suggest you only show both sections after the user has filled the form.

If I'm being really picky, you can further reduce redundancy if instead of providing with dependents and without dependents radio buttons, you simply have a heading called dependents (under the Grade combo - for which you can remove 'select'), and just have two vertically aligned radions saying with and without:

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