CFBlog Administrator Blog

The web design and development communities at large have an ongoing debate regarding the benefits and drawbacks of the long form. If completion and participation percentages are the "end in mind" of the interface you are designing, an overly long or complex form served to the user can be it's kiss of death.

The good folks over at Yahoo have spent quite a bit of time on the subject and in addition to their excellent User Interface Library one of their Senior Principals, Luke Wroblewski, is quite possibly the definitive expert on Web Application Form Design - he even has a book on the subject.

In short, the way in which developers and designers approach elements of a form has a direct impact on both it's usability and the percentage of completion. Label placement is a critical factor in quick scanning and completion of forms. It can also be used to slow down the user to ensure higher levels of accuracy. Items like font-size, length of labels, and the clarity of what actions the buttons on the page perform are all critical elements which can make huge differences in the success of your forms and the quality of their submitted content.

Theory and practice go head to head, however when the goal is to capture a large amount of information, while providing the impression for the user that their own investment is minimal. A common solution is to break the information up into a series of steps, which combine the data across requests for final submission. In the case of a blog or a CMS such as FarCry, which I also have built sites on previously, this limits the simplicity of the user interface. In addition, as features are continually added through subsequent release cycles of the application, it is the user who suffers.

It was with this in mind that, as we re-designed the admin interface for Version 6 of Blogfusion, we elected to throw out the existing, overly complex, administrative interface and start from scratch. The previous design featured a two column layout which placed more items "above the fold" but also added to the users impression that writing an entry is a complex process, suited only to those who are technically inclined. Here's an example of the interface from an existing Blogfusion 5 site (CFBlog.com):

A two-column interface is a very popular design when click-through and length of visit are the primary concern (i.e. blogs and commercial sites). The problem is, however, they tend to increase - rather than decrease - the complexity of the page. In addition, while most readers of this blog can parse and complete this form without any questions, for the non-technical user, the labels and form elements of this design pose far more questions than they solve.

What we elected instead was bring the entire admin interface into a single-column layout and then, in the case of the entry form use javascript to manipulate the non-essential elements. A user with javascript disabled gets the full meal deal in a structured and semantic order. The javascript-enabled browser sees this (we still have some touchup of the CSS and an inline preview function to add - using the users own CSS - but you get the general idea):

The fieldsets containing advanced entry options such as trackbacks ("Make Your Entry Public"), delayed publishing ("Advanced Publishing Options") and podcast files ("Media/Podcast Options") are contained in an accordian interface which is created and hidden during the "onload" event of the document with javascript. Other key elements are:

1. A large, graphical menu across the top which leads to task-specific templates for common entry actions. Most of these forms post data into the same table, but are formatted differently with data combined/manipulated on post to produce the HTML submitted. CSS selectors are also added at this time to allow for different formating for different types of content (e.g. class="photo-entry")
2. A single horizontal bar across the top which opens an accordian menu with descriptive links to other areas of the admin interface (i.e. - settings, design, plugins, etc.)

We left tagging and category selection out in the open, though it's always debatable whether these elements could be deemed "essential" (categories are hidden on edit - visibile on add). Since this version of Blogfusion converts all of the existing, and in so many cases incompatible, javascript libraries accumulated in previous version to use the JQuery javascript framework, it is now possible to perform advanced and sequential manipulations of the DOM with very few lines of code and much less debugging time - in this case the manipulation of the non-essential <fieldset> and <legend> elements to create an accordian interface.

While none of these design modifications are particularly groundbreaking or even new in practice, it's provided me with an opportunity to reconsider my own ideas of interface and long form layout and is already reaping benefits for other client projects on which I work.

As developers, we spend more than our fair share of time dealing with forms and post processing of the data. We owe it to our selves, from time to time, to explore new and better ways to build that same old mousetrap.