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.

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:

mockup

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?

share|improve this question
add comment

3 Answers

up vote 3 down vote accepted

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.
share|improve this answer
    
Maybe problem 1) can be resolved through a visual design solution. e.g. a clear visual distinction between the white space and the form panel of "item one". Personally I don't like the accordion type 1 (e.g. in outlook) –  sysscore Oct 10 '12 at 6:58
add comment

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

share|improve this answer
add comment

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

share|improve this answer
add comment

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.