Form field patterns for email address

Look, a post about UX! This will be quick.

I’m surprised that I haven’t seen many design patterns on sign-in fields and how to make them as fast as possible. Yes, I’ve seen a few design examples, but no patterns that suggest innovation.

Lo and behold, hidden in the rough, the real estate app Trulia has the best email field I’ve ever seen! No comment on the rest of the app.

The second best has been the Belly iPad app (in-store, not consumer facing). They include an extra row below the iPad keyboard with buttons for common e-mail domains:

belly ipad keyboard

When I first saw that I thought it was incredibly clever. Ever since I’ve noticed the common domain suffixes on the iOS keyboard while holding down the [.com] key for certain inputs, I’ve been expecting Apple to integrate a similar email domain shortcut with the [@] key.

My takeaway

Why not use this? I can’t think of a down-side.

Since they’re using form field input masks (in a clever, auto-complete kind of way) it’s not destructive or inhibiting user input. If your domain is not appearing in the masked (grey) suggestion, then simply keep typing the full address.

If your email is:
Then you can stop at: Name@g

If your email is:
Then you’ll keep typing… (standard everywhere else).

UX is about making life easier for people, not necessarily solving problems. Yes, you make life easier by solving problems, but one solution will rarely fit all cases. Aim for the majority, and if you can design in such a way that the minority aren’t negatively impacted by the design, you get major bonus points.

+2 points to you, Trulia. You go Trulia!