Should I leave white space inside accordion?

Question

I'm building some web editor for charts and decided to group various independent chart options inside accordion. A question poped up about whitespace inside contents of some accordion panes. Basically we have 2 options of accordion layout:

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

I somehow like the first option more, it feels less crowded. Some of my fellow developers disagree and point out that user might not see other accordion "Items" because of the white space. Note hover that all accordion "Items" will always be visible at bottom of the page - no scrolling will be needed to get them.

Which option should I choose to make users less confused?

Answer 1

I don't think it's likely that users will miss the accordions in option 1 unless the graph is full page and the items are pushed right to the bottom of the viewport. I do, however, see several problems with option 2:

1. It could imply both item 1 and item 4 are open, which implies that the accordion can be interacted with in a non-legal way. It could also suggest that item 4 has nothing in it. That's probably not a good thing.
2. It makes it harder to see that one option is open and that the others are closed and dismissed. Pushing the closed options to the top or bottom seems to better communicate the accordion concept.
3. It stops the accordion taking the same height as the graph it controls, which could make the relationship between them less clear.

Answer 2

You're right, if the accordions have a non-white background color it's likely that the users will see them, no need to cram them up to the middle.

In case doubtful, run a few usability tests on amazon mechanical turk or usaura.

(Just to make it stick: usability testing is not something you need huge budgets and expertise for, but developers - who will likely never ever use the app, only write it - are not really an authorative source on what users see and what they don't, users are.)

Answer 3

I have got an weird opinion don't know if any one will really buy this explanation,it goes like this.

Consider user always have an pattern to access tabs say he goes from topmost to bottom tab, and while doing so he selects few items in listbox that is present in each tab. Now if we see the mouse movement required in case of Option1, as compared to in Option2 is less. So IMO it depends upon how is user going to access those tab's i.e in which order. Again as I said it's just an opinion :-)