I'm redesigning a CMS and I wanted to gather some opinions on what makes the best user experience for my particular dilemma. Here it is:

The CMS controls a marketing-focused website for large companies. It has sections for professional bios, organizational structures, news items, publications, events, case studies, job openings, and various content pages. We basically have a library of field types and build an object by throwing a whole bunch of fields into a form. Each field maps to a segment of information that appears on the front end of the site, or is a control that affects how the object interacts with other objects within the site.

Within this CMS, the edit screen for a particular item tends to have a tremendous amount of fields of various types. The most involved edit screen we have can have anywhere between 60-80 fields on it, each varying in size, functionality, purpose, and complexity. Currently, when editing a particular page, all of these fields for that page are arranged vertically in a single screen, which results in a long scrolling form. We do have ways to visually break up this list into groups of fields, but the sheer volume of fields in some cases makes it a bit cumbersome still.

On one hand, this currentlayout is very straight-forward and convenient because it's all right there and you don't need to do much more than scroll to find what you're looking for. This is a no-brainer for edit screens with only a handful of fields. On the other hand, on the edit screens with a large number of fields, it starts to feel a bit unwieldy.

My limitations: this is a CMS that is extremely configurable and dynamic, but that means that I need to find a paradigm that works for every possible situation - edit screens with lots of fields and screens with only a few fields. I am also limited to a vertical arrangement of the fields. I cannot place them in columns of two, for instance. Each field is essentially a stand-alone element and single edit screens consist of just a list of elements.

One option I am entertaining is to split up the layout into tabs. The user must click on a tab to edit the content within it. While this is neat and tidy from an aesthetic perspective, I wonder about the user experience of needing to engage a secondary navigation to get to the specific field that you want to access.

To sum up the question: If you had to configure an object with 60 different options/parameters/values to control (all with different types of form elements), how would you lay out the form to do so?

  • We simply don't have enough information to go on here to really be able to help you. We'd need a lot more context. User flows. And an understanding of the actual content being entered. – DA01 Aug 20 '15 at 18:28
  • For the most complex screen, it's a professional's bio. It contains small tidbits such as name, email, phone number, office location, social media profiles, etc. It also contains full text bio segments, education background, and professional affiliations. Then there are other elements like SEO customizations, site search controls, and whatnot. – develdevil Aug 20 '15 at 18:39
  • Are all of the fields on each screen required, or is there a mix of required and optional? – Andy Aug 20 '15 at 18:50
  • I would say that only 1-3 of the fields are technically required, however about 70% of the fields need to be filled out in order for the object (in this case, a bio) to appear "full" of information. – develdevil Aug 20 '15 at 18:56
  • Sounds like you should be splitting it up into sections. For example, can't you have a separate section for entering a professional's bio, then on the main screen, just allow lookup to link to the professional? – Steve Jones Aug 20 '15 at 19:16

My suggestion is to split that large form into smaller sections like blocks of fields (related ones in one group with maximum of 10 fields).



Email: [ ]                Confirm Email: [   ]
Date of birth: [   ] ...

And so on. Hide(minimize) them all except the first one. Create a NEXT button at the bottom-right of each one to open the next one.

Also, have a "Minimize" button or ICON for each, so users can minimize(hide) it if they want. This way, you don't add another layer of navigation, page will be more readable and users will have resting points and enough white space.

At the end, do your form validation and open the sections with errors (required fileds in your case).Cheers

| improve this answer | |
  • This works for front-end forms that a user has to fill out progressively, but in a CMS, you need access to edit any piece of information without having to progress through multiple screens. – develdevil Aug 21 '15 at 14:22
  • This is exactly what I was trying to say. You don't need to have a huge list of form elements on your front-end. Divide them into something like accordion tabs like (Contact details, account details, etc...). You can easily find lots of governmental and public agencies doing the same when dealing with large forms. – Ben Bozorg Aug 23 '15 at 23:26

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