Form sequencing

Whenever the subject of information flow in forms was raised I discovered conflicting evidence for vertical or horizontal flows, ordering and grouping. In trying to establish the definitive answer I carried out three different user tests: a sort test where users were asked to arrange data into a two-column structure, a flow direction test where users were asked to express a preference for either horizontal or vertical flows, and a grouping test where subjects were asked to express a preference for either horizontal or vertical groupings.

In this instance I was restricted to using labels to the left of fields rather than above.

Sort Test

19 randomly selected test subjects, all with a reasonably advanced level of computer literacy and experience, were presented with the form below and asked to arrange the fields into the boxes.

The data they were asked to sort came with distinct ‘real-world’ layouts: horizontally biased name fields (“First name” and “Surname”) and vertically biased address fields (“Street address”, “Town/City” and “Postcode”

Form_Sequencing-Sort_test

This was designed to test whether subjects preferred to add fields in row pairs or in column blocks.

15 (78.9%) of the respondents returned vertically ordered layouts while 4 (21.1%) chose to interpret the data horizontally.

Form_Sequencing-Sort_Results

This test also yielded some other data: 11 respondents (8 who chose vertical and 3 who chose horizontal) displayed distinct chunking methods when laying out the address section, treating it as a discrete block separate from the flow of the rest of the form. I also noted that a few respondents told us that they felt the left column was ‘primary’ and the right ‘secondary’.

Flow Direction Preference Test

For this test 20 subjects were asked to choose between the vertical flow (column-based) or horizontal flow (row-based) layouts shown below.

Form Flow - Vertical
Variant A – Vertical Flow
Form Flow - Horizontal
Variant B – Horizontal Flow

12 (60%) of the respondents expressed a preference for the vertical flow (variant A) while only 8 (40%) expressed a preference for the horizontal flow (variant B).

Form_Sequencing-Flow_Results

It should, however be noted that, due to the correlation between sample size and choice differential, this is not necessarily statistically significant and could still be down to random choice.

Grouping Preference Test

In this test subjects were asked to choose between the vertically grouped (column-based) and horizontally grouped (row-based) layouts below.

V-Group
Variant A – Vertical Grouping
H-Group
Variant B – Horizontal Grouping

26 (57.8%) expressed a preference for the vertical grouping while 19 (42.2%) expressed a preference for the horizontal grouping.

Form_Sequencing-Grouping_Results

These results show a preference for the vertical grouping with a 90.76% confidence rating.

It may also be significant that respondents who chose the vertical grouping did so more quickly that respondents who chose the horizontal grouping (averaging 20 seconds versus 29 seconds) – suggesting that the vertical grouping may elicit a more instinctive reaction although this cannot be fully confirmed from these results.

Conclusion

These results clearly show a general preference for grouping content into vertical blocks within a two-column layout

Recommendations

  • When using a two-column layout, forms should aim to take up as little vertical space as possible. 
  • However, forms should also follow vertical ordering wherever possible.
  • Where necessary, forms should be divided into discrete blocks or groups of fields dependant on context.
  • Blocks or groups may also be divided by placing each group in a separate column.
  • Blocks or groups of fields should be arranged dependant on the number of fields required in each block as follows:
    • 2 fieldsFormFlow-2Fields-01
    • 3 fieldsFormFlow-3Fields-01
    • 5 or more fieldsFormFlow-4pFields-01
    • 2 groups of fieldsFormFlow-2groups-01

When these ideas are put together in a form they might look like this:

FormFlow-complex-01

Advertisement

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s