Should expandable options lengthen the page or should space be left for them?

Question

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:

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

Answer 1

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.

Answer 2

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.

Answer 3

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.