Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Design Advice for Layout and Validation for Lengthy Forms

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #242918
    clemsontiger
    Participant

    This post revolves more around form and form validation articles in general. I can never find any useful articles regarding form layout and form validation for more lengthy and complex forms — articles always seem to be about short forms like sign up, sign in, or shopping cart checkouts (and other forms that lend their selves to step wizard approaches).

    For instance, I’m building a form for a “trip request” for a bus, and involves upwards of 20 fields the user needs to fill out, including such things as (origin, destination, depart date/time, return date/time, one way/ round trip, # riders, # cart seats, # wheel chair slots, category, purpose, overnight, comments, etc.) There’s no way around this, as these are all values the user is the source for.

    I’ve taken into consideration tips and advice from articles by Brad Frost and Luke Wroblewski, from Nielsen Norman Group in addition to css-tricks articles.

    I’ve yet to come up with an approach to its layout that I’m fully satisfied with — I’ve ruled out multi-column (sticking with single column top down with vertical labels/inputs). I’m not fond of a step/wizard approach as it hides previously or next fields to be filled out to various degrees (would prefer the user know what is expected of them; I’m toying with putting it in a scrollable container vs just leaving it all fully on the page — either of these approaches requires some scrolling (which leaves some fields out of sight thus neither showing the fields all at once (but realize this probably won’t be possible due to the form’s length).

    For validation, I’m thinking of a cumulative feedback message that details any errors as they go (along with highlighting the erroneous fields) that is always visible, providing anchor links that go directly to those erring fields.

    I’m open to any thoughts and/or suggestions or references to any articles that discuss such lengthier forms and best practices for them.

    one additional thing to keep in mind is that this form is not a “one-off” thing users will fill out, its something they’ll fill out often (both by requestors and by those power users who own the business process for this application).

    here’s a screenshot of what I’m leaning towards currently: http://paulj.dropmark.com/71234/7314262 (note: work in progress, so don’t bash me on how I have the secondary actions available when they’re not needed for a new trip, and stuff like that)

    Thanks.

    #242920
    rkieru
    Participant

    Have you considered a mixed approach? You argument for avoiding a Step-by-Step form is one I agree with, but given the length of the form that approach seems ideal.

    What if you provided a sidebar that displayed pertinent details that have already been entered, with a link to edit that information if required (that would simply take the user back to the relevant step).

    That way after each step the user has a condensed itinerary of information already entered.

    #242921
    clemsontiger
    Participant

    @rkieru,

    Great advice. I like the sound of that. I’ll have to mock it up and see if I can group the fields in a way that provides a clear and quick route through the steps… in addition to showing an in progress compact view of the itinerary as they are filling it out. Might very well be the best option.

    Do you happen to know of a good example of this off the top of your head you could link to? I feel like I’ve even seen this recently, maybe it was on dribbble…can’t quite recall..

    #242923
    rkieru
    Participant

    http://codepen.io/rkieru/pen/jrrydM

    I put that together really quick using Bootstrap as a framework, it’s sort of what I was thinking when I suggested a mechanism to inform the user of existent information.

    Basically up top you have a step/progress indicator. Below that you have your current form, and to the right you have your progress or some auto-populating info.

    Given some further fluffing up you could turn that into a nice ajax form that loads the next form in the same area and just sort of auto-populates that sidebar as you go.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘Design’ is closed to new topics and replies.