Show data gradually or all at once?

Question

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 1

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

My Personal Experience

• 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)

Some Assumptions

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?

Information Prioritising

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}

A Visual Analysis

Answer 2

If you are worried about distraction, a hidden panel may still be more extreme than you need. Placing the lower-priority information lower on the page (as you seem to be doing already) should be enough. Some users may appreciate not having to dig for information, especially since it looks like users may need to look at information for multiple locations (which would multiply any digging required).

Actually, given what is there already, you have the opportunity for more information to mean less work for the user by explicitly giving a single metric that users could use to compare multiple areas:
"BAH" divided by housing price

You could even provide a metric that is potentially even more helpful, but not comparable across time, and which would require more work. You could give "BAH" divided by a typical mortgage cost over the same period as the "BAH" (monthly?), using the house price, a typical mortgage length and down payment amount (which you could choose once and not revisit for long periods of time), and a typical mortgage interest rate (which you would probably want to fetch a new value of every month or so).

Answer 3

Some improvements could be:

• Autofocus search field on load. Currently focus is on the Google map. Focused field sets the starting point for a user.
• Drop-down list while search is good, but after item selection one should press Search or press Enter to perform search. Simplify this action by immediate search.
• To minimize visual distraction, hide bottom panel Home Purchase Additional Expenses until user performs first search. As the panel contains a set of eye-catching elements, it will be better not to show it at the beginning to narrow user's attention to search task.
• Remove frames around numbers in BAH Rate and Home Purchase. The frames create feel of editable fields, but those are just labels.

Answer 4

Leave it how it is now. While in some situations required user-interaction can be overwhelming, you most definitely aren't overwhelming the user with a few inquiries.

For the most part, users don't like surprises. When I'm using a website that dynamically loads more questions (probably trying not to overwhelm me), I just find myself frustrated in wondering, "WHEN WILL IT EVER END?"

By displaying all of the required fields at once, you are giving the user a sense of control. They can visually interpret what is expected of them and then decide whether or not they wish to partake.