Inline Input Adder

Also known as: Inline Additions, Input Adder, Input Additions, Inline Item Adder, Item Adder, Adding More Inputs

Tags: actions, forms

Inline Input Adder minimizes the amount of input fields by allowing the user to add more fields when needed. As the additional input fields are not shown until requested by the user, the user interface keeps simple for the users who don’t need additional input fields.
In the example video, user can add more more mail attachments one at a time by clicking an “Attach another file” link. The new input fields are exposed instantly below other fields.

Gmail: Attaching a file to an email is not a primary use case, and thus input fields for that are hidden by default. If the user wants to attach a file, input fields for that are only one click away.

What problem does the pattern solve?

  • The number of input fields needed varies depending on the user.
  • Only few input fields are added at a time.
    • Adding new items to the page always makes the page “jump” as existing content gets pushed either horizontally or vertically. If too many items are added at a time, the user might lose focus and get confused about with what the new input fields are being associated with. Use Overlay when there are more input fields to be added at a time.

When to use it?

  • The number of input fields needed varies depending on the user.
  • Only few input fields are added at a time.
    • Adding new items to the page always makes the page “jump” as existing content gets pushed either horizontally or vertically. If too many items are added at a time, the user might lose focus and get confused about with what the new input fields are being associated with. Use Overlay when there are more input fields to be added at a time.

How to use it?

  • Show only the minimum number of input fields needed to complete the form.
  • Show a link or a button for adding inputs at the top or/and the bottom of each input field group where additional inputs are available.
  • Link/button texts should start with “Add”-word.
  • Add new form fields below (or in some cases above or to the right) existing inputs on the fly – don’t refresh the whole page.
  • Allow user to delete additional inputs.
  • Consider using transition effects to help the user to understand what happened.

Why to use it?

Minimizing the number of input fields keeps the form more simple and clear.

Sources

The pattern is inspired by ‘Inline Additions’ from Luke Wroblewski’s book ‘Web Form Design: Filling in the Blanks’ .

Useful linksUseful links icon

Example images (2 examples)

Comments

  • There are no comments posted yet. Be the first one!