In search of: form design pattern

2 Jul 2009 - 3:57pm
5 years ago
6 replies
1505 reads
DrWex
2006

I need to come up with a good pattern for designing a form. It has
the following characteristics:

- There are about 10 "sections" (related groups of inputs)
- The sections are of varied size, ranging from one dropdown
selection, to a multi-column table of several rows that needs to be
filled out

The total of all such sections would make the whole form bulky if I
tried to present it on one screen. I'm debating using different
chunking patterns such as an accordian or tabbed form and wondered if
anyone had an example of a favorite pattern they would recommend.

TiA,
--Alan

Comments

2 Jul 2009 - 8:13pm
Alan James Salmoni
2008

Alan - I'm sure you might have encountered this already, but LukeW's
book on forms is worth a read, particularly if you are going to be
designing more in future.

(apologies for this), but I had an idea for handling forms that is a
bit different. I did promise to put a demo up somewhere but the
pressure of work had to take precedence. I'll try again tonight and
post a link so you can all have a look and offer comments.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=43336

2 Jul 2009 - 10:17pm
Grant Fritts
2009

I've used collapsible panels when it was imperative to have all inputs on a single page. Those sections of inputs that were non-required or less frequently used are collapsed with only the section title displaying and the expansion control. The common or most used input sections are expanded by default.

However, if it is not absolutely a requirement to keep on one page, separate into logically organized, smaller pages and use a multi-step, bread-crumb style indicators.

I've been through some usability testing ton this topic (one "mega" page vs. multiple smaller pages) as there was client fear that too many pages in a web app would decrease conversion, but the consensus was that "stepping" it was preferred by the majority of users.

One of the key reasons had to do with the input validation process. If the form was very long and required significant scrolling, the propensity for missed inputs (errors) increased and if the ability for the user to locate the offending field was impaired. Also, with long forms, "jumping" them to the top of the screen or offending field was a jarring experience (took control away from the user) when page auto-scrolled.

2 Jul 2009 - 5:24pm
Sarah Weise
2009

You may be able to put all the sections on one page, with sections
collapsed by default -- or just the first one open. Click to open
each section and answer the questions within. Make sure each section
has a clear, descriptive title though!

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=43336

3 Jul 2009 - 1:25am
Yohan Creemers
2008

Alan,

I would organize the form into tabs. It's a conventional way to
group related input controls. I don't think the varying size causes
problems for this design pattern. The main advantage of tabs is that
all sections are easily accessible.

http://www.ylab.nl/lab/tabs/
http://developer.yahoo.com/ypatterns/pattern.php?pattern=moduletabs
http://www.welie.com/patterns/showPattern.php?patternID=tabbing

- Yohan

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=43336

6 Jul 2009 - 9:05am
ambroselittle
2008

On Thu, Jul 2, 2009 at 4:57 PM, Alan Wexelblat <awexelblat at gmail.com> wrote:

> I'm debating using different
> chunking patterns such as an accordian or tabbed form and wondered if
> anyone had an example of a favorite pattern they would recommend.
>

Hi Alan,

Quince has a number of patterns related to layout including, for example,
Responsive Disclosure, Responsive Enabling, Titled Sections, and Tab Dialogs
that may pertain to your context. This link should bring up a search for
those and others related to page layout:

http://quince.infragistics.com/#/Search$tag+=Page+Layout

HTH.

-ambrose

6 Jul 2009 - 10:37am
Christian Crumlish
2006

As for accordions, we'll be publishing a beta Accordion pattern in the
Yahoo! library fairly soon. Sorry to be a tease about it, but we have
blogged about it[1] and even run a survey (I'll be reporting on results from
that this week as I revise the draft of the pattern).
--xian

[1]
http://www.yuiblog.com/blog/2009/03/23/survey-when-is-an-accordion-not-an-accordion/

On Mon, Jul 6, 2009 at 7:05 AM, J. Ambrose Little
<ambrose at aspalliance.com>wrote:

> On Thu, Jul 2, 2009 at 4:57 PM, Alan Wexelblat <awexelblat at gmail.com>
> wrote:
>
> > I'm debating using different
> > chunking patterns such as an accordian or tabbed form and wondered if
> > anyone had an example of a favorite pattern they would recommend.
>

--
Christian Crumlish
I'm writing a book so please forgive any lag
http://designingsocialinterfaces.com

Syndicate content Get the feed