New-Item Row

Example of the New-Item Row UX pattern.

Problem

People often need to add items to lists and want to do it as effortlessly as possible.

Solution

Provide a row at the top or bottom of the list that is dedicated to adding new items.

Context

You are showing items in a list or tabular format where there is roughly one row per item.
People need to quickly add new rows.
People need the context of other rows to help enter new ones.
You have minimal validation needs that can be done on the fly.

Rationale

This is a specific form of Edit-in-Place, so the rationale from that pattern applies here, which is chiefly that it is fast, efficient, and maintains context.

Implementation

Add a row to the bottom or top of your list. It can be fixed, or it can move down as items are added. If the list will be long, you should either fix it in an always visible spot at the bottom or, better yet, fix it to the top so it is easy to find.

You want to add some affordance to indicate what the row is for. You can have an Input Prompt like “Add new thing here…” that disappears when they click to edit; you can use a convention like the plus (+) sign at the left side, or you can do some combination of those to clearly indicate what the row is for.

While editing, it can be helpful to show contextual affordances to help people enter the correct data, such as masks, drop-downs, auto-completion pick lists, etc., and try to do validation as quickly and unobtrusively as possible. If you have complex validation, this pattern may not be the best option.

New item rows are especially useful for keyboard navigation and heavy data entry, so be sure that people can easily and intuitively navigate through the fields in the row to enter the needed information, preferably without every needing to grab the mouse, touch the screen, etc.

Where possible, try using good default values, and if you don’t provide some kind of “commit” affordance (such as an add button), then add the new item once people leave the row that they are editing.

Help Me Get There

Infragistics has some tools that can jumpstart your efforts to implement this pattern. Broken down by technology, they are as follows.

ASP.NET

New-Item Row pattern is implemented in all of the ASP.NET Grids: WebDataGrid, WebGrid. Check out the samples browser to see it in action.

Silverlight

You can use the AddNewRow feature of the NetAdvantage for Silverlight xamWebGrid control for this.

Windows Forms

You can use the NetAdvantage for Windows Forms WinGrid control’s Add New Row feature to implement this pattern. If you download the NetAdvantage for Win Client bundle, you can find a sample in the WinForms sample browser called WinGrid Samples à Fixed Add Row Feature to see it in action.

WPF

You can implement this pattern using the NetAdvantage for WPF XamDataGrid’s Add New Row Feature. If you download the NetAdvantage for Win Client bundle, you can find a sample in the xamFeatureBrowser called Add Record to see it in action.

Examples

The attendee list in Microsoft Outlook 2007 lets people just click in the next row and type a name to add a new attendee to meeting requests.

http://quince.infragistics.com/10w8

Example of the New-Item Row UX Pattern

Outlook 2007 Task Lists can have a lot of items; the add new item row is at the top.

http://quince.infragistics.com/1164

Example of the New-Item Row UX Pattern

The Cozi calendar lets you enter new appointments at the bottom. During usability testing, they found that people didn’t know what to do after typing the value, so they added an “Enter” button after they start typing to make it clear that pressing Enter or clicking the button will add the entry to the list.

http://quince.infragistics.com/110t

Example of the New-Item Row UX Pattern