Accordions and tabs in forms

Duncan Stephen
Monday 22 December 2014

Form usability: The pitfalls of inline accordion and tab designs

Accordions and tabs are common user interface elements, and we are making increasing use of accordions in the new pattern library.

Research from the Baymard Institute warns against leaning too heavily on such elements in the design of forms. Forms are notoriously difficult to get right, and some well-meaning decisions can sometimes confuse form users even more.

However, tab-style and inline accordion form layouts can muddy this relationship, making it unclear if the fields in each “sheet” are mutually exclusive or if switching between them simply toggles their visibility but not the actual form. This can make users uncertain as to which fields in the form will actually be submitted, which is highly problematic as this leads to a sense of unpredictability and the fear of potential data loss (obviously very undesirable sensations to invoke in a user filling out your forms, e.g. during the checkout process).

Related topics