Designing a Better iPhone Sign Up Screen
I install and try a lot of iPhone Apps. That means I have to Sign In or create a new account for a new service quite often. I create a unique password for each web service for extra security.
I’ve also implemented Sign Up screens many times. Here are a few things to considering when designing an iPhone Sign Up screen.
The Best Sign Up is no Sign Up
Does your services really need a Sign Up screen? A perfectly reasonable strategy is to identify a user by the device identifier and then allow the user to create a full account later. Two examples are Instapaper and Posterous.
[UIDevice currentDevice].uniqueIdentifier
Both Instapaper and Posterous use your email address on the web to automatically create an account. On the iPhone, Instapaper uses the device identifier.
Sign In and Sign Up
Leah Culver has a great post on why Sign In and Sign Up should be the same. Typing on the iPhone and managing passwords is more difficult than on a desktop machine. It is important to minimize the amount of user error by design.
How the UI flow will be designed has be specific to how your service works. One way to do this one screen is to use a Segmented Control and toggle between a Sign In and Sign Up state.
Embed a Table View
The best way to create a form in an iPhone App is to use a Table View. Here is a screenshot of the Skype iPhone App. It uses a table view to display the Skype Name and Password fields.
The key insight to the design of this page is that a table view does not have to take up the entire view. This is how you can setup your view controller to handle this:
@interface SignupViewController : UIViewController <UITableViewDelegate, UITableViewDataSource>
{
IBOutlet UITableView *tableView;
}
Instead of inheriting your view controller from UITableViewController, inherit from a regular UIViewController and then implement the UITableViewDelegate and UITableViewDataSource protocols.
Embed a Text Field into a Table Cell
The next task is to embed a text field into a table view cell. Most designs embed a descriptive label and a text field. This is not required. A text field has both a text and placeholder property. The placeholder property can be used to describe the field. This is especially important for the password field. I tend to use very long passwords that tend to trail off the edge of a text field.
Source Code
This article isn’t very useful without real code that implements this functionality. I’ve uploaded code for a TextEditCell and SignupViewController at GitHub.