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

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

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

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

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

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.

A "Flurry" of answers before updating your iPhone app

While working on the latest version of the MailChimp iPhone app, I decided to look into our Flurry analytics to get a baseline for where our users were in terms of devices and OS versions.

The results turned out to be very valuable.

They're still using 3.1.x

A good majority of our app users have not been upgraded their phone OS recently. There's a ton of reasons why you wouldn't upgrade, but if analytics from the web hold true for mobile, it's just not common for people to upgrade *anything* unless absolutely necessary or prompted by the OS. And don't count on OS upgrades, as some people will ignore those as well.

What about retina display?

A quick glance showed that the iPhone 4 is doing quite well in terms of model distribution across our active sessions. So, we took some time to update the interface and app icon.

If you're not in your mobile analytics everyday, at least take a few minutes before planning your next release to get a baseline.

Cocoa Camp Recap, Sample Files

As promised, a brief recap of my Cocoa Camp presentation.

Iterative iOS Design

Sketch

Start with sketching, doesn't have to be perfect. You're just dumping your ideas on paper. I use an App Sketchbook (a little biased on that) but any notebook, notepad or scratch paper will do the trick.

Tip: The name of the event you attended could come in handy at checkout if you want an App Sketchbook, just saying.

Wireframe

Pull together a simple wireframe of your ideas and refine the interface, using the HIG as a reference to plot out core controls.

OmniGraffle UX Template

IB/GUI Kit

Translate your wireframe (or sketch, if you skipped wireframing) into stock controls, using Interface Builder or one of the GUI Kits available for iPhone/iPad design.

Great list of GUI kits at Speckyboy Design Magazine.

Customize

Here's a sample customization of the Cocoa Camp app Schedule view that I didn't have time to run through live. It includes the grid layer from the GUI template I use.

The Cocoa Camp app is a great example, because it's already gone through the 2nd and 3rd phases mentioned here. It's built with stock controls and it's wide open for customization.

Hope you enjoyed the talk and have fun with your future designs.

Next Pint on App Store, Lessons in Private APIs

Mark and I submitted an app a few weeks ago but were rejected for using a private API, which I'll explain in a minute. But first:

Really excited to say that, after an interesting (and long) review process, Next Pint is now available on the app store.

It's a really personal project that we started working on for fun. When we were in San Francisco for the WWDC sampling some local beers, it occurred to us that we should be keeping track of these craft beers we were drinking, especially the ones we liked. We had already started working on a beer app for a specific club, but felt like the app needed a broader audience. So, Next Pint's focus changed and we went after a simple task: Find and keep track of beers and Tweet the beers you're drinking.

Private APIs

The first initial drafts were pretty simple, but we eventually came up with a nice theme and carried it throughout the app. According to Apple, we carried it out a little too far. In order to theme the search bar, we used a private API in attempt to tighten up the user experience. Unfortunately it backfired and Next Pint was rejected.

We fixed the design and jumped back into the review process.

We feel like the search bar doesn't fold into the design as well and that this is a compromise. After hearing so much about creating rich user experiences at the WWDC, this seems really hypocritical of Apple. Our guess is that they would want us to roll our own search bar rather than customizing the stock control.

With that said, we're completely pleased with our first release and hope Apple will open UISearchBar a bit more in the future.

Experimenting with UI Patterns, Sync, Disclosures

A few months ago, I had the pleasure of working with @cricketgeek on a Phone app he was building for ShootQ. It's a pretty deep app and pulls in tons of data from the ShootQ web app.

One of the challenges we faced early on had to do with showing "Shoots" that you had synced vs. 'Shoots" that you still had to sync with the web server. As not to go into detail about what a shoot is, I'll refer to it as a project, since it has a subset of items and tasks.

Projects are listed out with disclosure indicators, allowing you to drill down into more specific details about the project. In order to do this, the app needs to sync the project with server and gather the latest data.

Rather than show another date (the creation date is already part of the project), we opted for changing the disclosure icon to a sync icon if the project had not been synced.

It's just a small indicator of what's to come when you tap a specific project. Sync or view.

This becomes important if you lose your data connection. You'll know which projects don't have the most up-to-date information.