Inline Input Adder

Published
by
Janne Lammi
on October 10, 2008
in Design-Pattern
. Tags: , , , .

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

What

Minimize the amount of input fields by allowing the user to add more input fields if he needs them.

Example video

Adding and deleting tasks in Tickspot is easy.

Use when

  • 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.

Why

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

How it works

  • 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.

History

This pattern was created by Janne Lammi for the UI Pattern Factory. It is inspired by ‘Inline Additions’ from Luke Wroblewski’s book ‘Web Form Design: Filling in the Blanks’ .

Pattern Gallery

Show Your Pattern Examples Here!

Add your examples to this pattern by adding them to flickr.com group UIPatternFactory.com and tagging with this tag:


photos in UIPatternFactory.com tagged with inline-input-adderMore photos in Flickr group "UIPatternFactory.com" tagged with inline-input-adder

This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.

1 Response to “Inline Input Adder”

Feed for this Entry Trackback Address
  1. 1 Janne Lammi
    February 2, 2009 at 5:37 pm

    Some of you might have noticed that two comments disappeared from this pattern. The other comment was from Mike who asked for source code for implementing this pattern, and the other was my comment, which again here:

    "If you are ASP.NET developer, here is some source code and examples for you: Steve Sanderson’s blog: Editing a variable-length list of items in ASP.NET MVC

    This is the only example I found when I wrote this pattern. If any of you have more examples, feel free to post them here."

Leave a Reply