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 working on a settings type page in a web portal.

Most of the options are pretty simple, so the sections are pretty small (I'd post a pic if I had the reputation required), but I have advanced options for each section. I'd like to make these options expandable, but I am wondering if it is kosher to expand the section and lengthen the page, or whether I should leave blank space to fill with the options when they are expanded.

A few of the sections already have blank space I could fill with expanded options, but some are very slim, like:


SQL [x] cloud [ ] local


So if I leave space for the options I'm going to have to make this section bigger, leaving loads of white space. Just wondering what's best practise?


EDIT: Here's the page I'm working on:

enter image description here

In the Files & Folders section if you see the "advanced" label with the options below it, this is what I am referring to. The scheduling stuff to the right of it is what I'd like to have appear or expand, and I need to include those options for SQL and Exchange too.

Cheers

share|improve this question
1  
Could you upload the pic to an image hosting service (like imgur.com) and add a link to it in your question? –  Dominik Oslizlo Mar 12 '13 at 14:46
    
Added, thanks Dominik –  Meredith Emily Mar 12 '13 at 15:07
add comment

3 Answers 3

up vote 5 down vote accepted

I would think really hard as to why these options might be 'advanced,' and unless they would confuse normal users, I'd avoid tucking them away.

It might be simpler both from a design & dev perspective to expose those elements alongside the 'simple' options. Make the base options stand out from a design direction. There's going to be a lot of interactions to consider if someone is barreling through choices and has to open/close/wait for animations to complete. And if these options are dangerous to your typical user, stick ALL of them onto an advanced options version of the page. Reduce js when you can.

Ultimately though, avoid the whitespace, and keep any animations super fast. If your 'typical' user isn't going to use these options, then the whitespace will be a distraction for every single one of them and it's inefficient use of the page space. You could also meet yourself a little halfway - some additional whitespace padding and then upon activation there's only a slight amount of pushdown.

share|improve this answer
    
This is a good answer, thank you. Part of the issue is that product management is pushing back on having it all visible, because they want as 'simple' a page as possible, and in reality the only reason most of our users touch these features currently is because they appear to be required in the current setup (step-by-step wizard). Pardon, didn't realise hitting 'enter' submits the comment. Basically though, we wanted to avoid the redundancy of having the same options (which take up space more than being 'advanced') appearing multiple times on the same form when most people won't use them –  Meredith Emily Mar 12 '13 at 15:09
add comment

I would expand the page as needed. Exposing or hiding divs (or however you please). This practice is sort of like walking into a buffet; you only get what you want. The same principle applies here. I wouldnt force white-space on a user for the sake of having room for what "might-be" exposed. But there are a host of things to consider and Jayson certainly brought up some good points.

share|improve this answer
add comment

I try to use lists/combo-boxes, when the option-count differs.

  • single-select for radio-button-like behaviour.
  • multi-select for check-box-like behaviour.

They can have a fixed size and scroll-bars.

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.