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.
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”
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.
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.
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).
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.
26 (57.8%) expressed a preference for the vertical grouping while 19 (42.2%) expressed a preference for the horizontal grouping.
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.
These results clearly show a general preference for grouping content into vertical blocks within a two-column layout
- 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:
When these ideas are put together in a form they might look like this: