Posted by & filed under Forms.

The PatternFly team is working on the conceptual design for multi column forms. However, this concept is slightly different from other patterns the team has worked on.

We are exploring if there is ever a good use case to use multi-column forms, and if so what are they? 

Forms are a valuable tool because they offer a variety of layouts that can be used to organize your content for users to complete in a meaningful manner.

However, in the case of multi column forms, it’s mostly best practice to avoid their use. The main problem is that using multiple columns within forms could cause the potential for users to interpret the fields inconsistently.  Below are 5 examples of ways multi column forms could be interpreted.

multi-column-reading-paths

As you can see, multiple columns interrupt the vertical impulse to move down the form. Rather than forcing the users to visually reorient themselves, it’s best to keep them in a consistent  flow by sticking to a single column layout.

However, there are a couple exceptions that seem to be acceptable.

 

RECOMMENDATIONS

Example 1

The main exception for using multi-column forms that cause the least amount of confusion were for short fields as well as logically related fields.  The most common example are name and address fields (City, State, and Zip Code).

 

screen-shot-2016-09-23-at-1-12-49-pm


This type of content is standard and easy for users to follow. One suggestion for this format is to align the labels above the fields, rather than to the left. The thought was that this makes the grid stronger and thus, easier to map the fields visually.  Do you agree or disagree? This could be something we could explore for this pattern if we decide to move forward with it. In this case the labels are kept to the left to stay consistent with our general form design.

Another variation is instead of a standard two level format, use various columns. Keep in mind that this will works best for related short input fields.

screen-shot-2016-09-23-at-1-20-39-pm


Example 2

The second exception is when there are to different form choices.  User must choose to fill out one or the other.  In this case, when the forms fields are shown next to each other in a multi column format, there is little confusion as long as the distinction of the two form choices are clear.

 

screen-shot-2016-09-23-at-1-27-05-pm


There were several thoughts on this use case. First being that this would be considered two single column forms next to each other, rather than a multi column form. The second being that instead of this format, opt for a preselection for new or returning users.  This would then display a single form rather that two side by side.

 

NEXT STEPS

Because this is the beginning stages of the development of this pattern, we would love to hear your thoughts and input on this topic.  Are there any other scenarios that are acceptable?  Do you agree with the conclusion and the comments received thus far?

Please comment below with your thoughts as they could help shape this pattern as it moves forward along the design process.
Thanks!

4 Responses to “Yay or Nay to Multi Column Forms?”

  1. Thanks for putting this out for discussion! One question I have is why the interest in multi-column forms specifically? What needs or problem are you trying to address using a multi column layout? Is a single column layout deficient in some way?

    Regarding your examples, and questions, based on my lengthy response I guess I have some opinions on this topic. ;)
    Example 1) Imho, this example is hanging together only because it’s:
    A) Visually constrained within a narrow dialog window, with the columns being positioned pretty close to each other.
    B) Relying on content that is strongly associated (First and Last Name).
    So a concern I have is that this layout might quickly fall apart if the columns were spread out, and the content wasn’t strongly associated. It might not be the best candidate for a general purpose pattern. And there is a possible usability disadvantages of forcing the user to zigzag back and forth between fields, which might even be disorienting if you use Tabbing to navigate through fields. There’s some interesting material on tabbing and forms in: “Web Form Design”, Filling in the Blanks by Luke Wroblewski.
    * WRT Top aligned labels and the visual grid. I do think it could make that vertical block stronger, but if you want the user to traverse from left to right, I’m not sure that this helps any. Actually that strong horizontal rule in your mockup helps more with that.

    Example 2) I like this alternative better, but not sure it’s a two column form or a single column with some inline fields. This layout also requires some judgement when laying out the form content. The fields that are on the same row, should be related content. There’s an interesting recommendation to use the same label for both fields at: “Web form design guidelines: an eyetracking study.” (https://www.cxpartners.co.uk/our-thinking/web_forms_design_guidelines_an_eyetracking_study/)

    Example 3) Kinda seems like two single column forms sitting next to each other. If so, that works because the user would avoid the usability issues of the flow illustrated in the (1.) diagram. They would just fill out the fields from top to bottom and submit the form.

    Reply
  2. Allie Jacobs

    I like the second option of example 1. Fields that go together in my mind are aligned but it doesn’t force the whole form into two columns.

    Reply
  3. SJ great work with this research. Thanks for putting this together.
    I must agree with Liz, I don’t consider example 2 a two column form and in my opinion it is a better and much flexible solution than example 1.

    Reply
  4. issam derkaoui

    thanks for this article. Indeed it is always the same problem with the long forms, and the multi column presentation (in my opinion) the best solution, specially the first sheet of example 1.

    Reply

Leave a Reply

(will not be published)