I am creating a property manager module for our CMS, one of the forms is very basic, but I am having trouble getting what should be the most appropriate layout for the form.

Below is a screenshot of two possible layouts, the third I can think of is to put the editor on a seperate tab (Like the Images tab) But I think that would leave the first tab looking like it was missing things.

Side By Side: Full Size

Side by side

Stacked: Full Size



Option 2 will give you much more flexibility moving forward. If the requirements change and you have more properties to add to your "property" content type, Option 2 gives you plenty of space to roll out the new elements.

Option 1 is good if you have simple properties like textbox or boolean values and wouldn't have more than 1-2 in addition to what you have.

But what if you need to add a "features" checkbox list for things like whether the property has a garage, does it have gas or electric heat, what type of material is the siding or roof made of?

What if you had to add a radio button list for whether it is for sale by owner, a short sale, an auction, or for sale by a realtor?

I would go with Option 2 even with just the elements in your current examples because the one constant when it comes to CM tools is change.

If you had a few more elements to add, you have room with Option 2.

If you have many new elements to add, you would use the left column for in page scrolling navigation like this so you could group related elements into groups. But that would still maintain the all-items-stacked-vertically pattern you teach your user from the beginning.

  • Hmm A good thought, although with all the issues you provided could they not all be solved with having an accordion on the left hand side? as with having all those options in there, without an accordion the form would seem like a monster to the users if it was just stacked downwards would it not? – Hailwood Dec 9 '12 at 17:33
  • 1
    I would agree that given enough items grouping them into sections and wrapping those sections into an accordion could be beneficial. Luke Wroblewski wrote an interesting article for ALA about this subject which you might find interesting. – Charles Wesley Dec 10 '12 at 21:39

I find the first layout to be the best. Everything is in one place, and theres no confusion on what is where. If you hide the text editor onto a separate tab like images, you are hiding the bulk of the process. You always want to have your main actions up front and center. Never disconnect actions from the users view.

I think having the options side by side makes the life of the posting user so much easier.

Hope this helps! :)


I think that, since this is a CMS and the number of form elements might vary from page to page, you'd be better off with the stacked layout. However, you'd be able to make it look cleaner and more cohesive if you...

  1. Add a second column to the form controls. If you move your toggles there, you lose the jarring whitespace while making the form look a little more cohesive.
  2. Hide as many of the text-formatting controls as possible. Right now the page just looks like a mess of buttons. Figure out what your users will use the most (probably basic text formatting + images), and place the rest behind an 'Advanced' or 'More' button.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.