Stephen Martin

 

iPhone Form Field Design Patterns

When designing iPhone apps, entry fields seem to be where I struggle the most. While I definitely agree that a mobile device is not the best place for data entry, there are cases where it's necessary to have a series of entry fields. So after you've spent time refining the form process and the number of entry fields in your iPhone app, what options do you have for layout and design?

Left-align, bold label and inputs

Boldlabel-input

This pattern can be seen in Mail's Account Info view. Touching inside of the entry area activates the keyboard.Probably the most common form pattern used.

Left-align labels and hinted inputs

Label-hintedinput
In Reeder for iPhone, this is the style used for username/password combinations for setting up service connections. In the case of Instapaper, you may or may not have a password. Rather than mark fields optional or display external help text, the instructions are there in the input area.

No label, hinted inputs with clear button

Nolable-hintedinput-clear
MailChimp for iPhone uses this for username and password fields when logging in to your account. This is really useful in 1-3 field forms. Past three fields, there's some recall involved for the user. "Why did I put my first name in that box? Is it my screen name, display name, first name or user name?" They would need to clear the field for the hint text to be visible again.

Right-align label with action button, active label

Rightaligned-action

In Apple's Contacts app, you have the ability to add/remove fields and specifiy custom labels. This app implements a right-aligned label with an entry field, hint text and clear button combined with an add or remove button which is shown to the left of the field area. They also use a vertical rule between the label and entry field. The label can be tapped so you can edit the label.

Multiple fields, single-entry view

Multifield-entry
OmniFocus for iPhone has a tappable row in their initial entry form which brings you to a Title and Note entry view. The Title field and Note field are stacked, leaving room for the keyboard. The navigation bar title doubles as the field labels in this case.

This is just a small sample of the many variations for iPhone entry forms. When starting to design forms for your own app be sure and take note of the number fields, context for each field and field variations.

Filed under: design forms iphone
11
To Posterous, Love Metalab